vertical-align

denya555 · December 29, 2012

Привет форумчане. С наступающим всех.

Третий день не получается решить проблему.

Задача. Сделать резиновую шапку. Логотип на всю ширину, 2 менюшки (одна вверху, другая под логотипом). Да в общем то, проблема с выравниванием. Не могу выравнять название сайта по середине логотипа (выравнивание по вертикали). В общем то мысли вокруг 2-х строчек, но не получается с ними.


display:table; 
vertical-align:middle;

Мой код (выравнивание наименованя сайта пока по низу..)

HTML


<html>
<head>
	<link rel="stylesheet" href="css/reset.css" type="text/css">
	<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="wrap">	
	<div class="header">
		<img class="logo" src="images/logo.jpg" alt="альтернативный текст"/>
         		<ul class="topmenu">	 
            		  	<li><a href="#">Войти</a></li>
	               		<li><a href="#">Поиск</a></li>
          		</ul>
		<p class="sitename">Наименование сайта</p>
	</div>
</div>
</body>
</html >

CSS


.header {
	position: relative;
	background-color: #0099FF;
	width: 100%;
	min-width: 980px;
}
.logo{
	width: 100%;
	display: block; /*отображать как блок*/
	margin: 0 auto; /*выравнивание по центру*/
}
.topmenu { 
	position: absolute;
	top: 0px;
	right: 0px;
}
ul.topmenu { 
	list-style: none; /*стиль для списка: нет (убираем квадратики, круглики)*/
	padding: 10px 10px 0 0;/*внутренний отступ: сверху справа снизу слева*/
	float: right; /*обтекание: справа*/
}
ul.topmenu li { /*элемент маркированного списка*/
	float: left;
	width:auto;
}
ul.topmenu li a {/* ссылки маркированного списка */
	padding: 10px 10px;
	text-decoration: none;
	color:#7FFF00;
	font-weight: normal;
	font-size: 20px;
}
ul.topmenu li a:hover { /*псевдокласс hover - при на ведении курсора на ссылку ненумерованного списка*/
	color:#8a6540;
}
.sitename {
	position: absolute;
	bottom: 0px;
	font-size: 50px;
	color: #66FF99;
	font-family:'Times New Roman', Times, serif;
	font-style: normal;
	font-weight: normal;
	width: 100%;
	text-align:center;
}

Разумеется нужна кроссбраузерность, поддержка IE 7+ без использования CSS 3. Заранее благодарен за помощь.

alekseyk24 · December 29, 2012

И вас с наступающим!!!

http://forum.htmlbook.ru/index.php?showtopic=19320

denya555 · December 30, 2012

Вопрос решен. Спасибо.

Edited December 30, 2012 by denya555

Sign In

vertical-align

Question

denya555

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

alekseyk24

Link to comment

Share on other sites

denya555

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information