Вертикальное меню

averin13 · November 4, 2011

Есть вертикальное меню.Задана его точная ширина.В этом меню есть 6 пунктов, каждый из которых должен быть одинаковой ширины и чтоб текст был выровнен по центру каждого <li>. Нужно ,чтобы border был не на весь <li> , а только на <a> , но если так в коде указать то уменьшается сам пункт меню.

Вот исходный код:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Art Печенье</title> 
<style>
body,html{
margin:0px;
padding :0 px;

}
a{
text-decoration:none;
color:#ffffff;
}
.center {display:block; margin:0 auto;}

ul#mainNav {

	margin-left:70px;
	margin-top:70px;
	padding: 0;
	list-style: none;
	float: left;
	background-image: url(69.png);
	width:865px;
	height:60px;
	background-repeat: no-repeat;
	text-align:center;
}

#mainNav li {
	float: left;
	width: 140px;
	text-align:center;

}

#mainNav a {
border-left: 3px solid ;
	border-left-color:#c9c1be;
	text-decoration: none;
	font-size: 18px;
	font-weight:900;
	color:#392411;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	display: block;
	height:55px;
	padding: 0px 0px 5px 20px;

}

#mainNav li a:hover{
background-color:#392411;
color:#ffffff;

}
#light a:hover{
background-image:#000000;;

}

</style>
</head>
<body style="background-color:#3a2313">
<div style="margin: 0px auto;padding-left:10px;width: 1000px; border:0px solid;padding:0px;height:1200px;background-color:#ffffff;" id="contents">
<ul id="mainNav" >
    <li><a href="#" >Главная</a></li>
    <li><a href="#"> О НАС</a></li>
    <li><a href="#">ПЕЧЕНЬЕ</a></li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Акции</a></li>
    <li><a href="#">Контакты</a></li>
</ul>
</div>
</div>	
</body>
</html>

Вот картинка http://savepic.su/610375.htm

Вот мои задачи:

1) Пункты одинаковой ширины и текст выровнен в них по центру(и по вертикали и по горизонтали)(text-align:center; не работает)

2) border должен быть по высоте тектса

3)при наведении на пункт меню, должен окрашиваться в коричневый весь пункт.

Мне не нужен вариант с таблицей. Заранее спасибо за помощь.

Cubka · November 4, 2011

Посмотри этот вариант:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Art</title> 
<style>
body,html{
margin:0px;
padding :0 px;
}
a{
text-decoration:none;
color:#ffffff;
}
.center {display:block; margin:0 auto;}

ul#mainNav {
        margin-left:70px;
        margin-top:70px;
        padding: 0;
        list-style: none;
        float: left;
        background-image: url(69.png);
        width:865px;

        background-repeat: no-repeat;
        text-align:center;
}

#mainNav li {
float: left;
width: 140px;
}

#mainNav li div{
border-left: 3px solid #c9c1be;
height:18px;
position: relative;
width: 100%;
}

#mainNav a {
text-decoration: none;
font-size: 18px;
font-weight:900;
color:#392411;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
display: inline-block;
padding: 15px 0px;
left: -3px;
position: absolute;
top: -18px;
width:100%;
}

#mainNav li a:hover{
background-color:#392411;
color:#ffffff;
width:143px;
z-index: 100;
}

#light a:hover{
background-image:#000000;;
}

</style>
</head>
<body style="background-color:#3a2313">
<div style="margin: 0px auto;padding-left:10px;width: 1000px; border:0px solid;padding:0px;height:1200px;background-color:#ffffff;" id="contents">
<ul id="mainNav" >
    <li><div><a href="#" >Главная</a></div></li>
    <li><div><a href="#"> О НАС</a></div></li>
    <li><div><a href="#">ПЕЧЕНЬЕ</a></div></li>
    <li><div><a href="#">Услуги</a></div></li>
    <li><div><a href="#">Акции</a></div></li>
    <li><div><a href="#">Контакты</a></div></li>
</ul>
</div>
</div>  
</body>
</html>

averin13 · November 4, 2011

Посмотри этот вариант:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Art</title> 
<style>
body,html{
margin:0px;
padding :0 px;
}
a{
text-decoration:none;
color:#ffffff;
}
.center {display:block; margin:0 auto;}

ul#mainNav {
        margin-left:70px;
        margin-top:70px;
        padding: 0;
        list-style: none;
        float: left;
        background-image: url(69.png);
        width:865px;

        background-repeat: no-repeat;
        text-align:center;
}

#mainNav li {
float: left;
width: 140px;
}

#mainNav li div{
border-left: 3px solid #c9c1be;
height:18px;
position: relative;
width: 100%;
}

#mainNav a {
text-decoration: none;
font-size: 18px;
font-weight:900;
color:#392411;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
display: inline-block;
padding: 15px 0px;
left: -3px;
position: absolute;
top: -18px;
width:100%;
}

#mainNav li a:hover{
background-color:#392411;
color:#ffffff;
width:143px;
z-index: 100;
}

#light a:hover{
background-image:#000000;;
}

</style>
</head>
<body style="background-color:#3a2313">
<div style="margin: 0px auto;padding-left:10px;width: 1000px; border:0px solid;padding:0px;height:1200px;background-color:#ffffff;" id="contents">
<ul id="mainNav" >
    <li><div><a href="#" >Главная</a></div></li>
    <li><div><a href="#"> О НАС</a></div></li>
    <li><div><a href="#">ПЕЧЕНЬЕ</a></div></li>
    <li><div><a href="#">Услуги</a></div></li>
    <li><div><a href="#">Акции</a></div></li>
    <li><div><a href="#">Контакты</a></div></li>
</ul>
</div>
</div>  
</body>
</html>

Всё хорошо, только отображается меню на высоту текста, а нужно чтоб отображалось на 55px, т.е. на высоту background-image.Получается вот, что не очень меня устраивает:http://savepic.su/600168.htm

Cubka · November 4, 2011

Надеюсь, я тебя понял:

<style>
body,html{
margin:0px;
padding :0 px;
}
a{
text-decoration:none;
color:#ffffff;
}
.center {display:block; margin:0 auto;}

ul#mainNav {
        margin-left:70px;
        margin-top:70px;
        padding: 0;
        list-style: none;
        float: left;
        background: #abc url(69.png);
        width:865px;
        height:55px;
        background-repeat: no-repeat;
        text-align:center;
}

#mainNav li {
float: left;
width: 140px;
}

#mainNav li div{
border-left: 3px solid #c9c1be;
height:18px;
position: relative;
width: 100%;
top: 18px;
}

#mainNav a {
text-decoration: none;
font-size: 18px;
font-weight:900;
color:#392411;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
display: inline-block;
padding: 17px 0px;
left: -3px;
position: absolute;
top: -18px;
width:100%;
}

#mainNav li a:hover{
background-color:#392411;
color:#ffffff;
width:143px;
z-index: 100;
}

#light a:hover{
background-image:#000000;;
}

</style>

averin13 · November 4, 2011

Да, всё правильно, спасибо.

Sign In

Вертикальное меню

Question

averin13

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Cubka

Link to comment

Share on other sites

averin13

Link to comment

Share on other sites

Cubka

Link to comment

Share on other sites

averin13

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information