Tom: <div> als Behälter für Bild und Unterschrift

Hello,

ich habe folgendes CSS:

div.img-area
    {
        float:left;
        text-align:left;
        margin-right:10px;
    }

div.img-frame
    {
        border:1px solid blue;
        margin:4px;
        padding:2px;
    }

div.img-frame img
    {
        width:220px;
    }

p.img-legend
    {
        margin-left:5px;
        margin-top:5px;
        font-style:italic;
        overflow:hidden;
    }

HTML:

<div class="img-area" style="margin-right:10px;">
            <div class="img-frame"><img
                src="images/radfahrer.jpg"
                alt="Bild aus der Jugendzeit: XXXXX als Radfahrer"></div>
            <p class="img-legend">Jugendzeit als Radfahrer</p>
        </div>
        <p>Ich wurde XXXX text text geboren. Text text text text.
           Text text text text. Text text text text. Text text text text.</p>

Um für ein Bild nebst Bildunterschrift einen Behälter zu bilden, der umflossen werden kann, gibt es die Klasse ".img-area". Um um das Bild einen Rahmen ziehen zu können, gibt es die Klasse ".img-frame".

Wenn ich jetzt versuche, der img-area ein margin-right:10px; beizubringen, wird dies vom Firefox nicht beachtet. Der IE6 beachtet den Wunsch allerdings.

Wenn ich "margin-right:10px;" als inline-Style in das betroffene DIV aufnehme, wird es auch vom Firefox beachtet.

Wo ist nun mein Denkfehler?

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

--
 ☻_
