расположение раскладки жидких макетов

Это может быть действительно основной вопрос css, но я попытался создать свой жидкий макет в соответствии с инструкциями из книги, пока мой заголовок и панель навигации, кажется, находятся на месте, но контент-div не является, также я бы хотел, чтобы мой контент был более гибким, потому что он предназначен для динамического веб-приложения, поэтому нижний колонтитул должен располагаться под ним соответствующим образом. ИТАК вот макет того, что ид нравится достичь enter image description here расположение раскладки жидких макетов

<body> 

<div id="header"> 
<h1>LOGO</h1> 
<ul> 
<li><a href= ""> Home </a></li> 
<li><a href= ""> Logout </a></li> 
</ul> 
</div> 

<div id="navigation"> 
<ul> 
    <li><a href="">Home</a></li> 
    <li><a href="">My account</a></li> 
    <li><a href="">Help</a></li> 
    <li><a href="">Contact Us</a> </li> 
    </ul> 

</div> 
<div id="personalised"> 
<p>Hey there</p> 
</div> 
<div id="content"> 

</div> 
<div id="footer"> 
<p>&copy; TEST</p> 
</div> 
</body> 
</html>

Вот мой CSS код:

body{ 
width: 90%; 
margin: 0 auto;} 

#content { 
overflow: auto; 
height: 29em;} 

#header{ 
height: 60px; 
overflow: hidden; 
} 
#header h1 { 
    float: left; 
} 
#header ul { 

    float: right; 
} 
#header li { 
    display: inline; 
    padding: 0.5em; 
} 

#personalised p { 
float: left; 
width: 20%; 
margin-top:5%;} 

#navigation{ 
margin: 1%;} 

#navigation ul { 
font-family: Arial, Verdana; 
font-size: 14px; 
padding: 0px; 
list-style: none; 
} 

div#navigation { 
float:right; 
position: absolute; 
top: 10%; 
right: 5%; 
} 
#navigation ul li { 
display: block; 
position: relative; 
float: left; 
} 
#navigation li ul { display: none; } 

#header, #footer, #navigation, #personalised { 
margin: 1%; 
} 
#footer { 
padding: 0.5em 0; 
font-family: Arial, Verdana; 
font-size: 10px; 
text-align: center;}

Я знаю, что это долго, но я действительно ценю вашу помощь. Заранее спасибо

источник

2013-02-15 elmify

Сначала попробуйте использовать форматирование. (Это не так уж плохо, но можно использовать улучшения.) Это одно из самых больших преимуществ для вас - это код, который вы можете прочитать. Вы можете посмотреть, что я здесь сделал, и поиграть с тем, что вам нравится. http://jsfiddle.net/mPH8X/

<head> 
<style> 
div { 
border: 1px dashed #FF0000; 
} 
body { 
    margin: 0px; 
    padding: 0px; 
} 

.clear { 
    clear: both; 
} 

#header { 
    min-height: 60px; 
    overflow: hidden; 
    margin: 1%; 
} 
#header h1 { 
    float: left; 
} 
#header ul { 

    float: right; 
} 
#header li { 
    display: inline; 
    padding: 0.5em; 
} 

#navigation{ 
    margin: 1%; 
    float: right; 
} 

#navigation ul { 
    font-family: Arial, Verdana; 
    font-size: 14px; 
    padding: 0px; 
    margin: 0px; 
    list-style: none; 
} 

#navigation ul li { 
    margin: 0px; 
    padding: 0px; 
    display: block; 
    position: relative; 
    float: left; 
} 

#navigation li ul { 
    display: none; 
} 

.body { 
    clear: both; 
} 

#personalised { 
    margin: 1%; 
    float: left; 
    width: 20%; 
} 

#content { 
    margin: 1%; 
    float; right; 
    min-height: 29em; 
} 

#personalised p { 
    margin: 0px; 
    padding: 0px; 
} 

#header, #footer, #navigation, #personalised { 

} 

#footer { 
    padding: 0.5em 0; 
    font-family: Arial, Verdana; 
    font-size: 10px; 
    text-align: center; 
} 
</style> 
<body> 

<div id="header"> 
    <h1>LOGO</h1> 
    <ul> 
     <li><a href= ""> Home </a></li> 
     <li><a href= ""> Logout </a></li> 
    </ul> 
    <div class="clear"></div> 
</div> 

<div id="navigation"> 
    <ul> 
     <li><a href="">Home</a></li> 
     <li><a href="">My account</a></li> 
     <li><a href="">Help</a></li> 
     <li><a href="">Contact Us</a> </li> 
    </ul> 

    <div class="clear"></div> 
</div> 

<div class="body"> 
    <div id="personalised"> 
     <p>Hey there</p> 
     <div class="clear"></div> 
    </div> 

    <div id="content"> 

    </div> 
</div> 

<div id="footer"> 
    <p>&copy; TEST</p> 
</div> 
</body> 
</html>

Редактировать: Глядя на ваше заявление контента, вы ищете мин высоты CSS в. Min-height установит минимальную высоту и при необходимости увеличится. переполнение: авто; говорит, что если ваш контент превышает максимальную высоту, добавьте полосу прокрутки.

источник

2013-02-15 00:56:45 teynon

большое спасибо, ваш код очень полезен – elmify

Я думаю, что виновник этого:

#content { 
overflow: auto; 
height: 29em;}

Вы явно устанавливая высоту DIV контента. Попробуйте установить его для наследования.

Вот скрипка, где контейнер растет в соответствии с количеством элементов в нем:

http://jsfiddle.net/pUb6q/2/

использует макет. Изменения следующие:

#content { 
    border:1px solid black; 
    float: right; 
    overflow: auto; 
    height: inherit; 
}

источник

2013-02-15 00:55:57 Frisbetarian

спасибо, вот что мне нужно – elmify

расположение раскладки жидких макетов

ответ

Смежные вопросы