Chciałem ustawić elementy na stronie tak aby wszystko znajdowało się w divie na środku strony i jednocześnie miało wysokość minimum 100% okna.
Obie rzeczy można uzyskać oddzielnie:
Wyśrodkowanie:
Kod: Zaznacz cały
body
{
margin: auto;
font-family: verdana, Arial CE;
font-size: 10pt;
text-align: center;
color: #004400;
height: 100%;
background-image: url(../graphics/bg.bmp);
}
div
{
margin: 0px;
padding: 0px;
}
#content
{
position: relative;
background-color: white;
background-image: url(../graphics/bottom.jpg);
background-repeat: no-repeat;
background-position: bottom center;
text-align: left;
width: 785px;
margin: 0 auto;
min-height: 100%;
}
#text
{
margin: 2px 10px 0px 30px;
padding-left: 140px;
padding-bottom: 40px;
}
#menu
{
background-image: url(../graphics/left.jpg);
background-repeat: no-repeat;
width: 140px;
float: left;
clear: left;
min-height: 350px;
}
#top
{
height: 195px;
background-color: white;
}
#bottom
{
background-image: url(../graphics/bottom.jpg);
clear: both;
}
Problem w tym, że jedna rzecz działa tylko z relative (w content) a druga tylko z absolute. Próbowałem wrzucić całość (dla opcji absolute) do innego diva z ustawieniem relative, jednak wtedy 100% wysokości przestaje działać.
Czy jest na to jakiś sposób?
Tak wygląda kod html
Kod: Zaznacz cały
<div id=content>
<div id=top>
<img src="graphics/top.png" alt="ACMI"/>
</div>
<div id=menu>
<ul>
<li>
<a href="index.php" class="menu">Strona główna</a>
</li>
<li>
<a href="TODO" class="menu">O nas</a>
</li>
</ul>
</div>
<div id=text>
tekst
</div>
</div>
