Jump to content
Sign in to follow this  
beautypoint

Настройка вертикальных разделителей верхнего меню

Recommended Posts

Помогите настроить вертикальный разделитель меню так, как во вложенном файле, то есть:

высота разделителя чуть больше шрифта меню, и, при этом, названия меню (или блоки) имеют разную ширину.
Сейчас вот так - http://kosmetiko.in.ua/

post-22118-0-64176500-1370510042_thumb.jpg

Share this post


Link to post
Share on other sites

Теперь проблема с фотошопом...и не только

Не понятно какой размер png-файла должен быть или как вставить background, чтоб встало куда надо...

Share this post


Link to post
Share on other sites

Высота вашего меню height: 37px;

Создаете файл menu_sep.png размером 3х37 px, с прозрачным фоном (вертикаль до верха и низа не доводите на 2-3 пикселя),  закидываете его в папку image вашей темы. Правите стиль

#menu > ul > li {
 background: url("../image/menu_sep.png") right top no-repeat;
display: block;
  • +1 1

Share this post


Link to post
Share on other sites

Высота вашего меню height: 37px;

Создаете файл menu_sep.png размером 3х37 px, с прозрачным фоном (вертикаль до верха и низа не доводите на 2-3 пикселя),  закидываете его в папку image вашей темы. Правите стиль

#menu > ul > li {
 background: url("../image/menu_sep.png") right top no-repeat;
display: block;

 

Поставил. Опять лишний разделитель справа:(

А можно ли создать картинку фиксированных размеров и как-то ее разместить в месте где находится меню? Чтоб не было лишнего разделителя.

Share this post


Link to post
Share on other sites

Решилось вставкой в стиль - #menu > ul > li:last-child {background:none}

Share this post


Link to post
Share on other sites

 можно ли создать картинку фиксированных размеров и как-то ее разместить в месте где находится меню? Чтоб не было лишнего разделителя.

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



#menu > ul > li {
 background: url("../image/menu_sep.png") left top no-repeat;
display: block;
...
}
#menu > ul > li:first-child {
 background: none;
}

 

Положение разделителя изменено на LEFT!

Опоздал  :-D

Для псевдоклассов first-child и last-child для ИЕ есть костыли - погуглите (экспрешн)

  • +1 1

Share this post


Link to post
Share on other sites

 можно ли создать картинку фиксированных размеров и как-то ее разместить в месте где находится меню? Чтоб не было лишнего разделителя.

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



#menu > ul > li {
 background: url("../image/menu_sep.png") left top no-repeat;
display: block;
...
}
#menu > ul > li:first-child {
 background: none;
}

 

Положение разделителя изменено на LEFT!

Опоздал  :-D

Для псевдоклассов first-child и last-child для ИЕ есть костыли - погуглите (экспрешн)

 

У меня в ИЕ норм отображается:)

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

Share this post


Link to post
Share on other sites

У меня в ИЕ норм отображается

Костыли для 6-7 версий

  • +1 1

Share this post


Link to post
Share on other sites

У меня в ИЕ норм отображается

Костыли для 6-7 версий

Ясно, для меня это не принципиально. У меня с ИЕ заходят только 13%. Из них думаю на 6-7 версии мизер. В основном хром, моззила, опера и сафари

Share this post


Link to post
Share on other sites

ытаюсь поставить разделители, но они уежают вверх 

660241fc0d5et.jpg

Share this post


Link to post
Share on other sites

ытаюсь поставить разделители, но они уежают вверх 

660241fc0d5et.jpg

Каким способом - через background или border left ?

Лучше кинь ссылку на сайт если он не на локалке.

Цитирую одного хорошего человека, который помагал мне (может поможет):

"Если рисунок будет сдвинут вверх или вниз, то добавите в #menu > ul > li 

значение background-position: 0px Bpx;

 

где В смещение по вертикали (может принимать отрицательное значение (смещение вверх) и напротив положительное (вниз)"

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.