-Поиск по дневнику

Поиск сообщений в mycss

 -Подписка по e-mail

 

 -Постоянные читатели

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 18.09.2009
Записей:
Комментариев:
Написано: 210


размётка

Пятница, 25 Сентября 2009 г. 17:19 + в цитатник
карты все записи автора

рассмотрим довольно подробно код размётки страницы ниже, и баги, которые в нём устраняються




<*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;                 хак для того чтобы флоаты влезали в  блок целиком,  и он тянулся за ними.
   
}

 

Метки:  

 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку