PDA

Просмотр полной версии : Позиционирование двух DIV'ов в родительском элементе

automatix
08.09.2006, 00:27
Всем привет!

Имеется див (middle_left) с двумя детьми. Первый (menuDiv) относительно позиционирован в родительском диве. Второй (langDiv) должен стоять по центру внизу. Вот, никак не могу разместить второй див так, чтоб ему было удобно...

Пока получается поставить второй (langDiv) только на фиксированном расстоянии относительно первого (menuLu)...

<div id="middle_left">
<div id="menuDiv">
<ul id="menuLu">
<LI><a href="element1.0.html"><FONT class="aContent_1_ACT">Element1</FONT></a></LI>
<LI><a href="element2.0.html"><FONT class="aContent_1_ACT">Element2</FONT></a></LI>
<LI><a href="element3.0.html"><FONT class="aContent_1_ACT">Element3</FONT></a></LI>
</ul>
</div>
<div id="langDiv">Languages</div>
</div>

<STYLE>
#middle_left
{
width:160px;
height:100%;

float:left;

padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;

text-align:center;
}

#menuDiv {
background-color:#EEEAEB;

position:relative;
top:0px;
left:0px;

width:134px;
height:200px;
padding:0px 10px 0px 10px;
margin:0px auto 0px auto;

border:1px solid #834627;
}

#langDiv, #bannerDiv {
border:0px solid #834627;
background-color:#CCCCCC;

position:relative;
top:10px;
left:0px;

width:71px;
height:25px;
padding:0px 0px 0px 0px;
margin:auto auto auto auto;

font-size:8px;
font-weight:bold;
}
</STYLE>

Что подскажете, коллеги?

Спасибо.
automatix
08.09.2006, 03:39
...или так:
<html>
<head>
<STYLE>
#middle_left
{
background-color:#EEEAEB;

width:560px;
height:400;

padding:0px 0px 0px 0px;
margin:auto auto auto auto;
}

#langDiv {
background-color:#CCCCCC;

width:71px;
height:25px;

margin:auto auto 0px auto;
}
</STYLE>
</head>

<body>

<div id="middle_left">
<div id="langDiv">Languages</div>
</div>

</body>
</html>
Я, видимо, чего-то не понимаю... Ожидаемый результат: langDiv в middle_left, выровненный вертикально по нижнему краю дива middle_left и горизонтально по центру то го же middle_left. margin:auto auto 0px auto; -- этого же должно хватать?! Люди, что тут не так?
baron27
08.09.2006, 13:09
<STYLE>
#middle_left
{ background-color:#EEEAEB;
width:560px;
height:400;

position:relative;
}
#langDiv {
background-color:#CCCCCC;
width:71px;
height:25px;

position:absolute;
bottom:0;
margin-left:-35px; /* половина ширины элемента */
left:280px; /* половина ширины контейнера */
}
</STYLE>
automatix
08.09.2006, 13:12
Верно. Но возвращаясь к моему вопросу во втором сообщении. Почему не работают верхний и нижний margin, когда устанавливаешь их значение на auto?
baron27
08.09.2006, 14:10
вообще, для горизонтального позиционирования по центру достаточно строки
{margin-left:auto; margin-right:auto; width:71px;}

но для margin-top и margin-bottom такая фигня не пройдет. при задании им значения auto, они обнуляются.
automatix
08.09.2006, 14:21
Не понимаю... Зачем тогда вообще нужен auto в margin-top и margin-bottom?
KidsKilla
08.09.2006, 18:04
Не понимаю... Зачем тогда вообще нужен auto в margin-top и margin-bottom?
для хорошей жизни в будущем =)

2 baron27: для #langDiv лучше не position:absolute; а position:relative;

2 automatix:
1) padding:0px 0px 0px 0px; = padding:0; (0px = 0em = 0pt = 0)
2) margin:auto auto auto auto; = margin:auto;
3) background-color:#CCCCCC; = background-color:#CCC;
4) margin:auto auto 0px auto; = margin:auto auto 0px; (если прав-лево одинаковы)
automatix
08.09.2006, 18:18
2 automatix:
1) padding:0px 0px 0px 0px; = padding:0; (0px = 0em = 0pt = 0)
2) margin:auto auto auto auto; = margin:auto;
3) background-color:#CCCCCC; = background-color:#CCC;
4) margin:auto auto 0px auto; = margin:auto auto 0px; (если прав-лево одинаковы)
Да, правильно. Но так (напр. "margin:auto auto auto auto;") наглядней (по крайней мере для меня).
automatix
08.09.2006, 18:22
для хорошей жизни в будущем =)То есть это из той серии, когда стандарт есть, но никто его не поддерживает? Хе-хе, анекдот в этой связи вспоминается... "жопа есть, а слова нет"... ))) Только в этом случае все как раз наоборот... ))))
KidsKilla
08.09.2006, 18:22
по-моему всё-таки наглядней сокращённая запись.
+ текста меньше. дело всё-таки не только вкуса, но и профессионализма.
KidsKilla
08.09.2006, 18:26
То есть это из той серии, когда стандарт есть, но никто его не поддерживает? Хе-хе, анекдот в этой связи вспоминается... "жопа есть, а слова нет"... ))) Только в этом случае все как раз наоборот... ))))
http://www.w3.org/TR/REC-CSS2/visudet.html#Computing_heights_and_margins
baron27
08.09.2006, 18:56
>> http://www.w3.org/TR/REC-CSS2/visude...ts_and_margins

получается в данном случае: стандарт - это жопа:)
automatix
09.09.2006, 00:02
по-моему всё-таки наглядней сокращённая запись.
+ текста меньше. дело всё-таки не только вкуса, но и профессионализма.Согласен, это уже из той области, где можно спорить, дело ли это только вкуса или профессионального подхода.
Профессионализм -- это очень красивое слово, значение которого растяжимо... Для меня профессионализм это кроме всего прочего в едином стиле выдержанный код. Если в моем коде десять раз встречается margin с четырьмя явно обозначенными параметрами, то пусть и одиннадцатый выглядит так же, как предыдущие.
automatix
09.09.2006, 00:41
http://www.w3.org/TR/REC-CSS2/visudet.html#Computing_heights_and_margins
>> http://www.w3.org/TR/REC-CSS2/visude...ts_and_margins

получается в данном случае: стандарт - это жопа:)
В общем, все плохо... Хочешь жни, а хочешь куй -- все равно получишь нуль... вместо auto... )))