div проблемы с позицией в заголовке и основной

у меня есть страница с 3 родительскими div, теперь у меня проблемы с позиционированием div внутри div заголовка. мой код примерно такой:

расположение разделов:

<div id="layout">
    <div id="header" class="body">
        header
        <div id="logo">logo</div>
        <div id="menu">menu</div>
    </div>
    <div id="main">
        <div id="left">left</div>
        <div id="right">right</div>
        <div id="body">body</div>
        <div id="clear"></div>
    </div>
    <div id="footer">footer</div>
</div>

css примерно так:

.body {
 background-color: #ffffff;
 margin: 0px;
 background-repeat: repeat-x;
 background-image: url(imgs/back.png);
}

#layout {
 margin:auto;
 width: 1024px;
 background-color:  #ffffff;
}

#main {
   background-color:  #ffffff; 
}

#header {
 background-color:#0F0;
 height: 300px;
}

#body {
 margin-left: 180px;
 margin-right: 180px;
 padding: 5px;
 background-color:  #ffffff;
}

#footer {
 margin-left: 180px;
 margin-right: 180px;
 padding: 0px;
 background-color:  #ffffff;
}

#right {
 float: right;
 width: 180px;
 padding: 0px;
 margin: 0px;
 right: 0px;
    background-color:  #ffffff;
}

#left {
 float: left;
 width: 180px;
 padding: 0px;
 margin: 0px;
 left: 0px;
 background-color:  #ffffff;
}

#clear {
   clear:both; 
}

я хочу поместить в позицию div заголовка (например, по вертикали: по центру, по горизонтали: 0 пикселей (0 пикселей div заголовка, а не по всей странице) слева) и меню в другом положении (например, по вертикали: вверху, по горизонтали: между центром и правой стороной (снова центр и правая сторона заголовка div).

буду признателен за решение.

Спасибо всем.


html css header position
person Philiph    schedule 25.11.2010    source источник
comment
Живой пример обычно помогает с такими вопросами, но не бойтесь, у меня есть сила: jsfiddle.net/Kyle_Sevenoaks/ wxkBX !   -  person Kyle    schedule 25.11.2010
comment
Кроме того, скриншот желаемого результата очень полезен, я понятия не имею, чего вы пытаетесь достичь.   -  person Kyle    schedule 25.11.2010

Ответы (1)


arrow_upward
0
arrow_downward

Я мог бы быть более полезным, если бы вы могли уточнить свой вопрос.

Я не уверен, что вы просите с точки зрения местоположения заголовка.

Вот подход к перемещению меню между центром и правой колонкой. Вложите меню и правый столбец в другой выровненный по правому краю div. Для примера я назвал его right-container.

Вот HTML

<div id="layout">
    <div id="header" class="body">
        header
        <div id="logo">logo</div>
    </div>
    <div id="main">
        <div id="left">left</div>
        <div id="right-container">
           <div id="menu">menu</div>
           <div id="right">right</div>
        </div>
        <div id="body">body</div>
        <div id="clear"></div>
    </div>
    <div id="footer">footer</div>
</div>​

И вот операторы css, которые я добавил:

#right-container {
 float: right;
 width: 360px;
 padding: 0px;
 margin: 0px;
 right: 0px;
    background-color:  #ffffff;
}

#menu {
 float: left;
 width: 180px;
 padding: 0px;
 margin: 0px;
 left: 0px;
 background-color:  #ffffff;
}

Вы можете увидеть скрипку здесь:

http://jsfiddle.net/SkLvX/

person Jonathon L    schedule 27.03.2012