Горизонтальное меню

@vanyakilkil · Регистрация: 13.06.2012

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

В чем вопрос, вроде как все правильно прописал, пока что ошибки не вижу. Пишу меню, должно идти слева на право. Но у меня появляется маркер в одном конце, и текст в центре, хотя у указал чтобы маркеров не было. Так все нормально, я подогнал размеры так, чтобы меню могло от определенных концов екрана при определенных разрешениях быть...
Вот сам код и скрин:

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
54
55
56
57
58
body {
margin: 0px;
min-width: 900px;
max-width: 1900px;
background-color: #336699;
}
 
#shapka {
width: 100%;
height: 186px;
border: 1px solid red;
}
 
#menu_kontekst {
margin-top: 10px;
float: left;
width: 184px;
height: 274px;
border: 1px solid black;
}
 
#inf {
margin: 10px 220px 0px 194px;
height: 1000px;
border: 1px solid yellow;
} 
 
#piar {
margin-top: 10px;
float: right;
width: 210px;
height: 500px;
border: 1px solid black
}
 
#menu {
margin-top: 135px;
height: 50px;
border: 1px solid black;
list-style: none;
}
 
#menu div {
min-width: 710px;
max-width: 1054px; 
margin: 0 auto;
text-align: center;
list-style: none;
}
 
# menu ul {
width: 84px;
height: 50px;
background-image: url("Ссылка_(обычная).jpg");
float: left;
display: inline;
list-style: none;
}

HTML5
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
<!DOCTYPE html>
<html>
<head>
<title>Главная</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
 
    <div id="shapka">
        <div id="menu">
            <div>
            <ul>
            <li>ss</li>
            <li>aaa</li>
            </ul>
            
            </div>
        
        </div>
        
    </div>
    
    <div id="menu_kontekst">
    
    </div>
    
    <div id="piar">
    
    </div>
 
    <div id="inf">
    
    </div>
 
 
 
</body>
</html>

@Lovrentiy · 19.05.2013, 21:51

CSS
1
# menu ul

пробел лишний

А зачем списку отдельный див?

@vanyakilkil · 19.05.2013, 21:57 **[ТС]**

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

@сахей · 19.05.2013, 21:58

CSS
1
2
3
4
5
6
7
8
# menu ul {
width: 84px;
height: 50px;
background-image: url("Ссылка_(обычная).jpg");
float: left;
display: inline;
list-style: none;
}

напиши правильный селектор

CSS
1
#menu ul li

и у тебя там от решетки отступ которого быть не должно

@vanyakilkil · 19.05.2013, 22:07 **[ТС]**

Написал, но вопрос в другом. теперь вот как вышло, как лучше убрать хотел спросить?

@Lovrentiy · 19.05.2013, 22:10

#menu ul - настройка стиля для всего блока меню
#menu ul li - настройка стиля для пунктов меню ul

@vanyakilkil · 19.05.2013, 22:12 **[ТС]**

Только ссылки съезжают тогда, когда я добавляю li. Так нормально как ни странно...

@сахей · 19.05.2013, 22:16

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
body {
margin: 0px;
min-width: 900px;
max-width: 1900px;
background-color: #336699;
}
 
#shapka {
width: 100%;
height: 186px;
border: 1px solid red;
}
 
#menu_kontekst {
margin-top: 10px;
float: left;
width: 184px;
height: 274px;
border: 1px solid black;
}
 
#inf {
margin: 10px 220px 0px 194px;
height: 1000px;
border: 1px solid yellow;
} 
 
#piar {
margin-top: 10px;
float: right;
width: 210px;
height: 500px;
border: 1px solid black
}
 
#menu {
float:left;
margin-top: 135px;
height: 50px;
border: 1px solid black;
list-style: none;
width:100%;
}
 
#menu ul li{
width: 84px;
height: 50px;
background-image: url("Ссылка_(обычная).jpg");
float: left;
display: inline;
list-style: none;
text-align:center;
}

HTML5
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
<!DOCTYPE html>
<html>
<head>
<title>Главная</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
    <div id="shapka">
        <div id="menu">
            <ul>
            <li>ss</li>
            <li>aaa</li>
            </ul>
        </div>
    </div>
    
    <div id="menu_kontekst">
    </div>
    <div id="piar">
    </div>
    <div id="inf">
    </div>
 
</body>
</html>

если правильно тебя понял=)

@Lovrentiy · 19.05.2013, 22:21

Сообщение от vanyakilkil

Только ссылки съезжают тогда, когда я добавляю li. Так нормально как ни странно...

Дак ты задай стили то! В зависимости от того чему ты даешь, "блоку меню" или каждому элементу списка меню!

@vanyakilkil · 19.05.2013, 22:29 **[ТС]**

Ну мне приходит в голову только для ul li задать margin со значением минус. Но как я понимаю, минусовые значения лучше не использовать. А теперь вообще какая-то ерунда

чуть изменил код

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
body {
margin: 0px;
min-width: 900px;
max-width: 1900px;
background-color: #336699;
}
 
#shapka {
width: 100%;
height: 186px;
border: 1px solid red;
}
 
#menu_kontekst {
margin-top: 10px;
float: left;
width: 184px;
height: 274px;
border: 1px solid black;
}
 
#inf {
margin: 10px 220px 0px 194px;
height: 1000px;
border: 1px solid yellow;
} 
 
#piar {
margin-top: 10px;
float: right;
width: 210px;
height: 500px;
border: 1px solid black
}
 
