Tibor Haunit: divs und Hintergrundfarbe

SELF-Forum

divs und Hintergrundfarbe

Tibor Haunit
– Informationen zu den Bewertungsregeln

Hallo Leute,

ich bin noch ein ziemlicher Neuling in Sachen Html und Css und bräuchte  etwas Hilfe bei einem Problem.
Ich habe ein Logo mittels Css aufgebaut und in eine seperate Css-Datei ausgelagert.
Das Logo habe ich mittels div und span aufgebaut und in die Html-Datei mit dem class-Attribut eingebaut.
Sieht folgendermaßen aus:

CSS-Datei:
.body { margin:0px; padding-bottom:0px; padding-left:0px;
        padding-right:0px; padding-top:0px; background-color:#FFFACD }
.Zeile1 { position:absolute; top:1px; left:1%; width:68%;
          heigth:80px; background-color:#FFFFFF }
.Schrift1 { font-family:Helvetica, Arial, sans-serif;
            font-weight:bold; color:#083D89; position:absolute;
            left:51%; font-size:70px }
.Zeile1a { position:absolute; top:1px; left:68%; width:30%;
           height:80px; background-color:#000000 }
.Zeile2 { position:absolute; top:81px; left:1%; width:34%;
          height:80px; background-color:#DC0000 }
.Zeile2a { position:absolute; top:81px; left:34%; width:64%;
           height:80px; background-color:#083D89 }
.Schrift2 { font-family:Helvetica, Arial, sans-serif;
            font-weight:bold; color:#FFFFFF;
            background-color:#083D89; position:absolute; left:3%;
            font-size:25px; top:25px }
.Zeile3 { position:absolute; top:161px; left:1%; width:34%;
          height:80px; background-color:#FFFFFF }
.Schrift3 { font-family:Helvetica, Arial, sans-serif;
            font-weight:bold; color:#DC0000; position:absolute;
            left:45%; font-size:25px; top:20px }
.Zeile3a { position:absolute; top:161px; left:34%; width:64%;
           height:80px; background-color:#FFFFFF }
.Schrift3a { font-family:Helvetica, Arial, sans-serif;
             font-weight:bold; color:#083D89; position:absolute;
             left:3%; font-size:25px; top:20px }
.Zeile4 { position:absolute; top:241px; left:31.5%; width:40%;
          height:80px; background-color:#FFCC33 }

HTML-Datei (Auszug):
<link rel="stylesheet" type="text/css" href="formateneu.css">
</head>
<body class="body">
<div class="Zeile1"><span class="Schrift1">D-DOK</span></div>
<div class="Zeile1a"></div>
<div class="Zeile2"></div>
<div class="Zeile2a"><span class="Schrift2">DEUTSCHLAND-DOKUMENTATION</span></div>
<div class="Zeile3"><span class="Schrift3">1945 - 2004</span></div>
<div class="Zeile3a"><span class="Schrift3a">Politik, Recht, Wirtschaft und Soziales</span></div>
<div class="Zeile4"></div>

Mein Problem ist nun das in Zeile1 die Hintergrundfarbe nicht angezeigt wird, sondern stattdessen die Hintergrundfarbe des body.

Was habe ich falsch gemacht?

Falls mir jemand helfen kann, wäre ich sehr dankbar.

Tschau Tibor

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. divs und Hintergrundfarbe

    wahsaga Homepage des Autors
    – Informationen zu den Bewertungsregeln

    hi,

    .Zeile1 { position:absolute; top:1px; left:1%; width:68%;
              heigth:80px; background-color:#FFFFFF }
    <div class="Zeile1"><span class="Schrift1">D-DOK</span></div>

    Mein Problem ist nun das in Zeile1 die Hintergrundfarbe nicht angezeigt wird, sondern stattdessen die Hintergrundfarbe des body.

    Was habe ich falsch gemacht?

    du hast position:absolute verwendet, ohne seine auswirkungen verstanden zu haben.

    durch die absolute positionierung hat dein div keine breite von 100% mehr, sondern ist nur noch so breit, wie es sein inhalt, der <span>, verlangt.
    also siehst du "neben" dem span auch keinen hintergrund deines divs, weil dein div gar nicht so breit ist.

    gruß,
    wahsaga

    --
    [ Hier könnte Ihre Werbung stehen! ]
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. re: divs und Hintergrundfarbe

      Tibor
      – Informationen zu den Bewertungsregeln

      hi,

      .Zeile1 { position:absolute; top:1px; left:1%; width:68%;
                heigth:80px; background-color:#FFFFFF }
      <div class="Zeile1"><span class="Schrift1">D-DOK</span></div>

      Mein Problem ist nun das in Zeile1 die Hintergrundfarbe nicht angezeigt wird, sondern stattdessen die Hintergrundfarbe des body.

      Was habe ich falsch gemacht?

      du hast position:absolute verwendet, ohne seine auswirkungen verstanden zu haben.

      durch die absolute positionierung hat dein div keine breite von 100% mehr, sondern ist nur noch so breit, wie es sein inhalt, der <span>, verlangt.
      also siehst du "neben" dem span auch keinen hintergrund deines divs, weil dein div gar nicht so breit ist.

      gruß,
      wahsaga

      Hi,

      vielen Dank für die schnelle Antwort. Doch bin ich mir nicht sicher, ob Deine Antwort verstanden habe.
      Ich habe ja auch die andere divs absolut positioniert und teilweise in Kombination mit einem span-Element verwendet, doch dort funktionieren die Farbangaben alle problemlos.

      Tibor

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. re: divs und Hintergrundfarbe

        wahsaga Homepage des Autors
        – Informationen zu den Bewertungsregeln

        hi,

        Ich habe ja auch die andere divs absolut positioniert und teilweise in Kombination mit einem span-Element verwendet, doch dort funktionieren die Farbangaben alle problemlos.

        ach stimmt, der oberste div hat ja auch eine width-angabe, die hatte ich übersehen.

        stell doch bitte mal ein online-beispiel zum nachvollziehen bereit.

        btw: ein fullquote ist in den allermeistens fällen nicht nötig, also zitiere bitte _sinnvoll_, nur das worauf du dich konkret beziehst; </faq/#Q-09a>.

        gruß,
        wahsaga

        --
        [ Hier könnte Ihre Werbung stehen! ]
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. re: divs und Hintergrundfarbe

          MudGuard Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Hi,

          ach stimmt, der oberste div hat ja auch eine width-angabe, die hatte ich übersehen.

          Du warst schon auf der richtigen Fährte, aber in der falschen Dimension (x statt y) unterwegs...

          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.
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. re: divs und Hintergrundfarbe

            wahsaga Homepage des Autors
            – Informationen zu den Bewertungsregeln

            hi,

            Du warst schon auf der richtigen Fährte, aber in der falschen Dimension (x statt y) unterwegs...

            wald, bäume, ...

            gruß,
            wahsaga

            --
            [ Hier könnte Ihre Werbung stehen! ]
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. re: divs und Hintergrundfarbe

              Tibor
              – Informationen zu den Bewertungsregeln

              hi,

              Du warst schon auf der richtigen Fährte, aber in der falschen Dimension (x statt y) unterwegs...

              wald, bäume, ...

              gruß,
              wahsaga

              Hi Leute,
              ich steh leider auf dem Schlauch. Wäre nett, wenn Ihr mir kurz erläutern könntet was damit gemeint ist.
              Danke
              Tibor

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. re: divs und Hintergrundfarbe

                Tibor
                – Informationen zu den Bewertungsregeln

                hi,

                Du warst schon auf der richtigen Fährte, aber in der falschen Dimension (x statt y) unterwegs...

                wald, bäume, ...

                gruß,
                wahsaga

                Hi Leute,
                ich steh leider auf dem Schlauch. Wäre nett, wenn Ihr mir kurz erläutern könntet was damit gemeint ist.
                Danke
                Tibor

                Hi,
                sorry Leute habe die falsche Antwort gelesen. Die mit der richtigen Fährte...und nicht die andere.
                Vielen Dank nochmals.
                Tibor

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

          2. divs und Hintergrundfarbe3

            Tibor
            – Informationen zu den Bewertungsregeln

            Hi,

            ach stimmt, der oberste div hat ja auch eine width-angabe, die hatte ich übersehen.

            Du warst schon auf der richtigen Fährte, aber in der falschen Dimension (x statt y) unterwegs...

            cu,
            Andreas

            Hi,
            ich bins nochmal. Hat etwas laenger gedauert. Also ein Beispiel kannst Du unter www.d-dok.de ansehen. Auf der Seite oben siehst Du das Logo und der erste Balken hat am Anfang die gleiche Farbe wie der Hintergrund, soll aber weiß sein.
            Falls jemand Zeit findet sich das anzusehen und mir zu helfen, wäre das sehr nett.

            Tibor

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. divs und Hintergrundfarbe3

              MudGuard Homepage des Autors
              – Informationen zu den Bewertungsregeln

              Hi,

              Falls jemand Zeit findet sich das anzusehen und mir zu helfen, wäre das sehr nett.

              Die Lösung habe ich Dir bereits geschrieben.

              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.
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

  2. divs und Hintergrundfarbe

    MudGuard Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

    .Zeile1 { position:absolute; top:1px; left:1%; width:68%;
              heigth:80px; background-color:#FFFFFF }

    Das div hat eine Höhe von 0.
    Wenn Du dem Teil noch eine Höhenangabe gibst, wird es eine von 0 abweichende Höhe und damit auch eine sichtbare Hintergrundfarbe haben.

    Behaupte jetzt nicht, daß Du eine Höhenangabe gemacht hast - heigth hat nichts mit height zu tun...

    Hättest Du den Validator benutzt (http://jigsaw.w3.org/css-validator/, hättest Du das selber rausfinden können.

    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.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln