Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Простейшая div-ная верстка


Автор: MacTep 27.12.2011, 01:51
Не понимаю, откуда эти дурацкие отступы :(((
http://clip2net.com/s/1qZpL

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Статистика</title>
        <meta http-equiv=Content-Type content="text/html; charset=windows-1251">
        <style>
            html, body {
                margin: 0;
                padding: 0;
            }
            body {
                font-family: Tahoma,Verdana,sans-serif;
                font-size: 12px;
                text-align: center;
            }
            div#container {
                text-align: left;
                width: 800px;
                margin: 0 auto;
            }
            div#header {
                height: 100px;
                line-height: 100px;
                margin: 0;
                padding-left: 10px;
                background: #EEE;
                color: #79B30B;
            }
            div#panel1 {
                background: #B9CAFF;
                height: 250px;
                margin-top: -10;
                padding-left: 20px;
                clear: left;
            }
            div#panel2 {
                background: #CC99FF;
                height: 250px;
                padding-left: 30px;
                clear: left;
            }
            div#footer {
                height: 100px;
                background: #333;
                color: #FFF;
                padding-left: 40px;
                clear: left;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <div id="header">
                <p>Шапка</p>
            </div>
            <div id="panel1">
                <p>Приветственная информация</p>
            </div>
            <div id="panel2">
                <p>Авторизация</p>
            </div>
            <div id="footer">
                <p>Подвал</p>
            </div>
        </div>
    </body>
</html>

Автор: $дмитрий 27.12.2011, 02:47
Наследие тега P, обнули margin

Автор: SelenIT 27.12.2011, 04:39
http://softwaremaniacs.org/blog/2005/09/05/css-layout-flow-margins/#margin-collapsing

Автор: MacTep 27.12.2011, 06:20
Спасибо!

И еще один вопрос по данному блоку верстки:
Код

p {
                margin: 0;
            }
            div#container {
                text-align: left;
                width: 800px;
                margin: 0 auto;
                background: #33FF00;
            }
            div#header {
                height: 100px;
                width: 790px;
                line-height: 100px;
                margin: 0;
                padding-left: 10px;
                background: #EEE;
                color: #79B30B;
            }

Почему ширина основного контейнера 800px, вложенного в него контейнера 790px, а я их вижу, одинаковой ширины вот так? http://clip2net.com/s/1r08R

Автор: $дмитрий 28.12.2011, 08:02
Потому что padding-left: 10px; + width: 790px; = 800px

И убери этот страшный doctype
Код

<!DOCTYPE html>


Автор: SelenIT 1.1.2012, 05:02
Цитата($дмитрий @  28.12.2011,  08:02 Найти цитируемый пост)
И убери этот страшный doctype

Ничего он не страшный, а единственный нормальный из существующих. Ибо лаконичный, понятный и честный. Все остальные - от лукавого.

UPD: я имел в виду именно <!DOCTYPE html>, сорри за недопонимание.

Автор: $дмитрий 1.1.2012, 13:35
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

SelenIT, не вижу тут локаничности, понятливости и т.д. smile Автор темы, скорее всего, только учится верстать. Зачем ему заморачиваться на HTML 4? Пусть сразу переходит на 5-й

Автор: SelenIT 1.1.2012, 18:43
А, тогда полностью согласен! Мне показалось, что "страшный" было сказано про короткий доктайп (который я и защищал).

Хотя для браузеров разницы никакой, конечно... но именно поэтому писать лишнее незачем smile

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)