Tjena
Nu har jag ett litet problem med att få en sida att alltid vara 100% i höjd.
Har tidigare haft jättemycket hjälp av den här filen som jarvklo har fixat, som finns på webforum, för att få till en header, main och footer.
Har nu följt den filen och får nästan till det, bara det att diven där sidan ska vara och där menyn ska ligga, blir aldrig 100%.
Nu har jag testat att tex. sätta 100% height på dessa båda divar, men utan resultat.
Såhär ser relevant (X)HTML kod ut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<title>Pordran Sverige AB</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="sv" />
<meta http-equiv="expires" content="Mon, 1 Jul 2002 00:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="author" content="Micke Andersson, Andersson Web&Support (http://www.mickea.com)" />
<meta name="owner" content="Andersson Web&Support" />
<meta name="copyright" content="© 2006 - 2007 AWS, Andersson Web&Support" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="robots" content="default,follow" />
<meta name="revisit-after" content="30 days" />
<meta name="distribution" content="global" />
<style type="text/css" media="all" title="www.pordran.se/">@import url("css/style.css");</style>
<!--[if IE]>
<style type="text/css" media="screen">
/* Knep för att få 'rätt' css i internet explorer */
#page_holder { 100%; }
</style>
<![endif]-->
</head>
<body>
<div id="page_holder">
<div id="logotype_holder"><img src="pics/logotype.png" alt="logotype" /></div>
<div id="menu_top"></div>
<div id="content_holder">
</div>
<div id="menu_back">
</div>
<div id="below_footer"></div>
</div>
<div id="cont_footer">
<div id="cont_footer_part_left"> </div>
<div id="cont_footer_part_right"> </div>
</div>
</body>
</html>
Och här är CSS'en:
html, body
{
height: 100%;
margin: 0px;
background-color: #DCDBEC;
}
/*
'---------------------------------------------------------------------------------------------------------
' Specifikt för grunden av sidan.
'---------------------------------------------------------------------------------------------------------
*/
div#page_holder
{
width: 802px;
min-height: 100%;
margin: 0 auto;
}
div#logotype_holder
{
float: left;
width: 610px;
height: 141px;
background-image: url('../pics/back_logo_back.gif');
background-repeat: repeat-x;
border-left: 1px #000 solid;
text-align: center;
}
div#menu_top
{
float: left;
width: 190px;
height: 141px;
background-image: url('../pics/back_menu_top.gif');
background-repeat: no-repeat;
border-right: 1px #000 solid;
}
div#content_holder
{
float: left;
width: 610px;
height: 100%;
background-color: #F4F4F4;
border-left: 1px #000 solid;
}
div#menu_back
{
float: left;
width: 190px;
background-image: url('../pics/menu_loop_y.gif');
background-repeat: repeat-y;
border-right: 1px #000 solid;
}
div#below_footer
{/* 100 procent höjd */
width: 800px;
height: 63px; /* samma som margin-top i cont_footer */
clear: both;
padding-bottom: 0px;
border: 0px #000 solid;
}
div#cont_footer
{
width: 800px;
height: 63px;
margin-top: -63px; /* samma som height i below_footer */
margin-left: auto;
margin-right: auto;
border-left: 1px #000 solid;
border-right: 1px #000 solid;
}
div#cont_footer_part_left
{
float: left;
margin: 0px;
padding: 0px;
width: 610px;
height: 63px;
border: 0px;
background-image: url('../pics/back_down_under.gif');
background-repeat: repeat-x;
}
div#cont_footer_part_right
{
float: left;
margin: 0px;
padding: 0px;
width: 190px;
height: 63px;
border: 0px;
background-image: url('../pics/back_menu_bottom.gif');
background-repeat: no-repeat;
}
Nu har jag delat upp cont_footer i två nya divar, för att kunna ha två bakgrundsbilder, men det borde inte ha med det att göra, eftersom jag hade samma resultat innan jag lade till dessa två.
Kolla bifogad bild för att se hur sidan ser ut idag.
Som ni ser är det bara "luft" mellan header och footer.
Tack på förhand!
