Xpoint
   [напомнить пароль]

Меню, проценты, Faux Absolute Positioning и все ПА кроме FF

Метки: [без меток]
2008-12-08 01:21:00 [обр] Ворон(0/3)[досье]
сообщение промодерировано

Приятного времени суток.

Жило было меню которое хотело тянуться на всюююю ширину окна ПА.
А еще жила была статья про ложноабсолютное позиционирование на A List Apart
И все было хорошо в FF.
Но вот во всех остальных ПА все не хорошо. Потому что между краешками кнопок образовывался пиксельный зазор. Или напротив - они на пиксель наезжали друг на друга. Хотя по всем правилам должны отображаться вот так.
А почему так вот происходит - непонятно.
Помогите разобраться.
Проблема особенно хорошо видна в ie6 и opera. Если вдруг не видна - измените немного размер окна ПА и она появится...
Буду очень благодарен, если вы объясните как бороться с процентами, а заодно если подскажете как улучшить само меню или CSS код.

Нажмите сюда, для того что бы открыть меню

C уважением. Ворон.

спустя 3 дня [обр] Андрей(0/2)[досье]

Вопрос №1. Зачем Вы используете SPAN, но ставите ему display: block? Т.е. почему именно SPAN, который в стандарте HTML заявлен как строковый элемент, а не DIV, который как раз блочным и является.

Вопрос №2. Тянущийся дизайн — требование заказчика? (Обратите внимание на дизайн Yahoo, YouTube, Microsoft, результаты поиска в Google — они НЕТЯНУЩИЕСЯ.) Проблемы проявится на большом мониторе: текст будет сложно читать, т.к. надо будет водить головой туда-сюда. Поэтому пользователи больших мониторов редко открывают окно браузера на весь экран. Впринципе, 960 пикселей по ширине уже достаточно — страницы нормально читаются и на разрешении 1024*768 и на более больших мониторах.

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

спустя 29 минут [обр] Андрей(0/2)[досье]

По поводу улучшения CSS:

  1. Прочитать документации на CSS2 о том, что такое позиционирование в общем и float в частности;

2)

.header_wrapper .navigation_menu li {
float:left;
left:100%;
position:relative;
width:14%;
}

Отсюда я бы убрал left:100%;

  1. из описаний

.header_wrapper .navigation_menu li.main
.header_wrapper .navigation_menu li.about
.header_wrapper .navigation_menu li.price
.header_wrapper .navigation_menu li.order
.header_wrapper .navigation_menu li.faq
.header_wrapper .navigation_menu li.partners
.header_wrapper .navigation_menu li.contacts
я бы убрал margin-left;

Одновременное использование п.2 и п.3 не должно изменить общий вид меню, т.к. будет в полном соответствии со стандартом.

спустя 1 минуту [обр] Ворон(0/3)[досье]
  1. SPAN потому что внутри A. Строчный элемент не может содержать блочный. Конечно он все раво объявляеться в результате как блочный. Но документ - well-formed относительно выбранного DOCTYPE.
  1. Нет, это я для себя сверстал. Мне просто обидно, что не получаеться. Заказчки уже давно получил и утвердил версию без тянучки. Но вопрос актуален. У меня недавно был сайт, в котором тянучка была требованием заказчика. Пришлось верстать табличкой. По поводу того что меню на ширину экрана - плохо... ну... тут спорить бессмысленно. При этом важно не забывать что меню может тянуться еще и на ширину блока, что иногда и красиво и удобно. Да на любую ширину. Тут ключевое слово - "тянуться".

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

p.s. а как код вооще? html, css? Хороший, красивый или так себе?

спустя 5 минут [обр] Ворон(0/3)[досье]
  1. Ээээ... Ок. А почему у тебя сложилось мненеие, что я не знаю принципа позиционирования, если не секрет. Я не спорю и благодарен за совет - просто интересно.
  1. Отсюда я бы убрал left:100%; - это как раз фишка, которая не позволяет float'ам разезжаться из за погрешностей вычисления процентов. если просто сделать набор флоат блоков с определенной в процентах шириной - они переобичсеки не к месту будут переноситься на другую строку. Посмотри статью, которую я упоминал в топике.
  1. margin-left возвращает их на место :) тоже что и п. 2 - посмотри статью на a List Apart. Я ее на этом меню и отрабатывал.
спустя 4 дня [обр] Андрей(0/2)[досье]

Мнение сложилось, потому что как-то это неправильно: вначале в одну сторону на 100% гнать, потом в другую оттаскивать. Показалось, что можно проще. (Извини, если обидел.)

Для борьбы (моё мнение) с погрешностями можно не стыковать пункты меню впритык друг к другу, а делать ощутимый, например, в 10px зазор, оформить в виде "закладок" и т.п.

Высота меню мне кажется большой. Сократить вдвое? А высвбодившееся пространство использовать для полезной информации (контента).

спустя 2 часа 2 минуты [обр] Ворон(0/3)[досье]
Спасибо большое за ответ.
Не обидел, конечно. Просто я не испытываю уверенности в своей непогрешимости и пытаюсь выяснять места где неправ и не знаю. Что бы знать.
С закладками проблем бы и правда не было. Но дизайн мне достаеться в виде утвержденного клиентом макета... так что тут спорить смысла особого нет. Как дали так и верстаешь. Это и к закладкам и к высоте относиться. Вот.
Powered by POEM™ Engine Copyright © 2002-2005