3Dnavigator
Erfahrenes Mitglied
Hallo Zusammen
Ich bin nun etwas weiter mit meinem Layout, doch benötige ich wieder Hilfe auf die ich keine Antwort finden konnte...
Und zwar ist mein Problem, dass ich die Höhe der Seite variabel halten möchte. Irgendeine Mindesthöhe sollte eingehalten, jedoch auch je nach Menge des Inhalts nach unten verlängert werden. Nun bin ich so weit, dass sich das content-DIV entsprechend erweitert, jedoch das Menü und die beiden Seitendivs mit den Hintergrundbildern für den Seitenrand nicht (siehe Screenshot).
Gibt's da irgendeine Lösung? So viel ich raus gefunden habe, scheint das allgemein eine Problematik von CSS zu sein..?
Danke schon im Voraus!
3Dnavigator
HTML-Seite:
design_red.css:
Ich bin nun etwas weiter mit meinem Layout, doch benötige ich wieder Hilfe auf die ich keine Antwort finden konnte...
Und zwar ist mein Problem, dass ich die Höhe der Seite variabel halten möchte. Irgendeine Mindesthöhe sollte eingehalten, jedoch auch je nach Menge des Inhalts nach unten verlängert werden. Nun bin ich so weit, dass sich das content-DIV entsprechend erweitert, jedoch das Menü und die beiden Seitendivs mit den Hintergrundbildern für den Seitenrand nicht (siehe Screenshot).
Gibt's da irgendeine Lösung? So viel ich raus gefunden habe, scheint das allgemein eine Problematik von CSS zu sein..?
Danke schon im Voraus!
3Dnavigator
HTML-Seite:
HTML:
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="de" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" href="./styles/basic.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="./styles/design_red.css" media="screen, projection" />
</head>
<body><div id="container">
<div id="topdiv"> </div><!-- topdiv -->
<div id="leftdiv"> </div><!-- leftdiv -->
<div id="navigation">
<a href="./" class="navigation">Navigation MAM...</a>
</div><!-- navigation -->
<div id="fivepix"><img src="./images/spacer.gif"></div><!-- fivepix -->
<div id="rightdiv"> </div><!-- rightdiv -->
<div id="contentdiv">
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
content...<br />
</div><!-- contentdiv -->
<div id="bottomdiv"> </div><!-- bottomdiv -->
</div><!-- container -->
</body>
</html>design_red.css:
Code:
body {
color: #000000;
background: #8e0000;
text-align: center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: small;
}
.navigation {
color: #000000;
font-size: 12px;
text-decoration: none;
}
.navigation_active {
color: #000000;
font-size: 12px;
text-decoration: underline;
}
#container {
width: 758px;
margin: 0 auto;
text-align: left;
background: #ffffff;
}
#topdiv {
height: 220px;
width: 758px;
background-image: url(../images/red_top.jpg);
background-position: top;
background-repeat: no-repeat;
}
#leftdiv {
height: 360px;
width: 19px;
background-image: url(../images/red_left.jpg);
background-position: top;
background-repeat: repeat-y;
float: left;
}
#rightdiv {
height: 360px;
width: 19px;
background-image: url(../images/red_right.jpg);
background-position: top;
background-repeat: repeat-y;
float: right;
}
#bottomdiv {
height: 19px;
width: 758px;
background-image: url(../images/red_bottom.jpg);
background-position: top;
background-repeat: no-repeat;
}
#navigation {
height: 352px;
width: 159px;
float: left;
background-color: #f6a9a0;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 5px;
}
#contentdiv {
/*height: 352px;*/
margin: 0 19px 0 193px;
padding-top: 3px;
padding-bottom: 5px;
}
#fivepix {
width: 5px;
float: left;
}
