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

[Tom]

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

[Marc]

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.

[Tom]

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

[Tom]

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

[Gunnar Bittersmann]

@@Tom:

nuqneH

Weil ich keine DIV-Suppe kochen wollte

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

Qapla'

[Tom]

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

[Gunnar Bittersmann]

@@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'

[Tom]

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

[Gunnar Bittersmann]

@@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'

[Der Martin]

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

[Gunnar Bittersmann]

@@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'

[Der-Dennis]

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