Предположим поставлена задача - сверстать резиновый сайт с фиксированной по высоте шапкой и подвал прибитом книзу и тремя растягивающимися колонками между ними, при этом нужно сверстать под все используемые браузеры, т.е. достичь максимальной кроссбраузерности.
Напишем код:
| Код: |
<div id= "container">
<div id= "header"></div>
<div id= "mainbody">
</div id= "column-left"></div>
</div id= "column-right"></div>
</div id= "column-centry"></div>
</div>
<div id= "footer"></div>
</div>
|
при этом не забываем указывать тип документа
| Код: |
<!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">
|
и зададим таблицу стилей:
| Код: |
<style type="text/css">
#container {
width:100%;
}
#header {
background:#00FF33;
width:100%;
height:200px;
}
#mainbody {
background:#003399;
}
#column-left {
background:#CC3333;
float:left;
width:20%;
min-height:100px;
}
#column-right {
background:#FFCCFF;
float:right;
width:20%;
min-height:100px;
}
#column-centry{
background:#FFFF66;
width:60%;
min-height:200px;
}
#footer {
background:#663366;
width:100%;
height:150px;
}
</style>
|
Получим:
Посокльку в различных браузерах кроме IE, блок «column-centry» уходит под блок «column-left», добавим ему свойство «float:left;» или «display:table;».
Зададим минимальную высоту колонок «min-height:100px;», но IE6 не понимает это свойство, тогда пропишем для него еще «height:100px;», в результате в других браузерах при заполнение контента блок перестает растягиваться и уходит за границы блока, укажем свойство «height: auto !important;» перед «height:100px;», тогда для IE6 будет прописываться свойство «height:100px;» для остальных браузеров height: auto;»
| Код: |
<style type="text/css">
#container {
width:100%;
}
#header {
background:#00FF33;
width:100%;
height:200px;
}
#mainbody {
background:#003399;
}
#column-left {
background:#CC3333;
float:left;
width:20%;
height: auto !important;
min-height:100px;
height:100px;
}
#column-right {
background:#FFCCFF;
float:right;
width:20%;
height: auto !important;
min-height:100px;
height:100px;
}
#column-centry{
background:#FFFF66;
width:60%;
height: auto !important;
min-height:100px;
height:100px;
float:left;
}
#footer {
background:#663366;
width:100%;
height:150px;
}
</style>
|
Получаем:
в IE
в остальных браузерах
Во всех браузерах - Google Chrome, Opera и Firefox, кроме 6-й и 7-й версии IE «mainbody» не растягивается центральнйо колонкой, для это зададим свойство «display:table;»,
Получаем:
Теперь уберем отступы по краям задав body свойство «margin: 0;» и сделаем чтобы дизайн растягивался по высоте указав html, body и контейнеру высоту «heigth:100%;».
Чтоб прибить подвал к низу, для начала вынесем его за пределы контейнера и зададим ему свойства «position:relative;» и «margin-top:-150px;» (если задать свойство «top:-150px;» до под подвал образуется пустое место) и пропишем в контейнере новый блок «footer- guarantee» задав ему высоту в css равную высоте подвала.
Получаем:
| Код: |
<div id= "container">
<div id= "header">Header</div>
<div id= "mainbody">
<div id= "column-left">Column-left</div>
<div id= "column-right">Column-right</div>
<div id= "column-centry"><p>Column-centry</p>
</div>
</div>
<div id= "footer-guarantee"></div>
</div>
<div id= "footer">Footer</div>
|
| Код: |
<style type="text/css">
html, body {
margin: 0;
height:100%;
}
#container {
width:100%;
height: auto !important;
min-height:100%;
height:100%;
font-size:30px;
color:#333333;
}
#header {
background:#00FF33;
width:100%;
height:200px;
}
#mainbody {
background:#003399;
width:100%;
height: auto !important;
min-height:100px;
height:100px;
display:table;
}
#column-left {
background:#CC3333;
float:left;
width:20%;
height: auto !important;
min-height:100px;
height:100px;
}
#column-right {
background:#FFCCFF;
float:right;
width:20%;
height: auto !important;
min-height:100px;
height:100px;
}
#column-centry{
background:#FFFF66;
width:60%;
height: auto !important;
min-height:200px;
height:200px;
float:left;
}
#footer-guarantee {
height:150px;
clear:both;
}
#footer {
background:#663366;
width:100%;
height:150px;
position:relative;
margin-top:-150px;
}
</style>
|
Проверенно в браузерах:
Internet Explorer 6/7
Mozilla Firefox 2/3
Opera
Google Chrome
IT-отдел - 55 215 666
Менеджер - 460 028 175 
Админ. - 456 901 630
Избранное: 0
