Закругленные углы у блоков, что-то в этом есть притягивающее и манящее, другое дело, как и каким образом, все сделано.

Если оставить в стороне использование графики, что в большинстве случаев приводит к тому, что макет страницы будет фиксированным по ширине, сложности ее нарезки и расфасовки полученных кусков в пустые дополнительные контейнеры, а при изменении цветовой гаммы, на любом отдельно взятом участке все операции придется повторить и не единожды, то…

И начинаются поиски более простых решений – html-код и стили.

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

Посмотрим скриншот:

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

Может быть, и не стоит, но посмотрим следующий скриншот:

Как видим закругление углов пусть и не очень значительное, выглядит более привлекательным чем, если бы были просто прямые углы.

О технике создания подобного трюка писал ранее, теперь же рассмотрим все в расширенном варианте.

В общем случае потребуется три контейнера вложенных друг в друга:

<div><!-- Блок #1 -->
  <div><!-- Блок #2 -->
    <div><!-- Блок #3 -->
      ...
    </div>
  </div>
</div>

Каждый блок отвечает за прорисовку необходимых нам border’ов:

первый – вертикальные

второй – верхний

третий – нижний

На этом собственно теория и заканчивается, по линку данному выше можно ознакомится со стилями, мы же перейдем к более практичным вещам.

Скриншот горизонтального меню уже посмотрели, посмотрим html-код:

<ul>
  <li><a href="#">Home</a></li>
</ul>

Для полного счастья не хватает одного контейнера, рисуем :)

<ul>
  <li><a href="#"><b>Home</b></a></li>
</ul>

Не на много все сложнее для вертикального меню:

<ul>
  <li class="nolink"><em><em>Раздел № 1</em></em></li>
  <li><a href="#"><b>Кнопка 1</b></a></li>
</ul>

Форма поиска по сайту, куда без нее :)

Собственно статья из-за поиска и написана.

Время, от времени занимаюсь адаптацией тем WordPress под скрипты Мастера Lasto и очень часто форма поиска в графическом исполнении или без оного, никак не вписывается в то, что получается в конечном итоге, а рисовать графику это последнее дело…

Без проблем в эти милые закругления можно вставить и картинку при помощи:

background:url(...);

Без тестовой страницы не обойтись.

Плюсы данного подхода:

• Блок не имеет фиксированной ширины
• Легко можно сменить цвет окантовки блока
• При отключенной графике ничего не теряем
• Фоновая заливка или графика, размноженная по x или y в контейнере любая

Минусы:

• Толщина border’a не может быть больше 1px
• Нет возможности изменить радиус закругления
• Дополнительные контейнеры
• В меню на hover трудно получить смену цвета border’a, по крайней мере, пока у меня не получилось :)

Какой должна быть ссылка в меню? Максимально короткой, но в тоже время смысл ее и суть должны быть понятны с первого взгляда.

Но что происходит на самом деле?

Говорим о вертикальном меню, но все справедливо и для горизонтальной навигации.

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

В общем случае ширина колонки вариабельна, и колеблется в пределах 180px-200px.

Это связано еще и с тем, что в колонках практически всегда имеются рекламные блоки типа небоскреб со стандартными размерами 160*600 и если колонка будет довольно широкой, а реклама в них будет расположена по центру, то смотреться все будет не самым лучшим образом.

Понятно, что это не единственное ограничение, если к ссылкам меню пристегнута графика, текст самой ссылки, вернее суть оной не так просто выразить в двух-трех словах без переноса на вторую, а то и третью строку.

Решение проблемы с запретом переноса и обрезанием текста ссылки при помощи:

white-space:nowrap;overflow:hidden;

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

Скриншоты.

Для имитации возможной графики у ссылок меню пристроим квадратики из модернизированной версии меню с треугольниками.

Как видно перенос не украшает и вызывает смешанные чувства.

А вот так на много лучше.

Тема не новая, соответствующие публикации найти не составит большого труда.

Но не без ложки дегтя.

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

Для OPERA также необходимо указать нужное правило.

Дополнительным минусом является то, что если у колонки, в которой расположено меню будет указан:

overflow:hidden;

Текст появляющийся при наведении курсора мыши на ссылку за пределы колонки не выйдет.

Тест страница, там есть все :)

Собственно говоря, идея использовать border-style:double; для глобальной разметки web-страницы пришла спонтанно и довольно неожиданно, а давняя и «не ржавеющая» любовь к абсолютному позиционированию оказалась весьма кстати.

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

Но вот время нашлось, и вам предлагается необычный трюк с border-style:double; и его полноценная реализация, что-что, а в изобретательности Мастеру Горди отказать очень трудно и многие публикации на страницах блога лучшее тому подтверждение :)

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

Для начала скриншот.

Ничего не обычного.

100% высота макета.

Горизонтальное меню и header по html-коду расположены в самом конце страницы.

Колонки центральной части – Left, Content, Right, а область контента выводится раньше боковых колонок при загрузке страницы, обладают иллюзией одинаковой высоты, независимо от наполнения любой из них.

Дополнительные блоки, расположенные в этих колонках чуть выше, имеют фоновую заливку индивидуального цвета, а border цвета основной колонки, что не очень хорошо, но принципы построения web-страницы на основе колонок равной высоты не позволяют обойти данное препятствие.

Теперь самое главное.

Чтобы организовать нижний border у дополнительных блоков и визуально разделить их по вертикали необходимы - связка:

position:relative/absolute
border-style:double
а также наличие пустого контейнера с фоновой заливкой цвета body.

Пример № 1

Естественно, многое упрощается, если border у всех блоков будет одинаковым по цвету. Это касается как стилей, так и html-кода.

При этом фоновая заливка у всех контейнеров может быть индивидуальной, также вместо нее подойдет и графика размноженная по вертикали.

Пример № 2

Расписывать в подробностях что, как, зачем и почему нет необходимости, забираем примеры и приятного вам времяпровождения :)

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

Практический пример.

Взяв за основу скрипты от Мастера Lasto, как-то – nano-CMS и Google Referent, можно сотворить простенький новостийный ресурс.

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

Демо версию в самурайском стиле к скрипту Google Referent, смотрим здесь.