<!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=iso-8859-1" />
	<title>Информационный сайт</title>
	<link href="style/common.css" rel="stylesheet" type="text/css" />
</head>
<body><div id="page">

<div id="header">
	<h1>Название сайта</h1>
	<h2>Краткое описание сайта</h2>
</div>

<div id="menu">
	<ul>
		<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>

css файл:

/* Page settings */
* {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif;}
a {text-decoration:none;}

/* Page */
#page {width:70%; margin:15px auto;}

/* Header */
#header {padding:20px; margin-bottom:15px; background-color:#3BB8EA;}
#header h1 {font-size:30px;}
#header h2 {font-size:15px;}

/* Menu */
#menu {background-image:url(1.png);}
#menu ul li {height:30px; display:inline; padding:4px; font-size:20px;}
#menu ul li:hover {background-image:url(2.png);}
#menu ul li a {color:#FAFAFA;}

Проблема: есть два фона для меню размером 20х30 пикселов. Значит меню должно быть высотой 30 пикселов. Но если задать высоту параметром height, то пункты меню будет вверху, а не по центру. Если исполользовать padding то, отступ в 4 пиксела применяется только к бокам. Но самое странное то, что при наведение padding срабатывает.

Если применить фон так:

#menu {background-image:url(1.png);}
#menu ul li {background-image:url(1.png); height:30px; display:inline; padding:4px; font-size:20px;}
#menu ul li:hover {background-image:url(2.png);}
#menu ul li a {color:#FAFAFA;}

,то получается так, что тоже не очень хорошо:

Помогите решить эту проблему.

alexandr.coder · August 11, 2010

Ждал, ждал, да сам сделал.

swetlana · August 11, 2010

ну если display: inline, то line-height надо использовать, а не height

alexandr.coder said:
Ждал, ждал, да сам сделал.

ну извиняй.

Мы же тоже и работаем, и личные дела есть.

Заходим на форум и отвечаем, когда есть такая возможность, а это совсем не обязательно в момент создания темы.

А самостоятельно сделать — ценнее, чем по подсказке. Самостоятельно добытые знания крепче в голове держатся.

alexandr.coder · August 11, 2010

swetlana said:
ну извиняй.
Мы же тоже и работаем, и личные дела есть.
Заходим на форум и отвечаем, когда есть такая возможность, а это совсем не обязательно в момент создания темы.

Странно почему на моё предпоследнее сообщение ответили сразу.

Sign In

Меню

Question

alexandr.coder

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

alexandr.coder

Link to comment

Share on other sites

swetlana

Link to comment

Share on other sites

alexandr.coder

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information