PDA

View Full Version : مبتدی: مشکل در قالب سایت


sd.CSharpProgrammer
شنبه 20 اسفند 1390, 00:21 صبح
سلام دوستان

تو اینترنت زیاد گشتم ولی روش استانداردی برای طراحی قالب های دو ستونه و سه ستونه پیدا نکردم.
خودم یک قالب سه ستونه درست کردم، ظاهراً قالب مشکلی نداره ولی نمیدونم چرا وقتی تگها رو تو دایوها میگذارم وقتی به انتهای دایو میرسن جای اینکه ادامشون بره خط بعد از دایو میزنه بیرون!!!!!!!!!!!

کد قالب رو میگذارم اینجا، به نظرتون مشکل چیه؟! من خصوصیات margin و padding رو هم روی تگهایی که تو دایو قرار میگیرن امتحان کردم ولی درست نشد!!!!!!



<html>
<head>
<style type="text/css">
#wrapper {
width: 800px;
margin: 0 auto;
}

#header {
width: 800px;
height: 150px;
background-color: yellow;
}

#subwrapper {
width: 800px;
background-color: cyan;
margin-top: 10px;
margin-bottom: 10px;
}

#leftcol {
width: 180px;
float: left;
background-color: blue;
}

#rightcol {
width: 180px;
float: right;
background-color: blue;
}

.colsubcontent {
height: 150px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
background-color: red;
}

.subwrappercontent {
margin-left: 190px;
margin-right: 190px;
margin-bottom: 10px;
height: 250px;
background-color: brown;
}

#footer {
width: 800px;
height: 250px;
background-color: green;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="subwrapper">
<div id="leftcol">
<div class="colsubcontent"></div>
<div class="colsubcontent"></div>
</div>
<div id="rightcol">
<div class="colsubcontent"></div>
<div class="colsubcontent"></div>
<div class="colsubcontent"></div>
<div class="colsubcontent"></div>
</div>
<div class="subwrappercontent">
<!-- chera inja tage p az div kharej mishe jaye inke text-wrapping dashte bashe va edamash bere payine div?????? -->
<p style="padding-left:5px;padding-right:5px;">asiodaosigdoiasgdoiasgdoiagsoidgaoisdgoiasgdioaogs digasodigasgdoi</p>
</div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent" style="margin-bottom:10px"></div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>


ممنون میشم دوستانی که تجربه بیشتری تو این زمینه دارند کمک کنند.
مرسی
yones_safari
شنبه 20 اسفند 1390, 09:29 صبح
عزیزم چون شما برای دایوها height رو ثابت تنظیم کردی به همین دلیل یا height رو نده و بذار auto باشه اینطوری اون دایوهایی که هیچی توشون نیست ناپدید میشن و شکل قالبت به هم میخوره و یا به جای height از min-height استفاده کن و اندازه هایی که به height دادی رو به min-height بده.اینطوری شکل قالبت به هم نمیخوره.
موفق باشید.
kianajoo
شنبه 20 اسفند 1390, 13:09 عصر
درود...
دوست عزیز این کدهارو واست ویرایش کردم....
امیدوارم مشکل حل شده باشه.اگه احتیاج به توضیح داره.....بگین که توضیح بدم....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
*{
margin:0;
padding:0;
border:none;
}
#wrapper {
width: 800px;
margin: 0 auto;
}

#header {
width: 800px;
height: 150px;
background-color: yellow;
}

#subwrapper {
width: 800px;
background-color: cyan;
margin-top: 10px;
margin-bottom: 10px;
overflow:hidden;
}

#leftcol {
width: 180px;
float: left;
background-color: blue;
}

#rightcol {
width: 180px;
float: right;
background-color: blue;
}
#center{
float:left;
overflow:hidden;
margin:0 auto;
width:440px;
}
.colsubcontent {
height: 150px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
background-color: red;
}

.subwrappercontent {


margin-bottom: 10px;
height: 250px;
background-color: brown;
}

#footer {
width: 800px;
height: 250px;
background-color: green;
clear:both;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="subwrapper">
<div id="leftcol">
<div class="colsubcontent"></div>
<div class="colsubcontent"></div>
</div>
<!-- ye div ham vase sotone vasat dorost kon mese in.... -->
<div id="center">
<div class="subwrappercontent">
<!-- chera inja tage p az div kharej mishe jaye inke text-wrapping dashte bashe va edamash bere payine div?????? -->
<p>daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......</p>
</div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent" style="margin-bottom:10px"></div>
</div>

<div id="rightcol">
<div class="colsubcontent"></div>
<div class="colsubcontent"></div>
<div class="colsubcontent"></div>
<div class="colsubcontent"></div>
</div>

</div>
<div id="footer">
</div>
</div>
</body>
</html>
sd.CSharpProgrammer
شنبه 20 اسفند 1390, 13:20 عصر
عزیزم چون شما برای دایوها height رو ثابت تنظیم کردی به همین دلیل یا height رو نده و بذار auto باشه اینطوری اون دایوهایی که هیچی توشون نیست ناپدید میشن و شکل قالبت به هم میخوره و یا به جای height از min-height استفاده کن و اندازه هایی که به height دادی رو به min-height بده.اینطوری شکل قالبت به هم نمیخوره.
موفق باشید.

