VPF::Помогите устранить недочеты - Форум программистов

CmndrAlexGreen

Дата 16.5.2011, 14:35 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 25
Регистрация: 1.3.2009

Репутация: нет
Всего: нет

Делаю сайт посвященный СКС, все вроде сделал по правилам, но тут на тебе появился непонятный отступ с верху и при том, что ко всему документу применяется margin:0;
padding:0;

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="Современные кабельные сети" />
<meta name="description" content="Современные кабельные сети" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Современные кабельные сети</title>
</head>
<body><div id="box"><!--начало бокса-->
        <div id="name"></div>
        <div id="menu"><ul id="menu">
                <li><a href="">Text</a></li>
                <li>|</li>
                <li><a href="">Text</a></li>
                <li>|</li>
                <li><a href="">Text</a></li>
                <li>|</li>
                </ul></div>
        <div id="src"><img src="img/src.png" alt=""/></div>

        <div id="img"></div>

        <div id="content"><h5>Text</h5><p>Text
        <ul id="cont">
                <li><h3>Text</h3><p><img src="img/lan2_h2.png" alt=""/>Text</p></li>
                <li><h3>Text</h3><p><img src="img/lan_h2.png" alt=""/>Text</p></li>
        </ul>



        </div>
            <div id="footer"><!--начало подвала-->
            <span id="copyr">Text</span>
            </div><!--конец подвала-->
</div><!--конец бокса--></body>
</html>

Код


/*----------общие параметры для страницы----------*/

html {background:#fff;}

body {
margin:0; 
padding:0; 
font-family:arial, verdana, sans-serif; 
font-size: 12px;
color:#3e3e3e; 
text-align:center;
}

ul {list-style:none;padding:0; }
a, a:visited {color:#048;text-decoration:none;}
a:hover {text-decoration:none;}
a img {border: none}
h5    {font-size: 16px;color:#08457e;text-align:left;}



/*----------общая коробка для всего сайта----------*/

#box    {width:947px;margin: 0px auto;}


/*----------раздел головы----------*/
#name {width:268px;height:80px;float:left;background:green;}
#menu {width:398px;height:80px;float:left;color:#666;text-align:left;}
#menu li {display:inline;}
#menu a {color:#666;}
#src {width:281px;height:80px;float:left;}

#img    {width:947px;height:137px;background:url(img/borealis-energy-networks.jpg) no-repeat;float:left;}

#content    {width:947px;height:100%; display:block;text-align:left;}
#cont        {display:block;}
#cont li    {display:inline;width:430px;height: 240px;float:left;margin: 0px 0px 20px;padding-right: 20px;}
#cont h3    {margin: 0px auto;color:#0074E8;font-size:16px;text-align:center;}
#cont img    {float:left;margin: 10px;}



/*-----раздел подвала-----*/
#footer    {    clear:both; margin-top:20px;width:947px; height:25px;border-top: 1px solid #ddd;}
#copyr    {    margin-left:20px; font-size: .7em;}

ссылка сайта на хостинге тут

0Scrum

Дата 16.5.2011, 18:59 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 47
Регистрация: 24.1.2011

Репутация: 2
Всего: 3

add

#content {
...
clear:both;
}

и на всякий пожарный (это необязательно)

#cont {
...
overflow: hidden;
}

Это сообщение отредактировал(а) 0Scrum - 16.5.2011, 19:02

CmndrAlexGreen

Дата 16.5.2011, 21:16 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 25
Регистрация: 1.3.2009

Репутация: нет
Всего: нет

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

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »