ورود

View Full Version : سوال: پراکنده شدن Div



DR.HTML
پنج شنبه 20 مرداد 1390, 14:13 عصر
برادرای عزیز ممنون بابت کمکهای قبلیتون اما من باز یه جا به یه مشکل برخوردم من چندتا div درست کردم که بالاییاش هموشم سره جاشونن اما پایینیاش نه من یه div رو سه بار تکرار کردم وبرای هر سه تا یه css نوشتم اما سه تاشون کنار هم نموفتن به صورت افقی و پراکنده میشن میشه راهنمایی کنین
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
width:900px;
margin:0px auto;
background-color:#CCC;
font-family:Tahoma, Geneva, sans-serif;
text-decoration:none;
background-image:url(bg.gif);

}

#head{width:900px;
background-color:#06C;
}
#menu {
background: #333;
float: right;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#menu li {
float: right;
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
margin: 0;
padding: 0;
}
#menu a {
background: #333;
color:#CCC;
display: block;
float: right;
margin: 0;
padding: 8px 12px;
text-decoration: none;
}
#menu a:hover {
background: #2580a2;
color: #fff;
padding-bottom: 8px;
}




#left{width:170px;
min-height:60px;
float:left;
text-align:right;
background-color:#999;
margin:8px auto;

}
#right{width:190px;
background-color:#999;
min-height:60px;
float:right;
text-align:right;
margin:8px auto;

}
#main{text-align:right;
background-color:#FFF;
float:right;
width:510px;
min-height:60px;
margin:8px 15px 0px 15px;


}
#foot {
width:290px;
margin:10px 5px auto;
min-height:40px;
text-align:right;
float:right;
background:#03F;
}

</style>

</head>

<body>
<div id="head">test</div>
<div align="center">

<ul id="menu">
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</div>

<div id="left">test</div>
<div id="right">test</div>
<div id="main">test</div>
<div id="foot">test</div>
<div id="foot">test</div>
<div id="foot">test</div>

</body>
</html>

ممنون میشم بگین مشکلش چیه

mamali-mohammad
جمعه 21 مرداد 1390, 00:19 صبح
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
width:900px;
margin:0px auto;
background-color:#CCC;
font-family:Tahoma, Geneva, sans-serif;
text-decoration:none;
background-image:url(bg.gif);

}

#head{width:900px;
background-color:#06C;
}
#menu {
background: #333;
float: right;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#menu li {
float: right;
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
margin: 0;
padding: 0;
}
#menu a {
background: #333;
color:#CCC;
display: block;
float: right;
margin: 0;
padding: 8px 12px;
text-decoration: none;
}
#menu a:hover {
background: #2580a2;
color: #fff;
padding-bottom: 8px;
}




#left{width:170px;
min-height:60px;
float:left;
text-align:right;
background-color:#999;
margin:8px auto;

}
#right{width:190px;
background-color:#999;
min-height:60px;
float:right;
text-align:right;
margin:8px auto;

}
#main{text-align:right;
background-color:#FFF;
float:right;
width:510px;
min-height:60px;
margin:8px 15px 0px 15px;


}
#footer {
width:900px;
float:right;
}

#foot {
width:290px;
margin:10px 5px auto;
min-height:40px;
text-align:right;
float:right;
background:#03F;
}

</style>

</head>

<body>
<div id="head">test</div>
<div align="center">

<ul id="menu">
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</div>

<div id="left">test</div>
<div id="right">test</div>
<div id="main">test</div>
<div id="footer">
<div id="foot">test</div>
<div id="foot">test</div>
<div id="foot">test</div>
<br style="clear:both;" />
</div>

</body>
</html>

DR.HTML
جمعه 21 مرداد 1390, 10:50 صبح
برادر ممنون که اینقدر خوب به تاپیکهای من جواب میدی اما یه چیزی اینجا Clear رو هم استفاده نکنیم مشکلی پیش نمیاد ! میشه یه توضیح بدی؟

DR.HTML
جمعه 21 مرداد 1390, 11:04 صبح
و یک سوال دیگه من وقتی برای داخل div ها padding میزارم قالب به هم میریزه مشکل از کجاست ؟

mamali-mohammad
جمعه 21 مرداد 1390, 12:08 عصر
سلام
css شما اصولی نیست
پیشنهاد میکنم یه سرچی بزنید و آموزش سی اس اس پیدا کنید
موفق باشید ...

DR.HTML
جمعه 21 مرداد 1390, 12:24 عصر
میدونم چون تازه کارم چشم دنباله اونم میرم اما اگر میشه بگین مشکل کد من چیه الان که توی padding مشکل داره

mamali-mohammad
جمعه 21 مرداد 1390, 13:36 عصر
به این دلیل هست که سایزها میریزه به هم
به طور مثال شما مقدار footer رو روی 900 گذاشتید
حالا سه تا دیو دیگه زیرش دارید هر کدوم به مقدار 290 پیکسل با margin-right:10px; که روی هم میشه 900 پیکسل ( 290*3+30 )
حالا میای 10 پیکسل padding میدی
باعث میشه به هر دیو 10 پیکسل اضافه بشه که 3 تا دیو داری روی هم میشه 30 پیکسل اضافه
یعنی 3 تا دیو زیر footer برابر با 930 پیکسل میشه در حالی که خود دیو footer مقدارش 900 پیکسل هست
در نتیجه کار خراب میشه

DR.HTML
جمعه 21 مرداد 1390, 14:22 عصر
ممنون از راهنمایی بسیار کاملتون مثل چند بار گزشته کاملا کار ساز و ناشی از بی دقتی و ناشی گری خودم بود ممنون