HTML and CSS

HTML and CSS

{Лаборатория экстремальной web-верстки...}

Идеальный Fixed или... Длинные ссылки меню. Запрет переноса и многоточие...

Идеальный Fixed или...

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

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

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

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

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

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

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

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

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

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

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

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


RSS лента ВСЕГО блога с комментариями RSS лента ВСЕГО блога БЕЗ комментариев RSS лента этой КАТЕГОРИИ с комментариями RSS лента этой КАТЕГОРИИ и БЕЗ комментариев RSS лента ЭТОГО ПОСТА с комментариями к нему

Длинные ссылки меню. Запрет переноса и многоточие...

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

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

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

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

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

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

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

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

white-space:nowrap;overflow:hidden;

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

Скриншоты.

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

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

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

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

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

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

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

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

overflow:hidden;

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

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


RSS лента ВСЕГО блога с комментариями RSS лента ВСЕГО блога БЕЗ комментариев RSS лента этой КАТЕГОРИИ с комментариями RSS лента этой КАТЕГОРИИ и БЕЗ комментариев RSS лента ЭТОГО ПОСТА с комментариями к нему

Прыг: 01 02 03 04 05 06 07 08
English German French Spanish Italian Japanese
  • Programming V. Lasto
  • Designer S. Gordi
  • Created in 0,02246 seconds
  • © 2007-2010