Добавление к «резиновому» макету нижнего блока
Если вы уже каким-то образом экспериментировали с абсолютным по- зиционированием, то у вас наверняка закралось подозрение, что вер- стка макета, основанная на абсолютном позиционировании, не позво- лит добавить нижний блок, который будет отображаться ниже всех
трех колонок независимо от их высоты. Надо признать, чутье вас не подвело.
Чтобы добавить нижний блок к такому трехколоночному макету, нуж- но использовать плавающие блоки. Однако при создании «резинового» макета с плавающими блоками возникают дополнительные проблемы в отличие от использования аналогичного макета фиксированной ши- рины. При задании элементу свойства float ему нужно задать также и ширину. Если нам известна ширина всего макета, это не представля- ет никаких сложностей. При работе с «резиновым» макетом, как в раз- деле «Создание макета с тремя колонками средствами CSS», у нас есть две колонки, ширина которых нам известна (боковых панелей), однако ширину области с контентом мы не знаем – она меняется, заполняя все свободное пространство.
Решение
Для решения проблем, возникающих при наличии колонки с перемен- ными размерами в «резиновом» макете, придется немного усложнить макет страницы, используя отрицательные отступы для освобожде- ния пространства для размещения колонки с фиксированной шириной в гибко изменяющей свои размеры области с контентом. Кроме того, в разметку документа необходимо добавить следующий код для созда- ния самих плавающих элементов:
chapter09/3col-alt.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” lang=”en-US”>
<head>
<title>Recipe for Success</title>
<meta http-equiv=”content-type”
content=”text/html; charset=utf-8” />
<link rel=”stylesheet” type=”text/css” href=”3col-alt.css” />
</head>
<body>
<div id=”wrapper”>
<div id=”content”>
<div id=”side1”>
<form method=”post” action=”” id=”searchform”>
<h3><label for=”keys”>Search the Recipes</label></h3>
<div>
<input type=”text” name=”keys” id=”keys”
class=”txt” /><br />
<input type=”submit” name=”Submit” value=”Submit” />
</div>
</form>
<ul>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Recipes</a></li>
<li><a href=”#”>Articles</a></li>
<li><a href=”#”>Buy Online</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
</div>
<div id=”main”>
<h1>Recipe for Success</h1>
<p>Lorem ipsum dolor sit amet, consectetuer …</p>
<p>Quisque sodales imperdiet enim. Quisque …</p>
</div>
</div>
</div>
<div id=”side2”>
<h3>Please Visit our Sponsors</h3>
<div class=”adbox”><p>Lorem ipsum dolor sit amet …</p></div>
<div class=”adbox”><p>Sed mattis, orci eu porta …</p></div>
<div class=”adbox”><p>Quisque mauris nunc, mattis …</p></div>
</div>
<div id=”footer”>
? footer content…
</div>
</body>
</html>
В таблице стилей блоку wrapper задана ширина 100% и отрицательный внешний отступ – 230 пикселов. Благодаря использованию отрица- тельных отступов можно задать боковой панели изменяемую ширину (на 230 пикселов меньше окна броузера).
Затем можно разместить боковые панели справа и слева от области с контентом с помощью свойства float:
chapter09/3col-alt.css (фрагмент)
body { margin: 0; padding: 0;
}
#wrapper { width:100%; float:left;
margin-right: -230px;
margin-top: 66px;
}
#content {
margin-right: 220px;
}
#main {
margin-left: 220px;
}
#side1 { width:200px; float:left;
padding: 0 10px 0 10px;
}
#side2 {
width: 190px;
padding: 80px 10px 0 10px;
float:right;
}
#footer {
clear:both;
border-top: 10px solid #CECECE;
}
Как видно на рис. 9.46, при использовании такой таблицы стилей ко- лонки располагаются именно так, как было задумано, а нижний блок размещается прямо под всеми тремя колонками. Аналогичным обра- зом можно создать и макет, состоящий из двух колонок: их порядок можно изменить путем изменения значения свойства float с left на right. Если вы немного поэкспериментируете с кодом, то добьетесь не- обходимого расположения элементов, даже если поначалу кажется, что эти действия совсем не логичны.
Рис. 9.46. Все колонки расположены в предназначенном для них месте
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
Похожие посты:
- Специалист или многопрофильность (0)
- Позиционирование блока с контентом (0)
- Изменение расположения элементов макета на противоположное, чтобы меню было справа (0)
- Макет фиксированной ширины с двумя колонками по центру страницы (0)
- Создание макета с тремя колонками средствами CSS (0)
- Создание макета страницы с помощью CSS-таблиц (0)
- Тег <map> (0)