beautypoint

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

Рекомендуемые сообщения

beautypoint    5

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
beautypoint    5

Для своего случая вижу только:
вставить в #menu > ul > li {
background: url("
http://kosmetiko.in.ua/image/linii.png") no-repeat center;
размером по ширине с body

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
beautypoint    5

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Strelez    99

Высота вашего меню 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;

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
beautypoint    5

Высота вашего меню 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;

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
beautypoint    5

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Strelez    99

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

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



#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 для ИЕ есть костыли - погуглите (экспрешн)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
beautypoint    5

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

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



#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 для ИЕ есть костыли - погуглите (экспрешн)

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Strelez    99

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
beautypoint    5

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
LancX    3

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

660241fc0d5et.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
beautypoint    5

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

660241fc0d5et.jpg

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

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

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

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

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу