Как сделат грамотно меню - HTML и CSS

Manonia · 19.01.2010, 07:45

Здравствуйте, знатоки! Подскажите пожалуйста как грамотно сверстать меню, как прикреплено во вложении. Всё не сложно, но проблемы возникают с картинкой "Домой" - из-за нёё всё съезжает. Сталкиваюсь с такой проблемой не первый раз, хотелось бы понять раз и навсегда.

uberchel · 19.01.2010, 09:06

код в студию!

Manonia · 19.01.2010, 09:24

Вот

Код:

<div id="menu">&nbsp;
 <div id="menu_left">
  <a href="#"><img src="images/home.gif"/></a><a href="#">Пишите письма</a>
 </div>
 <div id="menu_right">
  <ul>
   <li><a href="#">О компании</a></li>
   <li><a href="#">Услуги</a></li>
    <li><a href="#">Портфолио</a></li>
  </ul>
 </div>
</div>

CSS:

Код:

#menu
{
	font-family: Tahoma, sans-serif;
	font-size: 10px;
	text-transform: uppercase;
	width: 640px;
	height: auto;
	float: left;
	display: inline;
	margin-top: 45px
}

#menu_left
{
	float:left;
	height: 27px
	
}

#menu_right
{
	float: right;
	height: 27px
	
}

cooperOk · 19.01.2010, 10:41

Хотелось бы узнать куда оно съезжает?

Вот набросал код, вроде ничего не съезжает

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
#menu
{
	font-family: Tahoma, sans-serif;
	font-size: 10px;
	text-transform: uppercase;
	width: 640px;
	height: auto;
	float: left;
	display: inline;
	margin-top: 45px;
}

#menu_left
{
	float:left;
	height: 27px;
	line-height: 27px;
}

#menu_left img{
	height: 27px;
	border: none;
	float: left;
	display: block;
}

#menu_left a{
	margin-left: 5px;
}

#menu_right
{
	float: right;
	height: 27px;
	line-height: 27px;
}

#menu_right ul{
	margin: 0;
	list-style: none;
}

#menu_right ul li
{
	float: left;
	margin-right: 20px;
}
</style>

</head>
<body >

<div id="menu">
 <div id="menu_left">
  <a href="#"><img src="home.gif"/></a><a href="#">Пишите письма</a>
 </div>
 <div id="menu_right">
  <ul>
   <li><a href="#">О компании</a></li>
   <li><a href="#">Услуги</a></li>
    <li><a href="#">Портфолио</a></li>
  </ul>
 </div>
</div>

</body>
</html>

uberchel · 19.01.2010, 10:43

сделал как на рисунке:

Код HTML:

<html>
<head>
<title>TEST</title>
<style type="text/css">
body { font-family: verdana, helvetica, sans-serif; font-size: 8pt; color: #C2C2C2 }
.content { border: 1px solid #898989; }
.topmenu { font-size: 9pt; width: 640px; border: 0px; }
.topmenu a:link { text-decoration:none; color:#ff0000; }
.topmenu a:hover { text-decoration:none; color:#566533; }
.topmenu a:active { text-decoration:none; color:#454545; }
.topmenu a:visited { text-decoration:none; color:#454545; }
.home { width: 10%; text-align: left; border: 0px; padding: 10px 10 10 10px; }
.mail { width: 50%; text-align: left; border: 0px; padding: 10px 10 10 10px; )
.abou { width: 10%; text-align: left; border: 0px; padding: 10px 10 10 20px; )
.serv { width: 10%; text-align: left; border: 0px; padding: 10px 10 10 20px; )
.port { width: 10%; text-align: left; border: 0px; padding: 10px 10 10 20px; )
</style>
</head>
<body>
<div class="content" align="center">
<table class="topmenu" cellpadding="0" cellspacing="0">
<tr>
<td class="home" colspan="2"><a href="#"><img src="users.png"  border="0px" alt="" /></a></td> 
<td class="mail" colspan="2"><a href="#">Пишите письма</a></td>
<td class="abou" colspan="2"><a href="#">О компании</a></td>
<td class="serv" colspan="2"><a href="#">Услуги</a></td>
<td class="port" colspan="2"><a href="#">Портфолио</a></td>
</tr>
</table>
</div>
</body>
</html>

Manonia · 19.01.2010, 12:43

Большое спасибо, а съезжал текст (см. вложение)

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Как грамотно вывести из базы превьюшки?	Svetix	PHP	2	27.03.2009 14:53
Как грамотно сделать описание к проге?	chandrasecar	Общие вопросы Delphi	1	20.11.2008 22:23
Как грамотно разделить данные между потоками?	bagulma	Общие вопросы Delphi	5	28.05.2008 22:41
Как грамотно загружать языковые файлы в приложение?	apromix	Общие вопросы Delphi	11	09.05.2008 21:06
Как сделат так, что бы при закрытии проекта появлялось сообщение	monushka	Помощь студентам	7	02.11.2007 08:12

19.01.2010, 09:06	#2
uberchel Участник клуба Регистрация: 19.01.2009 Сообщений: 1,453	код в студию!