nicht angemeldet
Hallo,
ich versuche gerade eine Website zu schreiben (XHTML, CSS). Die Seite soll eine blogähnliche (wie bspw. Blogsport) Struktur haben, die aus 4 verschachtelten "Zeilen" besteht (keine Tabellen, sondern Div-Tags). Hier die Struktur mit den Namen der CSS-Klassen:
.header
.content_start
.start_links .start_rechts
.footer
Es gibt eine XHTML-Datei *.xhtml (wird noch *.php) sowie ein separates CSS *.css. Die Ansichts-Links folgen weiter unten.
.content_start hängt (absolute) an .header; .content-start hat eine graue Hintergrundfarbe, darin befindet sich (weißer Hintergrund) absolute verankert: .start_rechts [eigentlich: ".start_rechts-termin"]. Unter .start_rechts-termin folgen noch weitere Blockelemente, die mit einem kleinen margin (Grau schein durch!) untereinander folgen. Diese sind relative zu .start_rechts-termin.
Anschließend folgt (absolute) ein Blockelement mit der Klasse .start-links das auf der gleichen Höhe parallel zu .start_rechts-termine angeordnet ist. Darunter folgt mehrmals ein Blockelement mit der Klasse .start_links, ebenfalls absolute zum vorangehenden.
Der Footer ist im untersten Blockelement verankert.
Später steht ein CMS dahinter, daher wird in den Blockelementen mit .start_rechts-... und .start-rechts variabel viel Text stehen. Daher sollten beide "Spalten" nach unten hin sich beliebig ausdehen können. Das klappt auch. Aber...
.content_start ist grau hinterlegt und umrahmt .start_links und start_rechts-... Wenn links viel Text ist, verlängert sich .content_start (der graue Rahmen) nach unten. Wunderbar!
Doch wenn rechts viel Text ist, dann ragt (mindestens) das unterste Blockelement aus dem Layout (nach unten) heraus. (Es überdeckt den grauen Rahmen und verschwindet hinter dem Footer.) Eine feste height-Angabe geht leider nicht, weil der Text in den Blockelementen ja unterschiedlich lang sein wird. Ich möchte auch nicht mit min-height arbeiten, da dies auch Probleme mit sich bringt (Inflexibilität, Abhängigkeit von der Länge der Textge, teilw. sehr viel Platz/langer grauer Abschnitt vor dem .footer usw).
Was muss ich ändern, damit beide Seiten "flexibel" werden und die hübsche graue Umrahmung unabhängig von der Textmenge in den Blockelemente sich immer bis über das unterste Blockelement (Ob links oder rechts soll egal sein!) hinausgeht, so wie derzeit nur bei der Klasse .start-links? - Ich finde den Feheler einfach nicht :-(
Ich möchte euch das gekürzte XHTML und das gekürzte CSS zur Verfügung stellen. Hier zwei Links zu den Dateien in voller Länge zum Stöbern& Angucken: XHTML, CSS.
<?xml version="1.0" encoding="ISO-8859-1" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><!-- [...] -->
<style type="text/css">
/* <![CDATA[ */ /* notwendige XML-Notation fuer Style-Bereiche */
@import url(./css/abc.css); /* Einbindung externes CSS */
/* ]]> */
</style>
</head><body>
<div class="header">
<!-- [...] -->
<!-- Content -->
<!-- [...] -->
<div class="content_start">
<!-- [...] -->
<!-- rechte Spalte -->
<div class="start_rechts-termin">
<!-- [...] -->
<div class="start_rechts-mitmachen">
<!-- [...] -->
</div><div class="start_rechts-twitter">
<!-- [...] -->
</div><div class="start_rechts-socialnetworks">
<!-- [...] -->
</div>
</div>
<!-- linke Spalte -->
<div class="start_links">
<!-- [...] -->
</div><div class="start_links">
<!-- [...] -->
</div>
<!-- [...] -->
<!-- Footer -->
<div class="footer">
<!-- [...] -->
</div>
</div> <!-- close div class="content" -->
</div> <!-- close div class="header" -->
</body></html>
/* CSS 2.1 */
/* Header ::::: */
.header {
position:relative;
margin:0px auto; /* oben&unten/links&rechts; auto=zentriert */
padding-top:30px;
width:800px;
height:75px;
}
/* [...] */
/*Content :::::
[...] */
.content_start {
position:absolute;
top:190px;
width:800px;
background-color:#9a9a9a;
clear:both;
}
/* [...] */
.start_rechts-termin {
position:absolute;
left:550px;
margin:10px;
padding:10px 0px 10px 0px; /*oben/rechts/unten/links*/
background-color:#fff;
width:230px;
height:140px;
text-align:left;
}
.start_rechts-mitmachen {
position:relative;
margin:20px 0px 10px 0px;
padding:10px 0px 10px 0px;
background-color:#ffffff;
width:230px;
text-align:left;
}
.start_rechts-twitter {
position:relative;
margin:10px 0px 10px 0px;
padding:10px 0px 10px 0px;
background-color:#ffffff;
width:230px;
text-align:left;
}
.start_rechts-socialnetworks {
position:relative;
margin:10px 0px 10px 0px;
padding:10px 0px 10px 0px;
background-color:#ffffff;
width:230px;
text-align:left;
}
/* [...] */
.start_links {
position:relative;
margin:10px;
padding:10px 0px 0px 0px;
background-color:#ffffff;
width:540px;
text-align:left;
}
/* Footer ::::: */
.footer {
position:absolute;
bottom:-70px;
width:800px;
height:40px;
clear:both;
}
/* [...] */
Vielen Dank fürs bis hier Lesen - und für deine viele Mühe!
kulero