DIV - разметка блочного типа - Страница 2

s1mon · 20.10.2006, 06:44

До недавнего времени часто можно было увидеть что весь сайт построен с помощью таблицы. Теперь все чаще стали использовать, так называемую, размету блочного типа:

Цитата:

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

Совершенно естественно, что по набору атрибутов управления отображением (атрибуты описания стиля) строковые и блочные элементы отличаются. Упрощенно можно сказать, что атрибуты описания стиля строкового элемента являются подмножеством атрибутов описания стиля блочного элемента.

Обобщениями блочного и строкового элементов с точки зрения стилей выступают элементы DIV и SPAN соответственно.

Кто чем пользуется?

Я строю главный макет страницы из таблицы, а в стлобцах уже ипользую DIV. Для новостных лент и аналогичных - UL+LI. Удобно.

**Antony** · 24.01.2007, 12:24

Formazon
А не пробовал так:
margin:0 auto;

s1mon что-то я про эти индексы не догнал.. как их использовать?

s1mon · 24.01.2007, 12:53

Цитата:

Сообщение от Antony

что-то я про эти индексы не догнал.. как их использовать?

Да легко... Допустим есть у тебя шапка сайта... красивая такая, но вот незадача - нужно туда срочно объявление влепить... А как сделать? Переверстывать шапку, ради баннера - глупое занятие, особенно если объявление в виде сложной таблицы... Так вот ты должен просто сделать зависимый DIV к этой шапке, а в DIV уже врисовать табличку с объявлением - обязательное условие - глубина слоя должна быть выше основной страницы - а это Z-index > 0. Понимаешь?

s1mon · 25.01.2007, 13:28

Есть проблема... Как заставить текст центрироваться по вертикали?
div {
width:120px;
height:120px;
border:1px solid;
border-color:#858585;
background-color:#edecec;
text-align: center;
padding:10px;
margin:10px;
font-family:Verdana;
font-size:10px;
float: left;
}
<div>DIV Element</div>

**Antony** · 02.02.2007, 10:13

s1mon Если Table, то vertical-align:middle;
А с DIV-ом не получается..

Насчет z-indexов:
Я просто делал страницу, а скажем "объявление" выравнивал абсолютно (абсолютное позиционирование)... и оно встает куда захочешь и поверх всего...
Зачем тогда указывать z-index??

s1mon · 02.02.2007, 10:22

Antony Бывает просто когда есть выпадающие меню, допустим вверху (горизонтальное меню), и где-нибудь в левом контентном блоке... Так вот допустим нужно чтобы верхнее перекрывало боковое, ну и так далее (я понимаю что это бред, но в данный момент я именно над этим бредом и парюсь - заказчик вредный очень)... Ну и, опять же, в этом же заказе, нужно было поверх флэша вставить DIV с новостями!

Короче... {* Не хватает зла, даже для комментариев *}

**Antony** · 03.02.2007, 15:35

2 s1mon
div {
vertical-align: middle;
display: table-cell;
}
Так не пробовал? Выравнивает... Только какие-то понты с нормальным расположением блока... не встает туда, куда надо и косяки с маргинами-паддингами...

================================

У меня есть еще 2 вопроса связанных с ненавистным IE:

1-й вопрос:

HTML-файл: 3 блока...
<body>
<div class=LeftFoot>Left</div>
<div class=RightFoot>Right</div>
<div class=CenterFoot>Center</div>
</body>

CSS-файл:
div.LeftFoot
{
height: 92px;
background:#999;
width:150px;
float:left;
}
div.RightFoot
{
height: 92px;
background:#999;
width:150px;
float:right;
}
div.CenterFoot
{
height:92px;
margin:0 150px 0 150px;
background:#bbb;
}

в FireFox все нормально.. IE рисует между блоками не нужные белые полоски (типа маргина... у меня 3 пиксела шириной...). ОТКУДА ОНИ?! не понимаю... надо от них избавиться...

Выход - убрать из div.CenterFoot строчку height:92px;. тогда полоски исчезают, но меняется высота среднего блока.

Что к чему? Как быть?

2-й вопрос:

min-width... Как известно, в IE этот параметр не работает.. Как тогда можно задать минимальную ширину страницы? У меня резиновый сайт. И без указания этого параметра он просто сжимается до предела при уменьшении размеров окна. А хотелось бы хоть как-то ограничить это уменьшение...

s1mon · 20.02.2007, 13:52

Antony Попробуй с разными DOCTYPE'ами... может помочь.

Ishtar · 29.03.2007, 09:38

А что делать, если, напрмер, есть DIV-блок. Надо сделать solid-ную рамку вокруг него: со всех четырех сторон, кроме правого нижнего угла. А в правом нижнем углу - "скошенный уголок" (скажем под 45 градусов).

Как такое сделать? Если этот уголок реализовывать фоном, то он ведь расположится там где надо, но квадратная рамка этим рисунком не перекроется, а будет "очерчивать"...

Как быть?

**Vadya corp.** · 29.03.2007, 10:01

Ishtar делаешь растр нижнего бордюра с уголком, а потом в диве говоришь, что border-bottom: url();, ежели не пройдет, то просто внизу блока <img src=>, а для блока делаешь border:1px solid black;border-bottom:none;

**Vadya corp.** · 29.03.2007, 10:03

И посмотри код на fishki.net - там точно также сделано

