Yvision.kzYvision.kz
kk
Разное
Разное
399 773 постов41 подписчиков
Всяко-разно
0
04:10, 23 ноября 2009

Попытки сумасшедшего

Пытаюсь сделать резиновый макет сайта, при чем html код я знаю, но не очень хорошо… Если меня видит кто–нибудь из веб–мастеров, огромная просьба расшифровать данную статью… (откроется в новом окне) 

Создание "резинового" макета страницы из трех колонок. Как и в случае макета с двумя колонками сначала создадим HTML-разметку, которую будем в дальнейшем форматировать. По-моему это даже проще, чем одноколоночный макет...
Итак, зададим HTML-разметку:

и отформатируем ее с помощью следующей таблицы стилей:

В этом решении все три колонки включены в плавающую модель, выравниваются по левому краю и суммарная их ширина не превышает 100%.

 
<div id="header">
... шапка страницы ...
</div>
<div id="sidebar">
... колонка меню ...
</div>
<div id="content">
... основное содержимое страницы ...
</div>
<div id="otherbar">
... колонка меню ...
</div>
<div id="footer">
... подвал ...
</div>

 

 
#content {
float:left;
width:50%;
background-color:#CCC;
}
#sidebar {
float:left;
width:30%;
background-color:#FFC;
}
#otherbar {
float:left;
width:20%;
background-color:#FFC;
}
#header {
background-color:#FCF;
text-align:center;
}
#footer {
clear:both;
text-align:center;
background-color:#CFF;
}

 

Однако следует очень внимательно относиться к полям, рамкам и отступам этих элементов, поскольку, если суммарная ширина колонок превысит 100%, то одна или две колонки будут расположены друг под другом.

Вот так легко и просто. Этот метод работает во всех популярных браузерах.

0
349
7