Лекция
Привет, сегодня поговорим про wordpress 20 использование width, обещаю рассказать все что знаю. Для того чтобы лучше понимать что такое wordpress 20 использование width, float , настоятельно рекомендую прочитать все из категории Системы управления контентом CMS.
В этом уроке я расскажу вам, как устанавливать параметр width (ширину) для каждого DIV-а и как вообще управлять им. Также мы рассмотрим некоторые аспекты отображения вашей темы одинаково правильно в основных браузерах: как в Mozilla Firefox так и в Opera, Chrome и Internet Exlporer 7 и выше. Я намеренно игнорирую Internet Explorer 6, так как являюсь противником этого браузера из-за массы его недостатков, включая отсутствие поддержки современных стандартов.
Первое, что вам надо сделать – это решить, какой будет общая ширина вашей темы. Давайте для нашей темы будем использовать 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. Обновите браузеры чтобы отобразились изменения.
Добавьте выравнивание по левому краю для Хедера, и задайте ширину 750px:
|
1
2
3
4
|
#header{float: left;width: 750px;} |
Добавьте выравнивание по левому краю для Контейнера, и задайте ширину 500px:
|
1
2
3
4
|
#container {float: left;width: 500px;} |
Добавьте выравнивание по левому краю для Сайдбара, и задайте ширину 240px и серым фоном (10 пикселей не хватает; я знаю):
|
1
2
3
4
5
|
.sidebar {float: left;width: 240px;background: #eeeeee;} |
Заметьте, вы не использовали хэш, чтобы обратиться к DIV-тэгу Сайдбара; вы использовали точку. Об этом говорит сайт https://intellect.icu . Также, background: #eeeeee; — светло-светло серый. Мы добавили фоновый цвет для Сайдбара, просто чтобы увидеть разницу, когда позже добавите недостающие 10рх.
Добавьте выравнивание по левому краю и clear both (чтобы очистить привязку к выравниванию остальных элементов) для Футера, с шириной 750px:
|
1
2
3
4
5
|
#footer {clear: both;float: left;width: 750px;} |
Какая разница между стилями Хедера и Футера? Ответ – наличие clear: both; в footer{}. Это для того, чтобы убедиться, что Футер не присоединиться ни к чему над ним и под ним, например, к Сайдбару или Контейнеру.
Сохраните style.css и обновите браузеры.
Добавьте недостающие 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, суффикс рх не нужен.
Тогда на сегодня все. Если у вас есть вопросы, не стесняйтесь – задавайте. Мы здесь еще и чтобы помогать, а не только писать уроки.
На этом все! Теперь вы знаете все про wordpress 20 использование width, Помните, что это теперь будет проще использовать на практике. Надеюсь, что теперь ты понял что такое wordpress 20 использование width, float и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Системы управления контентом CMS
Из статьи мы узнали кратко, но содержательно про wordpress 20 использование widthОтветы на вопросы для самопроверки пишите в комментариях, мы проверим, или же задавайте свой вопрос по данной теме.
Комментарии
Оставить комментарий
Системы управления контентом CMS
Термины: Системы управления контентом CMS