Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
gmmjob
2 / 2 / 0
Регистрация: 17.05.2012
Сообщений: 39
#1

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

13.11.2012, 21:50. Просмотров 1093. Ответов 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
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Меню выводится под картинкой (HTML, CSS):

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

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

Текст под картинкой - HTML, CSS
Сайт - anichan.moy.su/load/anime_serialy/dnevnik_budushhego_mirai_nikki/2-1-0-2 Как сделать так, чтобы текст справа, сразу после...

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

Текст под картинкой - HTML, CSS
Возникла такая проблема. Мне дали набор html страничек (вообщем сайт). И сказали чтобы я выложил его на каком-нибудь хостинге. С выбором...

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

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

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

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

Пробовал не получается, то же самое, конечно может я чтото не так делаю, но я делал так что верхняя строчка таблицы находится выше нижней
0
Taatshi
Администратор
11526 / 5021 / 253
Регистрация: 05.04.2011
Сообщений: 13,759
Записей в блоге: 2
13.11.2012, 23:29 #4
эээ... ссылку на сайт можете дать?
0
gmmjob
2 / 2 / 0
Регистрация: 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 - HTML, CSS
&lt;!DOCTYPE &gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Тест&lt;/title&gt; &lt;style type='text/css'&gt; .content-product-img {text-align:center;...

Убрать отступ под картинкой - HTML, CSS
Добрый вечер, коллеги. Не могу разобраться с проблемой: на сайте есть баннера - div -&gt; ссылка -&gt; картинка. У дива есть бордер 1 пиксель. И...

Горизонтальное меню с картинкой между пунктами - HTML, CSS
Итак есть горизонтальное меню состоящее из 4 пунктов, между 2 и 3 пунктом находится картинка. Всё меню находится посередине, расстояние 1...

Как разместить текст под картинкой? - HTML, CSS
как разместить текст под картинкой что бы бы не уходил припустим вот так (картинка) ну и так дальше только в этих рамках


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

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

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