Ausrichtung von Grafiken

[Tim Martens]

Hallo,

ich möchte gerne per CSS drei Grafiken auf meiner Website ausrichten. Das ganze soll wie folgt aussehen:

Logo1        Banner       Logo2

Logo1 + Logo2 sollen links- bzw. rechtsbündig stehen und das "Banner" zentriert ausgerichtet sein.

Z.Zt. sieht der Code so aus:

<p style="text-align:center">
<a href="http://www.yahoo.de">
        <img style="border-style:none" align="left" src="http://www.yahoo.de/logo1.gif" width="69" height="78" alt="Startseite" /></a>
        <a href="http://www.yahoo">
        <img align="right" style="vertical-align:text-top; float:right; border-style:none" src="http://www.yahoo/logo2.gif" width="69" height="78" alt="Startseite" /></a>
  <br />
        <img style="border-style:none" align="center" src="http://www.yahoo/banner.gif" width="480" height="29" alt="Muster" />
</p></div>

In erster Linie geht es mir darum die "align" Elemente aus dem Code zu bekommen.

Vielen Dank im voraus für alle Tipps.

Gruß
Tim

[Gunnar Bittersmann]

In erster Linie geht es mir darum die "align" Elemente aus dem Code zu bekommen.

Tim,
Du meinst align-Attribute.

Mir ist dein Anliegen aber nicht klar: style-Attribute sind nicht ein µ besser als align-Attribute.

style-Attribut benutzen?

Live long and prosper,
Gunnar

[Tim Martens]

Hallo Gunnar,

In erster Linie geht es mir darum die "align" Elemente aus dem Code zu bekommen.

Tim,
Du meinst align-Attribute.

Mir ist dein Anliegen aber nicht klar: style-Attribute sind nicht ein µ besser als align-Attribute.

wenn ich meine Website mit dem W3C Validator überprüfe, wird immer folg. Meldung angezeigt:

Error Line 22 column 45: there is no attribute "align".
...<img style="border-style:none" align="left" src="http://www.yahoo...
You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute

Daher gehe ich davon aus, dass solche align-Attribute nicht sonderlich gut sind, wenn die Seite den Doctype "XHTML 1.0 Strict" haben soll.

Grüße
Tim

[Gunnar Bittersmann]

Daher gehe ich davon aus, dass solche align-Attribute nicht sonderlich gut sind, wenn die Seite den Doctype "XHTML 1.0 Strict" haben soll.

Tim,
Dann schreib halt "XHTML 1.0 Transitional" drüber, denn das trifft zu.

Warum soll denn "XHTML 1.0 Strict" drüberstehen? Nur um damit zu prahlen?

Strict heißt strikte Trennung von Struktur und Layout, und genau das tust du mit dem style-Attribut nicht. Ein Dokument, was vor style-Attribute nur so strotzt, mag zwar gegen die Strict-DTD validieren, widerspricht aber dennoch dem Grundgedanken der Strict-Variante.

Wenn du wirklich Strict schreiben willst (wozu ich ausdrücklich anrate), dann mach sämtliche Layoutangaben im Stylesheet: intern im style-_Element_ oder in einer externen Datei.

Live long and prosper,
Gunnar

[Tim Martens]

Hallo,

Dann schreib halt "XHTML 1.0 Transitional" drüber, denn das trifft zu.
Warum soll denn "XHTML 1.0 Strict" drüberstehen? Nur um damit zu prahlen?

nein, die Website soll in erster Linie barrierefrei sein und "XHTML 1.0 Strict" gehört da einfach zu.

Strict heißt strikte Trennung von Struktur und Layout, und genau das tust du mit dem style-Attribut nicht. Ein Dokument, was vor style-Attribute nur so strotzt, mag zwar gegen die Strict-DTD validieren, widerspricht aber dennoch dem Grundgedanken der Strict-Variante.

Wenn du wirklich Strict schreiben willst (wozu ich ausdrücklich anrate), dann mach sämtliche Layoutangaben im Stylesheet: intern im style-_Element_ oder in einer externen Datei.

Und wie kann ich 3 Grafiken im Stylesheet ausrichten, die alle im gleichen Kasten stehen? Oder geht das nur über getrennte Kästen?

Grüße
Tim

[Gunnar Bittersmann]

nein, die Website soll in erster Linie barrierefrei sein und "XHTML 1.0 Strict" gehört da einfach zu.

Nein, Tim, Strict hat mit Barrierefreiheit nicht im Geringsten was zu tun. Das eine bezieht sich auf Technik, das andere auf Menschen.

In der BITV(?) steht wohl, dass auch Validität des Quelltextes Voraussetzung für Barrierefreiheit sei, das kann aber auch valides HTML 4.01 Transitional sein. Oder HTML 3.2.

* * *

Und wie kann ich 3 Grafiken im Stylesheet ausrichten, die alle im gleichen Kasten stehen? Oder geht das nur über getrennte Kästen?

Du warst schon auf dem richtigen Weg mit float.

Erstmal alles aus dem HTML raus, was da nicht Strict ist:

<p id="logoBanner"><a href="http://www.yahoo.de"><img  
  id="logo1" src="http://www.yahoo.de/logo1.gif" width="69" height="78" alt="Startseite"  
/></a><a href="http://www.yahoo"><img  
  id="logo2" src="http://www.yahoo/logo2.gif" width="69" height="78" alt="Startseite"  
/></a><img  
  id="banner" src="http://www.yahoo/banner.gif" width="480" height="29" alt="Muster"  
/></p>

Und im Stylesheet:

#logoBanner {text-align: center}  
#logoBanner img {border: 0}  
#logo1 {float: left}  
#logo2 {float: right}

Die Bilder ließen sich auch ohne eigene IDs selektieren, wenn denn der IE :first-child und Selektoren für benachbarte Elemente verstünde.

Live long and prosper,
Gunnar

[Tim Martens]

Hallo Gunnar,

vielen Dank für die Anleitung, hat wunderbar funktioniert. :-)

Schönes WE noch.
Tim

[Tim Martens]

Hallo Gunnar,

leider hat sich noch ein Problem ergeben. :-(

Ich habe jetzt versucht alle weiteren Grafiken mit dem von dir erklärten System in die Seite einzubauen, was auch gut funktioniert hat.

Allerdings gibt es eine Ausnahme. Beim alten Code standen 2 der Bilder bei einer 800*600er Auflösung und großem Schriftgrad direkt nebeneinander. Bei der neuen Version werden sie jedoch leicht versetzt angezeigt, da der Abstand zum rechten Rand größer geworden ist.

Alter Code:
<img border-style:none" align="left" src="bild2.jpg" width="270" height="202" alt="Muster" />
 <img border-style:none" align="right" src="bild3.jpg" width="270" height="276" alt="Muster1" />

Neuer Code:
#bild2 {float: left}
#bild2 img {border: 0}

#bild3 {float: right}
#bild3 img {border: 0}

<img id="bild2" src="bild2.jpg" width="270" height="202" alt="Muster" />
 <img id="bild3" src="bild3.jpg" width="270" height="276" alt="Muster1" />

Vielen Dank im voraus für alle Tipps.

Grüße
Tim