سوال: طراحی این صفحه به چه صورت است [بایگانی]

water_lily_2012

دوشنبه 24 تیر 1392, 00:09 صبح

سلام

در این زمینه تازه کارم. خواهشا یک نفر این را طراحی کنه تا تنظیمات صفحه را یاد بگیرم.
رنگ ها برام مهم نیست. فقط برای اینکه متوجه بشید چی می خواهم هست.

height دو تا قسمت ابی ثابت هستند و فقط در width با اندازه صفحه تنظیم بشه.
width دو قسمت قرمز ثابت و height با اندازه صفحه تنظیم بشه.
قسمت سفید در طول و عرض با اندازه صفحه تغییر کنه ولی مکان اشیا درونی ان با سمت چپ و بالا تنظیم بشه و ثابت بمونه.

http://barnamenevis.org/attachment.php?attachmentid=107230&d=1373832263 (http://barnamenevis.org/attachment.php?attachmentid=107230&d=1373832263)

تشکر

IamOverlord

دوشنبه 24 تیر 1392, 00:20 صبح

سلام دوست عزیز!

اینو ببینید:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Documen</title>
<style>
* {
margin:0;
}

#header {
height:70px;
background-color:#3CC;
}

#columns-container {
overflow:auto;
width:100%;
min-width:800px;
}

#sidebar-left {
width:200px;
float:left;
background-color:#F06;
min-height:600px;
}

#middlediv {
width: -webkit-calc(100% - 200px - 200px);
width: -moz-calc(100% - 200px - 200px);
width: calc(100% - 200px - 200px);
float:left;
background-color:#DFF;
min-height:600px;
}

#sidebar-right {
width:200px;
float:left;
background-color:#F06;
min-height:600px;
}

#footer {

width:100%;
height:70px;
background-color:#3CC;
}

#ThoseFiveDivs {
width:150px;
background-color:#6F9;
padding:5px;
margin-top:30px;
margin-left:30px;
}

#TFD-First {
width:140px;
height:70px;
background-color:#0C0;
margin:5px;
}

#TFD-Fifth {
width:140px;
height:70px;
background-color:#0C0;
margin:5px;
}

#TFD-SecondThirdFourth {
width:140px;
overflow:auto;
margin:5px;
}

#TFD-Second {
width:60px;
height:120px;
background-color:#0C0;
margin:0px;
float:left;
}

#TFD-ThirdFourth {
width:60px;
height:120px;
float:left;
}

#TFD-Third {
width:60px;
height:55px;
background-color:#0C0;
margin-left:20px;
}

#TFD-Fourth {
width:60px;
height:55px;
background-color:#0C0;
margin-left:20px;
margin-top:10px;
}

</style>
</head>

<body>
<div id="header">
header!
</div>
<div id="columns-container">
<div id="sidebar-left">
right sidebar!
</div>
<div id="middlediv">

<div id="ThoseFiveDivs">
<div id="TFD-First">
140*70!
</div>

<div id="TFD-SecondThirdFourth">
<div id="TFD-Second">
60*120!
</div>
<div id="TFD-ThirdFourth">
<div id="TFD-Third">
60*55!
</div>
<div id="TFD-Fourth">
60*55!
</div>
</div>
</div>

<div id="TFD-Fifth">
140*70!
</div>
</div>

</div>
<div id="sidebar-right">
left sidebar!
</div>
</div>
<div id="footer">
footer!
</div>
</body>
</html>

ateryad

دوشنبه 24 تیر 1392, 00:28 صبح

دوست عزیز
اول کمی به HTML,CSS آشنا شوید.

کد HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<link rel="stylesheet" href="main.css" style="text/css" />
</head>
<body>
<div id="header"></div>
<div id="maincontent"></div>
<div id="footer"></div>
</body>
</html>

کد css

@charset "utf-8";

@font-face{
font-family: 'BYekan';
src: url('../fonts/BYekan.eot?#') format('eot'), /* IE6-8 */
url('../fonts/BYekan.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('../fonts/BYekan.ttf') format('truetype'); /* Saf3-5, Chrome4+, FF3.5, Opera 10+ */
}

body{
padding: 0;
margin: 0;
border: 0;
font-family: Arial, Helvetica, sans-serif; /* RTL */
font-size: 13px; /* RTL */
text-align: right; /* RTL */
direction: rtl; /* RTL */
background-color: #f00;
}

#header,#footer{
width:100%;
height:70px;
background:#2fa3f4;
}

#maincontent{
width:960px;
height:700px;
background:#fff;
margin:0 auto;
}

#footer{
width:100%;
height:70px;
background:#2fa3f4;
position: fixed;
bottom:0px;
}

mohamad_torabi

دوشنبه 24 تیر 1392, 01:26 صبح

سلام
htmlو css رو یاد بگیرید ساخت این براتون مثل اب خوردنه

water_lily_2012

دوشنبه 24 تیر 1392, 23:25 عصر

سلام
تشکر از دوستان.
اولی به کارم امد البته با یه کم تغییرات و عالی بود
دومی چند تا چیز یادم داد ولی اونی که میخواستم نبود.
بازم از هر دو دوست عزیز که وقت گذاشتید واقعا سپاسگذارم.