nicht angemeldet
Drei Spalten / Hintergrundfarbe rechts
Hallo
Ich habe ein Layout, in welchem ich drei Div-Boxen nebeneinander einsetze, um den Inhalt zu strukturieren. Dies klappt auch wie gewünscht mit float. Dabei definiert die mittlere Spalte die Höhe aller Div-Boxen, jene rechts und links passen sich automatisch an die selbe Höhe an.
Allerdings möchte ich die Spalte ganz rechts komplett mit einer Hintergrundfarbe versehen. Dies gelint mir aber nur für die Höhe des Inhalts, nicht für die "komplette" Höhe analog zur mittleren Box. Durch Google habe ich herausgefunden, dass dies über background-color nicht möglich ist und man dafür ein 1-Pixel-Bild einsetzen muss, welches wiederholt wird. Allerdings gelingt es mir mit dieser Methode auch nur für die Spalte links, die Fläche über die ganze Höhe einzufärben:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<style type="text/css">
.spacer {
clear : both;
}
#frame {
background-color:#CCC;
width:430px;
}
#bgframe1 {
background:url(pink.gif) repeat-y left top;
}
#bgframe2 {
background : url(pink.gif) repeat-y 30px top;
}
#eins {
width : 30px;
float : left;
}
#zwei {
width:100px;
min-height:400px;
float:left;
}
#drei {
width : 300px;
float:left;
background:url(pink.gif) repeat left top;
}
</style>
</head>
<body>
<div id="frame">
<div id="bgframe1">
<div id="bgframe2">
<div id="eins">
Eins
</div>
<div id="zwei">
zwei
</div>
<div id="drei">
Drei
</div>
<div class="spacer" />
</div>
</div>
</div>
</body>
</html>
Aus: http://www.php.de/html-usability-und-barrierefreiheit/35946-erledigt-3-divs-nebeneinander-mit-dynamisch-gleicher-hoehe.html - Aber funktioniert nicht bei mir?
Kann mir jemand erklären, wo mein Fehler liegt oder wie ich die rechte Spalte komplett einfärben kann?
Vielen Dank!
-
Moinsen!
Ganz schoenes Geschwurbel... Du unterliegst da einigen Irrtuemern oder drueckst dich falsch aus.
Du hast 3 Spalten wovon die mittlere eine Groesse zugewiesen bekommt. Diese blaeht dadurch den Container auf, in dem sie sich befindet. Wenn die mittlere Spalte eine Farbe hat, haettest Du eine 'Spalte' in Containerfarbe, die mittlere und rechts nochmal eine 'Spalte' in Containerfarbe. Die beiden ausseren Spalten sind allerdings keine echten Spalten, wie die ein border um die beiden Divs oder eben zugewiesene Farben zeigen. Natuerlich sind die beiden Spalten links und recht eigentlich nur so gross, wie deren Divs. Wenn Du jetzt diese Divs einfaerbst bekommst du keine eingefaerbten Spalten sondern etwas das aussieht wie eingefaerbte Bloecke in den Spalten.
Du hast da zweiunddroelfzig Div-Container, von denen ich mir sehr gut vorstellen kann, dass du im Grunde keinen Schimmer hast, was die machen. Sonst wuerdest Du wohl nicht fragen.
Fuer Dein Vorhaben reichen 3 oder 4 Container. 4 Benoetigst Du wenn die Spalten zentriert sein sollen, als Wrapper. Du hast das Frame genannt. Dann brauchst Du 3 Container fuer die Spalten. Um jetzt mit Faux-Collumns zu spielen (Spalten die so aussehen, aber in wirklichkeit keine sind) nehmen wir den ersten Container (Navi) und lassen ihn floaten. Hier kommen wir zum naechsten Konzept, dass Du scheinbar noch nciht richtig verstehst: Floating. Was macht float denn? Float sagt aus, wo ein Element darauffolgende Elmente umfliesst. Das merken wir uns.
Das Erste element soll links umfliessen. Also bekommt es float:left. Und jetzt kommt der Trick: Daneben soll der Container Content angezeigt werden. Kein Problem. Das passiert automatisch. Der muss also auch gar nicht floaten. Aber der dritte Container (Teaser) macht jetzt zicken. Klar: Der Contentbereich floatet nicht. Deshalb wird der Teaser immer nach unten verschoben, je nach float des Teasers mittig, links oder rechts. Fur die faux-collumns darf der mittlere Bereich aber nicht floaten.
Wir erinnernuns nochmal daran, das float anzeigt, wo das element nachfolgende elemente umfliesst. Also kommen wir auf die Idee, die rechte Spalte im Dokument vor die Mittlere Spalte zu schreiben. (NAVI TEASER CONTENT) Jetzt floaten wir Teaser rechts und erhalten: NAVI CONTENT TEASER
Alles ist optisch allerdings wenig spaltenmaessig. Wir wollen Backgroundfarben. Der Content, der die Seite aufspannt bekommt auch Background. Die anderen beiden haben, wie Du schon erkannt hast damit ein Problem ,weil nur der Container eingefaerbt wird. Wir wollen aber 3 gleichlange Spalten. Das bekommen wir hin: Wenn Man nur einen Container hat, und dem links und rechts nen dickes border verpasst hat man auch 3 Spalten. Allerdings kann man da ja nix reinschreiben. Kein Problem: vor unserem Content floaten jetzt ja 2 Conatiner rum. Die liegen genau ueber den Raendern. also links und rechts nen border in gewuenschter Spaltenbreite angelegt: Fertig.
Hier etwas Code:
<div id="frame"> <div id="navi"> Navi </div> <div id="teaser"> Teaser </div> <div id="content"> Content </div> </div>#frame { background-color:#000; width:430px; margin:auto; } #navi { width : 30px; float : left; } #content { width:100px; min-height:400px; background-color:#FFF; border-left: 30px solid #AFF; border-right: 300px solid #FFA; } #teaser { width : 300px; float:right; }--
Signaturen sind blöd!-
Om nah hoo pez nyeetz, Steel!
-- Signaturen sind blöd!
Was man von diesem Posting nicht behaupten kann.
Matthias
--
1/z ist kein Blatt Papier.
-
Wow, vielen Dank Steel!
Auf die Idee mit dem border bin ich nicht gekommen, aber so funktionierts wunderbar!
Vielen Dank auch für die ausführliche float Erklärung, vom ständigen Rumprobieren und hier und dort was lesen und ändern sind mir einige Sachen durcheinander gerutscht. :)
Ich wünsche dir noch einen schönen Tag!
-