Bild ohne DIV einbinden ?

[Jaskars]

Vor kurzem wurde mir gesagt, ich kann ein DIV um ein Bild, welches ein reines Design-Element ist, auch weg lassen. Aber wie sag ich dem Bild dann, dass es da stehen soll, wo es stehen soll?
Muss ich ein Bild nicht irgendwo rein packen (Div, Span), um es nach Lust und Laune in meiner Seite plazieren zu können?

Das bereitet mir gerade Kopfzerbrechen...

Über Hilfe würde ich mich freuen.

Im Moment habe ich das so gelöst:

HTML:<div id="ornmt_1"><img src="bilder/ornmt_1.jpg"></div>

#ornmt_1 { position:absolute; width:361px; height:141px; margin-left:191px; }

[Der Martin]

Hallo,

Vor kurzem wurde mir gesagt, ich kann ein DIV um ein Bild, welches ein reines Design-Element ist, auch weg lassen.

anders ausgedrückt: Du kannst ein div, das nur ein einziges Element enthält, eigentlich immer weglassen. Denn das div-Element dient nur dazu, andere Elemente zu einem gemeinsamen Block zusammenzufassen, um sie dann als Gruppe zu behandeln.
Wenn das Bild ein reines Design-Element ist, solltest du es eigentlich gar nicht als img notieren, sondern als Hintergrundbild eines anderen Elements.

Aber wie sag ich dem Bild dann, dass es da stehen soll, wo es stehen soll?
Muss ich ein Bild nicht irgendwo rein packen (Div, Span), um es nach Lust und Laune in meiner Seite plazieren zu können?

Warum? CSS kann man doch nicht nur auf div- oder span-Elemente anwenden, sondern auch jedes beliebige Element. Auch auf img-Elemente.

HTML:<div id="ornmt_1"><img src="bilder/ornmt_1.jpg"></div>

#ornmt_1 { position:absolute; width:361px; height:141px; margin-left:191px; }

Lass das div weg und formatiere stattdessen das Bild direkt, anstatt sein Containerelement.

Nebenbei bemerkt ist absolute Positionierung möglicherweise nicht das, was du wirklich willst. Wenn man sie nicht wirklich mit all ihren Nebenwirkungen verstanden hat, wird man immer wieder darüber stolpern.

So long,
 Martin

[Jaskars]

Hi, danke für die schnelle Antwort.

Versteh ich das richtig - das sollte dann in etwa so aussehen:

HTML:
<img id="ornmt_1" src="bilder/ornmt_1.jpg">

CSS:
#ornmt_1 { position:absolute; width:361px; height:141px; margin-left:191px; }

[Malcolm Beck´s]

hi,

Versteh ich das richtig - das sollte dann in etwa so aussehen:
HTML:
<img id="ornmt_1" src="bilder/ornmt_1.jpg">

Fast, „Das Attribut alt ist Pflichtangabe“.

Und natürlich entsprechend deinem Doctype.

holla holla

[Gernot Back]

Hallo Martin,

Warum? CSS kann man doch nicht nur auf div- oder span-Elemente anwenden, sondern auch jedes beliebige Element. Auch auf img-Elemente.

HTML:<div id="ornmt_1"><img src="bilder/ornmt_1.jpg"></div>

#ornmt_1 { position:absolute; width:361px; height:141px; margin-left:191px; }

Lass das div weg und formatiere stattdessen das Bild direkt, anstatt sein Containerelement.

verzeih, es ist nicht böse gemeint, aber so kann ich das nicht stehen lassen.

Mal abgesehen von dem fehlenden ALT-Attribut beim IMG, das schon Jaskars vergessen hatte, würde ein blank und direkt im BODY stehendes Inline-Element ohne Blockelement drumherum in einem XHTML-Dokument auch nicht validieren.

Es spricht aber gewiss nichts dagegen, direkt das IMG-Element über CSS zu formatieren, da gebe ich dir Recht!

Gruß Gernot

[Gunnar Bittersmann]

@@Gernot Back:

verzeih, es ist nicht böse gemeint, aber so kann ich das nicht stehen lassen.

Dito:

[…] würde ein blank und direkt im BODY stehendes Inline-Element ohne Blockelement drumherum in einem XHTML-Dokument auch nicht validieren.

Je nach Variante vtl. doch.

Das hat nichts mit XHTML vs. HTML zu tun, sondern mit Strict vs. Transitional.

In HTML 4.01 Transitional und XHTML 1.0 Transitional ist 'img' als Kind von 'body' erlaubt, in HTML 4.01 Strict und XHTML 1.0 Strict nicht.

Live long and prosper,
Gunnar