Сильно сказано или нет судить трудно. Все познается в сравнении, но речь собственно не только об этом.

Очередной пост Мастера всколыхнул прошлое.

Хоть и давно дело было чувство не до умения осталось.

Вот так просто без внятного объяснения причин можно поступать, наверное, только в Раша.

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

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

Мастер Lasto поставил ряд вопросов ответ, на которые строго индивидуален для любого web-мастера.

Со своей стороны предлагаю давно пропагандируемую мной идею использования фиксированных блоков-колонок на web-странице.

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

Не буду вдаваться в технические тонкости предлагаемой разметки страницы.

Варианты можно посмотреть здесь в секции меню "Примеры разметки".

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

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

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

И начинаются поиски более простых решений – 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;

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

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