Меню имеет такой вид
Вопрос состоит в следующем, как нарезать подобные меню и дальше их верстать, так как, фигурные края подобного рода вырисовывать с помощью CSS может и возможно, но предполагаю, что достаточно проблематично.
Мой порядок действий был таков:
- нарезала 3 куска меню: правый и левый бок + таких же размеров центральная часть (которую в последствии ставила как background и повторяла по х);
- далее создала обычный список;
И тут пошли разлычные варианты верстки:
1. Меню это список с background центральной части меню - background: url(../img/menu.png) repeat-x;
2. В HTML перед и после списка вставлены соответственно бока.
3. Все заключено в один общий div и элементы позиционировались уже в средине этого блока.
Результат: состыковать список и боковушки меню получилось, но растянуть меню по горизонтали на весь экран не вышло. Если ставить для ul {width: 100%} меню сразу распадается на 3 отдельных фрагмента (тоже самое происходит и при уменьшении окна браузера).
1. В HTML вставляем боковушки меню в первую и последнюю строку списка.
2. В CSS задаем background центральной части меню для всех li, а li:first-child, li:last-child - отменяем background.
3. Пытаюсь выровнять все элементы меню по ширине, опять ничего не получается.
Результат: состыковать список и боковушки меню получилось, но растянуть меню по горизонтали на весь экран не вышло. Если контент списка изменяется то соответственно между элементами возникают пробелы и меню выглядит не цельным. Если ставить для ul {width: 100%} меню сразу распадается на 3 отдельных фрагмента (тоже самое происходит и при уменьшении окна браузера).
P.S. Я только начинаю осваивать верстку, поэтому, пожалуйста, не нужно закидывать меня "шапками" если вопрос до боли простой и я просто не смогла найти ответ. Буду благодарна за любую помощь. Заранее спасибо.
