Websovet - блочная верстка веб сайтов, HTML, CSS, jQuery и WordPress

17.11.2009 | Рубрики: WordPress | Комментарии (35)
Тэги: css, WordPress, тэг more

За идею поста спасибо читателю блога Вебсовет Михаилу. Тема на самом деле довольно интересная. Когда-то я тоже застрял на этом моменте и долго искал внятный способ решения. Речь идет о визуальном оформлении ссылки типа “читать далее…” в блоге на движке Wordpress. Данная ссылка появляется внизу анонса поста, если автор решил убрать под кат основное содержимое статьи.

Зачастую эта самая ссылка не слишком заметна. Специально ее искать будет лишь тот, кто сообразит, что статья не закончилась на втором-третьем абзаце, и есть там что-то еще. Чтобы как-то выделить данную ссыль, нужно ее соответствующим образом оформить. Но как это грамотно сделать? Ведь если заглянуть в код большинства шаблонов Wordpress, то можно обнаружить, что текст данной ссылки как бы “зашит” в php-код вывода статьи. Вот в таком, например, виде:

<?php the_content('Читать далее... »'); ?>

Читать полностью →

10.11.2009 | Рубрики: Верстка | Комментарии (2)
Тэги: tabs, Верстка, табы

Меню в виде закладок, или выражаясь по буржуйски — табы (tabs), обычно изготавливают с применением различных фоновых картинок. Однако можно вполне обойтись и обычным набором правил в файле CSS. Особенно данный способ понравится любителям минимализма. Как говорится — дешево и сердито просто и со вкусом!

Принцип построения такого меню также достаточно прост. Идея в следующем: всему блоку меню задается нижний бордер толщиной в 1 пиксель какого-либо цвета. Далее каждому пункту списка задается таким же цветом верхний и оба боковых бордера. А нижнему задаем цвет, совпадающий с цветом фона. В нашем случае белый.

#menu {
list-style-type: none;
border-bottom: 1px solid #999;
}
#menu li {
display: inline;
padding: 5px 5px 0;
margin: 0 10px 0 0;
border-top: 1px solid #999;
border-left: 1px solid #999;
border-right: 1px solid #999;
border-bottom: 1px solid #fff;
}

В результате получаем как бы ряд визуальных закладок, сформированных одним лишь бордером.

Не забывайте только в правилах прописывать отсутствие маркеров у списка (list-style-type: none;) и сами пункты вытягивать в линию, а не в столбик (display: inline;)

Смотреть пример