помощь в верстке меню магазина OC 1.5.1.3

[Deus]

Добрый день, может кто-нибудь подсказать как сделать "бесконечное меню" (например, как здесь http://sekret-rukodeliya.ru/ ) и поставить разделители между названиями категорий в меню (например, "Ноутбуки | Компьютеры | Телевизоры | Плееры |") ?

[ravilr]

Это как это? и почему оно может быть конечное?

[Wars]

он имеет ввиду бг оно просто репитится repeat-x;

[Deus]

Это как это? и почему оно может быть конечное?

длина меню ограничивается длиной самого контента, ведь так?

#container {
width: 1150px;
margin: 0px auto;
background: #ffffff;

он имеет ввиду бг оно просто репитится repeat-x;

#menu {
background: #363636;
background-repeat: repeat-x;
height: 47px;
margin-bottom: 5px;
padding: 0px 5px;

Если так, то не получается.

[Wars]

потому что #menu находится в #container, а длина #container 1150px; поэтому и длина меню будет 1150px;

[Deus]

ну да, никто и не спорит.

а как сделать, чтоб было на всю длину окна браузера?

[milus]

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

body {

background: url('../image/рисунок') repeat-x left top;

} естественно стилями выравниваете и получается, то что нужно.

Есть второй вариант с добавлением новых слоев - но как по мне больше работы...

[Svarli]

Deus, чтобы добавить разделители между пунктами меню добавьте в css:

#menu li:after {
    color: #FFFFFF;
    content: "|";
    position: absolute;
    right: 0;
    top: 10px;
}
#menu li:first-child:after, #menu li:last-child:after {
    content: "";
}

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

[Deus]

да, конечно, http://deusstore.com/

[Deus]

milus, спасибо, попробую

[Svarli]

изменения касаются файла stylesheet.css

строка 426, замените на

#menu li:last-child::after {
content: "";
}

строка 369, замените класс на этот

#menu > ul > li > a {
font-family: Calibri;
font-size: 18px;
color: white;
line-height: 10px;
text-decoration: none;
display: block;
padding: 18px 10px 18px;
z-index: 6;
position: relative;
}

строка 418, замените класс на

#menu li::after {
color: #38B0E3;
content: "|";
position: absolute;
right: -4px;
top: 13px;
bottom: 10px;
}

вот что получилось у меня

[Deus]

Спасибо, большое, все отличное.

Единственное, не подскажите как разделители выровнять по высоте меню?

[Svarli]

Спасибо, большое, все отличное.

Единственное, не подскажите как разделители выровнять по высоте меню?

Под выровнять по высоте вы имеете ввиду растянуть их на всю высоту меню?

Если да, то

в строке 418 заменить класс на

#menu > ul > li {
position: relative;
float: left;
z-index: 20;
border-right: 1px solid #38B0E3;
}

класс на строке 418 удаляем

#menu li::after {
color: #38B0E3;
content: "|";
position: absolute;
right: -4px;
top: 13px;
bottom: 10px;
}

строка 426 заменяем на

#menu li:last-child {
border-right: 0;
}

будет вот так

[Deus]

ооо, огромное спасибо!