Printable View
سلام
من می خوام یه سایت شبیه به این عکس پایین رو با CSS بنویسم، ولی هر بار یه جاش میلنگه! دیگه کلافه شدم مخصوصا تو IE6 که هر بار یه جور نشون میده؛ این بود که گفتم بیام اینجا مطرح کنم، شاید فرجی شد!
این رو هم اضافه کنم که:
1 , 3 , 5 , 7 = تک عکس
2 , 6 = عکس با repeat-x
4 , 8 = عکس با repeat-y
9 = عکس background
عکسی که گذاشتی نمیاد. لطفاً تصحیحش کن. یه خورده هم بیشتر توضیح بده!
عکس که مشکلی نداره! ولی خوب بازم میذارم.
توضیح بیشتر: در واقع این فرم بدنه اصلی سایت رو تشکیل میده که همه عناصر به غیر از (9) به همون صورتی که بالا گفتم در جای خوشون قرار میگیرن؛ و قسمت (9) هم محتوای اصلی سایت رو تو خودش جای میده. بخش های 1،3،5و7 دارای طول و عرض ثابت؛ بخش های 2و6 دارای طول ثابت و عرض متناسب با صفحه و نهایتا 4و8 هم دارای عرض ثابت و طول متناسب با متن هستند؛ ناگفته پیداست که قسمت 9 با 4و8 در رابطه هستند (البته از لحاظ طول - وابسته به متن و محتوای داخل (9))
شاید یه خورده منو پر توقع فرض کنید که این همه چیز رو یکجا میخوام! ولی خوب هر بار که cssاش رو می نویسم، یه جاش که هیچ چند جاش میلنگه! البته با table مشکل رو حل کردم؛ ولی میخوام با css باشه؟!
کد:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#page-wrap {
width: 100%;
}
#header {
width: 100%;
height: 100px;
background: red;
position: relative;
}
#header .left {
position: absolute;
left: 0; top: 0;
width: 30px;
height: 100px;
background: blue;
}
#header .right {
position: absolute;
right: 0; top: 0;
width: 30px;
height: 100px;
background: blue;
}
#contents {
width: 100%;
min-height: 500px;
* height: 500px;
background: green;
position: relative;
}
#contents .left {
position: absolute;
left: 0; top: 0;
width: 30px;
min-height: 500px;
* height: 500px;
background: blue;
}
#contents .right {
position: absolute;
right: 0; top: 0;
width: 30px;
min-height: 500px;
* height: 500px;
background: blue;
}
#footer {
width: 100%;
height: 100px;
background: yellow;
position: relative;
}
#footer .left {
position: absolute;
left: 0; top: 0;
width: 30px;
height: 100px;
background: blue;
}
#footer .right {
position: absolute;
right: 0; top: 0;
width: 30px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div id="page-wrap">
<div id="header">
<span class="right"></span>
<span class="left"></span>
</div>
<div id="contents">
<span class="right"></span>
<span class="left"></span>
</div>
<div id="footer">
<span class="right"></span>
<span class="left"></span>
</div>
</div>
</body>
</html>
سلام
واقعا از کمکتون ممنونم.
ولی هنوز چند تا مشکل دارم که برطرف نشده:
1. dreamweaver به min-height گیر میده! واقعا لازمه که باشه؟!
2. height: 500px رو چطور به حالتی در بیارم که هم تو IE و هم FireFox & Opera بدون مشکل نشون بده؟ (یعنی تا انتهای متن وارد شده نشونش بده و بعدش دیگه نه؛ به عبارتی به طور متناسبی متغیر باشه، یه جا 100px و جای دیگه 900px) مشکل با inherit و auto حل نمیشه؟!
3. بین قسمت های header و content ، موقعی که از <p> توی content استفاده می کنم، یه فاصله ایی برابر با line-height بین این دو تا میافته (توی IE مشکلی نیست ولی با FireFox مشکل دارم!) البته این موضوع رو میشه با قرار دادن margin-top: -??px به ظاهر حل کرد (?? = line-height) ؛ اما مشکل اینجاست که وقتی مقیاس بزرگ باشه (مثلا کل صفحه) میشه کاری کرد که خودشو نشون نده، ولی موقعی که میخوام از همین استایل برای یه باکس کوچیک استفاده کنم خوب معلومه چی میشه دیگه: ضایع!
4. یه سوال: این page-wrap چی کاره بود این وسط؟ میتونم این طور بگم که در واقع این مورد همون عرض باکس و یا کلی صفحه ایی با همین استایل تعریف شده است؟
بازم جا داره از توجهتون تشکر کنم.
1 و 2: IE خصوصیت min-height رو نمی‌شناسه و فایرفاکس هم اگه height رو تعیین کنی و محتوا از اون حد بیشتر شد، محتوا رو برش میده.از هر دوی این خصوصیت‌ها با هم استفاده شده تا هر دو برای هر دو مرورگر مشکلی نباشه.
3: چرا میخواید یه تگ p اون‌جا بذارید؟ برای نشون دادن اون تگ یه فضای خالی بین اون دو تا میوفته،این طبیعیه، میخواید اصلاً نمایشش ندید ولی اون‌جا باشه؟ display:none رو بهش بدید.
4: این نگهدارنده کل محتویات صفحه بود. اگه خواستید به‌جای این‌که قالب‌تون حالت liquid باشه یعنی به اندازه صفحه کش بیاد (هرچند الان این‌جوری مرسوم نیست)، مقدار طولشو به درصد می‌دید و اگه خواستید اندازه‌ش ثابت باشه به پیکسل مقدارو مشخص می‌کنید. خوبیش اینه که الان که یه نگهدارنده داریم می‌تونیم کل محتویات صفحه رو وسط پنجره نمایش بدیم (تکنیک margin: 0 auto)
خواهش می‌کنم :) خوشحالم مفید واقع شد.
نقل قول:سلام...دوست عزیز شما همونطور که خودت گفتی میتونی از [html]height:auto;[/html] استفاده کنی و این خاصیت رو هم بهتره در کنار هر کردو از این دیو ها داشته باشی تا مشکلی پیش نیاد
[html]overfolow:hidden;[/html]