#content_center_page {
margin: 10px 110px;
}
CSS. Непонятки со схемой визуального форматирования
Вот простейшая страница: http://alekciy.ru/a1.html по идее между красным и желтым блоком ни каких промежутков быть не должно. Однако он есть, и я не могу понять почему.
Если точнее, я выснил почему:
Однако на сколько я понимаю CSS спецу такого быть не должно. Блок элемента #content_page является контейнером для блока порождаемого элементом #content_center_page и по идее величина поля в 10px должна браться относительно верхнего края #content_page.
Если точнее, я выснил почему:
Код:
Однако на сколько я понимаю CSS спецу такого быть не должно. Блок элемента #content_page является контейнером для блока порождаемого элементом #content_center_page и по идее величина поля в 10px должна браться относительно верхнего края #content_page.
Да, в принципе как пофиксить понял. Заменяем
на
Либо можно для #content_page прописать границу, тогда тоже лечиться.
Вроде все получилось как и требуется, однако непонятка осталась.... Бага? Фича? Я не так понимаю CSS? Самое веселое что так получается во всех браузера.
Код:
<div id="content_page"><div id="content_center_page"> </div></div>
на
Код:
<div id="content_page"> <div id="content_center_page"> </div></div>
Либо можно для #content_page прописать границу, тогда тоже лечиться.
Вроде все получилось как и требуется, однако непонятка осталась.... Бага? Фича? Я не так понимаю CSS? Самое веселое что так получается во всех браузера.
Ну, уже поднимался вопрос, что спецификация оторвана от реальных задач. Однако, имхо, приведенное решение не идеально - всё-таки применение в верстке символов для уравновешения проблем CSS, это хак. Пропадает сама философия CSS - смена дизайна без смены html-кода.
А что делать... я нашел данный способ наиболее приемлемым.
А использовать другой doctype? Не поможет?
Нет. О DOCTYPE я в первую очередь подумал. Да даже если бы и помогло, этот метод был бы не приемлем. Нужен имеено этот доктайп.
Сталкивался с подобной проблемой, но правда только в IE - пустой <div> получает загадочный height в 10 px. Решал похожим образом. Но что-бы во всех :eek:
Не понял проблемы... У меня вроде как все работает как надо...
Цитата: RussianSpy
Не понял проблемы... У меня вроде как все работает как надо...
Ссылка в стартовом посте. Там белое поле между красным и желтым блоками.
Правильно. Белое поле. margin ведь выставлен.
Цитата: RussianSpy
Правильно. Белое поле. margin ведь выставлен.
Это да. НО. Это было бы справедливо если бы красный цвет заливки был бы задан для content_center_page блока. Но он задан для его контейнера, т.е. для content_page. И по идее текстовая часть блока должна отображать на 10px ниже (что в принципе сейчас и есть), а вот фон в этих 10px должен быть красным.
сделай border-top:10px solid red; и не парься.
Цитата: RussianSpy
сделай border-top:10px solid red; и не парься.
Нет. Я знаю, что так можно решить. Но способ был отброшен сразу. Ибо это упрощенный вариант, в реальном проекте сам понимашь ни какой заливки красным нет. Хотел сделать границу в один пиксель и установить для неё border-color в transperent, однако глуповатый осел границу нарисовал серой линией. Не приемлемо.
Цитата: alekciy
Нет. Я знаю, что так можно решить. Но способ был отброшен сразу. Ибо это упрощенный вариант, в реальном проекте сам понимашь ни какой заливки красным нет. Хотел сделать границу в один пиксель и установить для неё border-color в transperent, однако глуповатый осел границу нарисовал серой линией. Не приемлемо.
Вот тебе рабочий код
Код:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Главная</title>
<style type="text/css">
#head_page {
height: 240px;
background-color: green;
}
#menu_page {
height: 51px;
background-color: #eede2a;
}
#content_page {
background-color: red;
float: left;
width: 100%;
}
#content_center_page {
background-color:blue;
margin-top:10px;
}
</style>
</head>
<body>
<div id="head_page"></div>
<div id="menu_page"></div>
<div id="content_page"><div id="content_center_page">Text message</div></div>
<div id="footer_page"> </div>
</body></html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Главная</title>
<style type="text/css">
#head_page {
height: 240px;
background-color: green;
}
#menu_page {
height: 51px;
background-color: #eede2a;
}
#content_page {
background-color: red;
float: left;
width: 100%;
}
#content_center_page {
background-color:blue;
margin-top:10px;
}
</style>
</head>
<body>
<div id="head_page"></div>
<div id="menu_page"></div>
<div id="content_page"><div id="content_center_page">Text message</div></div>
<div id="footer_page"> </div>
</body></html>
ЗЫ Надеюсь без награды не останусь ;)
Цитата: RussianSpy
ЗЫ Надеюсь без награды не останусь ;)
Гыыы :D все бы тебе награду получить! Неплохой метод, хотя и не всегда приемлемый. Но мне подходит.
Цитата: RussianSpy
ЗЫ Надеюсь без награды не останусь ;)
Цитата:
Вы должны добавить отзыв кому-то еще, прежде чем сможете снова добавить ее RussianSpy.
Хотя я как минимум 2-3 отзыва уже другим написал.
Цитата: cogonet
Сталкивался с подобной проблемой, но правда только в IE - пустой <div> получает загадочный height в 10 px. Решал похожим образом. Но что-бы во всех :eek:
Корявая высота (в IE) пустого дива с height: 0; лечится так:
Код:
#empty_div
{
height: 0;
line-height: 0;
font-size: 0;
}
{
height: 0;
line-height: 0;
font-size: 0;
}
Ковырялся долго, прежде чем додумался до такого решения. Но оно уж точно никакое не хакнутое.