Нужно выровнять разделители в меню

@Habl · Регистрация: 20.04.2014

Студворк — интернет-сервис помощи студентам

Привет!
Проблема верхнего меню в firefox или в руках ))) Во всех основных браузерах отображение нормальное, а в firefox разделители верхнего меню съезжают чуть вниз
Подскажите как исправить
Вот ссылка для лучшего понимания http://shop.island-gifts.ru

@Вова101 · 25.07.2014, 22:29

Покажите css код для этого елемента.

Точнее елементОВ.

@Habl · 25.07.2014, 22:36 **[ТС]**

CSS
1
2
3
4
5
6
.line_top_menu {
    background-color: #cbcbcb;
    float: left;
    height: 35px;
    width: 1px;
}

@Вова101 · 25.07.2014, 22:41

Нет, проблема состоит не в этих элементах а в самом позиционировании вашей меню... посмотрите в файербаг, (хотя там ничего особого не вижу) давайте код хоть всего меню, вы же видите, что не только полосочки съезжают вниз, а все и вместе... =)

@Habl · 25.07.2014, 22:47 **[ТС]**

Ну да ))) щас скину

Добавлено через 1 минуту

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
#top_menu {
width: 785px;
height: 35px;
margin:0 auto;
border:solid #d6d6d6 1px;
border-radius:6px;
background-color: white;
float:right;
}
.ul_top_menu {
height:35px;
margin:-20px -40px;
list-style-type: none;
}
.li_top_menu {
height:35px;
font-family:arial;
font-size: 13px;
font-weight:bold;
}
.li_div {
float:left;
height:35px;
line-height:35px;
text-align:center;
width:130px;
margin:0px;
}
.li_div_hover {
float:left;
background-image: url(img/button_top_menu.png);
width:130px;
height:35px;
margin:0px;
text-align:center;
color:#10416C;
}
.li_div:hover {
background-image: url(img/button_top_menu.png);
width:130px;
margin:0px;
height:35px;
}
.line_top_menu {
width:1px;
height:35px;
background-color: #CBCBCB;
float:left;
}
.link_top_menu {
color:black;
text-decoration:none;
}

@Crystal-3 · 25.07.2014, 23:09

Habl,

CSS
1
2
3
.ul_top_menu {
margin:-22px -40px;
}

@Вова101 · 25.07.2014, 23:10

А, да кристал, вы права, =)) нужно

CSS
1
2
3
.ul_top_menu {
margin:-22px -40px 0 0;
}

@Habl · 25.07.2014, 23:12 **[ТС]**

Сообщение от Crystal-3

1
2
3
.ul_top_menu {
margin:-22px -40px;
}

Другие браузеры тоже надо учитывать

Добавлено через 1 минуту

Сообщение от Вова101

Даже не знаю где может быть проблема но попробуйте не маргинами а именно позиционированием,
Код CSS
1
position: relative; left: ; top: ;
, это для самой меню вашей.

Хорошо, попробую
Спасибо )

@Вова101 · 25.07.2014, 23:14

Habl, там где значение left top там в пикселях)

@Habl · 25.07.2014, 23:24 **[ТС]**

Сообщение от Вова101

Habl, там где значение left top там в пикселях)

Да, спасибо ясно

Добавлено через 4 минуты

Сообщение от Вова101

.ul_top_menu { margin:-22px -40px 0 0; }

Такой код отрабатывает в лисе, а в других плыть в верх начинает

@Вова101 · 25.07.2014, 23:32

значит простое позиционирование должно сработать) пробовали?

@Habl · 25.07.2014, 23:47 **[ТС]**

Сообщение от Вова101

значит простое позиционирование должно сработать) пробовали?

Пробую, пока что результа 0

Добавлено через 12 минут
Народ я в ступоре, нужна ваша помощь, постоянно не соответствия или в лисе или в ишаке, хроме, опере

@Crystal-3 · 25.07.2014, 23:48

Habl, по-хорошему вам бы переверстать меню заново. Разделители сделать бордером для li, а не div’ом
.line_top_menu, убрать эти лишние блоки, в которые вы позапихивали li и этот минусовый маргин тут не нужен.

@Вова101 · 25.07.2014, 23:53

Да, так по крайней мере будет лучше, ато по ходу вы сами запутались в том что написали...

@Crystal-3 · 26.07.2014, 00:37

Habl, мой вариант вашего меню:http://cssdeck.com/labs/zmhbnvgt

