Hallo zusammen,
ich habe bei der Erstellung unserer neuen Firmenseite ein Problem mit der Höhe.
Ich hätte es gerne so, dass der Header immer am oberen Fensterrand und der Footer immer am unteren Fensterrand klebt und der div content0 (der rahmen um content) bzw content (der Inhalt selbst), dementsprechend den Rest ausfüllt. Egal ob der User das Browserfenster in 1100*600 oder in Vollbild betrachtet.
Ich hoffe meine Erklärung ist halbwegs verständlich.
Noch zum besseren Verständnis wie ich mir das Layout gedacht habe, header, nav und footer sind immer sichtbar, nur in content0 bzw content wird bei entsprechend langem Inhalt ein Scrollbalken angezeigt. So wie ich es mir vorstelle ist der Scrollbalken dann auch wirklich nur neben dem langen Inhalt, nicht rechts am Fensterrand.
Wenn ich content eine feste Höhe gebe "height:665px und overflow:auto" setze, dann ist bei längerem Inhalt der Scrollbalken da wo ich ihn will. Allerdings habe ich dann bei Seiten mit viel Inhalt logischerweise 2 Scrollbalken wenn das Browserfenster kleiner als mein Layout mit fester Höhe gemacht wird. Einen am langen Inhalt selbst, und einen am Fensterrand.
Ich suche quasi eine Möglichkeit content zu sagen "guck wieviel platz zwischen header und footer ist, unanhängig davon wie groß das fenster ist und fülle diesen Platz aus".
Könnte mir jemand einen Tip geben wie ich meine Vorstellung am besten umsetzten kann, oder eine andere Idee wie ich diese Sache lösen kann?
Bin für jede Hilfe dankbar!
Hier ein Bild wie es sein soll:
Hier das Problem:
Hier die CSS:
Code:
/* POSITIONEN FORM SCHRIFTART */
body
{
height: 100%;
font: 85% arial, hevetica, sans-serif;
text-align: center;
color: #404040;
background-color: #FFFFFF;
}
#container
{
margin: 1em auto;
width: 1024px;
text-align: left;
background-color: #FFFFFF;
}
#header
{
margin: 0;
height: 80px;
width:1024px;
background-color: #FFFFFF;
border-top-width:3px;
border-top-style:solid;
border-top-color: #575757;
border-bottom-width:3px;
border-bottom-style:solid;
border-bottom-color: #575757;
}
#content0
{
float:right;
margin-top:10px;
margin-right: 3px;
width: 832px;
background-color: #EDEDED;
border-left-width:3px;
border-left-style:solid;
border-color:white;
}
#content
{
margin:0;
padding:1em 1.5em 2.5em 1.5em;
height:665px;
overflow: auto;
}
#nav0
{
margin-top: 10px;
margin-left: 3px;
width: 177px;
height: 100%;
}
#nav
{
padding:0.5em 1.5em 1em 1em;
height:100%;
}
#footer
{
clear: both;
height: 12px;
background-color: #575757;
border-top-width:6px;
border-top-style:solid;
border-color:white;
white-space: pre;
}
/* FELD MIT RUNDEN ECKEN */
.back div
{
background: url(pic/corner/nt.gif) repeat;
}
.tr div
{
background:url(pic/corner/tr.gif) top right no-repeat;
}
.tl div
{
background:url(pic/corner/tl.gif) top left no-repeat;
}
.br div
{
background:url(pic/corner/br.gif) bottom right no-repeat;
}
.bl div
{
background:url(pic/corner/bl.gif) bottom left no-repeat;
}
/* SCHRIFT FARBE GROESSE */
#nav h1
{
font: 85% arial, hevetica, sans-serif;
font-size: 120%;
color: #FF0000;
padding: 0px;
}
#nav p
{
font: 85% arial, hevetica, sans-serif;
font-size: 95%;
}
#nav a.norm
{
font: 85% arial, hevetica, sans-serif;
font-size: 95%;
color: #404040;
text-decoration: none;
}
#nav a.norm:hover
{
text-decoration: underline;
}
#nav a.rot
{
font: 85% arial, hevetica, sans-serif;
font-size: 120%;
color: #FF0000;
text-decoration: none;
}
#nav a.rot:hover
{
text-decoration: underline;
}
#content h1
{
font: 85% arial, hevetica, sans-serif;
font-size: 150%;
margin-left: 5px;
margin-right: 10px;
}
#content h2
{
font: 85% arial, hevetica, sans-serif;
font-size: 100%;
font-weight:bold;
margin-left: 10px;
margin-right: 10px;
}
#content p
{
font: 85% arial, hevetica, sans-serif;
font-size: 100%;
margin-left: 10px;
}
#content a
{
font: 85% arial, hevetica, sans-serif;
font-size: 100%;
color: #404040;
}
#content u
{
font: 85% arial, hevetica, sans-serif;
font-size: 100%;
color: #404040;
}
#footer
{
padding-top:1px;
font: 85% arial, hevetica, sans-serif;
font-size: 65%;
color:#FFFFFF;
text-align: right;
}
und hier eine der html:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>TESTSEITE</title>
<link rel="stylesheet" href="test.css" media="screen">
</head>
</head>
<body>
<div id="container">
<div id="header">
<img src="logo3.jpg" style="margin-left:10px;" alt="BILD">
</div>
<div id="leiste">
</div>
<div id="content0">
<div class="back">
<div class="tr">
<div class="tl">
<div class="br">
<div class="bl">
<div id="content">
<h1>Willkommen</h1>
<p>
Herzlich willkommen auf der Internetpräsenz der...
</p>
<p>
Auf den folgenden Seiten erfahren Sie etwas mehr über
<a href="unternehmen.html">unser Unternehmen</a>,
unsere Leistungen, ...
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="nav0">
<div class="back">
<div class="tr">
<div class="tl">
<div class="br">
<div class="bl">
<div id="nav">
<p><a class="rot" style="text-decoration: underline;" href="index2.html">Startseite</a></p>
<p><a class="rot" href="unternehmen.html">Unternehmen</a></p>
<p><a class="rot" href="leistungen.html">Leistungen</a></p>
<p><a class="rot" href="suche.html">Angebote</a></p>
<p><a class="rot" href="kontakt.html">Kontakt</a></p>
<br>
<p style="text-align: center; margin-left:1px; font-size: 80%;">
ADRESSE<br>
ADRESSE<br>
ADRESSE<br>
ADRESSE
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">Copyright © 2010
</div>
</div>
</body>
</html>