Damian: Background ignoriert margin

Hallo Forumsgemeinde!

Ich habe meine Navigation rechts gefloatet und halte den Inhalt der Seite mit margin: 1.45em 0 1em 2em; auf Abstand. Für Text funktioniert das auch einwandfrei, allerdings endet die Hintergrundfarbe des Text-Blocks erst an der body-Begrenzung. Woran liegt das? Und wie kann ich das ändern?

Noch ein Hinweis: ist eine Intranet-Seite und wird daher nur auf IE6 angezeigt...

Vielen Dank schonmal und Grüße
Damian

  1. Hallo Damian,

    Für Text funktioniert das auch einwandfrei, allerdings endet die Hintergrundfarbe des Text-Blocks erst an der body-Begrenzung. Woran liegt das?

    http://de.selfhtml.org/css/eigenschaften/randabstand.htm
    Außenrand oder Abstand bedeutet: erzwungener Leerraum zwischen dem aktuellen Element und seinem Elternelement oder Nachbarelement.

    Das Hintergrundbild bzw. -farbe ist kein eigenständiges Element.

    http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#allgemeines liefert Infos, wie man mit Hintergründen "spielen" kann.

    Mit freundlichen Grüßen,
    André

    1. Hallo André,

      http://de.selfhtml.org/css/eigenschaften/randabstand.htm
      Außenrand oder Abstand bedeutet: erzwungener Leerraum zwischen dem aktuellen Element und seinem Elternelement oder Nachbarelement.

      Das wusste ich bereits, allerdings war mir ...

      Das Hintergrundbild bzw. -farbe ist kein eigenständiges Element.

      ...dies nicht bewusst/bekannt.

      http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#allgemeines liefert Infos, wie man mit Hintergründen "spielen" kann.

      Ich habe "nur" eine Hintergrundfarbe definiert. Gibt es hierfür eine Möglichkeit, auch diese auf Abstand zu halten?!?
      Oder bliebe dann nur, dies mit einem Hintergrundbild zu realisieren? Wobei selbst dies in meinem Fall wohl nicht möglich ist, da zum einen die Navigation keine feste Breite hat und zum anderen die hinterlegten Überschriften - sobald sie sich unterhalb der Navigation befinden - durchaus über die gesamte Breite hinterlegt sein sollen.

      Viele Grüße
      Damian

  2. Hi,

    Ich habe meine Navigation rechts gefloatet und halte den Inhalt der Seite mit margin: 1.45em 0 1em 2em; auf Abstand. Für Text funktioniert das auch einwandfrei, allerdings endet die Hintergrundfarbe des Text-Blocks erst an der body-Begrenzung. Woran liegt das? Und wie kann ich das ändern?

    Der Text-Block ist so breit wie body (nur sein inline-Inhalt richtet sich am gefloateten Block aus).
    Daher ist die Hintergrundfarbe auch hinter dem gefloateten Block zu sehen (wenn der keine eigene Hintergrundfarbe hat).
    Der margin hat keine Hintergrundfarbe.
    Du mußt den Abstand also mit etwas herstellen, was Hintergrundfarbe hat. padding bietet sich an.
    Eine weitere Möglichkeit wäre, etwas zu nutzen, was Vordergrundfarbe hat (da ja auch damit die Hintergrundfarbe verdeckt wird) - z.B. border.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hallo,

      Der Text-Block ist so breit wie body (nur sein inline-Inhalt richtet sich am gefloateten Block aus).

      OK.

      Daher ist die Hintergrundfarbe auch hinter dem gefloateten Block zu sehen (wenn der keine eigene Hintergrundfarbe hat).

      Klingt logisch.

      Der margin hat keine Hintergrundfarbe.
      Du mußt den Abstand also mit etwas herstellen, was Hintergrundfarbe hat. padding bietet sich an.

      Da sowohl Navigation als auch die Überschriften eine Hintergrundfarbe haben, erreiche ich damit immer noch nicht den Abstand zwischen beiden.

      Eine weitere Möglichkeit wäre, etwas zu nutzen, was Vordergrundfarbe hat (da ja auch damit die Hintergrundfarbe verdeckt wird) - z.B. border.

      Was bei mir auch nicht direkt möglich ist, da die Navigation als Liste angelegt ist und somit wohl keinen Rahmen haben kann, oder?!? Zumindest wird keiner angezeigt und ich habe auch nichts dazu gefunden. Hier wird ul zumindest auch nicht als rahmenfähiges Element geführt.

      Gibt es sonst noch Möglichkeiten? Oder muss ich meine Navigation doch wieder in ein div packen? <kopfkratz>Hilft das überhaupt?!?</kopfkratz>

      Viele Grüße
      Damian

      1. Hallo Damian,

        Was bei mir auch nicht direkt möglich ist, da die Navigation als Liste angelegt ist und somit wohl keinen Rahmen haben kann, oder?!? Hier wird ul zumindest auch nicht als rahmenfähiges Element geführt.

        es handelt sich hierbei nur um eine Auswahl: "Sinnvoll sind die hier beschriebenen Angaben besonders für HTML-Elemente, die einen eigenen Absatz erzeugen bzw. einen Block bilden"

        Und das ul-Element erzeugt einen eigenen Absatz! Schau doch mal unter http://de.selfhtml.org/html/text/listen.htm#formatieren. Da steht eine ganze Menge.

        Mit freundlichen Grüßen,
        André

        1. Hallo ihr Zwei!

          es handelt sich hierbei nur um eine Auswahl: "Sinnvoll sind die hier beschriebenen Angaben besonders für HTML-Elemente, die einen eigenen Absatz erzeugen bzw. einen Block bilden"

          Das hatte ich auch festgestellt und deshalb nach einer vollständigen Liste gesucht aber keine gefunden.

          Und das ul-Element erzeugt einen eigenen Absatz! Schau doch mal unter http://de.selfhtml.org/html/text/listen.htm#formatieren. Da steht eine ganze Menge.

          Und das ist auch gut so! Habe jetzt folgendes eingefügt:

          border-left-width: 2em;
              border-left-style: solid;
              border-left-color: #FFFFFF;

          Im Prinzip hatte ich das bei meinem erfolglosen Versuch auch schon da stehen. Allerdings ist es nur logisch (und gerecht ;-) ), dass es mit boArder statt border nicht funktioniert! *kopfschüttel* Da hab ich wohl gerade vom Snowboarden geträumt...

          Also, vielen Dank und auf wiederschreiben!
          Damian

          1. Hallo Damian,

            Also, vielen Dank und auf wiederschreiben!

            gerne wieder.

            Mit freundlichen Grüßen,
            André

          2. Hallo Damian

            Und das ist auch gut so! Habe jetzt folgendes eingefügt:

            border-left-width: 2em;
                border-left-style: solid;
                border-left-color: #FFFFFF;

            Das kannst du auch kürzer schreiben:

            border-left: 2em solid #fff;  
            
            

            Auf Wiederlesen
            Detlef

            --
            - Wissen ist gut
            - Können ist besser
            - aber das Beste und Interessanteste ist der Weg dahin!