Css

[fisi23]

Hallo,

ich hoffe es hat jemand eine Idee und kennt sich mit CSS aus:

habe folgenden Ausschnitt

<a href="index.htm"><div id="banner"></div></a>

Banner ist in style.css definiert und ist eine Grafik.

Jetzt bekomme ich aber beim Validieren nen Fehler:

"document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag."

Wie kann ich das ändern?

Ich will auf der Grafik einen Link zur root haben...

danke!

[etherius]

Hallo,

ich hoffe es hat jemand eine Idee und kennt sich mit CSS aus:

habe folgenden Ausschnitt

<a href="index.htm"><div id="banner"></div></a>

Banner ist in style.css definiert und ist eine Grafik.

Jetzt bekomme ich aber beim Validieren nen Fehler:

"document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag."

Wie kann ich das ändern?

Ich will auf der Grafik einen Link zur root haben...

danke!

Also dieser Fehler passiert, weil die DTD die verwendung eines <div> elementes innerhalb eines <a> elementes nicht erlaubt. Binde die Grafik doch einfach per <img src=""> ein, anstatt sie im css zu definieren.

mfg

Eth

[Aiun]

Frage 1: welcher HTML Standard ?

Frage 2: wenn du dort ein banner einfügen willst, warum dann das Div ? (anstatt gewohntes <img> )

XHTML definiert ganz klar welches Elemente welche Elemente als Childs haben darf. <div> ist ein Containerelement und darf nicht innerhalb eines <a> stehen. Gibt nur ganz wenige Elemente die in <a> stehen dürfen ... musst du auf w3schools, selfhtml oder google nachlesen.

[bmg4ever]

wie wärs denn hiermit:

<td>

      <a href="http://www.fachinformatiker.de">

           <span style="display: block; width: 100%; height: 100%; cursor: pointer;">

	    BUTTON	

	</span>

      </a>

</td>


[/PHP]

[tobias-digital]

wie wärs denn hiermit:

<td>

      <a href="http://www.fachinformatiker.de">

           <span style="display: block; width: 100%; height: 100%; cursor: pointer;">

	    BUTTON	

	</span>

      </a>

</td>


[/PHP]

Auch wenn wir den Threadersteller jetzt vollkommen verwirren:

[code] <span style="display: block;"> [/code]

ist das gleiche wie

[code] <div> [/code]

Außerdem benötigt man um ein Bild anzuzeigen nicht eine ad absurdum geführte Tabellen/Span/Div Code-Suppe, sondern den img-Tag:

[code] <img src="#" alt="Text" /> [/code]

Gruß, Tobias

[Gregormo]

Wenn es sich um eine Überschrift handelt (was das "banner" vermuten lässt) würde ich es so machen

<h1><a href="#">Überschrift bla</a></h1>