HTML5
1
2
3
4
5
6
7
8
<div class="menu">
    <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">О нас</a></li>
        <li><a href="#">Как заказать</a></li>
        <li><a href="#">Контакты</a></li>
    </ul>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
* {
    margin:0;
    padding:0;
}
.menu {
    font-family: Arial, sans-serif;
    font-size: 18px;
    overflow:hidden;
    border:1px solid black;
}
.menu ul {
    overflow: hidden;
    float:left;
}
.menu ul li {
    float: left;
    list-style: none;
     
}
.menu ul li a {
    color: #bc945d;
    display:block;
    padding: 10px 29px;
    border-right:1px solid black;
    text-decoration:none;
}
.menu ul li a:hover {
    text-decoration: underline;
}

@Habl · 26.07.2014, 15:04 **[ТС]**

Сообщение от Crystal-3

Habl, мой вариант вашего меню:http://cssdeck.com/labs/zmhbnvgt

Спасибо, за помощь, буду разбираться что я там начудил

Добавлено через 1 час 5 минут
Разобрался в общем, нужно было в стилях для ul прописать float:right; margin:0px; padding:0px; width:785px;

@Вова101 · 26.07.2014, 20:44

Habl, рад у что вас все получилось!

@Habl · 26.07.2014, 23:23 **[ТС]**

Ребят в safari гляньте сайт, все блоки плывут

@Вова101 · 27.07.2014, 01:13

Есть такое...

@Habl · 27.07.2014, 11:36 **[ТС]**

Начал править, сделал стили только для safari, но теперь в хроме и опере блоки слишком далеко расположились друг от друга

Новые блоги и статьи Все статьи Все блоги /
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20%	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .

@Habl 1 / 1 / 0 Регистрация: 20.04.2014 Сообщений: 66

	Нужно выровнять разделители в меню 25.07.2014, 22:22. Показов 1435. Ответов 19 Метки нет (Все метки) Привет! Проблема верхнего меню в firefox или в руках ))) Во всех основных браузерах отображение нормальное, а в firefox разделители верхнего меню съезжают чуть вниз Подскажите как исправить Вот ссылка для лучшего понимания http://shop.island-gifts.ru 0

@Вова101 21 / 13 / 6 Регистрация: 19.07.2014 Сообщений: 115
	25.07.2014, 22:29
	Покажите css код для этого елемента. Точнее елементОВ. 0

@Вова101 21 / 13 / 6 Регистрация: 19.07.2014 Сообщений: 115
	25.07.2014, 22:41
	Нет, проблема состоит не в этих элементах а в самом позиционировании вашей меню... посмотрите в файербаг, (хотя там ничего особого не вижу) давайте код хоть всего меню, вы же видите, что не только полосочки съезжают вниз, а все и вместе... =) 0

@Вова101 21 / 13 / 6 Регистрация: 19.07.2014 Сообщений: 115
	25.07.2014, 23:14
	Habl, там где значение left top там в пикселях) 0

@Вова101 21 / 13 / 6 Регистрация: 19.07.2014 Сообщений: 115
	25.07.2014, 23:32
	значит простое позиционирование должно сработать) пробовали? 0

@Crystal-3 115 / 97 / 54 Регистрация: 04.04.2014 Сообщений: 296
	25.07.2014, 23:48
	Habl, по-хорошему вам бы переверстать меню заново. Разделители сделать бордером для li, а не div’ом .line_top_menu, убрать эти лишние блоки, в которые вы позапихивали li и этот минусовый маргин тут не нужен. 0

@Вова101 21 / 13 / 6 Регистрация: 19.07.2014 Сообщений: 115
	25.07.2014, 23:53
	Да, так по крайней мере будет лучше, ато по ходу вы сами запутались в том что написали... 0

@Вова101 21 / 13 / 6 Регистрация: 19.07.2014 Сообщений: 115
	26.07.2014, 20:44
	Habl, рад у что вас все получилось! 0

@Habl 1 / 1 / 0 Регистрация: 20.04.2014 Сообщений: 66
	26.07.2014, 23:23 [ТС]
	Ребят в safari гляньте сайт, все блоки плывут 0

@Вова101 21 / 13 / 6 Регистрация: 19.07.2014 Сообщений: 115
	27.07.2014, 01:13
	Есть такое... 0

@Habl 1 / 1 / 0 Регистрация: 20.04.2014 Сообщений: 66
	27.07.2014, 11:36 [ТС]
	Начал править, сделал стили только для safari, но теперь в хроме и опере блоки слишком далеко расположились друг от друга 0