Moin Moin,
da mein erster Versuch noch etwas unstrukturiert war, habe ich mithilfe eines Templates versucht meine Seite neu zu erstellen.
Hauptproblem ist es gerade, dass der Footer immer direkt am Contentbereich dranklebt.
Ich will es aber so haben, dass der Footer immer an der Browserunterkante ist.
Dazu müsste der Contentbereich einfach den Rest zwischer Header und Footer ausfüllen, doch alle meine Versuche mit height: 100% etc etc. blieben erfolglos.
Vielleicht kann mit hier ja jmd. helfen.
Seite: Nähschule im VIVO (Nicht von den hässlichen Farben beeinflussen lassen. Ist noch vom Template)
HTML:
CSS:
Thx und Gruß,
Grinarn
da mein erster Versuch noch etwas unstrukturiert war, habe ich mithilfe eines Templates versucht meine Seite neu zu erstellen.
Hauptproblem ist es gerade, dass der Footer immer direkt am Contentbereich dranklebt.
Ich will es aber so haben, dass der Footer immer an der Browserunterkante ist.
Dazu müsste der Contentbereich einfach den Rest zwischer Header und Footer ausfüllen, doch alle meine Versuche mit height: 100% etc etc. blieben erfolglos.
Vielleicht kann mit hier ja jmd. helfen.
Seite: Nähschule im VIVO (Nicht von den hässlichen Farben beeinflussen lassen. Ist noch vom Template)
HTML:
HTML:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles/style.css" rel="stylesheet" type="text/css" />
<title>Nähschule im VIVO</title>
</head>
<body>
<div id="container">
<div id="banner">
<img src="images/headervivo.jpg" alt="VIVO Logo" />
</div>
<div id="navbar">
</div>
<div id="outer">
<div id="inner">
<div id="leftmenu">
Test
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean orci sapien, faucibus tempor, tincidunt vel, feugiat ac, arcu. Nullam commodo. Praesent at metus. Suspendisse eu eros auctor mauris suscipit dapibus. Cras lobortis vestibulum erat. Proin commodo sollicitudin urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer justo. Nam iaculis convallis mi. Fusce tempor purus. Maecenas pulvinar. Vivamus aliquam, neque vel rutrum porttitor, augue lacus porttitor massa, sagittis convallis augue lorem vel metus. Aliquam erat volutpat. Cras risus lacus, aliquam viverra, auctor ac, imperdiet sit amet, lacus. Donec justo orci, elementum sed, posuere vitae, aliquet vel, mauris. Cras ac dolor quis diam dictum dictum. Morbi lorem mi, posuere et, ultricies ac, viverra eget, nunc.
</div>
</div>
</div>
<div id="footer">
Nähschule im VIVO
</div>
</div>
</body>
</html>CSS:
Code:
@charset "utf-8";
/* CSS Document */
body {
padding:0px;
margin:0px;
}
#container {
width: 900px;
padding:0px;
margin: 0px;
margin-left: auto;
margin-right: auto;
}
#banner {
height: 135px;
padding: 0px;
margin: 5px 0px 0px 0px;
}
#navbar {
height : 29px;
margin : 0px;
padding : 0px;
background-image : url(../images/navbar.gif);
background-repeat : no-repeat;
}
#outer{
border-left: solid 200px #EBD3E0;
background-color: #ffffff;
}
#inner{ margin:0px; width:100%; }
#leftmenu {
width:200px;
float:left;
position:relative;
margin-left:-200px;
margin-right:1px;
}
#content{
position: relative;
margin: 0px;
}
#footer {
width : 900px;
height : 21px;
position : relative;
bottom : 0px;
margin : 0px 0px 0px 0px;
padding : 0px;
line-height : 21px;
background-image : url(../images/footer_red.jpg);
background-position : center;
background-repeat : no-repeat;
text-align : center;
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : normal;
color : #FFFFFF;
clear : left;
}Thx und Gruß,
Grinarn