سلام دوست عزیز
فرمایش شما صحیح، نباید مقدار height رو تنظیم میکردم ولی اینکارو انجام دادم که دایوهایی که تو ستونهای چپ و راست گذاشتم برای تست قالب دیده بشن

ممنون از راهنمائی مفیدتون
sd.CSharpProgrammer
شنبه 20 اسفند 1390, 13:27 عصر
درود...
دوست عزیز این کدهارو واست ویرایش کردم....
امیدوارم مشکل حل شده باشه.اگه احتیاج به توضیح داره.....بگین که توضیح بدم....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
*{
margin:0;
padding:0;
border:none;
}
#wrapper {
width: 800px;
margin: 0 auto;
}

#header {
width: 800px;
height: 150px;
background-color: yellow;
}

#subwrapper {
width: 800px;
background-color: cyan;
margin-top: 10px;
margin-bottom: 10px;
overflow:hidden;
}

#leftcol {
width: 180px;
float: left;
background-color: blue;
}

#rightcol {
width: 180px;
float: right;
background-color: blue;
}
#center{
float:left;
overflow:hidden;
margin:0 auto;
width:440px;
}
.colsubcontent {
height: 150px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
background-color: red;
}

.subwrappercontent {


margin-bottom: 10px;
height: 250px;
background-color: brown;
}

#footer {
width: 800px;
height: 250px;
background-color: green;
clear:both;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="subwrapper">
<div id="leftcol">
<div class="colsubcontent"></div>
<div class="colsubcontent"></div>
</div>
<!-- ye div ham vase sotone vasat dorost kon mese in.... -->
<div id="center">
<div class="subwrappercontent">
<!-- chera inja tage p az div kharej mishe jaye inke text-wrapping dashte bashe va edamash bere payine div?????? -->
<p>daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......</p>
</div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent" style="margin-bottom:10px"></div>
</div>

<div id="rightcol">
<div class="colsubcontent"></div>
<div class="colsubcontent"></div>
<div class="colsubcontent"></div>
<div class="colsubcontent"></div>
</div>

</div>
<div id="footer">
</div>
</div>
</body>
</html>
دوست عزیز ممنون برای راهنمائی هاتون.
راستش مشکل برای دایوهای وسط (اونا که قهوه ای هستند) حل شد ولی برای دایوهای ستونها (اونایی که قرمزند) باز همون مشکل وجود داره.

مثال :


<div id="leftcol>
<div class="colsubcontent"></div>
<div class="colsubcontent">chera inja tage p az div kharej mishe jaye inke text-wrapping dashte bashe va edamash bere payine div??????</div>
</div>

نمیدونم چه مرگشه؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟ :ناراحت:
kianajoo
شنبه 20 اسفند 1390, 13:44 عصر
مقدار height:150px برای این دیو کلاس min-height:150px قرار بدین....وبرای همه دیو هایی که این مشکل رو دارن باید از min-height استفاده کرد.

.colsubcontent {
min-height: 150px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
background-color: red;
}
kianajoo
شنبه 20 اسفند 1390, 13:50 عصر
این هم کد کامل:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
*{
margin:0;
padding:0;
border:none;
}
#wrapper {
width: 800px;
margin: 0 auto;
}

#header {
width: 800px;
height: 150px;
background-color: yellow;
}

#subwrapper {
width: 800px;
background-color: cyan;
margin-top: 10px;
margin-bottom: 10px;
overflow:hidden;
}

#leftcol {
width: 180px;
float: left;
background-color: blue;
}

#rightcol {
width: 180px;
float: right;
background-color: blue;
}
#center{
float:left;
overflow:hidden;
margin:0 auto;
width:440px;
}
.colsubcontent {
min-height: 150px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
background-color: red;
}

.subwrappercontent {
margin-bottom: 10px;
min-height: 250px;
background-color: brown;
}

#footer {
width: 800px;
height: 250px;
background-color: green;
clear:both;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="subwrapper">
<div id="leftcol">
<div class="colsubcontent">
<p>daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......</p>
<p>daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......</p>
<p>daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......</p>
<p>daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......</p>
</div>
<div class="colsubcontent">
<p>daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......</p>
</div>
</div>
<!-- ye div ham vase sotone vasat dorost kon mese in.... -->
<div id="center">
<div class="subwrappercontent">
<!-- chera inja tage p az div kharej mishe jaye inke text-wrapping dashte bashe va edamash bere payine div?????? -->
<p>daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......</p>
<p>daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......</p>
<p>daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......</p>
<p>daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......</p>
<p>daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......</p>
<p>daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......</p>
<p>daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......</p>
<p>daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......</p>
<p>daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......</p>
<p>daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......</p>
</div>
<div class="subwrappercontent">
</div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent"></div>
<div class="subwrappercontent" style="margin-bottom:10px"></div>
</div>

<div id="rightcol">
<div class="colsubcontent">
<p>daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......</p>
</div>
<div class="colsubcontent">
<p>daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......</p>
<p>daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......</p>
<p>daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......</p>
<p>daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......</p>
<p>daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......daram test mikonam......</p>
</div>
<div class="colsubcontent"></div>
<div class="colsubcontent"></div>
</div>

</div>
<div id="footer">
</div>
</div>
</body>
</html>
sd.CSharpProgrammer
شنبه 20 اسفند 1390, 19:40 عصر
ممنون برادر کمک بزرگی کردی