Блочная верстка | Урок 8

w3c

Продолжаем верстать наш Правильный и соответствующий самым строгим рекомендациям консорциума W3C сайт. Наш девиз — Идеальный XHTML и Кристально Чистый CSS! Шутка.

Сегодня мы практически соберём всю Главную страницу целиком.

Останется потом только кой-чего подправить и приукрасить.

Открываем нашу страничку index.html. Находим вот это место:

……….<li><a href="#">Васёк</a></li></ol></div><img class="line" src="/line.gif" alt="" />

и следом сразу вставляем вот этот кусочек:

</div><div id="news"><h3>Самые распоследние новости:</h3><ul><li>Всю прошедшую неделю лил жуткий дождь, и полёты временно приостановились. Самые безбашенные пиггасы, однако, всё равно кучковались стаями на проводах местной радиолинии и дружно создавали помехи. Малаццы!</li><li>Пиггас Хмурый Пятак снова хмурый. Обещал всех урыть. Злой сильно.</li><li>У нашего друга Боббса завтра ДР! Поздравления и подарочки просил вручать возле новой будки и непременно на виду у соседскогопса Мухомора, чтобы тому завидно стало. Пляски намечаются до самогоутра. При наличии на небе луны — будет весело.</li></ul></div><div class="clearfloat"></div>

Что мы тут видим? Во-первых, закрывающий тэг </div>, который показывает, что область основного текста закончилась. Далее идёт маркированный список новостей с заголовком 3-го уровня (h3).

 

В самом низу мы добавили “очистку обтекания” — clearfloat (для неё также в листе стилей пропишем свои правила, а именно очистку с обоих сторон). Для чего это? Вообще наша вёрстка является “плавающей“. Вон сколько у нас уже обтекаемых элементов. При этом разные браузеры по- разному воспроизводят такую вёрстку (о том, что IE по-своему “видит” поля и отступы уж и не говорю). В Opera и Firefox можно было бы обойтись и без очистки и сразу ниже писать код футера. Но в IE в таком случае появляются странные подёргивания фона у футера при наведении на ссылки мышки. Браузер словно хочет подпрыгнуть и заполнить все пустующие места какие есть. Поэтому мы просто добавим эту строчку и не станем заморачиваться.

А теперь открываем наш лист стилей и допишем следующий код:

#news { background: #ffc; width: 185px; color: #665; margin: 10px 5px; float: right;}#news h3 {color: #f60;font-size: 120%;font-weight: bold;text-align: center;}#news ul {list-style: url(marker.jpg) inside;}#news li {font-size: 75%;padding: 5px 10px;}

Здесь мы для начала поменяли фон для блока новостей, чтобы визуально отделить колонку от основного содержимого. Затем задали ширину блока, цвет для шрифта и обтекание справа. С заголовком получилось хитро. Если вернуться чуток назад, то можно заметить, что у заголовка 2-го уровня (у списка учаснегов), также задан размер шрифта в 120%.

 

Вообще по-умолчанию браузеры сами определяют размеры для заголовков в зависимости от их ранга. То есть по логике вещей, заголовок 3- го уровня должен быть мельче 2-го. А у нас наоборот! Это произошло потому, что заголовок списка учаснегов находится в блоке основного текста, для которого мы задали размер всего шрифта в 0.8em.

Следующим правилом мы задали для списка стиль маркеров. По- умолчанию любой браузер отображает маркеры в виде чёрных кружков. Но можно задать и другое отображение — окружностей, квадратов, без маркеров, или вообще свой собственноручно нарисованный маркер. Как раз так мы и поступили. Нарисовали симпатишную зелёную галку с размерами

14х17 пикселей и указали в стиле ссылку на неё — url(marker.jpg). Следом приписали слово inside. Что это значит? Маркеры по-умолчанию не входят в сам блок текста. Когда мы задаём поля для текста, то маркеры не слушаются и вылезают за края. Это не всегда есть гут. Поэтому мы принудительно

указали им быть inside, то есть внутри колонки с текстом.

Сохраняемся и смотрим, что вышло!

Добавить комментарий


Защитный код
Обновить

Комментарии

Реклама