Меню на дивах

@Syltan · Регистрация: 27.08.2009

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

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

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="description" content="content" />
<meta name="keywords" content="content"  />
<title>Главная</title>
<style type="text/css">
/*Стили для сайта*/
.shapka {height: 155px; background:url(img/header.jpg) no-repeat; }
.shapkafon {height: 155px; background:url(img/fon.jpg) repeat-x; }
#right{float:right; width:213px; height:34px; background:url(img/videoyroki.png) no-repeat;}
#left{float:left; width:213px; height:34px; background:url(img/videoyroki.png) no-repeat;}
#center{}
 * {margin:0; padding:0;}
  body{min-width:770px;}
 img {border: none;}
 
</style>
</head>
 
<body class="marginpadding">
 
<!--  -->
<div class="shapkafon">
<div class="shapka"></div>
</div>
 
<!--  -->
<div id="left"><div> 
<div>Пункт 1</div>
<div>Пункт 2</div>
<div>Пункт 3</div>
<div>Пункт 4</div>
<div>Пункт 5</div>
<div>Пункт 6</div>
<div>Пункт 7</div>
<div>Пункт 8</div>
<div>Пункт 9</div>
<div>Пункт 10</div>
 
<div id="right"><div>
<div>Пункт 1</div>
<div>Пункт 2</div>
<div>Пункт 3</div>
<div>Пункт 4</div>
<div>Пункт 5</div>
<div>Пункт 6</div>
<div>Пункт 7</div>
<div>Пункт 8</div>
<div>Пункт 9</div>
<div>Пункт 10</div>
 
 
</body>
</html>

Хочу сделать чтоб с двух сторон меню было с правой и с левой стороны и не выходит.

@Crudelis · 08.09.2010, 20:31

в твоих дивах я не заметил ни одной ссылки, я имею ввиду код

@Hurtsok · 09.09.2010, 04:51

ну конечно float:left не пашет. Ты только самому верхнему диву его прописал в обоих меню .А тебе надо указать что у него есть дочерние элементы правильно будет так( с правым по аналогу):

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div id="left">
  <div>Пункт 1</div>
  <div>Пункт 2</div>
  <div>Пункт 3</div>
  <div>Пункт 4</div>
  <div>Пункт 5</div>
  <div>Пункт 6</div>
  <div>Пункт 7</div>
  <div>Пункт 8</div>
  <div>Пункт 9</div>
  <div>Пункт 10</div>
</div>

И если честно то так меню не делается. Не советую использовать в коде кучи дивов если без нех можно обойтись, а в твоем варианте можно 100% без них обойтись. Оставь блок с id="left" и id="right" и сделай в нем меню на ul li. Это куда удачнее будет...

@Hagrael · 09.09.2010, 13:32

Syltan, я вообще не вижу, где у вас закрывается <div id="left">.

@Syltan · 09.09.2010, 20:11 **[ТС]**

Столкнулся ещё с небольшой трудностью, не получаеться разместить рамку, таким образом, нарисовал на фото.Вот код.
Файл index.php

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> 
<title>Главная</title> 
</head> 
<body> 
<div class="shapkafon"> 
    <div class="shapka"></div> 
</div> 
 
<div id="left"> 
 
                        <div class='title'></div> 
 
        <div class="menu ramka" id="ikonka_menu1"><a href="#">Новости жизни</a></div> 
        <div><a href="#">Про клоунов из Москвы</a></div> 
        <div><a href="#">О жизни Таиси Лапиной</a> </div> 
        <div><a href="#">О Ефросиньи</a></div> 
        <div><a href="#">Про Деда Мороза</a></div> 
        <div><a href="#">Платёжные системы</a></div> 
        <div><a href="#">Работа с видео и аудио</a></div> 
        <div><a href="#">О жизни Мистер Бина</a></div> 
        <div><a href="#">Кто такой Джин?</a></div> 
        <div><a href="#">Создание моб.телефонов</a></div> 
        <div><a href="#">Какие бывают зайцы</a></div> 
        <div><a href="#">Психология</a></div> 
        <div><a href="#">Красота</a></div> 
        <div><a href="#">Спорт и здоровье</a></div> 
        <div><a href="#">Бизнес дяди Пети</a></div> 
        <div><a href="#">Сетевой маркетинг</a></div> 
        <div><a href="#">О детях из Украины</a></div> 
