Верстка шапки. - HTML и CSS

KorPaEv · 09.07.2011, 10:08

Доброго времени суток, уважаемые!
Вопрос в следующем, начал заниматься освоением верстки и взял у знакомого простенький сайт тестовый для обучения.
Разбираюсь с шапкой и возникли трудности с контейнером под телефон и информацию в шапке.
Ниже прилагаю сам дизайн шапки и свой код...
Дизайн и страничка в архиве.

Код html

Код:

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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Авто Колор</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

	<body>

			<div id="main">
		
				<div id="head">
					
					<div id="head_logo">
					<img src="images/logo.jpg" height="64" width="164" alt="Логотип шапки" title="Логотип шапки" />
					</div>
					
					<div id="icons">
						<ul>
						 <li><img src="images/home.gif" height="12" width="14" alt="Иконка дом" title="Иконка дом" />
					     <li><img src="images/reseach.gif" height="12" width="14" alt="Иконка поиск" title="Иконка поиск" />
						 <li><img src="images/letter.gif" height="12" width="14" alt="Иконка письмо" title="Иконка письмо" />
						</ul>
					</div>
					
					<div id="phone">
					25-38-05
					</div>
													
				</div>
				
			</div>

	</body>

</html>

Код CSS

Код:

body, html 

	{
	
	margin:0px; /*РІРЅРµС€РЅСЏСЏ РіСЂР°РЅРёС†Р° РѕС‚СЃС‚СѓРїР°*/
	padding:0px; /*РІРЅСѓС‚СЂРµРЅРЅСЏСЏ РіСЂР°РЅРёС†Р° РѕС‚СЃС‚СѓРїР°*/
	background:black;
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	color: white;
	
	}

#main

	{
	
	width:947px;
	margin:0 auto;/*РІРµСЂС… 0, РЅРёР· Р°РІС‚Рѕ*/
	
	}
	
#head

	{
	
	background:url(../images/head.jpg) no-repeat left top;
	position:relative; /*РџРѕР·РёС†РёРѕРЅРёСЂРѕРІР°РЅРёРµ - РїРѕРґР»РѕР¶РєР°*/
	overflow:hidden; /*РѕС‚РѕР±СЂР°Р¶Р°РµС‚ С‚РѕР»СЊРєРѕ С‚Рѕ С‡С‚Рѕ РІРЅСѓС‚СЂРё Р±Р»РѕРєР° РѕСЃС‚Р°Р»СЊРЅРѕРµ СЃРєСЂС‹С‚Рѕ!*/
	height:331px;
		
	}

#head_logo

	{
	
	float:left; /* РџРµСЂРµРјРµС‰Р°РµРјС‹Р№ Р±Р»РѕРє РїРѕ СѓРјРѕР»С‡Р°РЅРёСЋ СЃР»РµРІР° РІРµСЂС…*/
	padding:50px 0 0 0;
		
	}
	
#icons

	{
	
	float:right;
	padding:20px 0 0 0; /*РћС‚СЃС‚СѓРї СЃРІРµСЂС…Сѓ РґР»СЏ РёРєРѕРЅРѕРє 20РїРє*/
		
	}

#icons ul

	{
	
	margin:0px;
	padding:0px;
	list-style-type:none;/*РќРµС‚ РјР°СЂРєРµСЂРѕРІ РІ СЃРїРёСЃРєРµ*/
		
	}
#icons ul li

	{
	
	float:left;
	padding:0 10px 0 0;/*Р Р°СЃСЃС‚РѕСЏРЅРёРµ РјРµР¶РґСѓ РІРЅСѓС‚СЂРµРЅРЅРёРјРё РіСЂР°РЅРёС†Р°РјРё - РѕС‚СЃС‚СѓРї СЃРїСЂР°РІР°*/
		
	}
	
#phone

	{
	
	float:right;
	background:url(../images/tel_head.jpg) left top;
	font-family:Arial, Helvetica, sans-serif;
	font-size:42px;
	font-weight:bold;
	
	}

Значит, не могу выровнить телефон относительно логотипа телефона в цсске, плюс отдельный вопрос по информации в красной рамке - чем больше инфы - тем больше рамка расширяется по вертикали, инфы меньше - рамка меньше - размер ее не фиксированный - это совсем не знаю как сделать...
Посоветуйте как лучше, пожалуйста.

Naive · 09.07.2011, 15:03

Я бы использовал абсолютное позиционирование.
Для блока с текстом - 5 вложенных друг в друга дива с фиксированной шириной, самый нижний - бэкграунд с градиентом + цвет нижнего фона, 4 внутренних - черные уголки для скругления без повторения.

09.07.2011, 15:03	#2
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Я бы использовал абсолютное позиционирование. Для блока с текстом - 5 вложенных друг в друга дива с фиксированной шириной, самый нижний - бэкграунд с градиентом + цвет нижнего фона, 4 внутренних - черные уголки для скругления без повторения. Alar, верни репу!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Плавающие элементы шапки	AnaTao	HTML и CSS	0	11.07.2010 16:31
Код шапки сайта.	ariya	HTML и CSS	5	25.05.2010 00:17
Размер шапки сайта	stenl1	HTML и CSS	5	18.05.2010 18:26
Верстка шапки сайта - нужнен совет специалистов	Manonia	HTML и CSS	7	22.04.2010 09:33
Создание шапки в файле	s070308	Microsoft Office Excel	0	30.03.2009 11:05