- •Урок №2. Шаблоны и файлы шаблона.
- •Урок №3 Начинаем index.Php
- •Шаг 5. Файл стилей.
- •Шаг 6. Установка вашей темы.
- •Урок №4. Шаблон хедера.
- •Урок №7. Контент.
- •Урок №12. Работа с ссылками на страницы (wp_list_pages).
- •Урок №17. Валидация темы – проверка и подтверждение.
- •Урок №20 Использование Width и Float
- •Пояснения:
- •Всё получилось и работает?
Урок №20 Использование Width и Float
В этом уроке я расскажу вам, как устанавливать параметр width (ширину) для каждого DIV-а и как вообще управлять им. Также мы рассмотрим некоторые аспекты отображения вашей темы одинаково правильно в основных браузерах: как в Mozilla Firefox так и в Opera, Chrome и Internet Exlporer 7 и выше. Я намеренно игнорирую Internet Explorer 6, так как являюсь противником этого браузера из-за массы его недостатков, включая отсутствие поддержки современных стандартов.
Шаг 1
Первое, что вам надо сделать – это решить, какой будет общая ширина вашей темы. Давайте для нашей темы будем использовать 750px (750 пикселей). Ширина темы зависит от мониторов и настроек экрана большинства посетителей вашего блога. Избегайте устанавливать ширину темы, например в 1100px, если ваша аудитория в основном использует разрешение экрана 1024х768 px, так как ваша тема просто не поместится у них на экране.
Как же ограничить общую ширину до 750px?
Необходимо, чтобы все поместилось внутри DIV-блока шириной 750px. Под “всем” подразумевается: хедер, контейнер, сайдбар и футер.
Добавьте: <div id=”wrapper”> после <body> Добавьте: </div> перед </body>
Вставьте в style.css:
?
1 2 3 4 5 |
#wrapper { margin: 0 auto 0 auto; width: 750px; text-align: left; } |
В CSS, особенно в style.css, символ хэш (#) это способ присвоения DIV-тэгу ID. Точка – способ присвоения DIVу класса. Например, в случае с классом, если нужен код <div class=”wrapper”> , используйте .wrapper вместо #wrapper чтобы применить параметры к DIV-тэгу wrapper. ID можно использовать только один раз на странице. Сохраните файлы index.php и style.css. Обновите браузеры чтобы отобразились изменения.
Пояснения:
margin: 0 auto 0 auto; Означает соответственно, верхний марджин 0, авто правый марджин, нижний марджин 0, и левый авто марджин. Пока что, запомните только, что значение параметра “авто” значит размещение по центру;
width: 750px; определяет ширину DIV в 750 пикселей;
text-align: left; выравнивает текст по левому краю внутри DIV-а wrapper, потому что нам нужно поменять text-align: left; указанный для всего Body на text-align: center; для конкретного дива;
Шаг 3
Добавьте выравнивание по левому краю для Хедера, и задайте ширину 750px:
?
1 2 3 4 |
#header{ float: left; width: 750px; } |
Шаг 4
Добавьте выравнивание по левому краю для Контейнера, и задайте ширину 500px:
?
1 2 3 4 |
#container { float: left; width: 500px; } |
Шаг 5
Добавьте выравнивание по левому краю для Сайдбара, и задайте ширину 240px и серым фоном (10 пикселей не хватает; я знаю):
?
1 2 3 4 5 |
.sidebar { float: left; width: 240px; background: #eeeeee; } |
Заметьте, вы не использовали хэш, чтобы обратиться к DIV-тэгу Сайдбара; вы использовали точку. Также, background: #eeeeee; — светло-светло серый. Мы добавили фоновый цвет для Сайдбара, просто чтобы увидеть разницу, когда позже добавите недостающие 10рх.
Шаг 6
Добавьте выравнивание по левому краю и clear both (чтобы очистить привязку к выравниванию остальных элементов) для Футера, с шириной 750px:
?
1 2 3 4 5 |
#footer { clear: both; float: left; width: 750px; } |
Какая разница между стилями Хедера и Футера? Ответ – наличие clear: both; в footer{}. Это для того, чтобы убедиться, что Футер не присоединиться ни к чему над ним и под ним, например, к Сайдбару или Контейнеру.
Сохраните style.css и обновите браузеры.
Шаг 7
Добавьте недостающие 10рх к Сайдбару, используя margin. Сейчас код стиля для Сайдбара выглядит так:
?
1 2 3 4 5 6 |
.sidebar { float: left; width: 240px; background: #eeeeee; margin: 0 0 0 10px; } |
Сохраните файл и обновите окно, чтобы увидеть серый промежуток в 10 пикселей слева в Сайдбаре. margin: 0 0 0 10px; значит 0 верхний, 0 правый, 0 нижний, 10px левый отступ. Когда размер равен 0, суффикс рх не нужен.