</div>   
</div> <!-- Закрываем  id="left"-->
    <div id="right"> 
        <div class='title'></div> 
        <div>Пункт 1</div> 
        <div>Пункт 2</div> 
        <div>Пункт 3</div> 
        <div>Пункт 4</div> 
        <div>Пункт 5</div> 
        <div>Пункт 6</div> 
        <div>Пункт 7</div> 
        <div>Пункт 8</div> 
        <div>Пункт 9</div> 
        <div>Пункт 10</div> 
    </div> 
    <div id="center"> 
        <p></p> 
    </div> 
<div id="footer"></div> 
</body> 
</html>

Файл style.css

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*Стили для сайта*/
* {
    margin:0;
    padding:0;
}
body {
    min-width:770px;
}
img {
    border: 0;
}
.shapka {height: 155px; background:url(img/header.jpg) no-repeat; }
.shapkafon {height: 155px; background:url(img/fon.jpg) repeat-x; }
#right{float:right; width:213px; }
#left{float:left; width:213px; border:1px solid black;}
.ramka{border:1px solid black; }
.title{height:34px; background:url(img/videoyroki.png) no-repeat;}
#center{margin-left:213px; margin-right:213px;}
#footer{background:url(img/footer.jpg); repeat-x; height:45px; clear:both;}
.menu{font-family:Verdana, sans-serif; font-size:14px;
padding:3px 0px 5px 18px; margin:6px;  }
.menu a{text-decoration:none; }
#ikonka_menu1{background:url(img/p1.jpg) no-repeat ; margin-left:7px; }

@Syltan · 09.09.2010, 21:48 **[ТС]**

Пришлось ещё в один контейнер див засунуть,каждый пункт меню.

Добавлено через 44 минуты
Ой, или тут где-то ошибка, что-то правая навигация улетела влево и оно какая-то очень странное вышло. Подскажите как исправить.

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
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> 
<title>Главная</title> 
</head> 
<body> 
<div class="shapkafon"> 
    <div class="shapka"></div> 
</div> 
 
<div id="left"> 
 
                        <div class='title ramka'></div> 
 
<div class="ramka">
<div class="menu" id="ikonka_menu1"><a href="#">Пунтк 1</a></div>
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1/a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a> </div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1/a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
<div class="ramka">
<div class="menu" id="ikonka_menu1"> <div><a href="#">Пунтк 1</a></div> 
</div>
</div> <!-- Закрываем  id="left"-->
 
    <div id="right"> 
        <div class='title'></div> 
        <div>Пункт 1</div> 
        <div>Пункт 2</div> 
        <div>Пункт 3</div> 
        <div>Пункт 4</div> 
        <div>Пункт 5</div> 
        <div>Пункт 6</div> 
        <div>Пункт 7</div> 
        <div>Пункт 8</div> 
        <div>Пункт 9</div> 
        <div>Пункт 10</div> 
    </div> 
    <div id="center"> 
        <p></p> 
    </div> 
<div id="footer"></div> 
</body> 
</html>

Файл стилей

Code
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
/*Стили для сайта*/
* {
    margin:0;
    padding:0;
}
body {
    min-width:770px;
}
img {
    border: 0;
}
.shapka {height: 155px; background:url(img/header.jpg) no-repeat; }
.shapkafon {height: 155px; background:url(img/fon.jpg) repeat-x; }
#right{float:right; width:213px; }
#left{float:left; width:213px;}
.ramka{border:1px solid #CCCCCC;}
.ramka:hover{background-color:#CCFFCC;}
.title{height:34px; background:url(img/videoyroki.png) no-repeat;
border:1px solid black;}
#center{margin-left:213px; margin-right:213px;}
#footer{background:url(img/footer.jpg); repeat-x; height:45px; clear:both;}
.menu{font-family:Verdana, sans-serif; font-size:14px;
padding:3px 0px 5px 18px; margin:6px;  }
.menu a{text-decoration:none; }
#ikonka_menu1{background:url(img/p1.jpg) no-repeat ; margin-left:7px; 
}

@Hurtsok · 10.09.2010, 03:31

Какую ты рамку хочешь? с закругленными углами?? я чет из твоего поста ничего не понял, что хочешь...

@Syltan · 11.09.2010, 16:35 **[ТС]**

1)Вот опробовал сократить, возникла проблема, не знаю как сократить вот эти строки, то есть именно вот это:

HTML5
1
 5px center no-repeat;

из этого:

HTML5
1
#ikonka_menu1{background:url(img/p13.jpg) 5px center no-repeat;

Как оформить правильно чтоб не было дублирования?

