مشکل با فوتر [بایگانی]

vahidth

چهارشنبه 12 تیر 1392, 22:24 عصر

سلام
من یه قالب برای وردپرس میسازم ولی مشکل دارم
1- هر کاری میکنم فوتر به اخر صفحه نمی چسبه تو کد هام از div استفاده کرم ولی برای فوتر نمیتونم از div استفاده کنم چون کادر فوتر رو میاره بالای سایت
برای حلش از جدول استفاده کردم تا حدودی مشکلم حل شد اما چطوری میتونم از div برای فوتر هم استفاده کنم

کد html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>آموزش یک</title>

<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="main">
<div id="header"><img src="images/images/images/images/images/images/images/images/images/header_01_01.png" width="970" height="98"> </div>
<div class="menu"> منوی سایت </div>
<div class="akbar"> اخبار سایت </div>
<div class="tabligat"> تبلیغات </div>
<div class="matn1"> اخبار اسلایدی </div>
<div class="matn2">اسلاید بار </div>
<div id="sidbar-left"> سایدبارچپ </div>
<div id="contine">متن اصلی </div>
<div id="sidbar-right"> سایدبار راست</div>
<table id="shomare">
<td> شماره صفحات </td>
</table>

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

</body>

</html>

کد css

@charset "utf-8";
/* CSS Document */

body{

background-image:url(images/images/images/images/images/images/images/Untitled-1_02_01_01_01_02.png);

}

#main{
width:970px;
height:970px;
background-color:#FFF;
margin:auto;
border-radius:4px;
-moz-border-radius:4px;
margin-top:50px;

}

#header{
padding-top:5px;

}

.menu{
width:953px;
height:30px;
border:solid 1px #e7e5e5;
-moz-border-radius:4px;
margin-bottom:5px;
margin-left:10px;

}
.akbar{
width:600px;
height:30px;
border:solid 1px #e7e5e5;
-moz-border-radius:4px;
margin-bottom:5px;
margin-left:363px;

}

.tabligat{
width:955;
height:60px;
border:solid 1px #e7e5e5;
-moz-border-radius:4px;
margin-bottom:5px;
margin-left:10px;
margin-right:5px;

}

.matn1{
width:450px;
height:200px;
background-color:#f6f6f6;
float:right;
margin-right:5px;
border:solid 1px #e7e5e5;
border-radius:3px;
-moz-border-radius:3px;
margin-bottom:5px;

}

.matn2{
width:495px;
height:200px;
float:right;
background-color:#f6f6f6;
border:solid 1px #e7e5e5;
border-radius:3px;
-moz-border-radius:3px;
margin-right:5px;
margin-bottom:5px;

}
#sidbar-left{
width:200px;
height:200px;
-moz-border-radius:3px;
margin-bottom:5px;
float:right;
border:solid 1px #e7e5e5;
margin-right:5px;

}
#contine{
width:485px;
height:200px;
-moz-border-radius:3px;
margin-bottom:5px;
float:right;
border:solid 1px #e7e5e5;
margin-right:5px;
}

#sidbar-right{
width:253px;
height:200px;
-moz-border-radius:3px;
margin-bottom:5px;
float:right;
border:solid 1px #e7e5e5;
margin-right:5px;
margin-left:5px;
}

#shomare{
width:955px;
height:50px;
border:solid 1px #e7e5e5;
margin-left:10px;
margin-right:10px;

}

#footer{
width:955px;
height:100px;
border:solid 1px #e7e5e5;
margin-left:10px;
margin-right:10px;
margin-top:15px;

}

اینم یه عکس از فوتر که سایت وسط سایت قرار میگیره و به صفحه پایین نمیچسبه
http://www.uplooder.net/img/image/84/741f0ce380651380f78b1f7340764922/footer.jpg

mehbod.rayaneh

چهارشنبه 12 تیر 1392, 22:41 عصر

سلام
از #main استایل height:970px; را حذف کنید!
بعدش به استایل فوتر و شماره clear:both را اضافه کنید!
اینطوری :

#shomare{
width:955px;
height:50px;
border:solid 1px #e7e5e5;
margin-left:10px;
margin-right:10px;
clear:both;
}

#footer{
width:955px;
height:100px;
border:solid 1px #e7e5e5;
margin-left:10px;
margin-right:10px;
margin-top:15px;
clear:both;
}

و در آخر هم کدهای html را به این شکل اصلاح کنید :

<div id="main">
<div id="header"><img src="images/images/images/images/images/images/images/images/images/header_01_01.png" width="970" height="98"> </div>
<div class="menu"> منوی سایت </div>
<div class="akbar"> اخبار سایت </div>
<div class="tabligat"> تبلیغات </div>
<div class="matn1"> اخبار اسلایدی </div>
<div class="matn2">اسلاید بار </div>
<div id="sidbar-left"> سایدبارچپ </div>
<div id="contine">متن اصلی </div>
<div id="sidbar-right"> سایدبار راست</div>
<div id="shomare">
شماره صفحات
</div>

<div id="footer">فوتر</div>
</div>

الان مشکل حل شد! ولی 1 نکته ای ک هست اینه ک این باید تمام margin-right , margin-left ها را حذف کنید و برای وسط قرار دادن دیو ها از margin:auto استفاده کنید تا در همه اندازه صفحات قسمت اصلی سایت در وسط قرار بگیره.
موفق باشید.

vahidth

چهارشنبه 12 تیر 1392, 23:21 عصر

مشکل تا حدی حل شد
ولی فوتر بهم میریزه یعنی border معلوم نیست
و چرا باید margin: left و margin : right رو حذف کنم بجاش چی بزارم چون من میخوام از راست و چپ چند پیکسل فاصله داشته باشه
یکم درباره کد clear: both توضیح بدین که کارش چیه
وقتی همه margin ها رو حذف میکنم و بجاش margin:auto میزارم border بعض از کادرهای صفحه بعضی هاش نشون داده نمیشن که برای درست کردنش باید به نظرم سایزشون رو تغییر بدم

mehbod.rayaneh

پنج شنبه 13 تیر 1392, 01:56 صبح

برا من معلومه ها!!! با چ مرورگری؟!
اونو من اشتباه کردم! فک کردم کلا برا تنظیم کردن دیوها در وسط از margin استفاده کردید!
تو خصوصی توضیح دادم! :لبخند:
border:auto???? اصن من همچین چیزی گفتم؟! :متفکر::لبخند: