Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Простейшая div-ная верстка, отступы 
:(
    Опции темы
MacTep
Дата 27.12.2011, 01:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1292
Регистрация: 4.8.2003
Где: г. Самара

Репутация: нет
Всего: 4
Не понимаю, откуда эти дурацкие отступы :(((
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>



--------------------
(A)bort, (R)etry, (I)gnore = Haфиг, Heфиг, Пoфиг ... :)
PM MAIL   Вверх
$дмитрий
Дата 27.12.2011, 02:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 10
Всего: 45
Наследие тега P, обнули margin
PM MAIL   Вверх
SelenIT
Дата 27.12.2011, 04:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401
Margin collapsing


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
MacTep
Дата 27.12.2011, 06:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1292
Регистрация: 4.8.2003
Где: г. Самара

Репутация: нет
Всего: 4
Спасибо!

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

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

Это сообщение отредактировал(а) MacTep - 27.12.2011, 06:36


--------------------
(A)bort, (R)etry, (I)gnore = Haфиг, Heфиг, Пoфиг ... :)
PM MAIL   Вверх
$дмитрий
Дата 28.12.2011, 08:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 10
Всего: 45
Потому что padding-left: 10px; + width: 790px; = 800px

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

<!DOCTYPE html>



Это сообщение отредактировал(а) $дмитрий - 28.12.2011, 08:02
PM MAIL   Вверх
SelenIT
Дата 1.1.2012, 05:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401
Цитата($дмитрий @  28.12.2011,  08:02 Найти цитируемый пост)
И убери этот страшный doctype

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

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

Это сообщение отредактировал(а) SelenIT - 1.1.2012, 18:45


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
$дмитрий
Дата 1.1.2012, 13:35 (ссылка) | (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 10
Всего: 45
Код

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

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

Это сообщение отредактировал(а) $дмитрий - 1.1.2012, 13:42
PM MAIL   Вверх
SelenIT
Дата 1.1.2012, 18:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401
А, тогда полностью согласен! Мне показалось, что "страшный" было сказано про короткий доктайп (который я и защищал).

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


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0491 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.