Позиционирование

Типы вёрстки

Эта страница создана для изучения различных типов вёрстки сайтов. Применил здесь сразу ДВА возможных типа: табличная и блочная.
Не стал убирать вспомогательные линии - так лучше видны границы таблиц и блоков. Все основные настройки смотреть в прикреплённой таблице стилей. Прокомментировал очень подробно!

Структура страницы

Всё сделано внутри ГЛАВНОЙ ТАБЛИЦЫ с id="content". Она обёрнута в ОБЩИЙ блок id="wrapper", который служит лишь ограничителем.
Весь сайт в блоке с идентификатором id="proba". У него толстая чёрная рамка.

Рисунок хедера "повесил" на тэг <h1> (он первый после открытия блока). В этом отличие данной страницы от большинства других веб-страниц моего сайта.
Там обычно "вешаю" его просто на ГЛАВНУЮ ТАБЛИЦУ с id="content".

Важно!

Если в главной таблице, в тэге <td> НЕ прописать атрибут valign="top", то она будет начинать отображать посередине страницы.
Это логично! Такие у БРЗ (браузеров) настройки таблиц "по умолчанию".

Пример отображения в таблице
ТЕСТОВАЯ СТРОКА В ТАБЛИЦЕ

Отступы* абзацам от рамки давать через padding, т.к. padding-и НЕ КОНФЛИКТУЮТ, и оставляют "в покое" внешние отступы. Не происходит "странностей", которые были в нижнем примере цветного блока.

Padding

Здесь тренируюсь в использовании padding-ов (внутренних отступов у блоков).

Встроенные блоки

Пример нижнего цветного блока состоит из 4-ёх блоков. Одного (серого) общего, и 3-ёх встроенных в него. Серому блоку высота (только высота!) задана немного больше.

Внутренние цветные блоки имеют свойство float:left, а общий серый блок position:relative.

Если НЕ уменьшать размеры блоков после добавления внутренних отступов, они начинают "разбухать", и НЕ умещаются в отведённое им место.

У этого блока левый внутренний отступ 30 пикс; соответственно его общую ширину на столько же уменьшил!

И вот у этого ОБЩЕГО СЕРОГО блока ширина тоже "разбухла" на 40px после задания внутренних правого и левого отступов по 20px.
И, хотя его ширина прописана 600px, но реально она стала 640px.
Но! Если её уменьшить, то внутренние блоки перестают умещаться. Просто, учитывать такое!

**Пробовал дать ему (как вроде бы положено) 560px, но СЕРЫЙ ОБЩИЙ блок становился гораздо меньше, что логично. Короче, получалась ЕРУНДА!

Позиционирование рисунков и текста

Нижние рисунок и текст спозиционированы с помощью правила CSS position:absolute, т.к. "плавают" внутри ОБЩЕГО блока сайта с id="proba", а ему я прописал position:relative.
Отступ от картинки и текстового блока сделал обычными тэгами <br>. Просто, ... ... так проще.

Однако! Всё же видна небольшая разница в отображении примера разными БРЗ (браузерами).

Этот текст написан в коде HTML, но спозиционирован с помощью CSS внутрь этого серого блока.
Текстовой блок имеет position:absolute, и "плавает" внутри своего блока-родителя у которого тоже position:absolute.
Родителю на всякий случай (если текст не уместится) дал свойство overflow:hidden.

Чёрную вспомогательную рамку убирать не стал.

Важно!

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

* * *

Ну, а здесь, ниже (в коде HTML) прописан блок с ЛОГОТИПОМ. Спозиционировал его, как position:absolute относительно ВЕРХНЕЙ чёрной ГРАНИЦЫ сайта.
Поэтому, хоть и прописан он здесь, в самом низу, однако отображается в самом верху, как ему сказано в таблице стилей CSS.

Тэг вложенной ссылки указывать в коде CSS обязательно! Иначе НЕ работает!

* * *

Много писать здесь (в низу страницы) не буду.
Надоело корректировать позиционирование серого текстового блока ... ... . Он у меня "гулящий"!

Можно, конечно, было сделать по-другому, но пусть останется так. Как пример того, чего НЕ нужно делать.

ВВЕРХ