/▌
/ \ Nur selber lernen macht schlau
http://bergpost.annerschbarrich.de
  1. Hallo,

    Wenn ich "margin-right:10px;" als inline-Style in das betroffene DIV aufnehme, wird es auch vom Firefox beachtet.

    Wo ist nun mein Denkfehler?

    Schon mal mit Firebug angesehen - wo die gelben (margins) und violetten (paddings) Abstände liegen?

    Wenn es mit inline-styles geht, wird dein margin vermutlich an anderer Stelle überschrieben (Spezifität beachten!)

    Viele Grüße,
    Marc.

    --
    Und immer schön
    validieren (http://validator.w3.org/)
    1. Hello,

      Wenn ich "margin-right:10px;" als inline-Style in das betroffene DIV aufnehme, wird es auch vom Firefox beachtet.

      Wo ist nun mein Denkfehler?

      Schon mal mit Firebug angesehen - wo die gelben (margins) und violetten (paddings) Abstände liegen?

      Wenn es mit inline-styles geht, wird dein margin vermutlich an anderer Stelle überschrieben (Spezifität beachten!)

      Habe mir das jetzt gerade mit Webdeveloper und der Option "Hervorheben" angesehen. Da sieht alles so aus, wie es soll. Und wo die Attribute für das Div überschrieben werden könnten, kann ich auch nicht ausmachen.

      Es bleibt mir wohl ein Rätsel, zumindest, bis ich die Seite veröffentlichen darf.

      Liebe Grüße aus dem schönen Oberharz

      Tom vom Berg

      --
       ☻_
      /▌
      / \ Nur selber lernen macht schlau
      http://bergpost.annerschbarrich.de
    2. Hello,

      Wenn es mit inline-styles geht, wird dein margin vermutlich an anderer Stelle überschrieben (Spezifität beachten!)

      Ich habe es nochmal total auseinandergenommen. Nun ist der Fehler weg.

      Vermtulich hatte ich an einer Stelle die Elemente anders geschachtelt, als die zugewiesenen Klassen. Weil ich keine DIV-Suppe kochen wollte hatte ich auf ein weiteres übergeordnetes <div> verzichtet.

      Aber nun habe ich doch für den Haupt-Contentbereich ein "div class="main"> eingeführt und aus den eingebettenen Elementen die ohnehin vererbten Eigenschaften wieder herausgenommen.

      Da sich nachher alle Seiten mit einem gemeinsamen CSS-Raster auskommen sollen, möchte ich gerade am Anfang keine Fehler einbauen...

      Es gibt im Prinzip nur eingebettete Bilder, die umflossen werden von den texten und nebengestellte Bilder, neben denen der Text langfließt, aber nicht darunter.

      Liebe Grüße aus dem schönen Oberharz

      Tom vom Berg

      --
       ☻_
      /▌
      / \ Nur selber lernen macht schlau
      http://bergpost.annerschbarrich.de
      1. @@Tom:

        nuqneH

        Weil ich keine DIV-Suppe kochen wollte

        Warum nimmst du dann nicht 'figure' und 'figcaption' [HTML5]?

        Qapla'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)
        1. Hello Gunnar,

          Weil ich keine DIV-Suppe kochen wollte

          Warum nimmst du dann nicht 'figure' und 'figcaption' [HTML5]?

          Theo sagt, retisch eine gute Idee. Aber wörx sätt denn auch mit meinem Freund IE6? Ich denke, der kann noch kein HTML5, oder?

          Liebe Grüße aus dem schönen Oberharz

          Tom vom Berg

          --
           ☻_
          /▌
          / \ Nur selber lernen macht schlau
          http://bergpost.annerschbarrich.de
          1. @@Tom:

            nuqneH

            Theo sagt, retisch eine gute Idee. Aber wörx sätt denn auch mit meinem Freund IE6?

            Mit JavaScript, ja. Dito 7er und 8er.

            Qapla'

            --
            Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
            (Mark Twain)
            1. Hello Gunnar,

              Theo sagt, retisch eine gute Idee. Aber wörx sätt denn auch mit meinem Freund IE6?

              Mit JavaScript, ja. Dito 7er und 8er.

              Ich seh schon. Da drehe ich mich noch eine Weile im Kreis. Ohne JavaScript soll es schon "funzen".

              Liebe Grüße aus dem schönen Oberharz

              Tom vom Berg

              --
               ☻_
              /▌
              / \ Nur selber lernen macht schlau
              http://bergpost.annerschbarrich.de
              1. @@Tom:

                nuqneH

                Ich seh schon. Da drehe ich mich noch eine Weile im Kreis. Ohne JavaScript soll es schon "funzen".

                IE-Nutzer wissen doch eh nicht, wie man JavaScript deaktiviert. ;-)

                Qapla'

                --
                Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                (Mark Twain)
                1. Hallo,

                  IE-Nutzer wissen doch eh nicht, wie man JavaScript deaktiviert. ;-)

                  oh doch, die wissen das möglicherweise besser als die Benutzer anderer Browser - wo doch Microsoft beim Bekanntwerden von Sicherheitslücken gern pauschal rät, Javascript und/oder ActiveX zu deaktivieren. Was aufgrund der weitreichenden Möglichkeiten von JScript vielleicht gar keine so dumme Idee ist ...

                  Ciao,
                   Martin

                  --
                  Success should be measured not so much by the position that one has reached in life,
                  but by the obstacles one has overcome while trying to succeed.
                  Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
                  1. @@Der Martin:

                    nuqneH

                    IE-Nutzer wissen doch eh nicht, wie man JavaScript deaktiviert. ;-)

                    oh doch, die wissen das möglicherweise besser als die Benutzer anderer Browser - wo doch Microsoft beim Bekanntwerden von Sicherheitslücken gern pauschal rät, Javascript und/oder ActiveX zu deaktivieren.

                    Die technisch versierten unter ihnen, die wüssten, wie man JavaScript deaktiviert, wissen auch, wie man andere Browser nutzt ...

                    Was aufgrund der weitreichenden Möglichkeiten von JScript vielleicht gar keine so dumme Idee ist ...

                    ... was aufgrund der weitreichenden Möglichkeiten von anderen Browsern vielleicht gar keine so dumme Idee ist. ;-)

                    Qapla'

                    --
                    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                    (Mark Twain)
  2. Hey Tom,

    hab Dein Beispiel grad mal ausprobiert. Funktioniert so bei mir ohne Probleme in IE, Firefox und Opera. Firebug zeigt auch die richtigen Angaben. Hast Du da eventuell noch mehr CSS-Code drin, der den margin wieder überschreibt?

    Gruß, Dennis