مشکل در تنظیم footer سایت

[zahrashoja]

یه قالب سه ستونه دارم حالا اون ستون وسطیه هر چی margin هم میکنم صاف می چسبه به footer
یعنی footer با بلندی کوتاهی دو تا ستون دو طرف مشکل نداره ولی وقتی ارتفاع وسطی بیشتر از کناری ها میشه ستون وسط و footer میچسبن به هم

[hamidre13]

دوست عزيز كد رو بزار
اگر از فلوت استفاده كردي دقت كن كلير كني

[zahrashoja]

میشه بگین مفهوم این clear کردن چیه؟

[Saber Mogaddas]

سلام
clear به کلی خاصیت های float دست بالاشو خنثی میکنه.پس clear برای خنثی کردن خاصیت float به کار میره..
برای مشکلتون باید از دیو های تو در تو به درستی استفاده کنید و توسط margin اندازه بین اونهارو تنظیم کنید.
اگه قسمتی که مشکل دارید رو ضمیمه کنید راحتر به جواب خواهید رسید ..
موفق باشید..

[zahrashoja]

من بشدت مبتدی ام



#content {
width: 960px;
margin: 0 auto;
padding: 20px 0 30px 0;

}

/* Content > Main */

#main {
float:left;
width: 500px;
margin-left:30px;
}



.box3
{
width:500px;
height:30px;
background:url(images/ph33.png)no-repeat;
background-position:center;
color:#8BD3EB;
text-align:center;
background-position:center;
}
.endbox3
{
width:500px;
height:30px;
background:url('images/ph3.png') no-repeat center;
color:#8BD3EB;
text-align:center;
}

.main2 {
float:left;
width: 500px;
background-color:#8BD3EB;
background-position:center;

}

#footer
{
clear: both;
width:960px;
background: #F7F7F7 url(images/img07.gif) repeat;

}

.sidebar {
float: right;
width: 200px;
}

.sidebar2 {
float:left;
width: 200px;
}


که اینطور استفاده کردم


<div id="content" dir="rtl">


<div class="sidebar2">
</div>


<div id="main" dir="rtl" align="center">


<table cellpadding="0" cellspacing="0">
<tr>
<td >


<div class="box3"></div>


</td>
</tr>
<tr>
<td>


<div class="main2">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>


</td>
</tr>


<tr>
<td >


<div class="endbox3"></div>


</td>
</tr>
<tr>
<td >
<br />
</td>
</tr>
</table>


</div>


<div class="sidebar" dir="rtl">
</div>

</div>

<div id="footer" align="right" dir="rtl">
</div>





الان که main2 و بقیه رو گذاشتم توی جدول درست شده ولی قبلش عکس توی endbox3 رو نشون نمیداد و main2 میچسبید بالای footer نمیدونم چرا؟
راستی ممنون که وقت میزارین و جواب میدین.. خیلی ممنونم

[bftarane]

سلام.
من دقیقاً نمی دونم شما چی می خواستید این کار به چه شکل باشه ولی با استفاده از کدهای خودتون من کدهای زیر رو نوشتم و نتیجه رو می تونید در شکل زیر ببینید. البته من با فایرفاکس امتحان کردم.
89878
body
{
background:#222;
}
#content {
width: 960px;
margin:0 auto;
padding: 20px 0 30px 0;
min-height:10px;
background:red;
overflow:hidden;
}
/* Content > Main */
#main {
float:left;
width: 500px;
margin-left:30px;
background:orange;
min-height:300px;
overflow:hidden;
}
.box3
{
width:500px;
height:30px;
background:url(images/ph33.png)no-repeat;
background-position:center;
color:#8BD3EB;
text-align:center;
background-position:center;
background:green;
}
.endbox3
{
width:500px;
min-height:30px;
background:url('images/ph3.png') no-repeat center;
color:#8BD3EB;
text-align:center;
background:#111;
}

.main2 {
float:left;
width: 500px;
background-color:#8BD3EB;
background-position:center;
}

#footer
{
width:960px;
background: #F7F7F7 url(images/img07.gif) repeat;
margin:0 auto;
}
.sidebar {
float: right;
width: 200px;
background:silver;
}
.sidebar2 {
float:left;
width: 200px;
background:silver;
}

