Develax
-
Posts
4 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by Develax
-
Спасибо, теперь понятно. Только, если это имеет смысл для <p>, то для <div> как-то больше смущает. + еще пяток правил, которые нужно постоянно держать в голове. Ну не мне судить.
-
Код полностью: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Untitled 1</title> </head> <body style="margin:0px; padding:0px;"> <div style="background: blue; height: 50px;"> <div style="background: green; height: 30px; margin-top: 30px;"> </div> </div> </body> </html> Для удобства обозначу первый div - 'A', вложенный div - 'B'. У 'B' задан margin-top: 30px, и я ожидаю, что он получит отступ в 30 пикселей от верхней границы 'A'. Слой 'A' при этом останется прижат к верхней границе страницы. Но в итоге получается другая картина - отступ получает слой 'A', а слой 'B' остается прижат к верхней границе слоя 'A'. Я неверно понимаю принцип работы свойства margin? Если добавить к слою 'A' хотя-бы минимальный padding (1px), все начинает работать согласно моим ожиданиям. В чем тут может быть дело? P.S. Сейчас обнаружил, что в IE9 в режиме совместимости все работает согласно моим ожиданиям. Если добавить еще один вложенный div с margin-top, опять тот же эффект, причем эти margin'ы складываются. <body style="margin:0px; padding:0px;"> <div style="background: blue; height: 150px;"> <div style="background: green; height: 80px; margin-top: 30px;"> <div style="background: red; height: 40px; margin-top: 60px;"> </div> </div> </div> </body> И опять же все лечится padding:1px. Я ничего не понимаю
-
Слой второй колонки не учитывает отступ от слоя шапки
Develax replied to Develax's question in HTML Coding
Решил попробовать добавить в слой-контейнер(5) float: left, оказалось что-то чудесным образом решает основную проблему топика. После работы с XAML, где внутренний элемент никак не может повлиять на расположение родительского, логика поведения html кажется несколько причудливой. -
Здравствуйте, пару дней, как начал изучать HTML, возник такой вопрос: Простой шаблон страницы: шапка(1), левая колонка(2), правая колонка(3), подвал(4). Левая и правая колнки лежат в отдельном слое(5), т.к. собирался делать третью колонку справа. Для всех элементов задан margin: 5px. Левая колонка(2) отстоит от шапки(1) на 5px + 5px ее собственный отступ. Правая же колонка(3) игнорирует отступ от шапки(1), учитывает только свой, почему так происходит? Пробую сделать для правой колонки margin-top: 10px, но тогда на 10 пикселей отъезжает весь слой (5). Если убираю слой(5), margin-top: 10px корректирует проблему, но все равно непонятно, почему требуется эта корректировка. Еще не очень принципиальный вопрос (но все же интересно узнать): как можно левую колокну заставить растягиваться на всю высоту слоя-контейнера(5)? Height: 100% не работает. Благодарю за разъяснения. CSS: html { background-color: #e2e2e2; margin: 0; padding: 0; } body { display: block; margin: 0px; } #header, #leftPanel, #rightPanel, #bottomPanel { border: medium solid #33CCFF; margin: 5px; } #container1 { background: LightBlue; } #header { padding-left: 25px; padding-right: 25px; font-family: Comic Sans MS; font-size: large; } #leftPanel { width: 300px; font-family: 'Times New Roman' , Times, serif; font-size: large; font-weight: normal; float: left; } #rightPanel { margin-left: 315px; } #bottomPanel { clear: both; } HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Супер-сайт</title> <link href="_layout.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <h1> Заголовок сайта </h1> </div> <div id="container1"> <div id="leftPanel"> <ul> <li>Плюшки</li> <li>Баранки</li> <li>Дранки</li> <li>Гренки</li> </ul> </div> <div id="rightPanel"> <ul> <li>Плюшки</li> <li>Баранки</li> <li>Дранки</li> <li>Гренки</li> <li>Плюшки</li> <li>Баранки</li> <li>Дранки</li> <li>Гренки</li> <li>Плюшки</li> <li>Баранки</li> <li>Дранки</li> <li>Гренки</li> <li>Плюшки</li> <li>Баранки</li> <li>Дранки</li> <li>Гренки</li> <li>Плюшки</li> <li>Баранки</li> <li>Дранки</li> <li>Гренки</li> <li>Плюшки</li> <li>Баранки</li> <li>Дранки</li> <li>Гренки</li> <li>Плюшки</li> <li>Баранки</li> <li>Дранки</li> <li>Гренки</li> </ul> </div> </div> <div id="bottomPanel"> </div> </body> </html>