Вертикальное выравнивание в li

mirabo · October 20, 2008

Парни, второй день не могу понять, в чём дело. Есть горизональная менюшка (headermenu), нужно сделать так, что бы текст в ней выравнивался по вертикали, в IE всё красиво, но в Опере и ФФ текст меню прижимается к низу. вот код css:

#headermenu {
position:absolute;
right:0px;
top:231px;
height: 33px;
background: #d60000 url(images/menu_bg2.gif) repeat-x;
line-height: 33px;
z-index:2;
}
.headerm { 
padding: 0;
text-transform: uppercase;
font-weight: 100;
}
.headerm li {
float:left;
list-style-type:none;
}
.headerm li a {
display:block;
padding:0 11px;
text-decoration:none;
color: #fff;
letter-spacing:1px;
letter-spacing: -1px;
font-size: 11px;
}
.headerm li a:hover {
color:#000;
text-decoration:none;
}

И код html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>FLmos.ru</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="head_left"><h1 align="center"> </h1></div>
<div class="head"></div>
<div class="head_right"></div>
	<div class="head_bottom"></div>
		<div id="headermenu"> 
		<div class="headerm">
		<ul>
		<li><a href="#">тест</a></li>
		<li><a href="index.htm">тест 2</a></li>
		</ul>
		</div>
		</div>
<div class="content">
	<div class="left">
		<h2 align="center">Левое меню</h2>
		<p>Тестим тута текст Тестим тута текст Тестим тута текст Тестим тута текст</p>
		<h2 align="center">Левое меню 2</h2>
		<p>Тестим тута текст Тестим тута текст Тестим тута текст Тестим тута текст</p>
	</div>

</div>
</body>
</html>

Методом тыка выяснил, что выновата во всём строка position:absolute; в css #headermenu, но как поправить понять не могу.

Подскажите, пожалуйста, что тут не так?

Edited October 20, 2008 by mirabo

rus · October 20, 2008

Как тебе такой вариант?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>FLmos.ru</title>
<style>
/*
#headermenu {
position:absolute;
right:0px;
top:231px;
height: 33px;
background: #d60000 url(images/menu_bg2.gif) repeat-x;
line-height: 33px;
z-index:2;
}
.headerm { 
padding: 0;
text-transform: uppercase;
font-weight: 100;
}
.headerm li {
float:left;
list-style-type:none;
}
.headerm li a {
display:block;
padding:0 11px;
text-decoration:none;
color: #fff;
letter-spacing:1px;
letter-spacing: -1px;
font-size: 11px;
}
.headerm li a:hover {
color:#000;
text-decoration:none;
}
*/
#nav {
position:absolute;
top:231px;
right:0;
background:#d60000;
height:33px;
width:200px;
}
#right_nav {
list-style: none;
overflow:hidden; _zoom:1;
margin:0;
padding:0;
}
#right_nav li {
float:right;
}
#right_nav LI a {
font: normal 12px  Verdana;
display:block; 
height:33px; 
text-align:center;
color:#FFFFFF;
text-decoration: none;
line-height:33px;
white-space:nowrap;
padding-left:10px;
padding-right:10px;
}
#right_nav LI a:hover {
color:#000;
text-decoration: none;
}
</style>
</head>
<body>
<div class="head_left"><h1 align="center"> </h1></div>
<div class="head"></div>
<div class="head_right"></div>
    <div class="head_bottom"></div>
<div id="nav">
<ul id="right_nav">
        <li><a href="#">тест</a></li>
        <li><a href="index.htm">тест 2</a></li>
      </ul>
</div>
<div class="content">
    <div class="left">
        <h2 align="center">Левое меню</h2>
        <p>Тестим тута текст Тестим тута текст Тестим тута текст Тестим тута текст</p>
        <h2 align="center">Левое меню 2</h2>
        <p>Тестим тута текст Тестим тута текст Тестим тута текст Тестим тута текст</p>
    </div>

</div>
</body>
</html>

mirabo · October 20, 2008

Как тебе такой вариант?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>FLmos.ru</title>
<style>
/*
#headermenu {
position:absolute;
right:0px;
top:231px;
height: 33px;
background: #d60000 url(images/menu_bg2.gif) repeat-x;
line-height: 33px;
z-index:2;
}
.headerm { 
padding: 0;
text-transform: uppercase;
font-weight: 100;
}
.headerm li {
float:left;
list-style-type:none;
}
.headerm li a {
display:block;
padding:0 11px;
text-decoration:none;
color: #fff;
letter-spacing:1px;
letter-spacing: -1px;
font-size: 11px;
}
.headerm li a:hover {
color:#000;
text-decoration:none;
}
*/
#nav {
position:absolute;
top:231px;
right:0;
background:#d60000;
height:33px;
width:200px;
}
#right_nav {
list-style: none;
overflow:hidden; _zoom:1;
margin:0;
padding:0;
}
#right_nav li {
float:right;
}
#right_nav LI a {
font: normal 12px  Verdana;
display:block; 
height:33px; 
text-align:center;
color:#FFFFFF;
text-decoration: none;
line-height:33px;
white-space:nowrap;
padding-left:10px;
padding-right:10px;
}
#right_nav LI a:hover {
color:#000;
text-decoration: none;
}
</style>
</head>
<body>
<div class="head_left"><h1 align="center"> </h1></div>
<div class="head"></div>
<div class="head_right"></div>
    <div class="head_bottom"></div>
