nicht angemeldet
Hintergrundfarbe
Hallo zusammen,
ich versuche mich gerade etwas in CSS einzuarbeiten und habe da ein Probelm. Ich habe folgende Seite fertig gemacht:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
padding: 0px;
margin:0px;
background-color: #e5efea;
}
#proContainer {
position:relative;
width:970px;
margin:auto;
background-color:#FFFFFF;
}
#logo {
position:absolute;
top:0px;
left:0px;
width:100%;
background-color:#FFFFFF;
}
#links {
position:absolute;
top:50px;
left:0px;
width:180px;
background-color:#FFFFFF;
}
#inhalt {
position:absolute;
top:50px;
left:180px;
padding-left:10px;
padding-right:10px;
width:590px;
background-color:#FFFFFF;
}
#rechts {
position:absolute;
top:50px;
right:0px;
width:180px;
background-color:#FFFFFF;
}
</style>
<title>eine seite</title>
</head>
<body>
<div id="proContainer">
<div id="logo">...</div>
<div id="inhalt">...</div>
<div id="links">...</div>
<div id="rechts">...</div>
</div>
</body>
</html>
Wenn ich mir die Seite jetzt anzeigen lasse, ist der Bereich zwischen dem Logo und dem Inhalt nicht weiss, sondern in der Hintergrundfarbe des Bodys. Und genau das verstehe ich nicht. Dieser Bereich liegt doch im DIV "proContainer" und dieser DIV hat die Hintergrundfarbe weiß. Wieso ist dort trotzdem eine andere Hintergrundfarbe?
Gruß
Merda
-
Moin
Ersetze position:absolute! Diese Bombe muss nicht sein!
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
ie:{ br:> fl:{ va:{ ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Moin
Ersetze position:absolute! Diese Bombe muss nicht sein!
Wieso Bombe? Und wodurch ersetzen?
-
Moin
Moin
Ersetze position:absolute! Diese Bombe muss nicht sein!
Wieso Bombe? Und wodurch ersetzen?Weil es die Seite star und unflexibel macht und für diesen Fall der Gestaltung absolut nicht notwendig ist.
Du kannst deine 3 Spalten z.B. durch float:left; nebeneinander positionieren. Würde für den Zweck denke ich völlig ausreichen.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
ie:{ br:> fl:{ va:{ ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:) -
hi,
Ersetze position:absolute! Diese Bombe muss nicht sein!
Wieso Bombe?Bombe deshalb, weil absolute Positionierung gerne von Anfängern als vermeintlich einfachste Gestaltungsmöglichkeit eingesetzt wird, obwohl sie die Auswirkungen noch gar nicht einschätzen können.
Und eine der Auswirkungen absoluter Positionierung ist nun mal, dass das absolut positionierte Element aus dem Fluss genommen wird, und somit die Höhe seines Elternelementes nicht mehr beeinflusst.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Angenommen ich verzichte auf diese Positionierung und benutze stattdessen float, behebt das denn auch das Problem der Hintergrundfarbe?
-
Moin
Angenommen ich verzichte auf diese Positionierung und benutze stattdessen float, behebt das denn auch das Problem der Hintergrundfarbe?
Wenn du dann noch ein Element mit clear:both einfügst, behebt dies das Problem mit der Hintergrundfarbe mit Sicherheit. Denn dann ist alles wieder im Fluß
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
ie:{ br:> fl:{ va:{ ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Wenn du dann noch ein Element mit clear:both einfügst, behebt dies das Problem mit der Hintergrundfarbe mit Sicherheit. Denn dann ist alles wieder im Fluß
Ich werde das mal ausprobieren und mich mit Sicherheit nochmal melden :)..
Erstmal vielen Dank..-
Hallo nochmal. Hat soweit geklappt nur jetzt habe ich doch nochmal eine Frage.
Ddas Menü auf der linken Seite muss teilweise etwas mit dem Bild im Banner überlappen. Das würde dann ja float wieder ausschliessen und mich zu absolute zwingen oder?-
Moin
Hallo nochmal. Hat soweit geklappt nur jetzt habe ich doch nochmal eine Frage.
Ddas Menü auf der linken Seite muss teilweise etwas mit dem Bild im Banner überlappen. Das würde dann ja float wieder ausschliessen und mich zu absolute zwingen oder?Nein. Versuch es mit negative Werten für margin-top. Diese Aussage ist nur global, da ich nicht weiß wie dein Design aussieht.
Negative Werte sind m.W. bei margin erlaubt jedoch ist der Gebrauch nicht empfehlenswert. Zu raten wäre also ein Überdenken des Seitenaufbaus.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
ie:{ br:> fl:{ va:{ ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
-
-
-
-
-
-
-