GeneticsPro
- Главная
- Обзор
- Продукция
- Инструменты
- FAQ
- Downloads
Статьи, материалы, руководства, учебники о web-разработке и web-дизайну.
Было бы очень неплохо, если б ширина всех контейнеров, кроме одного (а именно основного содержимого), была задана жестко, а оставшийся один контейнер сам подгонял свою ширину под размер окна Web-обозревателя. Но как это сделать?
Создадим новую страницу и сохраним ее под именем default.htm (или под любым другим именем). Поместим на страницу наш первый контейнер, который будет содержать заголовок сайта, введем в него текст заголовка и отформатируем его.
<div class="header">
<h1>Сайт студента Васильева В. В.</h1>
</div>
Создадим для него стилевой класс под именем header, поместим его во внешнюю таблицу стилей styles.css (или разместим классы в документе .htm) и зададим для него такие параметры:
.header {
width: 100%; /* поскольку мы делаем Web-дизайн, который будет подстраиваться под ширину окна Web-обозревателя */
float: left;
}
Привяжем готовый стилевой класс к заголовку сайта. После этого создадим второй контейнер, который станет разделителем.
<div class="spacer"> </div>
Стилевой класс, который мы к нему привяжем, будет называться spacer, и будет содержать всего один параметр:
.spacer {
clear: both;
}
Теперь создаем очередной контейнер и помещаем в него набор гиперссылок.
<div class="nav">
<p><a href="#"> Главная</a></p>
<p><a href="#">Увлечения</a></p>
<p><a href="#">Статьи</a></p>
<p><a href="#">Юмор</a></p>
<p><a href="#">Обо ине</a></p>
</div>
Стилевой класс этого контейнера — nav:
.nav {
width: 80px;
float: left;
padding: 5px;
border: thin solid #000;
}
Здесь мы сразу включили в стиль рамки и отступы, чтобы потом не делать никаких исправлений.
На очереди — контейнер с основным содержимым.
<div class="main">
<h3>Здравствуйте! Здравствуйте! Здравствуйте!</h3>
<p>Будем знакомиться. Я - студент Васильев Василий Васильевич, для друзей - просто Василий. Я учусь в институте, а в свободное время занимаюсь Web-дизайном.</p><hr />
<p>На моём сайте вы можете найти следующее:</p>
<ul>
<li>список моих увлечений;</li>
<li>статьи, найденные мной в Интернете;</li>
<li>студенческий юмор;</li>
<li>сведения обо мне.</li>
</ul>
</div>
Его стилевой класс main будет иметь несколько другие параметры:
.main {
width: 100%; /* это обязательно! */
float: right; /* мы заставляем этот контейнер сдвинуться к правому — противоположному краю страницы */
margin-left: -104px;
padding: 5px;
}
Последний параметр задаёт отступы в 5 пикселей, оставим его в покое и обратим внимание на первые три параметра.
Итак, первым же делом мы задаем ширину контейнера, который собираемся сделать саморастягивающимся, в 100%. Понятно, что этот контейнер будет растягиваться на всю ширину окна Web-обозревателя. Также понятно, что он будет сдвинут к правому краю окна (см. второй параметр).
Третьим параметром мы задаем отступ слева в -104 пикселя. Во-первых, откуда взялась величина 104? Это просто сумма ширины контейнера набора гиперссылок (80 пикселей), четырех отступов (5 пикселей * 4 стороны = 20 пикселей) и двух значений толщины рамки (2 пикселя * 2 стороны = 4 пикселя). Но, во-вторых, почему минус?
Дело в том, что Web-обозреватель, встретив отрицательное значение отступа, посчитает его свободным пространством и постарается «впихнуть» туда предыдущий контейнер (или следующий, если отрицательный отступ задан справа). Причем это срабатывает только тогда, когда отступ задан с помощью параметра margin (расстояние между воображаемой границей элемента страницы и соседним элементом).
Давайте посмотрим, что у нас получилось. Сохраним страницу и таблицу стилей и вызовем окно Web-обозревателя.
Если мы изменим размеры окна Web-обозревателя, созданный нами саморастягивающийся контейнер тоже изменит свою ширину. А ширина контейнера с набором гиперссылок останется неизменной. А ведь это то, что нам нужно!
Одна только беда — эти контейнеры накладываются друг на друга. Надо как-то их "развести". Проще всего сделать это, поместив контейнер с основным содержимым в другой контейнер и задав для него значение Margin: Left равным 104, т.е. таким же, только положительным. Ищем код, определяющий основное содержимое, и вставляем код, создающий новый контейнер. Вот что мы должны получить после этого (вставленный нами код выделен полужирным шрифтом):
<div class="main">
<div class="main1">
<h3>Здравствуйте! Здравствуйте! Здравствуйте!</h3>
…
<li>сведения обо мне.</li>
</ul>
</div>
</div>
Видно, что мы привязали к новому контейнеру стилевой класс main1, который пока не существует. Создадим его и зададим для него единственный параметр.
.main1 {
margin-left: 104px;
}
Вот теперь все в порядке.
Следующим нашим шагом будет создание контейнера с колонкой новостей. И здесь мы столкнемся с новой проблемой. Дело в том, что, в одной линии плавающих контейнеров, содержащей саморастягивающийся контейнер, может нормально существовать только один контейнер с жестко заданной шириной. То есть, если мы создали в одной линии один саморастягивающийся контейнер и один контейнер с жестко заданной шириной (неважно — в пикселях или процентах), то третий контейнер с заданной шириной мы добавить в эту линию не сможем. В одной линии плавающих контейнеров, содержащей саморастягивающийся контейнер, мы можем создать сколько угодно контейнеров с заданной шириной — стандарты HTML и CSS это допускают. Проблема в другом: Web-обозреватели будут обрабатывать эту конструкцию как им заблагорассудится.
Что же нам делать? Выход довольно прост: мы поместим только что созданные контейнеры набора гиперссылок (с жестко заданной шириной) и основного содержимого (саморастягивающийся) в другой контейнер, который тоже сделаем саморастягивающимся. А уже к этому-то контейнеру мы приделаем, справа контейнер с колонкой новостей, для которого зададим ширину жестко.
Находим код, определяющий набор гиперссылок и основное содержимое, и вставляем теги <div>, создающие новый контейнер. Результат наших правок показан ниже (добавленный код выделен полужирным шрифтом):
<div class="wrapper">
<div class="wrapper1">
<div class="nav">
<p><a href="#">Главная</a></p>
…
<div class="main">
<div class="main1">
<h3>Здравствуйте! Здравствуйте! Здравствуйте!</h3>
…
<li>сведения обо мне.</li>
</ul>
</div>
</div>
</div>
</div>
Мы поместили контейнеры с набором гиперссылок и основным содержимым не в один контейнер, а последовательно в два. Эта конструкция нужна нам для того, чтобы потом устранить наложение основного содержимого на колонку новостей (об этом мы говорили выше). К этим контейнерам мы привязали стилевые классы wrapper и wrapper1. Стилевой класс wrapper будет иметь параметры:
.wrapper {
width: 100%; /* поскольку он саморастягивающийся */
float: left; /* он должен находиться левее колонки новостей */
margin-right: -114px;
}
Все это нам уже знакомо по контейнеру с основным содержимым. Только теперь мы прижимаем его не к правому краю окна Web-обозревателя, а к левому и соответственно оставляем свободное место для нового контейнера.
Ширина его будет составлять 100%, поскольку он саморастягивающийся. Float – слева, потому что он должен находиться левее колонки новостей. Отступ справа -114 пикселей — это сумма ширины контейнера колонки новостей (100 пикселей), двух отступов, заданных в третьем контейнере (5 пикселей * 2 стороны = 10 пикселей) и двух значений толщины рамки, заданных у него же (2 пикселя * 2 стороны = 4 пикселя).
Что касается стилевого класса wrapper1, все уже, наверное, догадались, каков будет его единственный параметр:
.wrapper1 {
margin-right: 114px;
}
Не отвлекаясь от просмотра получившегося — нечего пока там смотреть, — приступаем к созданию третьего контейнера — с колонкой новостей.
<div class="news">
<p><strong>Новости</strong><br />
<em>29.08.2005</em></p>
<p>Сегодня я начал делать этот сайт!</p>
<p><a href="#">Архив >></a></p>
</div>
Привязываем к нему стилевой класс news, чьи параметры будут такими:
.news {
width: 100px;
float: right;
border: thin solid #000;
padding: 5px;
}
Вот теперь можно вызвать Web-обозреватель и полюбоваться на наше творение.
Осталось создать еще один разделитель и последний контейнер, содержащий сведения об авторских правах. С разделителем проблем у нас не будет — он создается так же, как первый.
<div class="spacer"> </div>
<div class="copyright">© Васильев В. В.<br />
Цитирование опубликованных на сайте материалов без разрешения автора не допускается.
</div>
А вот стилевой класс copyright, привязанный к контейнеру сведений об авторских правах, будет иметь такие параметры:
.copyright {
float: left;
width: 100%;
}
Вот и все. Можно снова вызвать Web-обозреватель, изменить размер его окна и посмотреть, что из этого получится.
Мы сделали Web-дизайн, основанный на контейнерах, который подстраивается под размеры окна Web-обозревателя. Это значит, что мы вполне можем обойтись без громоздких и запутанных таблиц.
Подпишитесь на рассылку новостей сайта 'D-G-S'.ru!