h1 a{display:block; height:100%; background: #123 url('bla.gif') center center no-repeat;}

So ist das Mark-Up semantisch, flexibel (das Bild darf auch breiter sein als der Viewport, ohne das es horizontale Scrollbars gibt) und Suchmaschinen bewerten die Überschrift venünftig (alt-Texte werden nicht so schwer gewichtet wie normaler Text).

Ich kenne den konkreten Fall nicht, aber das sollte das sinnvollste sein.

[bmg4ever]

Auch wenn wir den Threadersteller jetzt vollkommen verwirren:

<span style="display: block;">

ist das gleiche wie

<div>

mit dem unterschied, dass der validator das schluckt und jeder browser den ich kenne damit zurecht kommt. das einzigste, was man nicht vergessen sollte ist das "cursor: pointer;", da der user sonst garnicht kapiert, dass er sich auf einem Link befindet.

Grundsätzlich hast du natürlich Recht wegen dem image, aber wenn man einen viereckigen Button mit effer Schrift drin hat, dann ist obigess Konstrukt immernoch schneller anzupassen als ein Bild. Nur mal angenommen der Text wir variabel via PHP erzeugt. Dann müsste man für jede erdenkliche Kombination ein Bild haben.

Außerdem dürfte es auch ein paar Byte kleiner sein

Naja aber der Threadersteller muss selber wissen, was er besser findet.

[EDIT]

achja. mein vorschreiber hat natürlich recht. das span in meinem fall ist total unsinnig, da man ja auch einem a direkt die eigenschaft "display:block" geben kann (autsch)

[/EDIT]

[Aiun]

köstliche Debatte.

aber kann mir einer einen sinnvollen Grund nennen, einen Container (<span>, <div>, <p>) als <a> Child zu verwenden "nur" um ein Bild darzustellen ?

dafür gibts doch den Img Tag...warum einfach wenns auch kompliziert geht.

den <h(x)> Tag würde ich nicht mehr benutzen...das ist ja das schöne an CSS...das man nicht tausend Tags hat, sondern sich geordnete CSS-Klassen bauen kann.

[etherius]

köstliche Debatte.

aber kann mir einer einen sinnvollen Grund nennen, einen Container (<span>, <div>, <p>) als <a> Child zu verwenden "nur" um ein Bild darzustellen ?

dafür gibts doch den Img Tag...warum einfach wenns auch kompliziert geht.

den <h(x)> Tag würde ich nicht mehr benutzen...das ist ja das schöne an CSS...das man nicht tausend Tags hat, sondern sich geordnete CSS-Klassen bauen kann.

Für Suchmaschinen sind die <h(x)> tags allerdings noch ganz praktisch, da Überschriften teilweise höher bewertet werden als normaler text.

Außerdem, wenn du barrierefrei arbeitest, ist es für einen Blinden der mit einem Screenreader auf deiner Seite surft z.B. viel einfacher Überschriften zu erkennen.

mfg

Eth

[Gregormo]

dafür gibts doch den Img Tag...warum einfach wenns auch kompliziert geht.

Das Bild soll ja nur Hintergrund sein. Es hat keine Bedeutung für den Inhalt (so wie ich das Vorhaben verstehe). Es wird also nur zum Design benutzt, sollte also nach der Trennung von Inhalt/Präsentation über CSS eingebunden werden.

<hn>-Tags würdest du nicht benutzen? Ich glaube du interpretierst den Sinn von CSS miss. Man sollte nicht auf die Struktur pfeiffen, weil man per CSS eh alles stylen kann wie man will. Die Struktur muss im HTML aufgebaut werden. Und dazu gehören u.a. auch Headings! Diese Aufgabentrennung, dass HTML die Struktur übernimmt und CSS den Stil, ist ein großer Schritt zu dem, was Tim Berners Lee das "Semantic Web" nennt. Eine Überschrift sollte man immer als solche auszeichnen, genauso wie einen Absatz als Absatz, Tabellenüberschriften als th usw. Da so die Bedeutung (Semantik) ersichtlich wird, können Maschinen damit auch was anfangen. Einige Beispiele dafür hat mein Vorredner ja bereits geschrieben

//edit

Achja, nochwas zum IMG-Tag. Das macht, wie ich schon sagte, die Seite unflexibel, wenn es einigermaßen breit ist. Bei kleinem Viewport (auf 800*600, auf PDAs, nicht maximiertem Fenster, etc...) ergeben sich so schnell horizontale Scrollbars.

[Aiun]

wenn ich ein Bild zum Design mache, hat es im <a> nichts verloren. dann mache ich, wenn überhaupt <div><a... </div> nicht <a><div>...

durchaus nicht falsch was du über überschriften unsw. sagst...mal drüber grübeln.

[geloescht_JesterDay]

//edit

Achja, nochwas zum IMG-Tag. Das macht, wie ich schon sagte, die Seite unflexibel, wenn es einigermaßen breit ist. Bei kleinem Viewport (auf 800*600, auf PDAs, nicht maximiertem Fenster, etc...) ergeben sich so schnell horizontale Scrollbars.

Ein bild sollte aber genauso als Bild ausgezeichnet werden wie eine Überschrift als Überschirift Dazu gibt es die auszeichnung <img...> ja.

Das Problem mit der Breite kannst du über CSS (overflow: hidden) und einem Container um das Bild lösen.

Bilder, die nur fürs Design sind und sonst keinerlei Bedeutung haben, können (wenn auch ansich unschön) mit leerem Alt-Tag für z.B. Screen-Reader "unsichtbar" gemacht werden. Oder du bezeichnest es im Alt-Tag als das, was es ist, also Banner wie in deiner id.

Trennung von Layout und Inhalt bedeutet nicht, alles ins CSS, was kein Text ist.

durchaus nicht falsch was du über überschriften unsw. sagst...mal drüber grübeln.

Sogar sehr richtig. Suchmachinen z.B. bewerten als <hn> ausgezeichneten Text viel höher, als mit style="font-size: x-large; font-weight: bold;" gestylten. Eine Überschrift ist eben eine Überschrift, weil sie eine besondere Bedeutung hat, nicht einen fetten Text

EDIT:

Da die Standardumsetzungen der einzelnen Browser was die Überschriftenebenen angeht nicht immer toll aussehen und zur Seite passen, kann man das Aussehen von <h1> dann wieder per CSS anpassen. Das ändert ja aber nichts daran, dass die Überschrift im Text als Überschrift strukturiert ist.

[Gregormo]

Oder du bezeichnest es im Alt-Tag als das, was es ist, also Banner wie in deiner id.

Das halte ich auf für keine gute Lösung. Wenn da "Banner" statt dem Bild steht, ist das ja keine sinnvolle Alternative.

overflow:hidden; könnte man machen, aber das ist ja nur wieder mehr CSS und mehr HTML, da finde ich meine Methode eleganter.

Und natürlich gebe ich dir 100%ig recht, dass Bilder, die zum Inhalt gehören mit dem img-Tag eingebunden werden müssen. Keine Frage, das habe ich auch nie bestritten. Ich sagte ja extra wenn es sich dabei um ein Layoutbild handelt, dann sollte es nicht als Inhalt auftauchen.

Trennung von Layout und Inhalt bedeutet nicht, alles ins CSS, was kein Text ist.

Auch da stimme ich dir natürlich voll und ganz zu und würde nie etwas anderes behaupten!

[geloescht_JesterDay]

Das halte ich auf für keine gute Lösung. Wenn da "Banner" statt dem Bild steht, ist das ja keine sinnvolle Alternative.

Der Alternativtext ist ja dafür gedacht, dass er angezeigt wird, wenn entweder das Bild nicht geladen werden kann, oder wenn Bilder ausgeschalten sind (o.ä.). Im Normalfall sieht dieses "Banner" also keiner. Sollte jemand bilder abgeschalten haben (und sie z.B. nur einzeln laden, wenn er sie für interessant/wichtig erachtet, was heutzutage wohl kaum noch vorkommt) oder oder keine Bilder sehen (Textbrowser/Screen-Reader), dann sieht er, dass da ein Bild sein soll, was als Banner beschrieben ist. Jeder wird dann wissen, was das soll. Natürlich kannst du das auch noch etwas ausführlicher schreiben. Der Alt-Text ist nicht auf ein Wort beschränkt. Für ganz ausführliche Beschreibungen gibt es aber ein eigenes Attribut... long-text, description... fällt mir im Moment nicht ein.

EDIT:

Ich hatte auch schonmal denselben Gedanken wie du. Ein Logo oben auf der Seite wollte ich per DIV und background-image anzeigen. Weil es ja nur Designzwecke hat und sonst nicht interessiert. Ich bin davon aber abgekommen, und halte es für keine gute Lösung (mehr).

EDIT2:

Das ist doch im Grunde so, wie eine Überschrift per CSS fett zu machen aber sonst nicht besonders auszeichnen. Wenn da ein Logo/Banner steht, soll das doch jeder sehen, auch wenn er das Bild selber nicht sieht. Es gehört nunmal zur Seite und wird eben auch entsprechend ausgezeichnet.

[Gregormo]

Der Alternativtext ist ja dafür gedacht, dass er angezeigt wird, wenn entweder das Bild nicht geladen werden kann, oder wenn Bilder ausgeschalten sind (o.ä.). Im Normalfall sieht dieses "Banner" also keiner. Sollte jemand bilder abgeschalten haben (und sie z.B. nur einzeln laden, wenn er sie für interessant/wichtig erachtet, was heutzutage wohl kaum noch vorkommt) oder oder keine Bilder sehen (Textbrowser/Screen-Reader), dann sieht er, dass da ein Bild sein soll, was als Banner beschrieben ist. Jeder wird dann wissen, was das soll. Natürlich kannst du das auch noch etwas ausführlicher schreiben.

Ein Alt-Text muss das Bild aber beschreiben, also versuchen den gleichen Inhalt zu vermitteln. Das Banner selber hat aber keinen Inhalt, nur der Text der "darüber liegt". Also sollte soein Bild ein leeres Alt-Attribut bekommen. Dazu ein bißchen Pflichtlektüre.

Für ganz ausführliche Beschreibungen gibt es aber ein eigenes Attribut... long-text, description... fällt mir im Moment nicht ein.

Longdesc. Dies sollte aber einen Link zu einer Beschreibung enthalten, nicht die Beschreibung selber. (weiteres dazu auchnoch im oben genannten Link).

Das ist doch im Grunde so, wie eine Überschrift per CSS fett zu machen aber sonst nicht besonders auszeichnen. Wenn da ein Logo/Banner steht, soll das doch jeder sehen, auch wenn er das Bild selber nicht sieht. Es gehört nunmal zur Seite und wird eben auch entsprechend ausgezeichnet.

Es gehört ja in dem Fall eben nicht wirklich zur Seite, sondern nur zum Layout. Was hat ein Blinder/Sehbehinderter davon, wenn ich ihm da "blaues Karomuster" hinschreibe, wenn das der Hintergrund ist. Was kein Inhalt ist, darf auch nicht im Inhalt vorkommen. Dass es das gleiche ist, wie die Überschrift fett zu machen stimmt genau, es ist nur eine optische Stilsache. Aber Blinde/Sehbehinderte sehen ja auch nicht, ob die Überschrift fett ist. Bestenfalls kriegen sie halt mit, dass es eine Überschrift ist, weil es im HTML so ausgezeichnet ist. Fett oder nicht ist egal - Hintergrundbild oder kein Hintergrundbild ist genauso egal. Genau das ist ja diese zurecht viel propagierte Trennung von Inhalt/Layout.

Texte und andere inhaltliche Medien (Bilder, Videos, Flash, ...) müssen für alle zugänglich sein, Stilelemente gehören ausgelagert. Da sind wir uns ja auch einig. Langsam glaube ich, dass wir eigentlich einer Meinung sind, aber von unterschiedlichen Fällen/Seiten ausgehen, weil wir ja hier den konkreten Fall nicht sehen

[geloescht_JesterDay]

Hier mal ein paar Auszüge aus der c't 18/2004 (Internet ohne Ausgrenzung):

...

Darauf folgend beruht das Grundprinzip der Barrierefreiheit aus der Konsequenten Trennung von Struktur (XHTML), Design (CSS), Inhalt (Texte und Bilder) und Funktion (PHP, MySQL).

...

1. ALT-Attribute für Bilder: Dem XHTML-Standard zufolge muss jedes Bild ein alt-Attribut erhalten. Bilder, die nur dem Layout dienen, erhalten ein leeres alt-Attribut (<img src="leer.gif" alt="" />), damit der Screen Reader es als irrelevant ausfiltern kann.

...

Ja, wir meinen dasselbe, nur sind wir unterschiedlicher Ansichten

Ich bin der Meinung, ein Bild ist ein Bild, egal ob es jemand, der keine Bilder sieht interessiert oder nicht.

Andererseits ist ein Hintergrund dann wieder kein Bild (also von der Dokumentenstruktur her)... hm... naja, also durch die ID Banner hab ich wohl etwas anderes unter dem Bild verstanden. Falls es wirklich nur ein reiner hintergrund ist, wie z.B. ne andere Farbe o.ä., dann kann man es so wohl einbinden. Wenn es aber eine Art Logo ist, was eben jemand ohne Bilder nicht interessiert, sollte man das als <img machen.

Da es bei dir ja schon eine gewisse Relevanz hat, da es ja als Link dient, würde ich es nicht aus der Struktur verbannen. Also:

<div><a></a></div>

ist IMHO als Hintergrund ok,

<a><div></div></a>

hingegen sollte man als <img> machen.

[Gregormo]

Gut, ich bin davon ausgegangen, dass der Quelltext aus dem 1. Post nur ein Bsp. ist und da noch Text hinkommt. Evtl. könnte der Threadersteller da mal Klarheit schaffen wie er das gemeint hat

Also wie vermutet sind wir einer Meinung, verstehen aber die "Vorgabe" des Threaderstellers unterschiedlich

[geloescht_JesterDay]

Gut, ich bin davon ausgegangen, dass der Quelltext aus dem 1. Post nur ein Bsp. ist und da noch Text hinkommt.

Auch mit Text im DIV bzw. im A finde ich, ein Bild als Link (also im A) sollte nicht als Hintergrund in ein DIV ausgelagert werden. Ein Hintergrund kann ja kein aktives Element (also ein Link) sein bzw. sollte es nicht.

[Gregormo]

Nee, ich bin ja davon ausgegangen, dass da Text hinkommt und das Bild nur Hintergrund für diesen Text ist. Also irgendein Muster o.Ä.

Auf die Idee, ein normales Bild über <div> einzubinden bin ich erst garnicht gekommen. Sowas macht man (wenn es sein muss) evtl. bei Image-Replacement-Sachen, aber nicht einfach so. Das sehe ich ja ganz genau so.

[geloescht_JesterDay]

Nee, ich bin ja davon ausgegangen, dass da Text hinkommt und das Bild nur Hintergrund für diesen Text ist. Also irgendein Muster o.Ä.

Ja, aber dennoch ist das DIV dann ein Link (da <a><div>...).

<a href="index.htm"><div id="banner"></div></a>

verstehe ich so, wie das FI-Logo links oben. Und da ist es ja auch ein <img> und nicht nur ein Hintergrund (allerdings ohne alt-Attribute :eek )

Das ist ja auch nur ein reines Design-Element, aber dennoch korrekt in der Umsetzung (bis auf das fehlende alt-Attribute :eek ) IMHO.

[Aiun]

<div> ist ein Containerlement. Genauso wie Td, span, p, li unsw. kann es fast alle möglichen Elemente beinhalten (genaues ist in spec nachzulesen)

A darf nur bestimmte elemente als Kind haben, nämlich solche, denen eine eigene Fläche "immer" zusteht. also <IMG> "darf" gar nicht leer sein. Entweder man sieht das bild, oder den Alt-Text. Der Link ist also immer erreichbar.

<div> kann leer sein, kann verschwinden unsw.

Etwas merkwürdig in der beziehung, soweit ich weis ist <p> und <span> in <a> erlaubt...hmm...

oder man stelle sich vor, div wird absolut positioniert. gefloatet, overflow etz.

da stelle ich es mir schwierig vor für einen Browser festzustellen wo denn nun der Link anfangen oder enden soll ^^.

<a><div class=banner></div></a> ist an sich absolut unsinnig. dann schreibt man <a class=banner>

....vielleicht findet ja noch jemand die passenden Worte um zu erklären was ich meine ^^