<div id="content" dir="rtl">
<div class="sidebar2">sidebar2</div>
<div id="main" dir="rtl" align="center">
main
<div class="box3">box3</div>
<div class="main2">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="endbox3">endbox3</div>
</div>
<div class="sidebar" dir="rtl">sidebar</div>
</div>
<div id="footer" align="right" dir="rtl">footer</div>
حالا اگه چیز دیگه ای مد نظرتون بوده در میون بزارید اگه تونستم کمک می کنم.

[zahrashoja]

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

[bftarane]

آهان الآن متوجه شدم.
خوب برای اینکه قسمت نارنجی دیده نشه min-height مربوط به main# رو کمش کنید مثلاً 10 پیکسل و اون کلمه main رو که در قسمت html نوشته بودم پاکش کنید.
.......................
به کلاس main2 اگه کد زیر رو اضافه کنید قسمت آبی بلندتر میشه.
min-height:500px;
.......................
یه پیشنهاد هم دارم که به نظرم کار رو زیباتر میکنه
در قسمت html فوتر رو داخل div با آی دی content قرار بدید
یعنی

<div class="sidebar" dir="rtl">sidebar</div>
<div id="footer" align="right" dir="rtl">footer</div>
</div>
و
به footer# کد زیر رو اضافه کنید
clear:both;

[zahrashoja]

89926

این شکل سایتمه که تقریبن ازش راضی ام.. به نظرتون چطوره؟؟؟
فقط با منوش کمی مشکل دارم که دقیقن وسط باشه.. با margin و padding هم نتونستم درستش کنم



#menu {

height: 40px;
margin-top: 0px;
width:940px;
}

#menu ul {

list-style: none;
line-height: normal;
width:529px;
}

#menu li {
display: inline;
}

#menu a {
display: block;
float: right;
height: 26px;
padding: 14px 18px 0 20px;
background: url('../images/img06.gif') no-repeat;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
text-align: right;
}



#menu .first a {

background: none;
}






<div id="menu" align="center" dir="rtl">

<ul dir="rtl">

<li><a href="RegA.aspx" title="" dir="rtl">ثبت نام آژانس ها</a></li>
<li><a href="#" title="" dir="rtl">لیست آژانس ها</a></li>
<li><a href="#" title="" dir="rtl">پنل مدیریت</a></li>
<li><a href="#" title="" dir="rtl">راهنمای عضویت آژانس</a></li>
<li class="first"><a href="#" title="" dir="rtl">درباره ما</a></li>
</ul>
</div>


<!-- content -->

<div id="content" dir="rtl" align="center">


<div class="sidebar2">
...

[bftarane]

این شکل سایتمه که تقریبن ازش راضی ام.. به نظرتون چطوره؟؟؟
خوبه، من که خوشم اومد.

فقط با منوش کمی مشکل دارم که دقیقن وسط باشه.. با margin و padding هم نتونستم درستش کنماینطوری نمی تونم نظری بدم. اگه خواستی کارت رو ضمیمه کن شاید تونستم بفهمم مشکلش چیه.
اگرم می خوای بگو خودم یه نمونه درست کنم بزارم برات.

[zahrashoja]

منوشو درست کردم ممنون
نمیدونم درسته سوالای دیگه ای هم توی همین تاپیک بپرسم یا نه
چرا بعضی وقتا تغییرایی که توی style sheet می دم توی صفحه سایت اعمال نمیشن و صفحه با همون استایل قبلی اجرا میشه؟؟؟

[bftarane]

چرا بعضی وقتا تغییرایی که توی style sheet می دم توی صفحه سایت اعمال نمیشن و صفحه با همون استایل قبلی اجرا میشه؟؟؟
با مثال بگی فکر کنم بهتر باشه.
ببین مثلاً یه نفر یه همچین سوالی یه دفعه پرسیده بود و وقتی پروژه ش رو نگاه کردم دیدم عکسهاشو بد آدرس دهی کرده بود و به همین دلیل عکساش دیده نمیشد.


نمیدونم درسته سوالای دیگه ای هم توی همین تاپیک بپرسم یا نه
ببین در تاپیک جدا بپرسی هر سوالی رو بهتره چون اون طوری فکر می کنم افراد بیشتری به تاپیکت سر بزنن و جواب بدن.
راستی دو تا لینک که به نظرم خیلی خوبن می زارم اینجا امیدوارم به دردت بخورن:
http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

http://www.ezineasp.net/post/Div-3-Columns-Layout-using-CSS-Styles-Div-layout-1.aspx