размётка |
рассмотрим довольно подробно код размётки страницы ниже, и баги, которые в нём устраняються
<*body>
<*div id="wrapper">
<*div id="content">
<*div class="left_box">righttop
<*/div>
<*div class="right_box">
<*div class="righttop">righttop
<*/div>
<*div class="rightcenter">rightcenter
<*/div>
<*/div>
<*/div>
<*/div>
выглядит так:
вобщем, ничего особенного
НО некие вещи важно прописывать :
цсс
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
min-width:1080px;
}
html, body, #site_container, #header, #main_container, #footer,
{
_width: expression((documentElement.clientWidth||document.body.clientWidth)<1080?'1080px':''); хак для Min-width. так ка ие6 не понимает!
}
#wrapper {
position:relative;
min-height: 100%;
height: auto !important;
height: 100%;
}
#content {
padding-bottom:40px;
}
/*,блоки контента*/
#content .left_box
{
width: 300px;
float: left;
min-height: 400px; вот это свойство ие6 воспризхводит как длину 550п, а ФФ - как автоматическую длину, поэтому лучше
height: auto !important; выбрать чтото одно! если убрать "авто ! импотант" , длина блока будет 550п, а если убрать хайт-550, то
height: 550px; придёться "ломать" минимальную высоту с помощью експрешн (см выше)
border:1px solid green
}
#content .right_box
{
margin-left: 300px;
_position: relative; на стыке двух блоков в ИЕ6 образуестя зазор 3п, который ни маргинами , ни паддингами не убрать.
_left: -3px; этот зазор ликвидируеться этим хаком, ибо нижнее подчерркинвание ФФ не читает
_margin-right: -1px;
}
#content .right_box .righttop
{
height: 120px;
}
#content .right_box .rightcenter /*right center*/
{
min-height: 300px;
height: auto !important;
height: 300px;
border: 1px solid red;
overflow /**/:/**/ hidden; хак для того чтобы флоаты влезали в блок целиком, и он тянулся за ними.
}
Комментировать | « Пред. запись — К дневнику — След. запись » | Страницы: [1] [Новые] |