یه قالب سه ستونه دارم حالا اون ستون وسطیه هر چی margin هم میکنم صاف می چسبه به footer
یعنی footer با بلندی کوتاهی دو تا ستون دو طرف مشکل نداره ولی وقتی ارتفاع وسطی بیشتر از کناری ها میشه ستون وسط و footer میچسبن به هم
یه قالب سه ستونه دارم حالا اون ستون وسطیه هر چی margin هم میکنم صاف می چسبه به footer
یعنی footer با بلندی کوتاهی دو تا ستون دو طرف مشکل نداره ولی وقتی ارتفاع وسطی بیشتر از کناری ها میشه ستون وسط و footer میچسبن به هم
دوست عزيز كد رو بزار
اگر از فلوت استفاده كردي دقت كن كلير كني
میشه بگین مفهوم این clear کردن چیه؟
سلام
clear به کلی خاصیت های float دست بالاشو خنثی میکنه.پس clear برای خنثی کردن خاصیت float به کار میره..
برای مشکلتون باید از دیو های تو در تو به درستی استفاده کنید و توسط margin اندازه بین اونهارو تنظیم کنید.
اگه قسمتی که مشکل دارید رو ضمیمه کنید راحتر به جواب خواهید رسید ..
موفق باشید..
من بشدت مبتدی ام
#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 نمیدونم چرا؟
راستی ممنون که وقت میزارین و جواب میدین.. خیلی ممنونم
آخرین ویرایش به وسیله zahrashoja : دوشنبه 26 تیر 1391 در 21:24 عصر
سلام.
من دقیقاً نمی دونم شما چی می خواستید این کار به چه شکل باشه ولی با استفاده از کدهای خودتون من کدهای زیر رو نوشتم و نتیجه رو می تونید در شکل زیر ببینید. البته من با فایرفاکس امتحان کردم.
site.GIF
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;
}
حالا اگه چیز دیگه ای مد نظرتون بوده در میون بزارید اگه تونستم کمک می کنم.کد HTML:<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>
واااای ممنونم .. امتحان میکنم ببینم چه طور میشه
تازه شروع کردن به یاد گرفتن css و این اولین تجربه مه
چیزی که مد نظرمه در حالت کلی یه قالب سه ستونه س که من میخوام در اول و آخر قسمت main یه تصویر بزارم ..
آهان الآن متوجه شدم.
خوب برای اینکه قسمت نارنجی دیده نشه min-height مربوط به main# رو کمش کنید مثلاً 10 پیکسل و اون کلمه main رو که در قسمت html نوشته بودم پاکش کنید.
.......................
به کلاس main2 اگه کد زیر رو اضافه کنید قسمت آبی بلندتر میشه.
min-height:500px;
.......................
یه پیشنهاد هم دارم که به نظرم کار رو زیباتر میکنه
در قسمت html فوتر رو داخل div با آی دی content قرار بدید
یعنی
وکد HTML:<div class="sidebar" dir="rtl">sidebar</div> <div id="footer" align="right" dir="rtl">footer</div> </div>
به footer# کد زیر رو اضافه کنید
clear:both;
myweb2.jpg
این شکل سایتمه که تقریبن ازش راضی ام.. به نظرتون چطوره؟؟؟
فقط با منوش کمی مشکل دارم که دقیقن وسط باشه.. با 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;
}
کد HTML:<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"> ...
خوبه، من که خوشم اومد.این شکل سایتمه که تقریبن ازش راضی ام.. به نظرتون چطوره؟؟؟
اینطوری نمی تونم نظری بدم. اگه خواستی کارت رو ضمیمه کن شاید تونستم بفهمم مشکلش چیه.فقط با منوش کمی مشکل دارم که دقیقن وسط باشه.. با margin و padding هم نتونستم درستش کنم
اگرم می خوای بگو خودم یه نمونه درست کنم بزارم برات.
منوشو درست کردم ممنون
نمیدونم درسته سوالای دیگه ای هم توی همین تاپیک بپرسم یا نه
چرا بعضی وقتا تغییرایی که توی style sheet می دم توی صفحه سایت اعمال نمیشن و صفحه با همون استایل قبلی اجرا میشه؟؟؟
با مثال بگی فکر کنم بهتر باشه.چرا بعضی وقتا تغییرایی که توی style sheet می دم توی صفحه سایت اعمال نمیشن و صفحه با همون استایل قبلی اجرا میشه؟؟؟
ببین مثلاً یه نفر یه همچین سوالی یه دفعه پرسیده بود و وقتی پروژه ش رو نگاه کردم دیدم عکسهاشو بد آدرس دهی کرده بود و به همین دلیل عکساش دیده نمیشد.
ببین در تاپیک جدا بپرسی هر سوالی رو بهتره چون اون طوری فکر می کنم افراد بیشتری به تاپیکت سر بزنن و جواب بدن.نمیدونم درسته سوالای دیگه ای هم توی همین تاپیک بپرسم یا نه
راستی دو تا لینک که به نظرم خیلی خوبن می زارم اینجا امیدوارم به دردت بخورن:
http://matthewjamestaylor.com/blog/b...rowser-support
http://www.ezineasp.net/post/Div-3-C...-layout-1.aspx
قوانین ایجاد تاپیک در تالار
پاسخ با نقل قول