تراز قالب با div
#1
Note 
سلام
من یه قالب ساده طراحی کردم و لی تو تراز کردن قسمت main,sidebarبا سایر قسمت ها مشکل داشتم میخواستم ببینم که چه جوری میتونم همه رو با هم تراز کنم؟

[HTML]
<style type="text/css">

body
{
background-color:#999;
}

#header
{
width:900px;
height:120px;
background-color:#900;
margin:0 auto;

}

#navigation
{

width:900px;
height:150px;
background-color:#69F;
margin:0 auto;
}

#maincontent
{
width:500px;
height:250px;
background-color:#FC0;
float:left;
margin-left:0 auto;
}

#sidebar
{
width:400px;
height:250px;
background-color:#FCC;
float:left;
margin-right:0 auto;
}

#footer
{
background-color:#FFF;
width:900px;
height:150px;
margin:0 auto;
}

.clear
{
clear:both;
}

</style>


</head>

<body>


<div id="header">header</div>
<div id="navigation">navigation</div>
<div id="maincontent">maincontent</div>
<div id="sidebar">sidebar</div>
<div class="clear"></div>
<div id="footer">footer</div>
[/HTML]

آخرین ویرایش: 17-08-2014 ساعت 19:53، توسط Daniel
پاسخ
#2
Note 
برای اینکه این دو تا div رو تراز کنید میتونید یه div مادر برای این دو تا تعریف کنید
البته float بلاک sidebar رو باید right میکردید.

[HTML]
<style type="text/css">

body
{
background-color:#999;
}

#header
{
width:900px;
height:120px;
background-color:#900;
margin:0 auto;

}

#navigation
{

width:900px;
height:150px;
background-color:#69F;
margin:0 auto;
}

div#content {
margin: 0 auto;
width: 900px;
}

#maincontent
{
width:500px;
height:250px;
background-color:#FC0;
float:left;
}

#sidebar
{
width:400px;
height:250px;
background-color:#FCC;
float:left;
}

#footer
{
background-color:#FFF;
width:900px;
height:150px;
margin:0 auto;
}

.clear
{
clear:both;
}

</style>


</head>

<body>

<div id="header">header</div>

<div id="navigation">navigation</div>

<div id="content">
<div id="maincontent">maincontent</div>
<div id="sidebar">sidebar</div>
</div>

<div class="clear"></div>
<div id="footer">footer</div>
[/HTML]

پاسخ
#3
Note 
درود برشما خیلی سپاس گذارم
شرمنده مشکل این کد کجاست که صفت های cssروی دستورات(footer.copyright)htmlاجرا نمیشه؟

<style type="text/css">

body
{
background-color:#69C;
direction:ltr;
}

#header
{
background-color:#6F9;
width:1170px;
height:120px;
margin:0 auto;
}

#navigation
{
background-color:#63C;
width:1170px;
height:150px;
margin:0 auto;
}

#maincontent
{
margin:0 auto;
width:1170px;
}


#sidebarleft
{

background-color:#FFF;
width:292px;
height:250px;
float:left;
}
#maincontent1
{
background-color:#C99;
width:585px;
height:250px;
float:left;
}


#sidebarright
{

background-color:#FFF;
width:292px;
height:250px;
float:right;
}

#footer
{
background-color:#FFF;
width:1170px;
height:200px;
margin:0 auto;
}

#copyright
{
background-color:#999;
width:1170px;
height:250px;
margin:0 auto;
}


</style>
</head>

<body>


<div id="header">header</div>
<div id="navigation">navigation</div>
<div id="maincontent">


<div id="sidebarleft">sidebarleft</div>
<div id="maincontent1">maincontent</div>

<div id="sidebarright">sidebarright</div>

</div>


<div id="footer">footer</div>

<div id="copyright">copy</div>

پاسخ
#4
Note 
اگر دوباره کد ها رو به این صورت قرار بدید اخطار دریافت میکنید
کافیه نوع کد رو از ویرایشگر انتخاب کنید:

[تصویر:  20140701-924-place_php_code.gif]

مردم دنیا 10 دسته هستند: کسانی که باینری میفهمند و کسانی که باینری نمیفهمند !
پاسخ
#5
Note 
[CSS]
clear: both;
[/CSS]
رو به استایل فوتر اضافه کنید

مردم دنیا 10 دسته هستند: کسانی که باینری میفهمند و کسانی که باینری نمیفهمند !
پاسخ
#6
Note 
بی نهایت سپاس گذارم کمک خیلی بزرگی بهم کردین:khodeshe:

پاسخ
#7
Note 
چطور میتونم برای <body> گردینت بذارم(مشکل کار من اینجاست که گردینت من بصورت تک رنگ به زمینم اعمال میشه)؟

پاسخ
#8
Note 
سلام
قوانین رو مطالعه کنید
برای این سوال باید تاپیک جداگانه ایجاد کنید.

مردم دنیا 10 دسته هستند: کسانی که باینری میفهمند و کسانی که باینری نمیفهمند !
پاسخ
ایجاد موضوع جدید   پاسخ به موضوع  

کاربرانِ درحال بازدید از این موضوع:   1 مهمان