ساخت قالب سایت با عرض 100% [بایگانی]

ho3inamini

پنج شنبه 05 دی 1392, 17:21 عصر

سلام دوستان
مدتی هست که میخوام یه وب سایت با عرض 100% طراحی کنم که کل صفحه رو بپوشونه ولی همش یاد حرف استادمون میافتم که میگفت وب سایت با عرض 100% طراحی نکنید چون در صفحه نمایش های کوچک بهم میریزه...!!! و پشیمون میشدم.
ولی جدیدا من هر چی سایت حرفه ای می بینم عرضش 100% هست و هیچ مشکلی هم نداره (مثل همین سایت barnamenevis.org خودمون) .
حالا من میخوام که یک سایت طراحی کنم که کل صفحه رو بپوشونه.
اگر دوستان بتونن از ابتدا راهنمایی کنند که چیکار بیاد کنم که صفحه بهم نریزه و مقدمات طراحی چنین سایتی رو بدن (مثلا عرض دایو رو باید با % مشخص کرد و سایز فونت هارو em گذاشت و...) ممنون میشم.

meysam1366

پنج شنبه 05 دی 1392, 18:01 عصر

سلام دوست عزیز

خیلی ها دقیقا مشکل شما رو دارن یکیش خود بنده و من برای اینکه دیگه از این مشکلات نداشته باشم رفتم سراغ یادگیری بوت استرپ به شما هم توصیه میکنم که حتما بوت استرپ رو یاد بگیرید

موفق باشید

qartalonline

پنج شنبه 05 دی 1392, 20:27 عصر

خوب برای اینکه طراح هاتون تو نمایشگرهای کوچک به هم ریخته نشون داده نشه باید بصورت ریسپانسیو طراحی کنید.
ولی برای طراحی مثل سایت برنامه نویس چند راه وجود داره که بهتر هستش که عرض همه عناصر رو به جز div اصلی (بدنه) بصورت نسبی % وارد نمایید و عرض div اصلی بصورت مطلق 960px در نظر بگیرید سپس در نمایشگرهای بزرگتر از 960px عرض div اصلی به 100% تبدیل کنید.
مثال ساده:

<!DOCTYPE html>
<html>
<head>
<title>page title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.clear{
clear: both;
}
#container{
background: #007dcb;
width: 960px;
display: block;
margin: 0 auto;
}
#headar{
background-color: #006aff;
width: 100%;
display: block;
height: 150px; /* for test */
}
#body{
width: 100%;
display: block;
}
#sidebar{
background-color: #ff9900;
width: 20%;
display: block;
float: left;
height: 150px; /* for test */
}
#content{
background-color: #1aa98e;
width: 80%;
display: block;
float: left;
height: 150px; /* for test */
}
#footer{
background-color: #006aff;
width: 100%;
display: block;
height: 150px; /* for test */
}
@media only screen and (min-width:960px){
#container{
width: 100%;
}
}
</style>
</head>
<body>
<div id="container">
<div id="headar">headar</div>
<div id="body">
<div id="sidebar">sidebar</div>
<div id="content">content</div>
</div>
<div id="footer" class="clear">footer</div>
</div>
</body>
</html>