Axel: background-color bleibt nicht auf div beschränkt

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

  1. 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

    --
    [ Hier könnte Ihre Werbung stehen! ]
    1. 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

      1. 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

        --
        [ Hier könnte Ihre Werbung stehen! ]
        1. 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

          1. 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

      2. 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.

        1. 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

      3. 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

      4. Hi,

        lightred ist keine der in CSS bekannten farben.

        Gleiches gilt (in CSS2) auch für lightgreen...

        cu,
        Andreas

        --
        MudGuard? Siehe http://www.Mud-Guard.de/
        Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.