<div id="nav">
<ul id="right_nav">
        <li><a href="#">тест</a></li>
        <li><a href="index.htm">тест 2</a></li>
      </ul>
</div>
<div class="content">
    <div class="left">
        <h2 align="center">Левое меню</h2>
        <p>Тестим тута текст Тестим тута текст Тестим тута текст Тестим тута текст</p>
        <h2 align="center">Левое меню 2</h2>
        <p>Тестим тута текст Тестим тута текст Тестим тута текст Тестим тута текст</p>
    </div>

</div>
</body>
</html>

Спасибо, показывается отлично! Но, меню перестало растягиваться при добавлении новых пунктов в список right_nav. Может быть есть способ сделать так, что бы всё так же корректно отображалось, и что бы при этом меню автоматически растягивалось (просто этот шаблон будет использоваться в cms и хотелось бы, что бы пункты меню добавлялись без правки шаблона.)?

rus · October 20, 2008

растягиваться по ширине? тогда width 100% вам в помощь, а по длине соответственно height 100% - но это уже второй вопрос, а с первым я вам уже помог.

mirabo · October 20, 2008

растягиваться по ширине? тогда width 100% вам в помощь, а по длине соответственно height 100% - но это уже второй вопрос, а с первым я вам уже помог.

Да, с первым помогли, ещё раз спасибо, но если поможете со вторым, то очень поможете ))) Нет, width 100% - он так и отображается - красная полоска на всю ширину экрана, а вот если бы она растягивалась (как в первом моём примере - чем короче список - тем короче полоса) и коррекно отображалы бы список (как в вашем ответе), было бы просто замечательно!

mini · October 20, 2008

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>FLmos.ru</title>

</head>

<body>

<ul>

</ul>

</div>

<h2 align="center">Левое меню</h2>

<p>Тестим тута текст Тестим тута текст Тестим тута текст Тестим тута текст</p>

<h2 align="center">Левое меню 2</h2>

<p>Тестим тута текст Тестим тута текст Тестим тута текст Тестим тута текст</p>

</div>

</body>

</html>

сss

.headerm {

width:500px; /*ширину савиш которую нужно*/

background:#000;

}

.headerm ul {

margin:0;

padding:10px 0;/*регулируеш текст по высоте*/

list-style:none;

text-align:center;

}

.headerm ul li {

display:inline;

padding:0 20px; /*выруливаеш растояние между списком*/

}

.headerm ul li a {

text-decoration:none;

color:#00FF00;}

.headerm ul li a:hover {

color:#0000CC;

}

это ты хотел?

mirabo · October 21, 2008

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>FLmos.ru</title>
<link href="style.css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="head_left"><h1 align="center"> </h1></div>
<div class="head"></div>
<div class="head_right"></div>
<div class="head_bottom"></div>
<div id="headermenu">
<div class="headerm">
<ul>
<li><a href="#">тест</a></li>
<li><a href="index.htm">тест 2</a></li>
<li><a href="#">тест 3</a></li>
<li><a href="index.htm">тест 4</a></li>
<li><a href="#">тест 5</a></li>
<li><a href="index.htm">тест 6</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="left">
<h2 align="center">Левое меню</h2>
<p>Тестим тута текст Тестим тута текст Тестим тута текст Тестим тута текст</p>
<h2 align="center">Левое меню 2</h2>
<p>Тестим тута текст Тестим тута текст Тестим тута текст Тестим тута текст</p>
</div>
</div>
</body>
</html>
сss
.headerm {
width:500px; /*ширину савиш которую нужно*/
background:#000;
}
.headerm ul {
margin:0;
padding:10px 0;/*регулируеш текст по высоте*/
list-style:none;
text-align:center;
}
.headerm ul li {
display:inline;
padding:0 20px; /*выруливаеш растояние между списком*/
}
.headerm ul li a {
text-decoration:none;
color:#00FF00;}
.headerm ul li a:hover {
color:#0000CC;
}
это ты хотел?

Нет, строка - width:500px; /*ширину савиш которую нужно*/ - это не то, хотелось, что бы меню растягивалось справо налево в зависимости от количества его пунктов.

mini · October 21, 2008

css

headerm ul {

margin:0;

padding:10px 0;

list-style:none;

overflow:hidden;

}

.headerm ul li {

background:#000;

float:right;

padding:10px 20px;

}

.headerm ul li a {

text-decoration:none;

color:#00FF00;}

.headerm ul li a:hover {

color:#0000CC;

}

так что ли?

Sign In

Вертикальное выравнивание в li

Question

mirabo

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

rus

Link to comment

Share on other sites

mirabo

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

mirabo

Link to comment

Share on other sites

mini

Link to comment

Share on other sites

mirabo

Link to comment

Share on other sites

mini

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information