background-color bleibt nicht auf div beschränkt
Axel
- css
0 wahsaga0 Axel0 wahsaga0 Axel
0 Fabian St.0 Axel
0 Ingo Turski0 MudGuard
Hallo!
Ich erwarte mit folgendem Code einen roten und eine grünen Kasten nebeneinander. Nebeneinander stehen die beiden Texte dann auch, aber die Hintergrundfarbe ist durchgängig grün.
Ich mache eine grundlegenden Fehler. Aber welchen?
<!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" metal:define-macro="seite">
<head>
<title>Der Titel</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<div style="background-color:lightred; float:left; width:150px;">Wurstsalat</div>
<div style="background-color:lightgreen;">Inhalt</div>
</body>
</html>
Danke
Axel
hi,
Ich mache eine grundlegenden Fehler. Aber welchen?
<div style="background-color:lightred; float:left; width:150px;">Wurstsalat</div>
lightred ist keine der in CSS bekannten farben.
gruß,
wahsaga
lightred ist keine der in CSS bekannten farben.
Stimmt, nehme ich 'red', wird der linke Kasten auch rot wie er soll. Das ist gut. Gebe ich aber dem body eine Hintergrundfarbe wird der linke Kasten wieder hellgrün. Wieso erbt das Wurstsalat-div diese Farbe?
<body style="background-color:red;">
<div style="float:left; width:150px;">Wurstsalat</div>
<div style="background-color:lightgreen;">Inhalt</div>
</body>
Danke
Axel
hi,
Gebe ich aber dem body eine Hintergrundfarbe wird der linke Kasten wieder hellgrün. Wieso erbt das Wurstsalat-div diese Farbe?
<body style="background-color:red;">
<div style="float:left; width:150px;">Wurstsalat</div>
<div style="background-color:lightgreen;">Inhalt</div>
weil du mit float den linken div aus dem elementfluss herausgenommen hast.
der zweite div liegt als auch _unter_ diesem linken div; lediglich seine _inhalte_ werden neben diesem dargestellt.
zweiter div unter erstem div, erster div keine eigene hintergrundfarbe -> ergebnis: hintergrundfarbe des zweiten scheint durch.
gruß,
wahsaga
Hallo wahsaga!
weil du mit float den linken div aus dem elementfluss herausgenommen hast.
der zweite div liegt als auch _unter_ diesem linken div; lediglich seine _inhalte_ werden neben diesem dargestellt.
zweiter div unter erstem div, erster div keine eigene hintergrundfarbe -> ergebnis: hintergrundfarbe des zweiten scheint durch.
Eine sehr gute Erklärung, danke. Aber...:)
Ich kann dem rechten div ja nun eine linksseitige margin in der Breite des linken div's geben. Dann ist es in Ordnung. Allerdings muß ich die dann anpassen, wenn die linke width geändert wird. Ich kann auch nicht sowas wie margin:4px für den rechten div verwenden um einen gleichmäßigen Abstand in alle Richtungen zu erzeugen, da ich dem linken margin des rechten div's ja etwas dazuaddieren müßte.
Langer Rede kurzer Sinn: geht es noch anders?
Danke
Axel
Hi,
Ich kann auch nicht sowas wie margin:4px für den rechten div verwenden um einen gleichmäßigen Abstand in alle Richtungen zu erzeugen, da ich dem linken margin des rechten div's ja etwas dazuaddieren müßte.
Richtig. Aber wo siehst Du hieron ein Problem?
Langer Rede kurzer Sinn: geht es noch anders?
Bei dieser Konstruktion nicht. Die Frage ist vielmehr, was Du erreichen willst.
freundliche Grüße
Ingo
Hi!
Wieso erbt das Wurstsalat-div diese Farbe?
Weil du ihm keine Farbe zuweist und in diesem Fall nimmt es automatisch die Farbe des "Body's"
---------------------------------------------------------
Grüße,
Fabian St.
Hallo!
Weil du ihm keine Farbe zuweist und in diesem Fall nimmt es automatisch die Farbe des "Body's"
Nein, nein. Das linke div nimmt ja eben nicht die Farbe des body sondern des rechten div an. 'wahsaga' hat das sehr gut erklärt.
Gruß
Axel
Hi,
Gebe ich aber dem body eine Hintergrundfarbe wird der linke Kasten wieder hellgrün. Wieso erbt das Wurstsalat-div diese Farbe?
hier wird nichts vererbt. Gebe den DIVs mal einen Rahmen und Du wirst die Sache verstehen.
freundliche Grüße
Ingo
Hi,
lightred ist keine der in CSS bekannten farben.
Gleiches gilt (in CSS2) auch für lightgreen...
cu,
Andreas