2)Не знаю как правильно сделать чтоб при наведении мышкой на один из пунктов меню, пункт меню делался белым. Дело в том, что
я для всего меню задал фон: .menu{background-color:#f7f8f6;}
А как сделать чтоб именно на определённый навести пункт и он менял свой цвет, не получается никак.
Вот переделанный мною код:
Файл index.php

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Главная</title>
</head>
<body>
<div class="shapkafon">
    <div class="shapka"></div>
</div>
 
   <div id="left" >
   <div class='title'></div>
   <div class="menu">
   <div id="ikonka_menu1"> <a href="#">Пункт</a></div>
   <div id="ikonka_menu2"> <a href="#">Пункт</a></div>
   <div id="ikonka_menu3"> <a href="#">Пункт</a> </div>
   <div id="ikonka_menu4"> <a href="#">Пункт</a></div>
   <div id="ikonka_menu5"> <a href="#">Пункт</a></div>
   <div id="ikonka_menu6"> <a href="#">Пункт</a></div>
   <div id="ikonka_menu7"> <a href="#">Пункт</a></div>
   <div id="ikonka_menu8"> <a href="#">Пункт</a></div>
   <div id="ikonka_menu9"> <a href="#">Пункт</a></div>
   <div id="ikonka_menu10"><a href="#">Пункт</a></div>
   <div id="ikonka_menu11"><a href="#">Пункт</a></div>
   <div id="ikonka_menu12"><a href="#">Пункт</a></div>
   <div id="ikonka_menu13"><a href="#">Пункт</a></div>
   <div id="ikonka_menu14"><a href="#">Пункт</a></div>
   <div id="ikonka_menu15"><a href="#">Пункт</a></div>
   <div id="ikonka_menu16"><a href="#">Пункт</a></div>
   <div id="ikonka_menu17"><a href="#">Пункт</a></div>
  </div>
    </div> <!--Закрываем id="left"-->
    <div id="right">
        <div class='title'></div>
        <div>Пункт 1</div>
        <div>Пункт 2</div>
        <div>Пункт 3</div>
        <div>Пункт 4</div>
        <div>Пункт 5</div>
        <div>Пункт 6</div>
        <div>Пункт 7</div>
        <div>Пункт 8</div>
        <div>Пункт 9</div>
        <div>Пункт 10</div>
    </div>
    <div id="center">
        <p>Привет мир!</p>
    </div>
    
<div id="footer"></div>
</body>
</html>

Файл style.css

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
/*Стили для сайта*/
* {
    margin:0;
    padding:0;
}
body {
    min-width:770px;
}
img {
    border: 0;
}
.shapka {height: 155px; background:url(img/header.jpg) no-repeat; }
.shapkafon {height: 155px; background:url(img/fon.jpg) repeat-x; }
#right{float:right; width:213px; }
#left{float:left; width:213px; }
 
#center{margin-left:213px; margin-right:213px;}
.title{height:34px; background:url(img/videoyroki.png) no-repeat;
border:1px solid black;}
 
#footer{background:url(img/footer.jpg); repeat-x; height:45px; clear:both;}
.menu div{font-family:Verdana, sans-serif; font-size:12px;
padding:3px 0px 5px 37px; padding-top:10px; padding-bottom:10px;
border:1px solid black; border:1px solid #CCCCCC; border-bottom:0px;
}
 
.menu a{text-decoration:none; background-color:#f7f8f6;}
.menu{background-color:#f7f8f6;}
 
.menu a:visited{color:black; }
 
 
/*-----------------Иконки для меню---------------------------*/
 
#ikonka_menu1{background:url(img/p1.jpg) 5px center no-repeat; 
}
 
#ikonka_menu2{background:url(img/p2.jpg) 5px center no-repeat;
 
}
 
#ikonka_menu3{background:url(img/p3.jpg) 5px center no-repeat;
}
 
#ikonka_menu4{background:url(img/p4.jpg) 5px center no-repeat;
 
}
 
#ikonka_menu5{background:url(img/p5.jpg) 5px center no-repeat;
 
}
 
#ikonka_menu6{background:url(img/p6.jpg) 5px center no-repeat;
}
 
#ikonka_menu7{background:url(img/p7.jpg) 5px center no-repeat;
}
 
#ikonka_menu8{background:url(img/p8.jpg) 5px center no-repeat;
 
}
 
#ikonka_menu9{background:url(img/p9.jpg) 5px center no-repeat;
 
}
 
#ikonka_menu10{background:url(img/p10.jpg) 5px center no-repeat;
 
}
 