24.01.2007, 12:24	#38809
Antony Лис 2006 Регистрация: 15.11.2005 Адрес: Омск Сообщения: 310	Formazon А не пробовал так: margin:0 auto; s1mon что-то я про эти индексы не догнал.. как их использовать? __________________ Если ты не встанешь на сноуборд этой зимой, то следующей ты станешь на год старше! Зато если ты встанешь на сноуборд этой зимой, то можешь и не стать на год старше!.. PS: Без бордА мне жизнь горькА...

25.01.2007, 13:28	#38919
s1mon Гуру Регистрация: 17.01.2006 Адрес: Клуб управления гневом Сообщения: 408 Нарушения:	Есть проблема... Как заставить текст центрироваться по вертикали? div { width:120px; height:120px; border:1px solid; border-color:#858585; background-color:#edecec; text-align: center; padding:10px; margin:10px; font-family:Verdana; font-size:10px; float: left; } <div>DIV Element</div> __________________

02.02.2007, 10:13	#39788
Antony Лис 2006 Регистрация: 15.11.2005 Адрес: Омск Сообщения: 310	s1mon Если Table, то vertical-align:middle; А с DIV-ом не получается.. Насчет z-indexов: Я просто делал страницу, а скажем "объявление" выравнивал абсолютно (абсолютное позиционирование)... и оно встает куда захочешь и поверх всего... Зачем тогда указывать z-index?? __________________ Если ты не встанешь на сноуборд этой зимой, то следующей ты станешь на год старше! Зато если ты встанешь на сноуборд этой зимой, то можешь и не стать на год старше!.. PS: Без бордА мне жизнь горькА...

02.02.2007, 10:22	#39789
s1mon Гуру Регистрация: 17.01.2006 Адрес: Клуб управления гневом Сообщения: 408 Нарушения:	Antony Бывает просто когда есть выпадающие меню, допустим вверху (горизонтальное меню), и где-нибудь в левом контентном блоке... Так вот допустим нужно чтобы верхнее перекрывало боковое, ну и так далее (я понимаю что это бред, но в данный момент я именно над этим бредом и парюсь - заказчик вредный очень)... Ну и, опять же, в этом же заказе, нужно было поверх флэша вставить DIV с новостями! Короче... {* Не хватает зла, даже для комментариев *} __________________

03.02.2007, 15:35	#39876
Antony Лис 2006 Регистрация: 15.11.2005 Адрес: Омск Сообщения: 310	2 s1mon div { vertical-align: middle; display: table-cell; } Так не пробовал? Выравнивает... Только какие-то понты с нормальным расположением блока... не встает туда, куда надо и косяки с маргинами-паддингами... ================================ У меня есть еще 2 вопроса связанных с ненавистным IE: 1-й вопрос: HTML-файл: 3 блока... <body> <div class=LeftFoot>Left</div> <div class=RightFoot>Right</div> <div class=CenterFoot>Center</div> </body> CSS-файл: div.LeftFoot { height: 92px; background:#999; width:150px; float:left; } div.RightFoot { height: 92px; background:#999; width:150px; float:right; } div.CenterFoot { height:92px; margin:0 150px 0 150px; background:#bbb; } в FireFox все нормально.. IE рисует между блоками не нужные белые полоски (типа маргина... у меня 3 пиксела шириной...). ОТКУДА ОНИ?! не понимаю... надо от них избавиться... Выход - убрать из div.CenterFoot строчку height:92px;. тогда полоски исчезают, но меняется высота среднего блока. Что к чему? Как быть? 2-й вопрос: min-width... Как известно, в IE этот параметр не работает.. Как тогда можно задать минимальную ширину страницы? У меня резиновый сайт. И без указания этого параметра он просто сжимается до предела при уменьшении размеров окна. А хотелось бы хоть как-то ограничить это уменьшение... __________________ Если ты не встанешь на сноуборд этой зимой, то следующей ты станешь на год старше! Зато если ты встанешь на сноуборд этой зимой, то можешь и не стать на год старше!.. PS: Без бордА мне жизнь горькА...

20.02.2007, 13:52	#41071
s1mon Гуру Регистрация: 17.01.2006 Адрес: Клуб управления гневом Сообщения: 408 Нарушения:	Antony Попробуй с разными DOCTYPE'ами... может помочь. __________________

29.03.2007, 09:38	#44610
Ishtar Новичок Регистрация: 20.09.2006 Сообщения: 11	А что делать, если, напрмер, есть DIV-блок. Надо сделать solid-ную рамку вокруг него: со всех четырех сторон, кроме правого нижнего угла. А в правом нижнем углу - "скошенный уголок" (скажем под 45 градусов). Как такое сделать? Если этот уголок реализовывать фоном, то он ведь расположится там где надо, но квадратная рамка этим рисунком не перекроется, а будет "очерчивать"... Как быть?

29.03.2007, 10:01	#44611
Vadya corp. Premium Member Регистрация: 26.10.2005 Сообщения: 293	Ishtar делаешь растр нижнего бордюра с уголком, а потом в диве говоришь, что border-bottom: url();, ежели не пройдет, то просто внизу блока <img src=>, а для блока делаешь border:1px solid black;border-bottom:none; __________________ Готовлю еду за PHP и MySQL

29.03.2007, 10:03	#44612
Vadya corp. Premium Member Регистрация: 26.10.2005 Сообщения: 293	И посмотри код на fishki.net - там точно также сделано __________________ Готовлю еду за PHP и MySQL

Здесь присутствуют: 1 (пользователей - 0 , гостей - 1)