Работает система Orphus

WordPress для каждого на русском языке!

  • RSS

Учебник по WordPress

Полезные советы

Хитрости

Шоукейс

О проекте

Темы WordPress на русском!

Эволюция пользовательского интерфейса WordPress (2003 – 2009)

Четверг, 14 января 2010 - Рекомендуем, Статьи и советы

WordPress каким мы видим его сейчас – это продукт любви, которой наградило его сообщество. Без идей, пожеланий, рекоммендаций и советов пользователей и тяжелой работы команды разработчиков, которая воплощала это всё в жизнь, из него никогда бы не получилось того, что есть сейчас. Сегодня WordPress предстает перед нами мощной полноценной CMS, подходящей почти под любые нужды. [...]

читать дальше

Продвинутые советы по разработке сайтов на WordPress

Понедельник, 27 июля 2009 - Рекомендуем, Статьи и советы

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

читать дальше

5 полезных и оригинальных способов использования виджетов в WordPress

Четверг, 16 июля 2009 - Рекомендуем, Статьи и советы

Если вы создали хотя бы несколько сайтов на WordPress, то вы наверняка уже знаете, что WordPress это гораздо больше, чем просто блоггинговый движок. Он может быть также использован как и CMS, а виджеты WordPress – это мощный инструмент в арсенале WP-разработчика.

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

читать дальше

Урок №20 Использование Width и Float

Среда, 30 сентября 2009 - Создание тем

В этом уроке я расскажу вам, как устанавливать параметр 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:

#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:

#header{
float: left;
width: 750px;
}

Шаг 4

Добавьте выравнивание по левому краю для Контейнера, и задайте ширину 500px:

#container {
float: left;
width: 500px;
}

Шаг 5

Добавьте выравнивание по левому краю для Сайдбара, и задайте ширину 240px и серым фоном (10 пикселей не хватает; я знаю):

.sidebar {
float: left;
width: 240px;
background: #eeeeee;
}

Заметьте, вы не использовали хэш, чтобы обратиться к DIV-тэгу Сайдбара; вы использовали точку. Также,  background: #eeeeee; - светло-светло серый. Мы добавили фоновый цвет для Сайдбара, просто чтобы увидеть разницу, когда позже добавите недостающие 10рх.

Шаг 6

Добавьте выравнивание по левому краю и clear both (чтобы очистить привязку к выравниванию остальных элементов) для Футера, с шириной 750px:

#footer {
clear: both;
float: left;
width: 750px;
}

Какая разница между стилями Хедера и Футера? Ответ – наличие clear: both; в footer{}. Это для того, чтобы убедиться, что Футер не присоединиться ни к чему над ним и под ним, например, к Сайдбару или Контейнеру.

Сохраните style.css и обновите браузеры.

Шаг 7

Добавьте недостающие 10рх к Сайдбару, используя margin. Сейчас код стиля для Сайдбара выглядит так:

.sidebar {
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
}

Сохраните файл и обновите окно, чтобы увидеть серый промежуток в 10 пикселей слева в Сайдбаре. margin: 0 0 0 10px; значит 0 верхний, 0 правый, 0 нижний, 10px левый отступ. Когда размер равен 0, суффикс рх не нужен.

Всё получилось и работает?

Тогда на сегодня все. Если у вас есть вопросы, не стесняйтесь – задавайте. Мы здесь еще и чтобы помогать, а не только писать уроки.

Перейти к следующему уроку »

16 комментариев

  1. Оля пишет:

    А как на счет резинового дизайна как переделать эти пикселы в проценты?

  2. khlyupin пишет:

    margin: 0 auto 0 auto; равносильно margin: auto;
    как и margin: 10px auto 10px auto; равносильно margin: 10px auto;

    экономим байты товарищи! :-)

    • wp-admin пишет:

      khlyupin, спасибо за совет. Думал сначала не усложнять уроки ньюансами CSS, но может действительно будет полезно и этот аспект уточнить на будущее.

  3. alex пишет:

    вопрос:
    значит создаю обрамляющий все div после body и закрываю его перед body. Но так получается что он создается плавающим вроде..короче он сзади текста..я просто хотел его сделать одним цветом и шириной допустим той же 750, а остальная область которая шире 750 чтобы была закрашена другим цветом(этот цвет указал в css в body)
    Короче обрамил я его в рамку, чтобы увидеть где он находится – это небольшая область за хэдером..не подскажете что не так? Дивы все закрыл..все вроде норм.

  4. Ученик пишет:

    Что то с 7 шагом … затык. Вставляю пятую строку с 10 рх, и ни чего не меняется….

  5. alex пишет:

    Разобрался со своей проблемой. Не знаю даже ошибся я или здесь немного неточности, но в итоге помогло видео о блочной верстке сайта. http://www.zvirec.com/view_post.php?id=43

  6. Алексей пишет:

    Хочу попросить помощи.
    Не могу найти как расширить контейнер и сайдбары. Точнее сайдбары расширяются без проблем, но начинаются не “с начала” а с определенным отступом. От него и не могу отделаться.
    Сайт с ситуацией указан в соответствующем полу. Простите за серость и буду рад помощи.

  7. Roksana пишет:

    У меня проблема с расположением и фоном – wrapper, который в принципе должен охватывать всю страницу (если судить по его размещению) категорически не хочет ставить фонову картинку, которая бы была фоном для всех остальных блоков. Причём при параметре float:left фон появляется, однако стоит поставить float:none, как фон снова исчезает… Уже измучилась решение искать, все поисковики перерыла – либо не то, либо не помогает… А время поджимает, тему уже пора бы доделывать… Помогите пожалуйста…

  8. Артем пишет:

    У меня футер все равно к сайтбару цепляется, хотя все сделал как написанно

  9. фотоблог пишет:

    У меня всё получилось!

  10. Евгений пишет:

    Еле заметил, что у div c id = “wrapper” – двойные кавычки, а то бы не получилось )) Будьте внимательны, коллеги!

  11. Андрей пишет:

    У меня такая же проблема как и у Roksana. Фон wrapper не хочет меняться в Opera, его закрывает фон body.И правда: если к wrapper применишь float:left;, то фон появляется, а иак исчезает. Хотя в IE6 всё получается… Помогите разобраться…

  12. David пишет:

    Евгений СПАСИБО ОГРОМНОЕ.

    Люди у div c id = “wrapper” – двойные кавычки,

    сами додумайте что дальше

  13. WebLaoban пишет:

    Артем, поставьте в css перед футером точку, потому что в индексе у нас футер – класс, а не айди
    .footer{

  14. Максим пишет:

    Несмотря ни на что. Пишу: margin: 0 auto
    А сайт остается слева. Как же его сделать по центру? Деляю все в точности по тексту, а не выходит. Может есть идеи?

Ваш комментарий

Этот домен продается здесь: telderi.ru, и еще много других