nicht angemeldet
Hintergrundfarbe bricht ab
Hallo.
Ich habe ein CSS-Problem (denke es liegt daran) und komme partout nicht weiter.
Ich habe in einem div-Layer zwei weitere Layer, die durch float:left nebeneinander platziert werden.
Das zugehörige CSS:
Linkes Layer:
#alpha {
float: left;
width: 470px;
margin: 0 0 10px 0;
padding: 0 0 45px 0;
text-align: left;
line-height: 160%;
color: #404040;
border-bottom: 1px solid dimgray;
border-left: 1px solid dimgray;
}
Rechtes Layer:
#beta {
margin: 0 0 0 578px;
padding: 0 0 75px 5px;
font-size: 10px;
text-align: left;
line-height: 150%;
color: darkolivegreen;
border-left: 1px dashed dimgray;
}
Container-Layer:
#container {
margin: 0 auto;
padding: 0;
width: 760px;
background-color: beige;
}
Eigentlich sollte die Hintergrundfarbe "beige" durch die enthaltenen Layer "alpha" und "beta" durchscheinen, was sie unter IE6 auch tut. Unter Mozilla bricht die Farbe jedoch auf Höhe des unteren Endes des "beta"-Layers ab. Der längere "alpha"-Layer setzt sich dann mit weißem/ohne Hintergrund nach unten hin fort.
Kann mir jemand sagen woran das liegen könnte? Komme nicht mehr weiter...
Danke.
-
Moin!
Eigentlich sollte die Hintergrundfarbe "beige" durch die enthaltenen Layer "alpha" und "beta" durchscheinen, was sie unter IE6 auch tut. Unter Mozilla bricht die Farbe jedoch auf Höhe des unteren Endes des "beta"-Layers ab. Der längere "alpha"-Layer setzt sich dann mit weißem/ohne Hintergrund nach unten hin fort.
Kann mir jemand sagen woran das liegen könnte? Komme nicht mehr weiter...
Die Darstellung des IE ist falsch, würde ich sagen. Elemente, die mit float behandelt werden, werden aus dem normalen Dokumentenfluß herausgenommen. Das #alpha ist also gar nicht mehr in deinem #container drin, dessen Höhe wirkt nicht, und deshalb ist die Farbe nur dort, wo #beta existiert, welches nicht mit float bearbeitet wurde.
Wenn du unterhalb des #beta noch ein leeres DIV mit "clear:both" setzt, wird dieses garantiert unterhalb von #alpha platziert und bringt den Container auf die Höhe von #alpha.
- Sven Rautenberg
-
Die Darstellung des IE ist falsch, würde ich sagen. Elemente, die mit float behandelt werden, werden aus dem normalen Dokumentenfluß herausgenommen. Das #alpha ist also gar nicht mehr in deinem #container drin, dessen Höhe wirkt nicht, und deshalb ist die Farbe nur dort, wo #beta existiert, welches nicht mit float bearbeitet wurde.
Danke für die schnelle Antwort. Welche Möglichkeit habe ich denn dann die zwei Layer nebeneinander zu platzieren?
Wenn du unterhalb des #beta noch ein leeres DIV mit "clear:both" setzt, wird dieses garantiert unterhalb von #alpha platziert und bringt den Container auf die Höhe von #alpha.
Bringt leider gar keine Veränderungen mit sich...
Stefan Lodders
-
Moin!
Danke für die schnelle Antwort. Welche Möglichkeit habe ich denn dann die zwei Layer nebeneinander zu platzieren?
Tabellen. Absolute Positionierung. Frames. Mehr fällt mir aktuell nicht ein.
Wenn du unterhalb des #beta noch ein leeres DIV mit "clear:both" setzt, wird dieses garantiert unterhalb von #alpha platziert und bringt den Container auf die Höhe von #alpha.
Bringt leider gar keine Veränderungen mit sich...
Welchen HTML- und CSS-Code hast du exakt produziert?
- Sven Rautenberg
-
Hallo.
Tabellen. Absolute Positionierung. Frames. Mehr fällt mir aktuell nicht ein.
Wollte endlich mal weg von meinen Tabellen und "modern" sein :-/...
Wenn du unterhalb des #beta noch ein leeres DIV mit "clear:both" setzt, wird dieses garantiert unterhalb von #alpha platziert und bringt den Container auf die Höhe von #alpha.
Bringt leider gar keine Veränderungen mit sich...
Welchen HTML- und CSS-Code hast du exakt produziert?
<div style="clear:both;"></div>
Oder was meinst Du?Stefan Lodders
-
Habe eine "Lösung" gefunden (die Deine beinhaltet):
Und zwar habe ich nach den Alpha- und Beta-Layern (aber noch innerhalb des Containers) noch einen Layer mit der Breite des Containerlayers definiert, wodurch sich der Hintergrund wie gewünscht bis unter den Alpha-Layer fortsetzt:
#helper {
clear: both;
width: 760px;
padding: 1px 0 0 0;
}Danke nochmal.
Stefan Lodders
-
Hallo,
die breite ist egal... das clear:both ist entscheidend
http://www.stud.uni-giessen.de/~su6690/selfhtml/two_column.html
mfg NAG
--
signatur
-
-
-
-
-