#menu {
margin-top: 135px;
height: 50px;
border: 1px solid black;
list-style: none;
}
 
#menu div {
min-width: 710px;
max-width: 1054px; 
margin: 0 auto;
text-align: center;
list-style: none;
}
 
#menu ul  {
width: 84px;
height: 50px;
 
float: left;
display: inline;
list-style: none;
margin: 0px;
}
 
#menu ul li {
width: 84px;
height: 50px;
background-image: url("Ссылка_(обычная).jpg");
float: left;
display: inline;
list-style: none;
margin: 0px;
}

HTML5
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
<!DOCTYPE html>
<html>
<head>
<title>Главная</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
 
    <div id="shapka">
        <div id="menu">
            <div>
            <ul>
            <li>ss</li>
            <li>aaa</li>
            </ul>
            
            </div>
        
        </div>
        
    </div>
    
    <div id="menu_kontekst">
    
    </div>
    
    <div id="piar">
    
    </div>
 
    <div id="inf">
    
    </div>
 
 
 
</body>
</html>

@vanyakilkil · 19.05.2013, 22:35 **[ТС]**

Сообщение от сахей

если правильно тебя понял=)

Не совсем правильно. Там меню должно были чуть сдвигаться в зависимости от разрешения

@Lovrentiy · 19.05.2013, 22:38

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
54
55
56
57
58
59
60
61
62
63
64
body {
margin: 0px;
min-width: 900px;
max-width: 1900px;
background-color: #336699;
}
 
#shapka {
width: 100%;
height: 186px;
border: 1px solid red;
}
 
#menu_kontekst {
margin-top: 10px;
float: left;
width: 184px;
height: 274px;
border: 1px solid black;
}
 
#inf {
margin: 10px 220px 0px 194px;
height: 1000px;
border: 1px solid yellow;
} 
 
#piar {
margin-top: 10px;
float: right;
width: 210px;
height: 500px;
border: 1px solid black
}
 
#menu {
margin-top: 135px;
height: 50px;
border: 1px solid black;
list-style: none;
 
}
 
#menu div {
min-width: 710px;
max-width: 1054px; 
margin: 0 auto;
text-align: center;
list-style: none;
}
 
#menu ul  {
display:inline-block;
}
 
#menu ul li {
width: 84px;
height: 50px;
background-image: url("file:///D|/Documents/?????/Traning/1/Ññûëêà_(îáû÷íàÿ).jpg");
float: left;
display: inline;
list-style: none;
margin: 0px;
}

@vanyakilkil · 19.05.2013, 22:46 **[ТС]**

Нормально стало, Теперь все ок. Спасибо большое. Как я понял зря для ul старался. А нормально будет если я вправлю ссылки margin (-) или лучше по другому?

@vanyakilkil · 19.05.2013, 23:45 **[ТС]**

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

@Lovrentiy · 20.05.2013, 17:49

по горизонтали у тебя блоки списка меню центруются ибо в родительском блоке указано text-align: center. Либо уберите центрацию, либо настройте под себя.

Свойство ховер действует в данном случае на блок ибо используется display:inline-block.

Блок велик и текст выглядит таким образом потому что:
1. заданы ширина и высота блока списка (ul li) width: 84px; height: 50px;
2. Текст в блоке не отцентрован, поэтому и выглядит так.

Как вариант или изменить размеры (например вообще их убрать и размер пункта меню будет обусловлен размером текста внутри него) или пользуясь маргин и/или паддинг подогнать его в нужное место.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650
	19.05.2013, 21:57 [ТС]
	читал что так лучше по центру делать. Сам блок идет по всей ширине, а вот для дива я задал по центру, и то, что в диве по центру. Но как-то неправильно отобразилось... Ну вот, исправил, все хорошо, только блоки пошли ходом теперь, понимаю, это из-за того, что ссылка пошла книз. Не хотелось бы margin в (-) ставить, есть другие способы? Миниатюры 0

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650
	19.05.2013, 22:07 [ТС]
	Написал, но вопрос в другом. теперь вот как вышло, как лучше убрать хотел спросить? Миниатюры 0

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	19.05.2013, 22:10
	#menu ul - настройка стиля для всего блока меню #menu ul li - настройка стиля для пунктов меню ul 0

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650
	19.05.2013, 22:12 [ТС]
	Только ссылки съезжают тогда, когда я добавляю li. Так нормально как ни странно... 0

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650
	19.05.2013, 22:46 [ТС]
	Нормально стало, Теперь все ок. Спасибо большое. Как я понял зря для ul старался. А нормально будет если я вправлю ссылки margin (-) или лучше по другому? Миниатюры 0

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650
	19.05.2013, 23:45 [ТС]
	А еще такой вопрос.. Получается что когда я навожу на ссылку она светится только в том случае, если я наведу сверху. Мне бы хотелось чтобы надписи были ниже, не получается опустить, опускается с блоками. Возможно подскажите какое свойство добавить? 0

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	20.05.2013, 17:49
	по горизонтали у тебя блоки списка меню центруются ибо в родительском блоке указано text-align: center. Либо уберите центрацию, либо настройте под себя. Свойство ховер действует в данном случае на блок ибо используется display:inline-block. Блок велик и текст выглядит таким образом потому что: 1. заданы ширина и высота блока списка (ul li) width: 84px; height: 50px; 2. Текст в блоке не отцентрован, поэтому и выглядит так. Как вариант или изменить размеры (например вообще их убрать и размер пункта меню будет обусловлен размером текста внутри него) или пользуясь маргин и/или паддинг подогнать его в нужное место. 0