nicht angemeldet
fieldset {display:inline} -> Fehler in Opera?
Hallo,
ich habe über <fieldset> und <legend> ein Tabellenlayout zur Darstellung von Bildern mit Titeln ersetzt. Um die Bilder nebeneinander zu platzieren, habe ich für fieldset {display:inline} verwendet. Sollte doch eigentlich erlaubt sein und den gewünschten Effekt erzielen, oder? Es wird jedenfalls XHTML 1.0 Strict und CSS 2.0 validiert und IE und Mozilla zeigen es auch wie gewünscht an.
Nur Opera (7.11) verhält sich hier ganz merkwürdig und setzt einen wenige px großen Rahmen, die Beschreibung und die Bilder jeweils untereinander.
Ich möchte nun ungern {float:left} verwenden und würde daher gerne wissen, ob Opera hier wirklich einen Fehler macht, oder ich mit meiner Formatierung falsch liege. Und ob es vielleicht auch einen einfachen Workaround für den Opera gibt.
Die Seite hierzu: http://www.td-rot-weiss-duesseldorf.de/sportbereich/bsw-archiv.html
Gruß
Ingo
-
Hallo Ingo,
ich habe über <fieldset> und <legend> ein Tabellenlayout zur Darstellung von Bildern mit Titeln ersetzt.
Diese Elemente sind zur Gruppierung von Formularfeldern, genauer gesagt von Paaren von Feldern und Feldbeschriftungen, nicht dafür, um nur einen optischen Effekt zu erzielen.
http://www.edition-w3.de/TR/1999/REC-html401-19991224/interact/forms.html#edef-FIELDSET
http://www.w3.org/Consortium/Offices/Germany/Trans/WAI/webinhalt.html#tech-group-information
http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-groupingUm die Bilder nebeneinander zu platzieren, habe ich für fieldset {display:inline} verwendet. Sollte doch eigentlich erlaubt sein und den gewünschten Effekt erzielen, oder?
Wie ein Inline-Element ein Blockelement und eine anonyme Block-Box enthalten soll, ist mir nicht klar.
Nur Opera (7.11) verhält sich hier ganz merkwürdig und setzt einen wenige px großen Rahmen, die Beschreibung und die Bilder jeweils untereinander.
Opera 7.11 lässt es im Gegensatz zur 6er-Reihe nicht zu, dass fieldset-Elementen die Eigenschaften position (d.h. !=static) oder float (d.h. !=none) zugewiesen werden. Das ist m.E. definitiv ein Bug.
Ich möchte nun ungern {float:left} verwenden
Warum nicht?
Abgesehen davon, das das m.M.n. die bessere Methode wäre, bringt sie im Opera bei fieldset dennoch nichts.und würde daher gerne wissen, ob Opera hier wirklich einen Fehler macht, oder ich mit meiner Formatierung falsch liege.
Beides. Du solltest keine für Formulare gedachten Elemente für die Verknüpfung von Bild und Bildtitel verwenden.
Und ob es vielleicht auch einen einfachen Workaround für den Opera gibt.
Eruiere, ab welcher 7er-Version der Fehler auftritt und ob die neuesten Beta-Versionen dasselbe Verhalten zeigen. Im positiven Falle melde den Bug.
Ein Workaround ist, auf fieldset zu verzichten und beispielsweise div- und/oder p-Elemente zu verwenden. Der Rest sollte sich per float, margin (z.T. negativen, falls du denselben Effekt haben willst) und border lösen lassen - was spricht dagegen?
Grüße,
Mathias--
<img src="http://validator.w3.org/images/vh20" border="0" alt="">-
Hallo Mathias,
Diese Elemente sind zur Gruppierung von Formularfeldern, genauer gesagt von Paaren von Feldern und Feldbeschriftungen, nicht dafür, um nur einen optischen Effekt zu erzielen.
Darüber hatte ich wirklich vorher nachgedacht. Aber wenn <fieldset> laut Definition (sogar in Strict) direkt unterhalb von <body> zulässig ist, ziehe ich den Schluß, daß die Verwendung auch außerhalb von Formularen nicht nur zulässig, sondern darüber hinaus auch für andere Gruppierungen angedacht ist.
Opera 7.11 lässt es im Gegensatz zur 6er-Reihe nicht zu, dass fieldset-Elementen die Eigenschaften position (d.h. !=static) oder float (d.h. !=none) zugewiesen werden. Das ist m.E. definitiv ein Bug.
Danke für diesen Hinweis, somit erübrigt sich meine alternative Idee für die Lösung meines Problems.
Ein Workaround ist, auf fieldset zu verzichten und beispielsweise div- und/oder p-Elemente zu verwenden. Der Rest sollte sich per float, margin (z.T. negativen, falls du denselben Effekt haben willst) und border lösen lassen - was spricht dagegen?
Der Aufwand ganz einfach. <fieldset> i.V. mit <legend> bietet mir hier die Möglichkeit, den Bildern auf einfachste Art einen Titel zu geben, der dazu noch ansprechend im Rahmen angezeigt wird. Daß dieser im am weitesten verbreiteten IE auch noch abgerundete Ecken hat, ist dann noch das I-Tüpfelchen...
Gruß
Ingo-
Hi Ingo,
Der Aufwand ganz einfach. <fieldset> i.V. mit <legend> bietet mir hier die Möglichkeit, den Bildern auf einfachste Art einen Titel zu geben,
http://www.w3.org/TR/html401/interact/forms.html#edef-FIELDSET
http://www.w3.org/TR/html401/interact/forms.html#edef-LEGENDdas sind Formular-Elemente und sie für Layout-Zwekce zu missbrauchen, ist ebenso unnötig, wie ein <font>.
der dazu noch ansprechend im Rahmen angezeigt wird. Daß dieser im am weitesten verbreiteten IE auch noch abgerundete Ecken hat, ist dann noch das I-Tüpfelchen...
Meiner zeigt eckige Ecken, keine runden Rundungen. Welche Version versagt bei dir? ;-)
Grüße,
Roland--
http://my.opera.com/dev/articles/20030519/
http://aktuell.de.selfhtml.org/tippstricks/beitrag.htm
selfcode = ss:| zu:} ls:} fo:} de:> va:} ch:| sh:) n4:& rl:| br:< js:{ ie:{ fl:{ mo:|-
http://www.w3.org/TR/html401/interact/forms.html#edef-FIELDSET
http://www.w3.org/TR/html401/interact/forms.html#edef-LEGENDdas sind Formular-Elemente und sie für Layout-Zwekce zu missbrauchen, ist ebenso unnötig, wie ein <font>.
hi Roland,
dort steht zwar groß die Überschrift:
'Adding structure to forms: the FIELDSET and LEGEND elements'
aber daß dieser Tag ausschliesslich Formularen vorbehalten ist, kann ich dort nicht entnehmen. Wäre dies so, dann wäre <fieldset> sicherlich auch nur innerhalb von Formularen zulässig, zumindest in Strict. Oder was meinst Du, warum der W3C das auch direkt unterhalb von <body> und weiteren Elementen asdrücklich erlaubt?
Daher halte ich dies grundsätzlich nicht für einen Mißbrauch - daß ein Foto allein noch keine Gruppe ausmacht, ist jetzt eine ganz andere Sache.Meiner zeigt eckige Ecken, keine runden Rundungen. Welche Version versagt bei dir? ;-)
6.0 xp sp1. - Allerdings rundet er die Rahmen nur im Quirks-Mode. Dies aber merkwürdigerweise nicht, wenn ich die Seite in der Vorschau in Phase5 betrachte(?).
Gruß
Ingo-
Hallo Ingo,
dort steht zwar groß die Überschrift:
'Adding structure to forms: the FIELDSET and LEGEND elements'
aber daß dieser Tag ausschliesslich Formularen vorbehalten ist, kann ich dort nicht entnehmen.Wie gesagt, lies einmal weiter. Die Web-Zugänglichkeitsrichtlinien sind voll von Hinweisen wie »content developers should not use structural elements to achieve presentation effects«. Was du vorhast, widerspricht m.E. den Richtlinien 3 und 12.
Wäre dies so, dann wäre <fieldset> sicherlich auch nur innerhalb von Formularen zulässig, zumindest in Strict.
Oder was meinst Du, warum der W3C das auch direkt unterhalb von <body> und weiteren Elementen asdrücklich erlaubt?Unter »ausdrücklich erlaubt« verstehe ich etwas anderes. Es ist eine Definitionslücke in der DTD, welche nicht weiter kommentiert wird. Alle Beispiele weisen auf eine Verwendung in Formularen hin.
Schaue dir den Aufbau der DTD an, sie gruppiert lediglich Block- und Inline-Elemente. Auch input, select, textarea, button und label dürfen außerhalb von Formularen auftauchen - dabei ist das abgesehen von Scripten ohne Sinn und Zweck. Nur weil es die DTD erlaubt, ist es noch lange nicht sinnvoll, benutzbar und zugänglich.
Die XHTML1-DTD lässt beispielsweise auch zu, dass form in form auftaucht (<form><div><form></form></div></form>). Eine DTD kann in XML diese Syntax nicht verbieten (nebenbei, wie ist es eigentlich in Schema?), nichtsdestoweniger sollte sie unbedingt vermieden werden.
Daher halte ich dies grundsätzlich nicht für einen Mißbrauch
Würdest du sagen, dass blockquote für Einrückungen Missbrauch wäre? Oder hX für großen Text, unabhängig davon, ob es sich um Überschriften handelt?
Grüße,
Mathias--
<img src="http://validator.w3.org/images/vh20" border="0" alt="">-
Hallo Mathias,
Wie gesagt, lies einmal weiter. Die Web-Zugänglichkeitsrichtlinien sind voll von Hinweisen wie »content developers should not use structural elements to achieve presentation effects«. Was du vorhast, widerspricht m.E. den Richtlinien 3 und 12.
Nun, ich habe einmal testweise mehrere Elemente (hier Bilder) über <fieldset> zu einer zusammengehörigen Gruppe zusammengefaßt und ihnen mit <legend> eine Gruppenüberschrift gegeben. Dies sollte doch eigentlich der Intention auch entsprechen, oder? Natürlich ist hier der Opera wieder der einzige Browser, der das anders sieht...
Es ist eine Definitionslücke in der DTD, welche nicht weiter kommentiert wird. Alle Beispiele weisen auf eine Verwendung in Formularen hin.
Da hast Du freilich Recht. Die Frage, die sich mir hier stellt, ist: Sollte diese Lücke nicht geschlossen und klargestellt werden, ob <fieldset> nur für Formulare anzuwenden ist? Und: Solange <fieldset> auch außerhalb von Formularen zulässig ist, verhalten sich die Browser da nicht korrekt und wenden <fieldset> entsprechend an oder setzt der Opera als einziger den Standard korrekt um und weigert sich?
Daher halte ich dies grundsätzlich nicht für einen Mißbrauch
Würdest du sagen, dass blockquote für Einrückungen Missbrauch wäre? Oder hX für großen Text, unabhängig davon, ob es sich um Überschriften handelt?Sicher wäre dies ein Mißbrauch, besonders unter dem Aspekt von Barrierefreiheit. Nur ändert dies nichts an meiner Meinung, daß <fieldset> auch für Gruppierungen außerhalb von Formularen sinnvoll ist, da es eine einfache Alternative hierzu eben nicht gibt. Sicher kann ich den gewünschten Effekt mit Divs und CSS auch hinbekommen. Nur wird hier der Quellcode unübersichtlicher und die Gruppierung im übrigen nur optisch sichtbar, während <fieldset> auch einen logischen Zusammenhang herstellt.
Gruß
Ingo-
Hallo, Ingo,
Die Web-Zugänglichkeitsrichtlinien sind voll von Hinweisen wie »content developers should not use structural elements to achieve presentation effects«. Was du vorhast, widerspricht m.E. den Richtlinien 3 und 12.
Nun, ich habe einmal testweise mehrere Elemente (hier Bilder) über <fieldset> zu einer zusammengehörigen Gruppe zusammengefaßt und ihnen mit <legend> eine Gruppenüberschrift gegeben. Dies sollte doch eigentlich der Intention auch entsprechen, oder?
Um den Prozess noch einmal zu zusammenzufassen: Du hast eine logische Struktur, ein Datenmodell bzw. ein Geflecht von Informationsknoten mit logischen Beziehungen. Dafür suchst du das passende Markup.
fieldset/legend passt aus zwei Gründen - erstens gibt diese Auszeichnung die abstrakte, logisch-hierarchische Struktur angemessen wieder und zweitens wird es von einigen Browsern in einer bestimmten Weise ausgegeben, welche dir zusagt und den Bezug zwischen den Elementen auch optisch angemessen wiedergibt.
Der entscheidende Punkt ist jedoch, dass fieldset/legend ist kein allgemeiner, nicht näher spezialisierter Mechanismus ist, um eine solche Strukturen abzubilden. Was du suchst, ist eine abstrakte Möglichkeit, mehrere Elemente/Knoten zusammenzufassen bzw. zu gruppieren und dieser Gruppe eine Überschrift bzw. einen Titel zuzuweisen - unabhängig davon, welche besonderen Bedeutung diesem Elementzusammenhang zugrunde liegen. fieldset/legend tellt zwar auch eine solche Verbindung her, aber zusätzlich mit einer konkreten, ins Detail gehenden Bedeutung. Es ist nämlich nicht irgendein Bereich mit einer beliebigen, vom Markup nur oberflächlich bestimmten Bedeutung, dem eine Beschreibung/ein Titel zugewiesen wird, sondern speziell eine Gruppe von Formularelementen (label und input/select/textarea) in einem HTML/HTTP-Formular. Und diese spezielle logische Funktion führt zu den in [pref:t=51422&m=283054] beschriebenen Problemen.
Wenn nun fieldset/legend zur generischen Gruppierung gedacht wäre, würden keine Probleme dabei auftreten, es für verschiedene Anwendungsfälle zu gebrauchen. Da die Semantik von fieldset/legend aber durch die Specs eingegrenzt wurde und es nur einene semantisch exakte stimmigen Anwendungsfall gibt, musst du damit rechnen, dass Browser fieldset/legend unverwechselbar als Formularfeldgruppen ausgeben - wie gesagt.
Es ist eine Definitionslücke in der DTD, welche nicht weiter kommentiert wird. Alle Beispiele weisen auf eine Verwendung in Formularen hin.
Da hast Du freilich Recht. Die Frage, die sich mir hier stellt, ist: Sollte diese Lücke nicht geschlossen und klargestellt werden, ob <fieldset> nur für Formulare anzuwenden ist?
Die ursprüngliche, »eigentliche« Bedeutung von fieldset ist meiner Meinung nach eindeutig definiert und bei Beachtung dieser befindet man sich auf der sicheren Seite, weil sie Kompatibilität gewährleistet. Du kannst natürlich auf W3C-Listen nachfragen, ob einerseits die verallgemeinernde Übertragung im Sinne der Erfinder war und ob andererseits solche Konstrukte aufgrund der Browserimplementationen praktisch ratsam sind.
Darüber hinaus werden (X)HTML-Formulare und die damit verbundenen (X)HTML-DTDs in der jetzigen Form sowieso nicht mehr weiterentwickelt, sodass die Lücke nicht mehr geschlossen wird. An die Stelle der heutigen Webformulare werden XForms treten, dort wäre anscheinend das group-Element http://www.w3.org/TR/xforms/slice9.html#id2628568 zuständig.
Und: Solange <fieldset> auch außerhalb von Formularen zulässig ist, verhalten sich die Browser da nicht korrekt und wenden <fieldset> entsprechend an
Das könnte ebenso als Fehlertoleranz gedeutet werden, es ist ihnen einfach gleichgültig, sie interpretieren auch unsinniges und ungültiges Markup. Browser verhalten sich gemessen an den Specs ständig inkorrekt und wahrscheinlich würde sich das Verhalten auch nicht ändern, wenn die DTD bzw. das Schema strenger wäre.
Problematisch ist eben, dass sie es treudoof in allen noch so unpassenden Fällen »entsprechend« und gewissenhaft anwenden. Es sind unzählige Szenarien denkbar, in welchen dem Benutzer unmissverständlich klargemacht wird, dass es sich um eine Formularfeldgruppe handelt.
oder setzt der Opera als einziger den Standard korrekt um und weigert sich?
Das denke ich nicht, denn fieldset ist ein gewöhnliches Blockelement und float sowie position sollten anwendbar sein (selbst wenn es ein replaced block element wäre). Abgesehen davon halte ich es durchaus für sinnvoll, mehrere Formulargruppen nebeneinander darzustellen, mit Tabellenlayout ist es schließlich auch möglich. Es ist m.E. definitiv ein Bug.
Nur ändert dies nichts an meiner Meinung, daß <fieldset> auch für Gruppierungen außerhalb von Formularen sinnvoll ist, da es eine einfache Alternative hierzu eben nicht gibt. Sicher kann ich den gewünschten Effekt mit Divs und CSS auch hinbekommen. Nur wird hier der Quellcode unübersichtlicher und die Gruppierung im übrigen nur optisch sichtbar, während <fieldset> auch einen logischen Zusammenhang herstellt.
Ich streite nicht ab, dass das grundlegende Konzept von fieldset/legend die Knotenbeziehungen und damit die logischen Zusammenhänge in deiner Bildergalerie bzw. deinem anderen Beispiel angemessen wiedergibt. Um solche allgemeinen Zusammenhänge im Markup wiederzugeben (und effektiv mit CSS ansprechen zu können), existieren jedoch passendere Methoden, beispielsweise Tabellen.
Gedachte Markupstruktur:
<galerie>
<eintrag>
<beschreibung>...</beschreibung>
<bildobjekt>...</bildobjekt>
</eintrag>
...
</galerie>Mögliche (X)HTML-Umsetzung:
<table>
<tr>
<th>Bildbeschreibung</th>
<td><img src="bla" alt="bla" /></td>
</tr>
...
</table>Das Problem ist selbstverständlich das Umformatieren dieser Tabelle hin zu der gewünschten Darstellung. Der logische Zusammenhang würde aber stimmen.
Grüße,
Mathias
--
<img src="http://validator.w3.org/images/vh20" border="0" alt="">-
Hallo Mathias,
fieldset/legend tellt zwar auch eine solche Verbindung her, aber zusätzlich mit einer konkreten, ins Detail gehenden Bedeutung. Es ist nämlich nicht irgendein Bereich mit einer beliebigen, vom Markup nur oberflächlich bestimmten Bedeutung, dem eine Beschreibung/ein Titel zugewiesen wird, sondern speziell eine Gruppe von Formularelementen (label und input/select/textarea) in einem HTML/HTTP-Formular. Und diese spezielle logische Funktion führt zu den in [pref:t=51422&m=283054] beschriebenen Problemen.
zugegeben, hier könnten später einmal unvorhergesehene Probleme auftreten, obwohl dies in den aktuellen Browser-Versionen ja funktioniert - bis auf den Opera, was Du aber jetzt selbst als Bug einschätzt. Ich habe den Test mit inline definierten <fieldset> in Formularen zwar noch nicht probiert, schätze aber, daß der Opera hier grundsätzlich display:block anwendet.
Darüber hinaus werden (X)HTML-Formulare und die damit verbundenen (X)HTML-DTDs in der jetzigen Form sowieso nicht mehr weiterentwickelt, sodass die Lücke nicht mehr geschlossen wird. An die Stelle der heutigen Webformulare werden XForms treten, dort wäre anscheinend das group-Element http://www.w3.org/TR/xforms/slice9.html#id2628568 zuständig.
Wäre wirkllich schön, wenn das jetzt schon zur Verfügung stehen würde...
Ich streite nicht ab, dass das grundlegende Konzept von fieldset/legend die Knotenbeziehungen und damit die logischen Zusammenhänge in deiner Bildergalerie bzw. deinem anderen Beispiel angemessen wiedergibt. Um solche allgemeinen Zusammenhänge im Markup wiederzugeben (und effektiv mit CSS ansprechen zu können), existieren jedoch passendere Methoden, beispielsweise Tabellen.
Tja, über Tabellen hatte ich das ja vorher auch realisiert. Nur bin ich jetzt dabei, zum Layout zweckentfremdete Tabellen durch CSS zu ersetzen. Und bei einer solchen Bildergalerie handelt es sich m.E. nicht um tabellarische Daten. Außerdem erfordern Tabellen hier einen größeren Aufwand bei Aktualisierungen und sind vor allem nicht frei skalierbar, d.h. ich muß mich - unabhängig von der Fenstergröße - auf drei Bilder/Zeil beschränken, damit es auch bei 800er Breite noch passt.
Aber in Anbetracht der von Dir hier gebrachten Argumente und da ich den Bildtitel eigentlich auch lieber als Bildunterschrift gesetzt hätte, habe ich mich einmal an eine CSS-Umsetzung ohne <fieldset> gemacht.
Nur leider habe ich auch nach über einer Stunde Experimentieren immer noch keine brauchbare Lösung gefunden. Das Problem hierbei sind die unterschiedlichen Bildhöhen. Hierdurch werden die Bilder bzw. die umrahmenden DIVs an einigen Stellen in einer neuen Zeile nicht links ausgerichtet, sondern ggfls. unterhalb kleinerer Bilder - je nach Fenstergröße verschieden. Da ich die Darstellung weiterhin flexibel halten möchte, so daß je nach Fenstergröße mehr oder weniger Bilder nebeneinander platziert werden können, komme ich hier leider nicht weiter.In Deinem o.g. Beitrag hattest Du geschrieben:
Ersetze die fieldset und legend durch div-Elemente, gebe ihnen einen Rahmen, Abstände und float, wie ich sagte. In zwei Minuten solltest du mit gewöhnlichen Elementen dieselbe Darstellung wie bei fieldset/legend erreichen.
Wäre es zuviel verlangt, wenn Du mal 2 Minuten Deiner Zeit opferst und es mal probierst?
Als Ansatz habe ich meinen letzten Versuch einmal online gestellt:
http://www.td-rot-weiss-duesseldorf.de/sportbereich/bsw-archiv2.htmlHierbei würde mir schon reichen, wenn die Bilder jeweils in einer Reihe positioniert werden. Optimal fände ich freilich die Ausrichtuung an den unteren Bildrändern und nicht wie hier an den oberen. Aber wie gesagt: frei skalierbar sollte es bleiben...
Gruß
Ingo-
Hallo,
kleiner Nachtrag: nach einiger Tüftelei habe ich eine _fast_ taugliche Lösung mit äußeren DIVs in der Höhe des größten Bildes zzgl. Umrahmung gefunden. Leider hat diese den Schönheitsfehler, daß die vertikalen Abstände sich an diesen DIVs ausrichten und somit die sichtbaren Abstände uneinheitlich sind. Außerdem mißfällt mir natürlich diese Umständlichkeit, die etwas von 'BlindGifs' in Tabellen hat...Wenn ich dem Browser die Anordnung mittels <fieldset> überlasse, geht's halt doch besser.
Oder hat vielleicht doch jemand hier einen Lösungsansatz, der ein entsprechendes Ergebnis bringt? Die Krönung wäre wie schon gesagt noch, wenn die Bilder an den unteren Rahmen ausgerichtet würden, so daß die Bildunterschriften jeweils in einer Reihe sind.
Hier mal der Link zu der "murksigen" Variante:
http://www.td-rot-weiss-duesseldorf.de/sportbereich/bsw-archiv1.html
und das relevante CSS für die äußeren DIVs und das DIV der Bildumrahmung:
.Murks { float:left; width:216px; height:383px; margin:10px; padding:0; }
.Umrahmung { padding:7px 7px 3px; border:1px solid #00C; }Gruß
Ingo-
Hallo Ingo,
kleiner Nachtrag: nach einiger Tüftelei habe ich eine _fast_ taugliche Lösung mit äußeren DIVs in der Höhe des größten Bildes zzgl. Umrahmung gefunden.
Hehe, ich habe heute Nachmittag dein Vorgängerposting gelesen und exakt diese Lösung erarbeitet und wollte sie gerade posten. :)
Leider hat diese den Schönheitsfehler, daß die vertikalen Abstände sich an diesen DIVs ausrichten und somit die sichtbaren Abstände uneinheitlich sind. Außerdem mißfällt mir natürlich diese Umständlichkeit, die etwas von 'BlindGifs' in Tabellen hat...
Ja, sinnlos verschachtelte div-Elemente... Etwas besseres fällt mir auch nicht ein (mit Tabellen habe ich es nicht probiert).
Die Krönung wäre wie schon gesagt noch, wenn die Bilder an den unteren Rahmen ausgerichtet würden, so daß die Bildunterschriften jeweils in einer Reihe sind.
Wie das bewerkstelligt werden kann, ist mir auch nicht bekannt. fieldset hat anscheinend eine Eigenschaft, welche sich nicht mit CSS und normalen Elementen nachmachen lässt. Meine Zwei-Minuten-Lösung basierte unter anderem auf display:inline-block (CSS2.1) und war zwar elegant und effektiv, aber nicht kompatibel. ;)
Hier mal der Link zu der "murksigen" Variante:
und das relevante CSS für die äußeren DIVs und das DIV der Bildumrahmung:
.Murks { float:left; width:216px; height:383px; margin:10px; padding:0; }
.Umrahmung { padding:7px 7px 3px; border:1px solid #00C; }Ich habe es mit Nachkommensselektoren gelöst:
.foto {height:400px; float:left;}
.foto div {margin:0 10px 0 0; padding:7px 7px 3px; border:1px solid #00C;}
.foto span {/* ... */}
.foto img {padding:0 0 3px 0;}Dabei ist eine Klasse ausreichend. (margin und padding sind natürlich willkürlich gewählt, 400px ist auch Pi mal Daumen kalkuliert, es könnte tatsächlich weniger sein.)
Ein Bild wird dann so eingebunden:
<div class="foto"><div><img src="bsw-paar.jpg" alt="Foto von Hans und Gisela" height="193" width="200" /><br /><span>Hans und Gisela</span></div></div>
Vielleicht versuchst du zusätzlich die Zeilenabstände dadurch zu verkleinern, beim höchsten Bild einen breiteren Bildausschnitt zu wählen, sodass die Füße der Abgebildeten früher aufhören und das Bild kleiner wird bei gleichbleibender Breite.
Grüße,
Mathias--
<img src="http://validator.w3.org/images/vh20" border="0" alt="">-
Hallo Mathias,
Ja, sinnlos verschachtelte div-Elemente... Etwas besseres fällt mir auch nicht ein (mit Tabellen habe ich es nicht probiert).
Die Krönung wäre wie schon gesagt noch, wenn die Bilder an den unteren Rahmen ausgerichtet würden, so daß die Bildunterschriften jeweils in einer Reihe sind.
Wie das bewerkstelligt werden kann, ist mir auch nicht bekannt. fieldset hat anscheinend eine Eigenschaft, welche sich nicht mit CSS und normalen Elementen nachmachen lässt. Meine Zwei-Minuten-Lösung basierte unter anderem auf display:inline-block (CSS2.1) und war zwar elegant und effektiv, aber nicht kompatibel. ;)
Wirklich schade... Ich werde es wohl doch mal mit einer Tabelle (wie von Dir zuvor angesprochen nur für jeweils ein Bild und die Unterschrift) probieren - vielleicht bekomme ich damit den '<fieldset>-Effekt' hin und kann die Bilder an der Grundlinie ausrichten.
Das wäre es mir dann schon wert, denn bei <fieldset> bekomme ich ja weder die Titel nach unten noch die Fotos nach oben - d.h. keine Ausrichtung an den Titeln hin.
Dabei ist eine Klasse ausreichend.
Stimmt. Und es sieht so zumindest optisch nicht ganz so gruselig aus..;-)
Übrigens funktioniert in Deiner Version das margin und padding so nicht wie gewünscht.
.foto div {margin:0 10px 0 0;} funktioniert nur im IE, der Mozilla braucht das margin im übergeordneten DIV - wie ich meine zu recht.
.foto img {padding:0 0 3px 0;}
macht wenig Sinn, da es keine Abstände nach außen setzt..;-)Nunja, wie gesagt experimentiere ich demnächst mal mit den Möglichkeiten, die mir eine Tabelle bietet. Wenn's was bingt, stelle ich die Lösung mal vor, sofern der Thread noch nicht im Archiv ist - ansonsten kannst Du ja mal bei Gelegenheit auf der Originalseite http://www.td-rot-weiss-duesseldorf.de/sportbereich/bsw-archiv.html nachschauen...
Gruß
IngoP.S.:
Vielleicht versuchst du zusätzlich die Zeilenabstände dadurch zu verkleinern, beim höchsten Bild einen breiteren Bildausschnitt zu wählen
Hatte ich auch shon dran gedacht. Nur habe ich die Originalvorlage nicht mehr.. muß mal versuchen, sie nochmal zu bekommen. Hätte ich diese Probleme geahnt, dann hätte ich von vornherein feste Seitenverhältnisse bei den Fotos für's Archiv verlangt... Nunja, so lernt man eben auch noch etwas tricksen dazu.
-
Hallo Mathias,
Die Krönung wäre wie schon gesagt noch, wenn die Bilder an den unteren Rahmen ausgerichtet würden, so daß die Bildunterschriften jeweils in einer Reihe sind.
Wie das bewerkstelligt werden kann, ist mir auch nicht bekannt. fieldset hat anscheinend eine Eigenschaft, welche sich nicht mit CSS und normalen Elementen nachmachen lässt.
Nunja... mit einem weiteren 'BlindDiv' (incl. einem WhiteSpace für den Opera) und einem Taschenrechner ist es mir jetzt zumindest gelungen, den optischen Effekt nachzubauen:
http://www.td-rot-weiss-duesseldorf.de/sportbereich/bsw-archiv3.htmlGruß
Ingo
-
-
-
Hallo,
bezüglich der Tabellenlösung:
Tja, über Tabellen hatte ich das ja vorher auch realisiert. Nur bin ich jetzt dabei, zum Layout zweckentfremdete Tabellen durch CSS zu ersetzen. Und bei einer solchen Bildergalerie handelt es sich m.E. nicht um tabellarische Daten.
Ich meinte auch nicht, eine Tabelle zu verwenden, um die Spalten zu realisieren (also eine feste Anzahl von Spalten pro Zeile). Das Tabellenmodell, was ich beispielhaft vorgestellt habe, arbeitet nur mit zwei Spalten, welche die Zuordnungen zwischen den Bildern und den Beschreibungen herstellt, also so ungefähr:
<table>
<tr>
<td><img src="bsw-paar.jpg" alt="Foto von Hans und Gisela" height="193" width="200" /></td>
<td>Hans und Gisela</td>
</tr>
...
</table>(Eigentlich müsste das jeweils zweite td-Element ein th-Element sein, nur passt die Reihenfolge nicht.)
Folgende Styleregeln würden die einzelnen Paare flexibel nebeneinander positionieren:
tr,td {display:block;}
tr {border:1px solid blue; float:left; padding:5px; margin-right:15px; margin-bottom:15px;}Außerdem erfordern Tabellen hier einen größeren Aufwand bei Aktualisierungen und sind vor allem nicht frei skalierbar, d.h. ich muß mich - unabhängig von der Fenstergröße - auf drei Bilder/Zeil beschränken, damit es auch bei 800er Breite noch passt.
Das Problem ist mir bewusst, genau das meinte ich nicht.
Grüße,
Mathias--
<img src="http://validator.w3.org/images/vh20" border="0" alt="">
-
-
-
-
-
-
-
Hallo,
Diese Elemente sind zur Gruppierung von Formularfeldern, genauer gesagt von Paaren von Feldern und Feldbeschriftungen, nicht dafür, um nur einen optischen Effekt zu erzielen.
Darüber hatte ich wirklich vorher nachgedacht. Aber wenn <fieldset> laut Definition (sogar in Strict) direkt unterhalb von <body> zulässig ist, ziehe ich den Schluß, daß die Verwendung auch außerhalb von Formularen nicht nur zulässig, sondern darüber hinaus auch für andere Gruppierungen angedacht ist.
Das ist reine Spekulation, halte dich lieber daran, was ausdrücklich erlaubt ist. Ich denke eher, dass keine eigene Gruppe in der DTD angelegt werden sollte und demnach fieldset der Einfachheit halber %block zugeordnet wurde. In meinen Augen ist dies ein klarer Fehler.
»fieldset« hat eine logische Funktion und wird von verschiedenen Browsern auch explizit mit dieser Funktion ausgegeben. Die visuelle Ausgabe, auf die du aus bist, ist nur eine mögliche, Clients können die Funktion auf vielfältige Weise wiedergeben. Es wäre für den Benutzer absolut verwirrend, wenn deine Bildergalerie als Ansammlung von Formularfeldgruppen ausgegeben würde.
fieldset und legend sind Formular-Elemente, und gerade bei diesen ist es besonders kritisch, wenn sie umformatiert werden und somit ungewohnt dargestellt werden, dementsprechend besteht Notwendigkeit, sie über Browsereinstellungen und Benutzerstylesheets vor Umformatierung zu schützen. Ein Argument mehr, warum deine Konstruktion heikel ist.Anders als Orlando sagt, ist dieser Missbrauch schlimmer als »font«. Wenn eine Überschrift mit font anstatt hX ausgezeichnet wird, ist die logische Information gleich Null, sie fehlt einfach. Wenn aber blockquote für Einrückungen (</archiv/2003/6/50092/#m274065> ff.) oder fieldset/legend des Rahmen- und Titeleffektes wegen benutzt werden, existiert eine logische Information, welche aber falsch und irreführend ist, was um einiges problematischer ist, weil sie desinformiert.
Lies bitte die Quellen, die ich dir gegeben habe, vollständig:
»The FIELDSET element allows authors to group thematically related controls and labels. Grouping controls makes it easier for users to understand their purpose while simultaneously facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents. The proper use of this element makes documents more accessible.« (Bzgl. der dt. Übersetzung siehe Link im Vorgängerposting.)
Jede andere Anwendung wäre kontraproduktiv.Ein Workaround ist, auf fieldset zu verzichten und beispielsweise div- und/oder p-Elemente zu verwenden. Der Rest sollte sich per float, margin (z.T. negativen, falls du denselben Effekt haben willst) und border lösen lassen - was spricht dagegen?
Der Aufwand ganz einfach. <fieldset> i.V. mit <legend> bietet mir hier die Möglichkeit, den Bildern auf einfachste Art einen Titel zu geben, der dazu noch ansprechend im Rahmen angezeigt wird.
Das ist für mich hier kein Argument, weil ich den angeblichen Aufwand nicht sehe. Ersetze die fieldset und legend durch div-Elemente, gebe ihnen einen Rahmen, Abstände und float, wie ich sagte. In zwei Minuten solltest du mit gewöhnlichen Elementen dieselbe Darstellung wie bei fieldset/legend erreichen.
Daß dieser im am weitesten verbreiteten IE auch noch abgerundete Ecken hat, ist dann noch das I-Tüpfelchen...
Prächtiges Argument.
Mathias
--
<img src="http://validator.w3.org/images/vh20" border="0" alt="">
-
-