2pick
Постоялец
- Регистрация
- 15 Мар 2009
- Сообщения
- 102
- Реакции
- 31
- Автор темы
- #1
Пытаюсь смострячить верхнюю менюшку на списках...
html:
css:
Нужно, чтоб при наведении выделялось белой рамкой со скругленными углами: справа topmenu_rh.gif, слева topmenu_lh.gif.
Проблема в том, что если текст переносится во 2-ю строчку то все слетает (точнее скрывается)... остается только скругление углов слева, а сам текст и скругление справа - пропадает.
Пытался сделать скругление меньшим размером. Убирать отступы сверху у стронга. - та же ситуация
Текст не убирается, если тэги с отступом(скруглением) убрать вообще
html:
Код:
<div class="topmenu_cont">
<div class="topmenu_menu">
<div id="left_ogr"></div>
<div id="centr_ogr">
<ul>
<li><a href="#"><span id="left_hov"></span><strong>Главная</strong><span id="right_hov"></span></a></li>
<li><a href="#"><span id="left_hov"></span><strong>О компании</strong><span id="right_hov"></span></a></li>
<li><a href="#"><span id="left_hov"></span><strong>Продукция и услуги</strong><span id="right_hov"></span></a></li>
<li><a href="#"><span id="left_hov"></span><strong>Полезная информация</strong><span id="right_hov"></span></a></li>
<li><a href="#"><span id="left_hov"></span><strong>Фотогалерея</strong><span id="right_hov"></span></a></li>
<li><a href="#"><span id="left_hov"></span><strong>Контакты</strong><span id="right_hov"></span></a></li>
<li><a href="#"><span id="left_hov"></span><strong>Скачать</strong><span id="right_hov"></span></a></li>
<li><a href="#"><span id="left_hov"></span><strong>Калькулятор</strong><span id="right_hov"></span></a></li>
<li><a href="#"><span id="left_hov"></span><strong>Где купить</strong><span id="right_hov"></span></a></li>
<li><a href="#"><span id="left_hov"></span><strong>Отзывы и предложения<span id="right_hov"></span></a></li>
</ul>
</div>
<div id="right_ogr"></div>
</div>
</div>
css:
Код:
.topmenu_cont{
width:1221px;
height:55px;
}
.topmenu_cont .topmenu_menu{
padding-top:5px;
}
.topmenu_cont .topmenu_menu #left_ogr{
background:url(images/topmenu_lo.gif) no-repeat;
width: 10px;
height:50px;
float:left;
}
.topmenu_cont .topmenu_menu #right_ogr{
background: url(images/topmenu_ro.gif) no-repeat;
width: 10px;
height:50px;
float:left;
}
.topmenu_cont .topmenu_menu #centr_ogr{
height:50px;
float:left;
}
.topmenu_cont .topmenu_menu ul{
padding-left: 0px;
padding-top: 0px;
margin: 0px;
background-color:#da251c;
height:100%;
}
.topmenu_cont .topmenu_menu ul li{
display:block;
list-style:none;
float: left;
font-family:Tahoma, Geneva, sans-serif;
font-size: 12px;
font-weight:bold;
text-transform:uppercase;
height:100%;
color:#FFF;
border-left:double;
border-left-color:#ee4e46;
border-left-width:3px;
min-height:48px;
max-height:48x;
max-width:140px;
text-align:center;
}
.topmenu_cont .topmenu_menu ul li #left_hov{
display: block;
width: 12px;
height:50px;
float:left;
}
.topmenu_cont .topmenu_menu ul li a{
text-decoration:none;
}
.topmenu_cont .topmenu_menu ul li:hover #left_hov{
background:url(images/topmenu_lh.gif) no-repeat;
}
.topmenu_cont .topmenu_menu ul li #right_hov{
width: 12px;
height:50px;
display:block;
float:left;
}
.topmenu_cont .topmenu_menu ul li:hover #right_hov{
background:url(images/topmenu_rh.gif) no-repeat;
}
.topmenu_cont .topmenu_menu ul li strong {
display: block;
float:left;
height: 40px;
text-decoration:none;
padding-top:10px;
color:#FFF;
}
.topmenu_cont .topmenu_menu ul li:hover strong {
text-decoration:underline;
color:#000;
}
.topmenu_cont .topmenu_menu ul li:hover strong {
background: url(images/topmenu_ch.gif) repeat-x;
}
Нужно, чтоб при наведении выделялось белой рамкой со скругленными углами: справа topmenu_rh.gif, слева topmenu_lh.gif.
Проблема в том, что если текст переносится во 2-ю строчку то все слетает (точнее скрывается)... остается только скругление углов слева, а сам текст и скругление справа - пропадает.
Пытался сделать скругление меньшим размером. Убирать отступы сверху у стронга. - та же ситуация
Текст не убирается, если тэги с отступом(скруглением) убрать вообще