KorPaEv
Member
- Регистрация
- 08.07.2011
- Сообщения
- 17
Доброго времени суток, уважаемые!
Вопрос в следующем, начал заниматься освоением верстки и взял у знакомого простенький сайт тестовый для обучения.
Разбираюсь с шапкой и возникли трудности с контейнером под телефон и информацию в шапке.
Ниже прилагаю сам дизайн шапки и свой код...
Дизайн и страничка в архиве.
Код html
Код CSS
Значит, не могу выровнить телефон относительно логотипа телефона в цсске, плюс отдельный вопрос по информации в красной рамке - чем больше инфы - тем больше рамка расширяется по вертикали, инфы меньше - рамка меньше - размер ее не фиксированный - это совсем не знаю как сделать...
Посоветуйте как лучше, пожалуйста.
Вот архив...
Вопрос в следующем, начал заниматься освоением верстки и взял у знакомого простенький сайт тестовый для обучения.
Разбираюсь с шапкой и возникли трудности с контейнером под телефон и информацию в шапке.
Ниже прилагаю сам дизайн шапки и свой код...
Дизайн и страничка в архиве.
Код 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>
Код:
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;
}Посоветуйте как лучше, пожалуйста.
Вот архив...
