Позиционирование двух 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

Цитата:

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

Не понимаю... Зачем тогда вообще нужен 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

Цитата:

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

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

для хорошей жизни в будущем =)

То есть это из той серии, когда стандарт есть, но никто его не поддерживает? Хе-хе, анекдот в этой связи вспоминается... "жопа есть, а слова нет"... ))) Только в этом случае все как раз наоборот... ))))

KidsKilla · 08.09.2006, 18:22

по-моему всё-таки наглядней сокращённая запись.
+ текста меньше. дело всё-таки не только вкуса, но и профессионализма.