Hallo Zusammen,
ich habe schon sehr viele Forenbeiträge hier durchgelesen und über Google viele Ratschläge versucht, aber ich bekomme mein Vorhaben leider nicht umgesetzt.
Und zwar versuche ich ein Ergebnis wie hier(http://s7.directupload.net/file/d/2986/e654g5aj_png.htm) gezeigt zu erzielen. Ich habe oben eine Bannerleiste, wo ein Logo angezeigt wird. Danach wird die Webseite in 3 Bereiche unterteilt: sidebar_left, content, sidebar_right.
sidebar_left und sidebar_right sollen eine feste Breite haben. Content soll sich dynamisch der Restbreite anpassen. Dieses funktioniert auch!
Das Problem ist, dass ich die Höhe nicht dynamisch aufgefüllt bekomme. Der content Bereich ist sowieso weiß gehalten, weswegen das hier nicht so auffällt (sollte aber trotzdem bis zum Ende gehen), aber die beiden sidebars (welche später die Menüs darstellen sollen) füllen sich leider nicht bis zum Ende.
Deswegen sind bei mir im folgenden CSS Teil auch schon Unterschiede in den sidebars zu sehen. Die linke Sidebar habe ich versucht mit einer 1px großen Grafik aufzubauen, die rechten mittels Farbcode. Natürlich würde mir die Variante per Farbcode besser gefallen, aber die andere Lösung ist auch OK. Hauptsache ist, ich bekomme eine Lösung zum Laufen *grins* was momentan noch meine größte Sorge ist.
Ich habe in der Grafik alles "rot" markiert was leider nicht funktioniert und würde mich freuen, wenn dort einer einen Blick drauf werfen könnte.
Das Problem besteht "immer" wenn so viel Text enthalten ist, dass man scrollen muss. Wenn man nicht scrollen muss, dann sieht alles OK ist.
Das Bild gibt es hier: http://s7.directupload.net/file/d/2986/e654g5aj_png.htm
Vielen lieben Dank!
Antispy
Anbei der HTML Code:
</html>
</head>
<body>
<div id="logo">logo</div>
<div id="sidebar_left">
<h2>sidebar_left</h2>
</div>
<div id="content">
<h1>content</h1>
</div>
<div id="sidebar_right">
<h2>sidebar_right</h2>
</div>
</body>
</html>
Und der CSS Teil:
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #fff;
color: #000;
}
/* LOGO */
#logo {
width: 100%;
height: 220px;
margin: 0 auto;
background: url(../images/logo.png);
background-repeat:no-repeat;
background-color:#ffffff;
}
/* Sidebar Left */
#sidebar_left {
font-family:'Conv_Helvetica-Condensed-Bold',Sans-Serif;
font-size: 16pt;
position: absolute;
top: 220px; /* = Höhe des LOGO-Blockes */
left: 0;
bottom: 0;
width: 220px;
background-color:#eaeef7;
}
#sidebar_left ul {
margin: 0;
padding: 20px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#sidebar_left li {
}
#sidebar_left li:hover {
}
#sidebar_left a {
text-align: left;
text-decoration: none;
font-weight: normal;
color: #10448a;
display: block;
margin-top: 2px;
margin-bottom: 2px;
padding: 0px 10px 10px 30px;
}
#sidebar_left a:hover {
text-align: left;
text-decoration: none;
font-weight: normal;
color: #ffffff;
display: block;
margin-top: 2px;
margin-bottom: 2px;
padding: 0px 10px 10px 30px;
background-color: #d4021d;
}
/* Sidebar Right */
#sidebar_right {
font-family:'Conv_Helvetica-Condensed',Sans-Serif;
font-size: 12pt;
position: absolute;
top: 220px; /* = Höhe des LOGO-Blockes */
right: 0;
bottom: 0;
width: 250px;
background-color:#eaeef7;
padding-left: 10px;
text-align: left;
text-decoration: none;
font-weight: normal;
color: #10448a;
font-size: 10pt;
}
#sidebar_right ul {
margin: 0;
padding: 10px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#sidebar_right li {
margin-bottom: 2px;
padding: 0 2px 2px 0px;
}
#sidebar_right a {
text-align: left;
text-decoration: none;
font-weight: bold;
font-size: 11pt;
color: #10448a;
}
/* Content */
#content {
position: absolute;
top: 220px; /* = Höhe des LOGO-Blockes */
left: 220px; /* = Breite des SIDEBAR_LEFT-Blockes */
right: 250px; /* = Breite des SIDEBAR_RIGHT-Blockes */
bottom: 0;
background: #ffffff;
font-family:'Conv_Helvetica-Condensed',Sans-Serif;
color: #10448a;
margin-left: 50px;
margin-right: 50px;
}
#content_startpage {
position: absolute;
top: 220px; /* = Höhe des LOGO-Blockes */
left: 220px; /* = Breite des SIDEBAR_LEFT-Blockes */
right: 250px; /* = Breite des SIDEBAR_RIGHT-Blockes */
bottom: 0;
background: #eaeef7;
z-index: 2;
}