#ikonka_menu11{background:url(img/p11.jpg) 5px center no-repeat;
 
}
 
#ikonka_menu12{background:url(img/p12.jpg) 5px center no-repeat;
 
}
 
 
#ikonka_menu13{background:url(img/p13.jpg) 5px center no-repeat;
 
}
 
#ikonka_menu14{background:url(img/p14.jpg) 5px center no-repeat;
 
}
 
#ikonka_menu15{background:url(img/p15.jpg) 5px center no-repeat;
 
 }
 
#ikonka_menu16{background:url(img/p16.jpg) 5px center no-repeat;
}
 
#ikonka_menu17{background:url(img/p17.jpg) 5px center no-repeat;
 
}
 
 
 
/*--------------------------------------------------------------*/

@Hurtsok · 11.09.2010, 16:39

чтобы по наведению подсвечивался элемент меню напиши

CSS
1
2
3
4
5
<тут элемент>:hover{
/*
тут твои стили для него;
*/
}

@Syltan · 11.09.2010, 16:47 **[ТС]**

Это понятно что его надо использовать а именно на моём конкретном случаи, чтоб фон одновременно и у ссылки и всей ячейки менялся,
чтоб полностью фоновый цвет всей полностью ячейки был белым, в этом загвоздка и не выходит.
Получается так что или ссылка её фон делеться белым или фон весь белый ячейки а фон ссылки серым,а не одновременно,полностью фон ссылки белый и всей ячейки тоже белый.

@Hurtsok · 11.09.2010, 16:50

пиши отдельно для дива и отдельно для ссылки(для дива я выше написал как):

CSS
1
2
3
4
5
<тут див в котором ссылка> a:hover{
/*
стили для нее;
*/
}

@Syltan · 11.09.2010, 17:06 **[ТС]**

Тогда если навести на ячейку, фон ячейки будет белым, а фон текста будет серым, пока именно на текст не наведёшь.

@Hurtsok · 11.09.2010, 17:17

вот держи все пашет

CSS
1
#ikonka_menu1:hover{ background:#990000 no-repeat};

@Hagrael · 11.09.2010, 17:27

HTML5
1
<a onmouseover="this.parentNode.style.background='gray'">...</a>

это сделает род. div серым, только когда на ссылку наведена мышь.

@Hurtsok · 11.09.2010, 17:41

Здесь убери фон

CSS
1
.menu a{text-decoration:none; background-color:#f7f8f6;}

И вставь то, что я выше привел и зальется вся площадь.

@Syltan · 11.09.2010, 19:24 **[ТС]**

Если убрать тогда и картинка пропадёт, а мне нужно чтоб, всё было на месте, и чтоб такое происходило при наведении, вся область.

@Hagrael · 11.09.2010, 20:01

Syltan, я не понял.

@Syltan · 11.09.2010, 20:34 **[ТС]**

Короче вот так сделал пробное, меня так устраивает, но проблема в том,что этот стиль будет действовать только для 1 лишь пункта меню, при наведении мышкой фон будет меняться, то есть после вот этой строки:

CSS
1
#ikonka_menu1:hover{background-color:white;}

Но что писать 17 раз по такой строке? есть какой-то выход?

Вот весь файл ксс.

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
/*Стили для сайта*/
* {
    margin:0;
    padding:0;
}
body {
    min-width:770px;
}
img {
    border: 0;
}
.shapka {height: 155px; background:url(img/header.jpg) no-repeat; }
.shapkafon {height: 155px; background:url(img/fon.jpg) repeat-x; }
#right{float:right; width:213px; }
#left{float:left; width:213px; }
 
#center{margin-left:213px; margin-right:213px;}
.title{height:34px; background:url(img/videoyroki.png) no-repeat;
border:1px solid black;}
 
#footer{background:url(img/footer.jpg); repeat-x; height:45px; clear:both;}
.menu div{font-family:Verdana, sans-serif; font-size:12px;
padding:3px 0px 5px 37px; padding-top:10px; padding-bottom:10px;
border:1px solid black; border:1px solid #CCCCCC; border-bottom:0px;
}
 
.menu{background-color:#f7f8f6;}
.menu a{text-decoration:none; }
 
.menu a:visited{color:black; }
 
 
 
/*-----------------Иконки для меню---------------------------*/
 
#ikonka_menu1{background:url(img/p1.jpg) 5px center no-repeat; 
}
 
#ikonka_menu1:hover{background-color:white;}
 
 
#ikonka_menu2{background:url(img/p2.jpg) 5px center no-repeat;
 
}
 
