Горизонтальное меню

Macdonald · May 23, 2012

Добрый день!

Подскажите как с помощью маркированного списка сделать такое горизонтальное меню и работало в IE 6?

При наведении ссылка выделяется вот таким фоном

Само горизонтальное меню имеет фон - градиент:

Выделяется ссылка также градиентом:

У каждой ссылки в меню справа добавляется иконка (для примера ссылка - наши объекты):

Код HTML


		<div class="navbar">
			<ul>
				<li><a href="#">О продукции</a></li>
				<li><a href="#">Наши объекты</a></li>
				<li><a href="#" class="icon-calculator">Оконный калькулятор</a></li>
				<li><a href="#">Задать вопрос</a></li>
				<li><a href="#">Контакты</a></li>
			</ul>
		</div>

Avalon4eg · May 23, 2012

html


<div class="navbar">
                        <ul>
                                <li><a href="#"><span><img src="images/icon-nashi-obiekti.gif" alt="" /></span>О продукции</a></li>
                                <li><a href="#"><span><img src="images/icon-nashi-obiekti.gif" alt="" /></span>Наши объекты</a></li>
                                <li><a href="#"><span><img src="images/icon-nashi-obiekti.gif" alt="" /></span>Оконный калькулятор</a><li>
                                <li><a href="#"><span><img src="images/icon-nashi-obiekti.gif" alt="" /></span>Задать вопрос</a></li>
                                <li><a href="#"><span><img src="images/icon-nashi-obiekti.gif" alt="" /></span>Контакты</a></li>
                        </ul>
                </div>

css


 ul li{
            float: left;
            list-style-type: none;
            background: url('images/bg-navbar.gif') repeat-x;
        }
        ul li a {
            float: left;

            display: block;
            height: 50px;
             background: url('images/bg-navbar.gif')  repeat-x;

        }
        ul li a:hover {
           background: url('images/bg-hover-link.gif')  repeat-x;

        }
        img {
            border: none;
        }

Должно работать и в ie6

Macdonald · May 23, 2012

Отлично, спасибо, работает и в IE6!

Edited May 23, 2012 by Macdonald

Avalon4eg · May 23, 2012

<span><img src="images/icon-nashi-obiekti.gif" alt="" /></span>

Edited May 23, 2012 by Avalon4eg

Macdonald · May 23, 2012

А как сделать текст по середине кнопки?

Cейчас иконка точно такого же размера как и градиент основной, 56px, иконку поставил посередине в редакторе :

html


<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Сайт для примера</title>
		<meta name="description" content="" />
		<meta name="Keywords" content="" />
		<meta name="author" content="hamster.by" />
	</head>
	<body>
			<ul>
				<li><a href="#">О продукции</a></li>
				<li><a href="#"><span><img src="images/icon-nashi-obiekti.gif" alt="" /></span>Наши объекты</a></li>
				<li><a href="#">Оконный калькулятор</a></li>
				<li><a href="#">Задать вопрос</a></li>
				<li><a href="#">Контакты</a></li>
			</ul>
	</body>
</html>

css


body {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 12px;
	color: #000000;
	margin: 0;
}

ul li{
	float: left;
	list-style-type: none;
	background: url('images/bg-navbar.gif') repeat-x;
}

ul li a {
    float: left;       
    display: block;
    height: 56px;
    background: url('images/bg-navbar.gif')  repeat-x;
	padding: 0 15px;
}

ul li a:hover {
    background: url('images/bg-hover-link.gif')  repeat-x;       
}

img {
    border: none;
}

Edited May 23, 2012 by Macdonald

Avalon4eg · May 23, 2012


ul li a {
            pading:auto;
            float: left;
            display: block;
            height: 50px;
            background: url('images/bg-navbar.gif')  repeat-x;
}

Macdonald · May 23, 2012

Вот теперь так:


<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Сайт для примера</title>
		<meta name="description" content="" />
		<meta name="Keywords" content="" />
		<meta name="author" content="hamster.by" />
		<link rel="stylesheet" type="text/css" href="style2.css" />
	</head>
	<body>
			<ul>
				<li><a href="#">О продукции</a></li>
				<li><a href="#"><span><img src="images/icon-nashi-obiekti.gif" alt="" /></span>Наши объекты</a></li>
				<li><a href="#">Оконный калькулятор</a></li>
				<li><a href="#">Задать вопрос</a></li>
				<li><a href="#">Контакты</a></li>
			</ul>
	</body>
</html>


body {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 12px;
	color: #000000;
	margin: 0;
}

 ul li{
	float: left;
	list-style-type: none;
	background: url('images/bg-navbar.gif') repeat-x;
}

ul li a {
    float: left;       
    display: block;
    height: 56px;
    background: url('images/bg-navbar.gif')  repeat-x;
	padding: auto;
}

ul li a:hover {
    background: url('images/bg-hover-link.gif')  repeat-x;       
}

img {
    border: none;
}

manum · May 23, 2012

А как сделать текст по середине кнопки?

ul li a {
    float: left;       
    display: block;
    height: 56px;
    background: yellow  repeat-x;
    font:12px/56px Verdana, Helvetica, Arial, sans-serif;	
}

mrnobody · May 23, 2012

del

Edited May 23, 2012 by mrnobody

Macdonald · May 24, 2012

А как сделать текст по середине кнопки?

ul li a {
    float: left;       
    display: block;
    height: 56px;
    background: yellow  repeat-x;
    font:12px/56px Verdana, Helvetica, Arial, sans-serif;	
}

Не выравнивался, стало так:

Yazon_Nile · May 24, 2012

вместо флоатов:

css

img,
span{
    display:inline-block;
    margin:0 -3px 0 0;
    vertical-align:middle;
}
span{margin:0;}
* +html img,
* +html span{display:inline} /* IE7 fix */
*html img,
*html span{display:inline} /* IE6 fix*/

Как-то так)

Edited May 24, 2012 by Yazon_Nile

manum · May 24, 2012

А как сделать текст по середине кнопки?
ul li a {
    float: left;       
    display: block;
    height: 56px;
    background: yellow  repeat-x;
    font:12px/56px Verdana, Helvetica, Arial, sans-serif;	
}
Не выравнивался, стало так:

Можно добавить еще:


li span img {
    border: none;
    vertical-align:middle;
}

DrTiBiBo · May 24, 2012

А как сделать текст по середине кнопки?
ul li a {
    float: left;       
    display: block;
    height: 56px;
    background: yellow  repeat-x;
    font:12px/56px Verdana, Helvetica, Arial, sans-serif;	
}
Не выравнивался, стало так:
Можно добавить еще:
li span img {
    border: none;
    vertical-align:middle;
}

Можно попробовать float:left; к span'у добавить

Macdonald · May 24, 2012

А как сделать текст по середине кнопки?
ul li a {
    float: left;       
    display: block;
    height: 56px;
    background: yellow  repeat-x;
    font:12px/56px Verdana, Helvetica, Arial, sans-serif;	
}
Не выравнивался, стало так:
Можно добавить еще:
li span img {
    border: none;
    vertical-align:middle;
}

Отлично работает и даже в IE6! Спасибо, manum!

Sign In

Горизонтальное меню

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information