Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/6: Рейтинг темы: голосов - 6, средняя оценка - 4.50
gmmjob
2 / 2 / 1
Регистрация: 17.05.2012
Сообщений: 39
#1

Меню выводится под картинкой

13.11.2012, 21:50. Просмотров 1145. Ответов 4
Метки нет (Все метки)

Возникла проблема меню выводится не так как бы хотелось, то есть плохо так как показано на скрине (добавлен ниже), а хотелось чтобы когда я на него навожу чтобы сверху оно выходило над картинкой, я так же добавил и структуру самой страницы, чтобы било понятно то это таблица.
Вот 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
    body                                {background:url(../images/bg_img1.jpg) repeat-x #FFFFFF; font-size:14px; background-size:cover; font-family:'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Arial, san-serif; color:#fff;}
    
    *{
    margin: 0;
    padding: 0;
}
 
 
html,body{
height:100%;
margin:0px;
padding:0px
}
 
 
 
@charset "utf-8";
/* CSS Document */
 
 
body {
    background-color: #FFFBF0;
 
/* for pull-down menu to work in IE6*/
behavior:url("csshover2.htc");
 
}
 
/* pull-down mainmenu css */
.mainmenu{
    float: left;
    width: 90%;
    padding: 0;
}
.mainmenu ul {
    float: left;
    width: 100%;
    list-style: none;
    line-height: 1;
    color:#000000;
    background: transparent;
    padding: 0;
    border: solid transparent;
    border-width: 1px 0;
    margin: 0 0 1em 0;
    text-transform: uppercase;
    text-align: justify;
}
.mainmenu {dsplay:inline-block;
            overflow:visible;}
.mainmenu a, .mainmenu a:visited {
    display: block;
font-family:"Times New Roman", Times, serif;font-size:0.6;font-weight:lighter;font-style:normal;text-decoration:underline blink;
    color: #000000;
    text-decoration: none;
    padding: 1em 1em;
}
.mainmenu ul ul a{
    width:100%;
    height:100%;
}
.mainmenu ul a{
    width:1%;
}
 
 
.mainmenu li  {
    float: left;
    margin:0;
    padding:0;
}
 
.mainmenu ul li {float:left; position:relative;  }
.mainmenu ul li a {white-space:nowrap;}
    
.mainmenu li ul {
    position: absolute;
    left: -999em;
    height: auto;
    width:15em; 
    
    background: #f5f5dc;
    font-weight: normal;
    border-width: 1px;
    margin: 0;
}
 
.mainmenu li li {
    width:15em ;
}
 
.mainmenu li li a{
    width:13em ;
}
 
.mainmenu li ul  {
    margin: 0;
}
.mainmenu li ul ul {
    margin: -2.8em 0 0 13.5em;
}
.ul_ch, 
.mainmenu li:hover ul ul,
.mainmenu li li:hover ul ul,
.mainmenu li li li:hover ul ul,
.mainmenu li li li li:hover ul ul,
.mainmenu li li li li li:hover ul ul
{
    left: -999em;
}
.mainmenu li:hover ul,
.mainmenu li li:hover ul,
.mainmenu li li li:hover ul,
.mainmenu li li li li:hover ul,
.mainmenu li li li li li:hover ul
{
    left: auto;
}
.mainmenu li:hover>ul.ul_ch   
{
    left: auto;
}
 
.mainmenu li:hover{
    background: #000000;
}
.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{
    color:#FFFFFF;
}
.mainmenu li:hover li a, .mainmenu li li:hover li a, 
.mainmenu li li li:hover li a, .mainmenu li li li li:hover li a,
.mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited, 
.mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited
{
    color:#000000;
}
.mainmenu li li:hover, .mainmenu li li li:hover, 
.mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover 
{
    background: #A0A0A4;
    z-index:9999;
}
.mainmenu li li:hover a,.mainmenu li li li:hover a, 
.mainmenu li li li li:hover a, .mainmenu li li li li li:hover a
{
    color: #FFFFFF; 
}
 
.mainmenu ul ul a, .mainmenu ul ul a:visited,
.mainmenu li li a, .mainmenu li li a:visited
{
    color: #000000;
}
.mainmenu ul ul a:hover,
.mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{
    color: #FFFFFF;
}
.mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited ,
.mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{
    color: #000000;
}
 
 
/* end of mainmenu 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
24
25
26
27
28
29
30
31
32
<div class="mainmenu" class="hr" align="center">
 
<ul >
      <li class="li_nc"><a href="/" target="_self" ><span><B>Головна</B></span></a></li>
      <li class="li_nc"><a href="#" target="_self" ><span><B>Про нас</B></span></a></li>
      <li class="li_hc"><a href="#" target="_self" ><span><B>Каталог товарів</B></span></a><ul class="ul_ch">
         <li class="li_nc"><a href="#" target="_self" >Вхідні двері</a></li>
         <li class="li_hc"><a href="#" target="_self" >Міжкімнатні двері</a>
         <ul class="ul_ch">
            <li class="li_nc"><a href="#" target="_self" >Новий стиль</a></li>
            <li class="li_nc"><a href="#" target="_self" >Термінус</a></li>
            <li class="li_nc"><a href="#" target="_self">Двері з масиву</a></li>
         </ul></li>
         <li class="li_hc"><a href="#" target="_self" >Вікна</a><ul class="ul_ch">
            <li class="li_nc"><a href="#" target="_self" >Дерев'яні</a></li>
            <li class="li_nc"><a href="#" target="_self" >Металопластикові</a></li>
         </ul></li>
         <li class="li_nc"><a href="#" target="_self" >Ковані вироби</a></li>
         <li class="li_nc"><a href="#" target="_self" >Гаражні ворота</a></li>
         <li class="li_nc"><a href="#" target="_self" >Захисні ролети</a></li>
         <li class="li_nc"><a href="#" target="_self" >Жалюзі</a>
         <ul class="ul_ch">
            <li class="li_nc"><a href="#" target="_self" >Горизонтальні жалюзі</a></li>
            <li class="li_nc"><a href="#" target="_self" >Вертикальні жалюзі</a></li>
            <li class="li_nc"><a href="#" target="_self">Тканинні ролети</a></li>
         </ul>       
         </li>
      </ul></li>
      <li class="li_nc"><a href="#" target="_self" ><span><B>Контакти</B></span></a></li>
</ul>
<div class="hr grid_12">&nbsp;</div>
</div>
Помогите пожалуйста кто знает
0
Миниатюры
Меню выводится под картинкой   Меню выводится под картинкой  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
13.11.2012, 21:50
Ответы с готовыми решениями:

Как выровнять текст меню по центру под картинкой?
всем здрасти, не судите строго я еще новичек в этом нелегком деле) короче...

Текст под картинкой
Сайт - anichan.moy.su/load/anime_serialy/dnevnik_budushhego_mirai_nikki/2-1-0-2...

Текст под картинкой
Всем привет!! Ходил по поиску но к сожалению не нашел решения. Мне нужно чтоб...

Текст под картинкой
Возникла такая проблема. Мне дали набор html страничек (вообщем сайт). И...

Подпись под картинкой
Здравствуйте. Начал оформлять свои заметки на сайте на платформе ucoz и...

4
Taatshi
Администратор
11709 / 5052 / 257
Регистрация: 05.04.2011
Сообщений: 13,803
Записей в блоге: 2
13.11.2012, 22:49 #2
z-index

Добавлено через 1 минуту
http://htmlbook.ru/css/z-index
0
gmmjob
2 / 2 / 1
Регистрация: 17.05.2012
Сообщений: 39
13.11.2012, 23:06  [ТС] #3
Цитата Сообщение от Taatshi Посмотреть сообщение
z-index

Добавлено через 1 минуту
http://htmlbook.ru/css/z-index
Пробовал, в таком случае картинка становится только полупрозрачной, а меню как и было так и остается за ней, а надо чтобы выводилось над ней и картинка была такой же как и до этого

Пробовал не получается, то же самое, конечно может я чтото не так делаю, но я делал так что верхняя строчка таблицы находится выше нижней
0
Taatshi
Администратор
11709 / 5052 / 257
Регистрация: 05.04.2011
Сообщений: 13,803
Записей в блоге: 2
13.11.2012, 23:29 #4
эээ... ссылку на сайт можете дать?
0
gmmjob
2 / 2 / 1
Регистрация: 17.05.2012
Сообщений: 39
14.11.2012, 20:49  [ТС] #5
сайт нигде не размещен, пока что только на компе
0
14.11.2012, 20:49
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
14.11.2012, 20:49

Слой after отображается под картинкой в IE 8.0
&lt;!DOCTYPE &gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Тест&lt;/title&gt; &lt;style type='text/css'&gt;...

Ссылка под картинкой, а не справа
Всем hello!!! Подключил фото в *.html сделал ссылку и она расположена с проавой...

Убрать отступ под картинкой
Добрый вечер, коллеги. Не могу разобраться с проблемой: на сайте есть баннера -...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru