Сегодня: 26 апреля 2024 г., пятница Время:

Online-учебник по CSS

Автор учебника: Евгений Андросов

Урок 13. Создаем "поплавки"

Поплавки – элементы, которые могут «всплывать» вправо или влево с помощью свойства "float". Это один из немногих примеров, когда при переводе на русский язык этому свойству так и не смогли подобрать точного определения. Поэтому термин часто вызывает путаницу и непонимание в головах начинающих. Чтобы было проще понять, я определяю это свойство не «всплыванием», а заниманием элемента отведенного ему места на странице. Немного коряво звучит, зато понятнее и точнее.

Вот простой пример использования этого свойства.

HTML-код:

CSS-код:

#image {
float:left;
width: 300px;
}

Смотрим

Рисунок в этом примере «всплывает» или, проще говоря, занимает место слева, а текст обтекает его с правой стороны.

Кроме того, с помощью свойства "float" можно разбить текст на колонки. Раньше это можно было сделать только с помощью обычных таблиц. Колонки сайта размещались в соответствующих столбцах. Сейчас все чаще это делают с помощью CSS и свойства "float".

Вот большой, громоздкий пример, но очень полезный для разбора в учебных целях, поэтому, пожалуйста, отнеситесь к нему с вниманием:

HTML-код:

<div id="footer">
<div id="footer-content">
<div class="col float-left">
<h3>Сайты партнеров</h3>
<ul>
<li><a href="http://www.freeadvice.ru/"><strong>"Бесплатные советы".</strong> " - все об Интернете</a></li>
<li><a href="http://www.an24.ru/"><strong>"Ан-24"</strong> - агентство копирайтинга</a></li>
<li><a href="http://community.livejournal.com/oldphoto_ru/""><strong>"Старые фотографии"</strong></a></li>
</ul>
</div>
<div class="col float-left">
<h3>Полезные ссылки</h3>
<ul>
<li><a href="http://www.rosleshoz.gov.ru/"><strong>ФА Леского хозяйства</strong></a></li>
<li><a href="http://www.mnr.gov.ru/"><strong>Мин природных ресурсов и экологии РФ</strong></a></li>
<li><a href="http://www.spindle.ru/"><strong>Портал ЛПК России</strong></a></li>
</ul>
</div>
<div class="col2 float-right">
<p> © Copyright 2008 <strong> ООО "Конквистадорс"</strong><br />
Дизайн: <a href="http://blog.freeadvice.ru"><strong>Евгений Андросов</strong></a>     </p>
<ul>
<li><a href="index.php"><strong>Домой</strong></a></li>
<li><strong>Карта сайта</strong></li>
</ul>
</div>
</div>
</div>

CSS-код этого фрагмента:

#footer {
clear: both;
margin: 0; padding: 0;
font: normal .95em/1.5em 'Trebuchet MS', Tahoma, Arial, sans-serif;
text-align: left;
}
#footer h3, #footer p {
margin-left: 0;
}
#footer-content {
border-top: 1px solid #EAEAEA;
margin: 0 auto;
padding-left: 15px;
}
#footer-content a {
text-decoration: none;
color: #777;
}
#footer-content a:hover {
text-decoration: underline;
color: #333;
}
#footer-content ul {
list-style: none;
margin: 0; padding: 0;
}
#footer-content .col {
width: 33%;
padding: 0 5px 30px 0;
}
#footer-content .col2 {
width: 32%;
padding: 0 0 30px 0;
}
.float-left { float: left; }
.float-right { float: right; }
.align-left { text-align: left; }
.align-right {     text-align: right; }

Довольно сложный код, однако он многому может научить.

Не поленитесь, хорошенько изучите его. Я специально даю большие примеры из своих конкретных работ. На них вы сможете не только научиться понимать код, но и буквально использовать этот код в своей дальнейшей работе, видоизменяя его по своему вкусу.

Лично я так и делал: получив начальные сведения о CSS из видео курса Евгения Попова, в дальнейшем я скачивал бесплатные CSS-шаблоны, созданные настоящими профессионалами (вы тоже можете это сделать в разделе CSS этого сайта) и разбирал сложный, но интересный код. Многое из этого использовал потом в работе.

Если что-то непонятно в приведенном коде, не стесняйтесь - спрашивайте, используя форму в конце урока.

Предыдущий урок | К началу урока | К оглавлению | Следующий урок

Непонятно? Есть вопросы?
Задайте их прямо сейчас и получите ответ автора учебника!

Комментарий добавил(а): Николай (medvedk_na@mail.ru)
Дата: 03.05.2011

Как понять вот такие записи CSS? * html #coolmenu{ width: 150px; } и html>body #coolmenu a{ width: auto; } Заранее благодарен и вообще спасибо за Вашу полезную инициативу.

Комментарий добавил(а): StasZah
Дата: 05.12.2011

* означает любой селектор, соответственно * html означает что html в данном случае является потомком любого селектора. html>body означает тег body непосредственно вложенный в тег html (так называемые "дети")

Задать вопрос

Имейте, пожалуйста, ввиду, что любые ссылки, html-теги или скрипты, будут выводиться в виде обычного текста - бессмысленно их использовать. Вопросы, содержащие мат и оскорбления, будут немедленно удалены.