Ширина двух колонок в процентах

В этом макете общая ширина резиновых колонок принимается за 100%, поэтому нам потребуется дополнительный слой, относительно которого будет отсчитываться ширина внутренних колонок. Этот слой с именем rubber совместно со слоем col3 работает как двухколоночный макет, а внутренние слои col1 и col2 выстраиваются по горизонтали за счёт применения свойства float (пример 6.10).

Пример 6.10. Макет 5.3—9.html

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN"

" http: //www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

< html xmlns=" http: //www.w3.org/1999/xhtml" >

< head>

< meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" />

< title> Макет 5.3< /title>

< style type=" text/css" >

.header, .footer { background: #D5BAE4; }

.layout { overflow: hidden; }

.rubber { margin-right: 200px; }

.col1 { background: #C7E3E4; width: 60%; float: left; }

.col2 { background: #E0D2C7; width: 40%; float: left; }

.col3 { background: #ECD5DE; width: 200px; float: right; }

< /style>

< /head>

< body>

< div class=" header" > Шапка сайта< /div>

< div class=" layout" >

< div class=" col3" > Колонка 3< /div>

< div class=" rubber" >

< div class=" col2" > Колонка 2< /div>

< div class=" col1" > Колонка 1< /div>

< /div>

< /div>

< div class=" footer" > Подвал< /div>

< /body>

< /html>

Макеты 6, 7 и их разновидности строятся по тому же принципу, что и макет № 5, за исключением макета № 7, в котором ширина левой и правой колонки резиновая и равна между собой.

Вначале готовим основу, указываем порядок слоёв в HTML-коде.

< div class=" layout" >

< div class=" col1" > Колонка 1< /div>

< div class=" col3" > Колонка 3< /div>

< div class=" col2" > Колонка 2< /div>

< /div>

Далее устанавливаем ширину всех колонок и их метод обтекания.

.col1 { width: 50%; float: left; }

.col2 { width: 200px; float: left; }

.col3 { width: 50%; float: right; }

Это ещё не всё, слои пока никаких колонок не формируют и выстраиваются совершенно не подходящим для нас способом. Требуется сместить вторую колонку влево на половину её ширины (margin-left: -100px) и заставить третью колонку встать на своё место. Для этого надо увеличить её ширину так, чтобы она была равна или больше, чем 50%+100px (половина второй колонки). Лучше всего подойдёт свойство margin-left с отрицательным значением, после этого колонки будут созданы. Есть ещё некоторые нюансы. Крайние колонки состыкованы между собой, что хорошо заметно, когда их высота превышает высоту средней колонки (рис. 6.9).

Рис. 6.9. Состыкованные колонки

К тому же в левой колонке текст справа, а в правой колонке текст слева скрывается под фоном центральной колонки. Это будет не заметно, если высота этой колонки большая, но это не всегда возможно. Чтобы преодолеть указанные недостатки, необходимо вложить внутрь крайних колонок ещё по одному слою (в примере он называется wrap) и уже для них задать цвет фона колонки, необходимые поля и отступы. Окончательный код приведён в примере 6.11.

Пример 6.11. Макет № 7—10.html

< head>

< meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" />

< title> Макет 7< /title>

< style type=" text/css" >

.header, .footer { background: #D5BAE4; }

.layout { overflow: hidden; }

.col1 { width: 50%; float: left; }

.col1.wrap {

background: #C7E3E4;

margin-right: 100px; /* Сдвигаем влево на половину ширины колонки 2 */

padding: 10px; /* Поля вокруг текста */

}

.col2 { background: #E0D2C7; width: 200px; float: left;

margin-left: -100px; }

.col3 { width: 50%; float: right; margin-left: -100px; }

.col3.wrap {

background: #ECD5DE;

margin-left: 100px; /* Сдвигаем вправо на половину ширины колонки 2 */

padding: 10px;

}

< /style>

< /head>

< body>

< div class=" header" > Шапка сайта< /div>

< div class=" layout" >

< div class=" col1" > < div class=" wrap" > Колонка 1< /div> < /div>

< div class=" col3" > < div class=" wrap" > Колонка 3< /div> < /div>

< div class=" col2" > Колонка 2< /div>

< /div>

< div class=" footer" > Подвал< /div>

< /body>

< /html>

⇐ Предыдущая123Следующая ⇒

Поделиться:

Популярное:

1. III. УЗЛЫ ДЛЯ СВЯЗЫВАНИЯ ДВУХ ТРОСОВ
2. Б. Дифракция от двух и от многих параллельных щелей.
3. Бестрансформаторный двухтактный каскад УМ.
4. В результате противоречивости этих двух структур в Сутевом строении образуется ряд концептуальных зависимостей, сила и мощь которых – на стороне преимущественного лидерства победившей оппозиции.
5. Вероятность простоя двух кассиров
6. Взаимодействие двух согласных в корне
7. Влекут наложение административного штрафа в размере от одной тысячи пятисот до двух тысяч рублей.
8. Внутрипсихические конфликты представляют собой столкновения в психике животного тенденций к одновременному выполнению двух несовместимых типов поведения.
9. ВСТРЕЧА ЧЕТВЁРТАЯ . Двухголосие
10. Где X – длинна; Y – ширина; Z – высота.
11. ГЛАВА 2. НАХОЖДЕНИЕ ОЖИДАЕМОГО ДОХОДА ЦЕНТРАЛЬНОЙ ЗАМКНУТОЙ СЕТИ ДЛЯ СЛУЧАЯ, КОГДА ДОХОДЫ ОТ ПЕРЕХОДОВ ЗАЯВОК МЕЖДУ СИСТЕМАМИ СЕТИ ЯВЛЯЮТСЯ СВ С ЗАДАННЫМИ МОМЕНТАМИ ПЕРВЫХ ДВУХ ПОРЯДКОВ
12. Глава 46: Убийство Черного Полосатого Носорога с двух ударов.