#ikonka_menu3{background:url(img/p3.jpg) 5px center no-repeat;
}
 
#ikonka_menu4{background:url(img/p4.jpg) 5px center no-repeat;
 
}
 
#ikonka_menu5{background:url(img/p5.jpg) 5px center no-repeat;
 
}
 
#ikonka_menu6{background:url(img/p6.jpg) 5px center no-repeat;
}
 
#ikonka_menu7{background:url(img/p7.jpg) 5px center no-repeat;
}
 
#ikonka_menu8{background:url(img/p8.jpg) 5px center no-repeat;
 
}
 
#ikonka_menu9{background:url(img/p9.jpg) 5px center no-repeat;
 
}
 
#ikonka_menu10{background:url(img/p10.jpg) 5px center no-repeat;
 
}
 
#ikonka_menu11{background:url(img/p11.jpg) 5px center no-repeat;
 
}
 
#ikonka_menu12{background:url(img/p12.jpg) 5px center no-repeat;
 
}
 
 
#ikonka_menu13{background:url(img/p13.jpg) 5px center no-repeat;
 
}
 
#ikonka_menu14{background:url(img/p14.jpg) 5px center no-repeat;
 
}
 
#ikonka_menu15{background:url(img/p15.jpg) 5px center no-repeat;
 
 }
 
#ikonka_menu16{background:url(img/p16.jpg) 5px center no-repeat;
}
 
#ikonka_menu17{background:url(img/p17.jpg) 5px center no-repeat;
 
}
 
 
 
/*--------------------------------------------------------------*/

@Hagrael · 12.09.2010, 07:54

Syltan,

CSS
1
.menu div:hover {background: gray;}

@Hurtsok · 12.09.2010, 10:19

Еще бы, ты на множил кучи разных стилей для своего меню. Создай один общий стиль и присвой его всем своим дивам в меню и будет так как ты хочешь и не придется писать кучу не нужных стилей.

Новые блоги и статьи Все статьи Все блоги /
YAFU@home — распределённые вычисления для математики. На CPU Programma_Boinc 20.01.2026 YAFU@home — распределённые вычисления для математики. На CPU YAFU@home — это BOINC-проект, который занимается факторизацией больших чисел и исследованием aliquot-последовательностей. Звучит. . .	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .

@Crudelis Шаровик затейник 696 / 445 / 78 Регистрация: 06.05.2010 Сообщений: 1,109
	08.09.2010, 20:31
	в твоих дивах я не заметил ни одной ссылки, я имею ввиду код 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	09.09.2010, 13:32
	Syltan, я вообще не вижу, где у вас закрывается <div id="left">. 0

@Hurtsok bigMatherHacker 112 / 81 / 12 Регистрация: 18.08.2010 Сообщений: 237
	10.09.2010, 03:31
	Какую ты рамку хочешь? с закругленными углами?? я чет из твоего поста ничего не понял, что хочешь... 0

@Syltan 241 / 9 / 7 Регистрация: 27.08.2009 Сообщений: 868
	11.09.2010, 16:47 [ТС]
	Это понятно что его надо использовать а именно на моём конкретном случаи, чтоб фон одновременно и у ссылки и всей ячейки менялся, чтоб полностью фоновый цвет всей полностью ячейки был белым, в этом загвоздка и не выходит. Получается так что или ссылка её фон делеться белым или фон весь белый ячейки а фон ссылки серым,а не одновременно,полностью фон ссылки белый и всей ячейки тоже белый. 0

@Syltan 241 / 9 / 7 Регистрация: 27.08.2009 Сообщений: 868
	11.09.2010, 17:06 [ТС]
	Тогда если навести на ячейку, фон ячейки будет белым, а фон текста будет серым, пока именно на текст не наведёшь. 0

@Syltan 241 / 9 / 7 Регистрация: 27.08.2009 Сообщений: 868
	11.09.2010, 19:24 [ТС]
	Если убрать тогда и картинка пропадёт, а мне нужно чтоб, всё было на месте, и чтоб такое происходило при наведении, вся область. 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	11.09.2010, 20:01
	Syltan, я не понял. 0

@Hurtsok bigMatherHacker 112 / 81 / 12 Регистрация: 18.08.2010 Сообщений: 237
	12.09.2010, 10:19
	Еще бы, ты на множил кучи разных стилей для своего меню. Создай один общий стиль и присвой его всем своим дивам в меню и будет так как ты хочешь и не придется писать кучу не нужных стилей. 0