Сложная верстка. Как сделать?
Подскажите, возможно ли такое сделать с помощью HTML и CSS? Так чтобы это корректно смотрелось в разных браузерах. И желательно без графики и таблиц.
Можно, но маркеры придется все-таки картинками.
Таблицы тут вообще ни при чем. Единственная сложность - горизонтальная ветка слева, но и она, думаю, решаема, если пораскинуть мозгами.
Таблицы тут вообще ни при чем. Единственная сложность - горизонтальная ветка слева, но и она, думаю, решаема, если пораскинуть мозгами.
Цитата:
горизонтальная ветка слева, но и она, думаю, решаема, если пораскинуть мозгами.
ага, например сами маркеры уже с полоской рисовать :)
Ну, да, с черточками. Но соединяющая их вертикальная черта (это в прошлом посте описАлся) у меня вызовет трудности.
Маркеры можно делать дивом с заданной длинной и путым содержанием
Цитата: Proger_XP
Маркеры можно делать дивом с заданной длинной и путым содержанием
Согласен, но только для немобильного меню.
Можно подробнее?
Вы знаете, все решаемо здесь, дивами. И то, что меню нестатичное - ничего страшного.
Ну, если содержание пунктов меню будет меняться, то и вертикальная полоса будет сбиваться с нижнего маркера. Это если заданные размеры сделать... А насчет черточек div'ами - мне кажется тогда будет слишком нагромаждено.
Цитата: Markuper
Вы знаете, все решаемо здесь, дивами. И то, что меню нестатичное - ничего страшного.
Ну, здесь по логике вообще ничего не должно дивами решаться. Потому что это списки. Сделать всё на дивах - можно. Если делать хитрые позиционирвоания и маргины. Но в коде такая помойка будет.
Для списка можно задать изображение маркера. В этом изображении можно сделать черточку налево, и весь список засунуть в див с левым бордером. У списка убрать margin'ы и паддинги. Нечто такое
Цитата: Proger_XP
Для списка можно задать изображение маркера. В этом изображении можно сделать черточку налево, и весь список засунуть в див с левым бордером. У списка убрать margin'ы и паддинги. Нечто такое
Угу, но тогда нижний край бордюра будет ниже последнего маркера.
Да. Тогда разве что сделать див с position: relative; left: -15px; background-color: #FFFFFF; z-index: 100; display: inline в последнем элементе списка что бы он перекрывал часть нижней границы. Изващение :)