Верхняя менюшка на списках

Тема в разделе "Веб-дизайн", создана пользователем 2pick, 9 ноя 2011.

Модераторы: zek24
  1. 2pick

    2pick Постоялец

    Регистр.:
    15 мар 2009
    Сообщения:
    102
    Симпатии:
    29
    Пытаюсь смострячить верхнюю менюшку на списках...
    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-ю строчку то все слетает (точнее скрывается)... остается только скругление углов слева, а сам текст и скругление справа - пропадает.
    Пытался сделать скругление меньшим размером. Убирать отступы сверху у стронга. - та же ситуация
    Текст не убирается, если тэги с отступом(скруглением) убрать вообще
     
  2. AlexMist

    AlexMist Создатель

    Регистр.:
    17 ноя 2009
    Сообщения:
    49
    Симпатии:
    7
    Во-первых повторение <span !!!id="right_hov"> не валидно, id должен быть уникальным, замени на класс (это не должно сказываться на отображении).
    Во вторых изначально не правильный подход. span если и нужен то только 1 и весь текст ссылки должен быть в нем.
    А использовать для изменения фона нужно :
    li:hover
    li:hover a
    li:hover a span
    Текст в 2 строки входит по высоте в li (line-height не мешает)?
    Можно посмотреть как устроено в любом буржуйском шаблоне HTML/CSS.
    ps: выложи скриншет что там съезжает
     
  3. 2pick

    2pick Постоялец

    Регистр.:
    15 мар 2009
    Сообщения:
    102
    Симпатии:
    29
    Если честно то идею я свистнул у 2domains.ru... После авторизации менюшка рабочая таким же образом сверстана.
    li:hover
    li:hover a
    li:hover a span
    использовать без указания класса не целесообразно, ибо еще есть левое меню, которое строится так же на списках
    [​IMG]
    3,4 И 10-е пункты слетают. На 3-й пункт мышку навел
    [​IMG]
    Вот куда съезжает