nicht angemeldet
Problem bei Tabellenformatierung mittels einer Klasse
0 0 
Der Martin
0 Lösung über Listenelement
0 
Matthias Apsel
1 Der Martin
Problem bei Tabellenformatierung mittels einer Klasse
Gunnar BittersmannHallo Ihr! :)
Nachdem mir in einer ersten Anfrage hier im Forum sehr geholfen wurde und ich mir das Formatieren von Elementen mittels Klassen aneignen konnte (zumindest funktioniert es - es geht sicher noch eleganter^^'), habe ich mich registriert und traue mich nun mit einem weiteren Problem hierher.
Auch dieses mal hat mich eine Suche leider nicht vorangebracht, da ich nicht wirklich weiß, wo das Problem liegen könnte - und daher eine Suche nach bestehenden Threads nicht wirklich was bringt. Ich wüsste nicht, wonach ich suchen sollte?
Jedenfalls, mein Problem:
Ich bewege mich in einer WordPress-Umgebung und habe eine Klasse "ausgabe" erstellt, mit der ich eine Tabelle formatiere und für deren untergeordnete Elemente ich verschiedene Formatierungs-Regeln definiert habe. Das ganze definiere ich im <head>. Hier der Code und die von mir dafür zu Anschauungszwecken erstellte Seite:
Style-Code im <head>
<style type="text/css">
table.ausgabe { border:0px; table-layout:auto; text-align:left }
table.ausgabe tr { border:0px }
table.ausgabe th { border:0px }
table.ausgabe td { border:0px }
table.ausgabe sup { color:navy; font-size:60% }
table.ausgabe tbody { border:thin solid gray }
table.ausgabe tfoot { border:thin solid gray; font-size:75% }
table.ausgabe tfoot span { font-weight:bold; }
table.ausgabe tfoot sup { color:navy; font-size:75% }
</style>
Code-Ausschnitt der eigentlichen Tabelle im <body>
<table class="ausgabe">
...
<tfoot>
<tr>
<td colspan="2">
<span>Informationsnachweise:</span>
<sup>[1]</sup> Laut Simon&Schuster Onlineshop: <a href="http://books.simonandschuster.com/Warcraft-Day-of-the-Dragon/Richard-A-Knaak/Warcraft/9780671041526" target="_blank">Link</a>, letzter Zugriff 20.11.2013.
<sup>[2]</sup> Laut Amazon.com Onlineshop: <a href="http://www.amazon.com/Day-Dragon-WarCraft-Book-No-1/dp/0671041525/ref=tmm_mmp_title_0?ie=UTF8&qid=1385030981&sr=8-1" target="_blank">Link</a>, letzter Zugriff 21.11.2013.
<sup>[3]</sup> Laut Impressum von Warcraft (1). Der Tag des Drachen, 9. Auflage Taschenbuch, September 2007.
</td>
</tr>
</tfoot>
</table>
Ich habe also in dem <foot>-Teil meiner Tabelle eine Überschrift in einem <span>-Element und den Textteil in gar keinem Element. Zweiteres geht vermutlich nur, weil ich in der Wordpress-Umgebung arbeite, die vermutlich automatisch irgendwas ergänzt... oder wird auch im Standard-HTML unformatierter Text automatisch als solcher erkannt? Also ohne jede Kennzeichnung durch <p> oder <span> ?
Ergebnis:
http://wcraft.lorebase.org/tabellentest-mit-span/
Nun sieht das eigentlich schon genau so aus, wie ich es haben will, aber das alles, also die Art und Weise, wie ich zum Ziel gekommen bin, fühlt sich für mich extrem unsauber an: Zur Formatierung meiner Überschrift in <tfoot> ein formatiertes Element <span> zu benutzen ist doch nicht im Sinne des Erfinders, oder? Und das mein Textteil einfach so "da rum steht", gefällt mir auch nicht. Oder übertreibe ich da und sollte einfach mit der gewünschten Optik, die ich ja habe, zufrieden sein?
Ich würde jedenfalls viel lieber ein <h>-Element nutzen, um die Überschrift zu formatieren und dann <span> eben für den Textblock darunter nutzen. Wenn ich das aber versuche, dann geht alles schief...
Siehe folgende Versuche - abermals Code und Testseite:
<head>
<style type="text/css">
table.ausgabe { border:0px; table-layout:auto; text-align:left }
table.ausgabe tr { border:0px }
table.ausgabe th { border:0px }
table.ausgabe td { border:0px }
table.ausgabe sup { color:navy; font-size:60% }
table.ausgabe tbody { border:thin solid gray }
table.ausgabe tfoot { border:thin solid gray; font-size:75% }
table.ausgabe tfoot h6 { font-weight:bold; font-size:90% }
table.ausgabe tfoot span { font-size:50%; }
table.ausgabe tfoot sup { color:navy; font-size:75% }
</style>
<body>
<tfoot>
<tr>
<td colspan="2">
<h6>Informationsnachweise:</h6>
<span><sup>[1]</sup> Laut Simon&Schuster Onlineshop: <a href="http://books.simonandschuster.com/Warcraft-Day-of-the-Dragon/Richard-A-Knaak/Warcraft/9780671041526" target="_blank">Link</a>, letzter Zugriff 20.11.2013.
<sup>[2]</sup> Laut Amazon.com Onlineshop: <a href="http://www.amazon.com/Day-Dragon-WarCraft-Book-No-1/dp/0671041525/ref=tmm_mmp_title_0?ie=UTF8&qid=1385030981&sr=8-1" target="_blank">Link</a>, letzter Zugriff 21.11.2013.
<sup>[3]</sup> Laut Impressum von Warcraft (1). Der Tag des Drachen, 9. Auflage Taschenbuch, September 2007.</span>
</td>
</tr>
</tfoot>
Dieses Mal habe ich also meine Überschrift in ein <h6>-Element und den Text in ein <span>-Element gesteckt.
Ergebnis: http://wcraft.lorebase.org/tabellentest-2-mit-h6/
Obwohl ich nach dem selben Prinzip vorgehe wie zuvor, nur eben andere Elemente formatiere, sind die Auswirkungen hingegen komplett anders. Es gelingt mir nicht mehr, so zu formatieren, wie ich es haben will!
Das ganz kuriose dabei: OBWOHL ich das <h6> Element wieder schließe wirkt es sich trotzdem auf das folgende <span> aus! Dieser komische Abstand zwischen den Zeilen im <span> ist nur da, wenn ich für die Überschrift <h6> benutze. Formatiere ich die Überschrift hingegen auch mit <span> verschwindet der Abstand wieder.
Also im letzten Code nur das <h6>...</h6> gegen <span>...</span> ausgetauscht und es passiert plötzlich das:
Ergebnis: http://wcraft.lorebase.org/tabellentest-2-mit-span/
Was ich vermute ist Folgendes:
Durch das Wegfallen von <h6> schlagen scheinbar andere Styledefinitionen übergeordneter Elemente durch und verändern den gesamten Style meines <tfoot> - oder so ähnlich? ^^'
Was ich aber überhaupt nicht verstehe:
Wie kann sich eine Änderung in der Formatierung meiner Überschrift auch auf den darunter liegenden Textteil auswirken? An dessen Code ändere ich doch gar nichts? Das verwirrt mich total und ich scheine hier irgendeinen Zusammenhang nicht verstanden zu haben...
Würde mich freuen, wenn man mir da beim Verstehen helfen könnte! :)
Nachtrag:
Nochmal zur Erinnerung: Ich bewege mich mit meinem Code innerhalb einer Wordpress-Umgebung. Das spielt vielleicht auch mit hinein...?
Und wenn ich "Vokabeln" nicht richtig benutze, wäre ich dankbar, wenn man mich darauf hinweist. Ich bin mir beim Formulieren nicht immer ganz sicher, wenn ich von "Elementen" oder vom "Formatieren" oder "Definieren" spreche. Sollte da etwas auffallen, nur raus mit der Kritik. Ich möchte ja richtig über das reden können, was ich meine. Dann klappts vielleicht auch irgendwann mit der Archiv-Suche besser. ^^'
-
Moin,
oder wird auch im Standard-HTML unformatierter Text automatisch als solcher erkannt? Also ohne jede Kennzeichnung durch <p> oder <span> ?
Wenn du das Markup so auslieferst, dann liegt es am Browser, wie er es interpretiert. Die meisten Browser stellen das natürlich wie gewünscht dar.
Dieses Mal habe ich also meine Überschrift in ein <h6>-Element und den Text in ein <span>-Element gesteckt.
Das ist schon besser: Eine Überschrift gehört in ein H*-Element. Dein Text ist aber ja weniger ein Text, sondern eher eine Liste, die am besten in ein OL- oder UL-Element gehört (mit entsprechender Formatierung) ;)
Obwohl ich nach dem selben Prinzip vorgehe wie zuvor, nur eben andere Elemente formatiere, sind die Auswirkungen hingegen komplett anders. Es gelingt mir nicht mehr, so zu formatieren, wie ich es haben will!
Das liegt daran, dass verschiedene Standard-Werte für
marginundpaddingundline-heightgesetzt werden. Spiele mit den Werten so herum, bis es dir gefällt.Durch das Wegfallen von <h6> schlagen scheinbar andere Styledefinitionen übergeordneter Elemente durch und verändern den gesamten Style meines <tfoot> - oder so ähnlich? ^^'
Nein, eigentlich nicht. Wenn du einen Chrome oder Firefox hast, dann kannst du mit [Rechtsklick]->[Element untersuchen] alle Styles (auch die standardmäßigen) sehen die wirken. Im aktuellen Firefox gibt es zudem noch eine 3D-Ansicht, die die Schachtelung des Markups zeigt. Das ist interessant und gibt oft Aufschluss über das Zusammenwirken von Elementen und Eigenschaften.
Wie kann sich eine Änderung in der Formatierung meiner Überschrift auch auf den darunter liegenden Textteil auswirken?
Wenn das gewollt wäre, gäbe es CSS-Selektoren dafür.
Nochmal zur Erinnerung: Ich bewege mich mit meinem Code innerhalb einer Wordpress-Umgebung. Das spielt vielleicht auch mit hinein...?
Natürlich greift das Stylesheet deines Wordpress-Themes auch in die Formatierung ein. Selbiges kannst du mit der oben erwähnten Methode nachvollziehen. Ich weiß nicht ob es im FF so ist, aber im Chrome ist auch die Quelle einer jeden Eigenschaft nachvollziehbar. Du siehst also, ob eine Eigenschaft in deinem privaten Stylesheet, im Stylesheet des Themes oder wo auch immer steht.
Und wenn ich "Vokabeln" nicht richtig benutze, wäre ich dankbar, wenn man mich darauf hinweist. Ich bin mir beim Formulieren nicht immer ganz sicher, wenn ich von "Elementen" oder vom "Formatieren" oder "Definieren" spreche. Sollte da etwas auffallen, nur raus mit der Kritik. Ich möchte ja richtig über das reden können, was ich meine. Dann klappts vielleicht auch irgendwann mit der Archiv-Suche besser. ^^'
Die richtigen Fachbegriffe im HTML-Umfeld sind hier sehr gut beschrieben.
Ansonsten gibt es so kleine Stolperfallen, wie "CSS-Klassen" (das gibt es nicht, es gibt in HTML Klassen, die man in CSS selektieren kann). Aber so lange du dich halbwegs verständlich artikulieren kannst, wird dich vielleicht jemand auf einen falschen Begriff hinweisen, aber niemals dir Hilfe verwehren ;)Grüße Marco
--
Ich spreche Spaghetticode - fließend.-
Dieses Mal habe ich also meine Überschrift in ein <h6>-Element und den Text in ein <span>-Element gesteckt.
Das ist schon besser: Eine Überschrift gehört in ein H*-Element. Dein Text ist aber ja weniger ein Text, sondern eher eine Liste, die am besten in ein OL- oder UL-Element gehört (mit entsprechender Formatierung) ;)
Das ist ein guter Vorschlag, danke dafür! Das werde ich in der finalen Umsetzung dann auch so machen. Bei den Tests hier bleibe ich aber erst mal bei dem <span>Element, weil es mir ja hauptsächlich darum geht das vielleicht damit verbundene Problem nachzuvollziehen.
Durch das Wegfallen von <h6> schlagen scheinbar andere Styledefinitionen übergeordneter Elemente durch und verändern den gesamten Style meines <tfoot> - oder so ähnlich? ^^'
Nein, eigentlich nicht. Wenn du einen Chrome oder Firefox hast, dann kannst du mit [Rechtsklick]->[Element untersuchen] alle Styles (auch die standardmäßigen) sehen die wirken. Im aktuellen Firefox gibt es zudem noch eine 3D-Ansicht, die die Schachtelung des Markups zeigt. Das ist interessant und gibt oft Aufschluss über das Zusammenwirken von Elementen und Eigenschaften.
Meine Güte, das ist ja genial! Hätte ich das nur mal früher gewusst, dass es diese Funktion im Browser gibt, ich hätte so viel einfacher arbeiten können. DANKE für diesen Hinweis!! Endlich kann ich nachsehen wo sich mein Theme auf meine Gestaltung auswirkt UND es zeigt mir sogar an welche Stelle im Stylesheet die Wirkung hat - ist das toll! :)
Damit kann ich dann vielleicht sogar auf lange Sicht meine Klassen ins Stylssheet auslagern, weil ich endlich eine Möglichkeit habe zu verstehen an welche Stelle sie gehören. *freu*
Die richtigen Fachbegriffe im HTML-Umfeld sind hier sehr gut beschrieben.
Auch vielen Dank für diesen Link. Endlich hat sich in meinem Hirn der Knoten gelöst wo genau der Unterschied zwischen Tag und Element ist. :)
Auch danke an Matthias Aspel für die Erstellung der verlinkten Seite. Sehr übersichtlich und gut verständlich!
Vielleicht liest er es ja - er hatte auch schon mal auf meine Posts geantwortet. :)
-
-
Hallo,
<table class="ausgabe">
...
<tfoot>
<tr>
<td colspan="2">
<span>Informationsnachweise:</span>
<sup>[1]</sup> Laut Simon&Schuster Onlineshop: <a href="http://books.simonandschuster.com/Warcraft-Day-of-the-Dragon/Richard-A-Knaak/Warcraft/9780671041526" target="_blank">Link</a>, letzter Zugriff 20.11.2013.
<sup>[2]</sup> Laut Amazon.com Onlineshop: <a href="http://www.amazon.com/Day-Dragon-WarCraft-Book-No-1/dp/0671041525/ref=tmm_mmp_title_0?ie=UTF8&qid=1385030981&sr=8-1" target="_blank">Link</a>, letzter Zugriff 21.11.2013.
<sup>[3]</sup> Laut Impressum von Warcraft (1). Der Tag des Drachen, 9. Auflage Taschenbuch, September 2007.
</td>
</tr>
</tfoot>
</table>achte darauf, dass das Zeichen '&' im HTML-Kontext eine Sonderbedeutung hat: Es leitet eine Entity-Referenz ein. Ein Browser, der sich blind an die Regeln hält, müsste hier z.B. reklamieren, dass es keine Entities 'Schuster', 'qid' und 'rs' gibt. Dieses Zeichen muss daher in HTML immer in seiner Entity-Schreibweise & notiert werden. > Ich habe also in dem <foot>-Teil meiner Tabelle eine Überschrift in einem <span>-Element und den Textteil in gar keinem Element. Falsch. Der Text steht immer noch im td-Element. > oder wird auch im Standard-HTML unformatierter Text automatisch als solcher erkannt? Also ohne jede Kennzeichnung durch <p> oder <span> ? Selbstverständlich. Ob man das tun sollte, steht auf einem anderen Blatt. > Nun sieht das eigentlich schon genau so aus, wie ich es haben will, aber das alles, also die Art und Weise, wie ich zum Ziel gekommen bin, fühlt sich für mich extrem unsauber an: Zur Formatierung meiner Überschrift in <tfoot> ein formatiertes Element <span> zu benutzen ist doch nicht im Sinne des Erfinders, oder? Stimmt, wenn man sehr konsequent ist. > Und das mein Textteil einfach so "da rum steht", gefällt mir auch nicht. Oder übertreibe ich da und sollte einfach mit der gewünschten Optik, die ich ja habe, zufrieden sein? Du solltest dich beim Schreiben des Markup (HTML) eher an der logischen Struktur orientieren: Ergibt ein zusätzliches Containerelement für den Text hier einen strukturellen Sinn? IMO schon. Es fasst den Text und die darin enthaltenen Links zu einer Gruppe zusammen. > Ich würde jedenfalls viel lieber ein <h>-Element nutzen, um die Überschrift zu formatieren und dann <span> eben für den Textblock darunter nutzen. Noch besser: Ein h\*-Element für die Überschrift, ein p für den Text. > Wenn ich das aber versuche, dann geht alles schief... Inwiefern? - Wie misterunknown schon erwähnt, haben viele Elemente durch die Default-Formatierungen im Browser bestimmte margins, paddings, Schriftgrößen etc. Die muss man dann natürlich entweder hinnehmen wie sie sind (was quasi bedeutet, dass einem diese Werte egal sind), oder explizit auf geeignete Werte setzen. > ~~~html <tfoot> > <tr> > <td colspan="2"> > <h6>Informationsnachweise:</h6> > <span><sup>[1]</sup> Laut Simon&Schuster Onlineshop: <a href="http://books.simonandschuster.com/Warcraft-Day-of-the-Dragon/Richard-A-Knaak/Warcraft/9780671041526" target="_blank">Link</a>, letzter Zugriff 20.11.2013. > <sup>[2]</sup> Laut Amazon.com Onlineshop: <a href="http://www.amazon.com/Day-Dragon-WarCraft-Book-No-1/dp/0671041525/ref=tmm_mmp_title_0?ie=UTF8&qid=1385030981&sr=8-1" target="_blank">Link</a>, letzter Zugriff 21.11.2013. > <sup>[3]</sup> Laut Impressum von Warcraft (1). Der Tag des Drachen, 9. Auflage Taschenbuch, September 2007.</span> > </td> > </tr> > </tfoot>Warum ausgerechnet h6? Eigentlich sollte man diejenige h*-Stufe nehmen, die zur Gliederung passt. Wenn dieses Stück also beispielsweise in einem mit h3 überschriebenen Abschnitt steht, sollte es hier h4 sein. Bitte nicht h6 nehmen, nur weil "es dann so aussieht wie gewünscht".
Obwohl ich nach dem selben Prinzip vorgehe wie zuvor, nur eben andere Elemente formatiere, sind die Auswirkungen hingegen komplett anders. Es gelingt mir nicht mehr, so zu formatieren, wie ich es haben will!
Bitte genauer! Wenn es nur unerwartete Abstände sind: siehe oben.
Das ganz kuriose dabei: OBWOHL ich das <h6> Element wieder schließe wirkt es sich trotzdem auf das folgende <span> aus!
Das würde mich wundern. Zwar kann man mit CSS auch ein Element formatieren, das "Nachfolger" eines anderen ist. In deinem Beispiel würde der Selektor "h6+span { ... }" also ein span-Element formatieren, das unmittelbar auf ein h6 folgt. Ich kann mir aber nicht vorstellen, dass ein Browser sowas in seinem Default-Stylesheet stehen hat. Ich vermute eher, dass dein Code da noch einen anderen Fehler hat, der uns im Moment nicht klar ist.
Was ich vermute ist Folgendes:
Durch das Wegfallen von <h6> schlagen scheinbar andere Styledefinitionen übergeordneter Elemente durch und verändern den gesamten Style meines <tfoot> - oder so ähnlich? ^^'Nein, es muss was anderes sein.
Nochmal zur Erinnerung: Ich bewege mich mit meinem Code innerhalb einer Wordpress-Umgebung. Das spielt vielleicht auch mit hinein...?
Wenn du den Code betrachtest, den Wordpress letztendlich ausspuckt, dann spielt es keine Rolle mehr. Der Browser weiß nicht, wie dieser Code generiert wurde.
Und wenn ich "Vokabeln" nicht richtig benutze, wäre ich dankbar, wenn man mich darauf hinweist. Ich bin mir beim Formulieren nicht immer ganz sicher, wenn ich von "Elementen" oder vom "Formatieren" oder "Definieren" spreche. Sollte da etwas auffallen, nur raus mit der Kritik. Ich möchte ja richtig über das reden können, was ich meine. Dann klappts vielleicht auch irgendwann mit der Archiv-Suche besser. ^^'
Nönö, "passt scho". :-)
So long,
Martin--
Wie kann es sein, dass ich von 100 Gramm Schokolade zwei Kilo zunehme?
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
@@Der Martin:
nuqneH
achte darauf, dass das Zeichen '&' im HTML-Kontext eine Sonderbedeutung hat: Es leitet eine Entity-Referenz ein. Ein Browser, der sich blind an die Regeln hält, müsste hier z.B. reklamieren, dass es keine Entities 'Schuster', 'qid' und 'rs' gibt.
Im Fall von 'qid' und 'rs' muss der Browser diese Zeichen aber so weiterverwenden.
“If the character reference is being consumed as part of an attribute, and the last character matched is not a ";" (U+003B) character, and the next character is either a "=" (U+003D) character or an alphanumeric ASCII character, then, for historical reasons, all the characters that were matched after the U+0026 AMPERSAND character (&) must be unconsumed, and nothing is returned. However, if this next character is in fact a "=" (U+003D) character, then this is a parse error, because some legacy user agents will misinterpret the markup in those cases.” [HTML5]
Dieses Zeichen muss daher in HTML immer in seiner Entity-Schreibweise & notiert werden.
1. Muss es nicht immer. Im Fall von "Simon & Schuster" nicht (wenn man es denn richtig schreibt: mit Leerzeichen vor und hinter &)
“↪ U+0020 SPACE […] Not a character reference. No characters are consumed, and nothing is returned. (This is not an error, either.)” [HTML5]
Um den Überlegungen, ob es muss oder ob nicht, aus dem Weg zu gehen: Sollte es immer.
2. Nicht immer als Zeichen-Entity-Referenz („named character reference“ in HTML5-Sprech). Es geht auch als numerische Zeichenreferenz (hexadezimal
&(auch Schreibweisen mit führenden Nullen sind möglich) bzw. dezimal&(nicht empfohlen; führende Nullen möglich)).Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Verstehe ich das Ergebnis dieser Diskussion richtig, wenn ich sage:
Ich muss das & nicht zwingend als '&' schreiben aber zur Vermeidung eventueller Probleme SOLLTE ich?
-
@@Patrick86:
nuqneH
Verstehe ich das Ergebnis dieser Diskussion richtig, wenn ich sage:
Ich muss das & nicht zwingend als '&' schreiben aber zur Vermeidung eventueller Probleme SOLLTE ich?
Nicht ganz. In etlichen Fällen ist es zwingend, & zu escapen, in etlichen anderen Fällen ist es das nicht. Zu unterscheiden, ob escapet werden muss oder nicht, kann sehr kompliziert sein.* Und lohnt der Mühe nicht. Einfacher ist es, & immer zu escapen.
Ob man & als & oder numerisch escapet, ist technisch gesehen egal. Für den Menschen sind aber benannte Entities leichter zu lesen als Zahlencodes.
Qapla'
* Die Welt könnte so schön einfach sein, wennn man den XHTML-2-Weg weiter gegengen wäre anstatt auf den HTML5-Pfaden mit unsinniger Abwärtskompatibilität umherzuirren.
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
* Die Welt könnte so schön einfach sein, wennn man den XHTML-2-Weg weiter gegengen wäre anstatt auf den HTML5-Pfaden mit unsinniger Abwärtskompatibilität umherzuirren.
XHTML5 existiert. Wer XML-Syntax haben will, kann sie schreiben.
Die Verwirrung um & ist im Übrigen ein Erbe von SGML. Zwar nutzen die Browser nie wirklich SGML-konforme Parser, aber aufgrund der komplizierten SGML-Regeln wurden sie dazu gebracht, in diesem Punkt sehr flexibel zu sein.
Mathias
-
@@molily:
nuqneH
XHTML5 existiert. Wer XML-Syntax haben will, kann sie schreiben.
Du weißt, dass XML-Syntax noch kein XHTML5 macht.
Das Problem ist, dass neben der XML-Syntax für HTML5 noch eine weitere, deutlich kompliziertere Syntax exisiert.
Die Verwirrung um & ist im Übrigen ein Erbe von SGML.
Die Verwirrung um & ist ein Erbe des Schwachsinns, ein Sonderzeichen von HTML als Trennzeichen in Queries zu verwenden, anstatt ';' wie von der HTML-4.01-Spec empfohlen.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
-
-
-
Ich habe also in dem <foot>-Teil meiner Tabelle eine Überschrift in einem <span>-Element und den Textteil in gar keinem Element.
Falsch. Der Text steht immer noch im td-Element.
Natürlich! *gegen die Stirn hau* Das hatte ich jetzt im Eifer des Posting-Gefechtes ganz übersehen.
Nun sieht das eigentlich schon genau so aus, wie ich es haben will, aber das alles, also die Art und Weise, wie ich zum Ziel gekommen bin, fühlt sich für mich extrem unsauber an: Zur Formatierung meiner Überschrift in <tfoot> ein formatiertes Element <span> zu benutzen ist doch nicht im Sinne des Erfinders, oder?
Stimmt, wenn man sehr konsequent ist.
Und das mein Textteil einfach so "da rum steht", gefällt mir auch nicht. Oder übertreibe ich da und sollte einfach mit der gewünschten Optik, die ich ja habe, zufrieden sein?
Du solltest dich beim Schreiben des Markup (HTML) eher an der logischen Struktur orientieren: Ergibt ein zusätzliches Containerelement für den Text hier einen strukturellen Sinn? IMO schon. Es fasst den Text und die darin enthaltenen Links zu einer Gruppe zusammen.
Meine Überlegungen bei der Sache waren hauptsächlich ordnungs- oder übersichtlichkeitsbezogen. Da in meinem <td>Element das eine Element, die Überschrift, ein extra Element war (also im einen Beispiel <span> und im anderen dann <h6>), wollte ich den Text- bzw. Listenteil nicht "lose rumstehen" lassen - das erschien mir... unordentlich.^^ Deshalb wollte ich diesen zweiten Teil auch als eigenständiges Unterelement von <td> haben.
Ich denke das ist eigentlich das, was du meinst mit der logischen Struktur, die den Textteil zu einer Gruppe zusammenfasst, oder? Ich konnte es nur nicht so schön formulieren :)
Ich würde jedenfalls viel lieber ein <h>-Element nutzen, um die Überschrift zu formatieren und dann <span> eben für den Textblock darunter nutzen.
Noch besser: Ein h*-Element für die Überschrift, ein p für den Text.
Hm, ein <p> hatte ich deshalb nicht genommen, weil das ja schon wieder Formatierung mit sich bringt? Also einen eigenen Absatz? Und vielleicht noch Anderes... Und wie oben gesagt, waren Tag und Endtag bei meinem Text- bzw. Listen-Element hauptsächlich aus Überlegungen zur logischen Struktur gedacht, während die Formatierung automatisch über das <td>Element passieren sollte.
Und der Sinn an einem <span>Element ist doch grade, dass es standardmäßig keine Formatierung mitbringt, sondern nur Inline-Elemente zusammenfasst? Zumindest hab ich das so verstanden^^'
Allerdings werde ich nach Marcos Anregungen hier wohl in der finalen Lösung eine formatierte Liste benutzen.
Wenn ich das aber versuche, dann geht alles schief...
Inwiefern? - Wie misterunknown schon erwähnt, haben viele Elemente durch die Default-Formatierungen im Browser bestimmte margins, paddings, Schriftgrößen etc. Die muss man dann natürlich entweder hinnehmen wie sie sind (was quasi bedeutet, dass einem diese Werte egal sind), oder explizit auf geeignete Werte setzen.
Das werde ich jetzt dann mal versuchen und meine Ergebnisse/Probleme dann nochmal mitteilen.
Warum ausgerechnet h6? Eigentlich sollte man diejenige h*-Stufe nehmen, die zur Gliederung passt. Wenn dieses Stück also beispielsweise in einem mit h3 überschriebenen Abschnitt steht, sollte es hier h4 sein. Bitte nicht h6 nehmen, nur weil "es dann so aussieht wie gewünscht".
"weil es dann so aussieht wie gewünscht" war nicht meine Überlegung, aus der heraus ich mich für <h6> entschieden hatte. Ich habe <h6> genommen, weil ich eine Überschrift nehmen wollte, und mir sicher war, dass es unterhalb dieser Überschriftenebene keine andere mehr geben wird. Daher die Entscheidung für den niedrigsten <h>-Tag. Die Formatierung wollte ich ja ohnehin selbst übernehmen.
Gut, wenn ich jetzt so drüber nachdenke hätte ich auch sagen können, dass es im Footer auch allgemein keine Überschrift mehr geben wird und demnach <h1> wählen können. Aber der Footer ist ja seinerseits auch wieder Teil der Tabelle, die ja wieder eine Überschrift hat und so wäre die Überschrift des Footers wieder der Überschrift der Tabelle untergeordnet, wodurch <h1> im Footer wieder blöd wäre.
Im Endeffekt ist es wohl eine Sache der Sichtweise welches <h*> man nimmt. Für das Beispiel scheint es mir daher egal zu sein. Aber ich werde für die finale Lösung nochmal drüber nachdenken.Obwohl ich nach dem selben Prinzip vorgehe wie zuvor, nur eben andere Elemente formatiere, sind die Auswirkungen hingegen komplett anders. Es gelingt mir nicht mehr, so zu formatieren, wie ich es haben will!
Bitte genauer! Wenn es nur unerwartete Abstände sind: siehe oben.
Das ganz kuriose dabei: OBWOHL ich das <h6> Element wieder schließe wirkt es sich trotzdem auf das folgende <span> aus!
Das würde mich wundern. Zwar kann man mit CSS auch ein Element formatieren, das "Nachfolger" eines anderen ist. In deinem Beispiel würde der Selektor "h6+span { ... }" also ein span-Element formatieren, das unmittelbar auf ein h6 folgt. Ich kann mir aber nicht vorstellen, dass ein Browser sowas in seinem Default-Stylesheet stehen hat. Ich vermute eher, dass dein Code da noch einen anderen Fehler hat, der uns im Moment nicht klar ist.
Weitere Aussagen hierzu nach einigen weiteren Versuchen meinerseits, bei denen ich einige Tools und Erkenntnisse anzuwenden versuche, die ihr mir bisher vermittelt habt.
Aber bis hierher: Danke! :)
-
Hallo Patrick,
Verstehe ich das Ergebnis dieser Diskussion richtig, wenn ich sage:
Ich muss das & nicht zwingend als '&' schreiben aber zur Vermeidung eventueller Probleme SOLLTE ich?nein, das ist nicht ganz die Quintessenz.
Grundsätzlich SOLLTEST du das tun, soweit richtig - wobei Gunnar zu Recht erwähnt, dass neben & auch & und & mögliche Alternativ-Schreibweisen sind.
Es gibt allerdings Fälle, in denen die Spezifikation von HTML sagt, dass eine Interpretation als Entity-Referenz NICHT sein kann - beispielsweise dann, wenn das Zeichen nach dem '&' ein Blank ist. Dann ist es erlaubt, das '&' unmaskiert zu schreiben. Empfehlenswert ist trotzdem, konsequent zu maskieren.
Meine Überlegungen bei der Sache waren hauptsächlich ordnungs- oder übersichtlichkeitsbezogen. Da in meinem <td>Element das eine Element, die Überschrift, ein extra Element war (also im einen Beispiel <span> und im anderen dann <h6>), wollte ich den Text- bzw. Listenteil nicht "lose rumstehen" lassen - das erschien mir... unordentlich.^^ Deshalb wollte ich diesen zweiten Teil auch als eigenständiges Unterelement von <td> haben.
Ich denke das ist eigentlich das, was du meinst mit der logischen Struktur, die den Textteil zu einer Gruppe zusammenfasst, oder? Ich konnte es nur nicht so schön formulieren :)Ja, das meinte ich (auf diesen konkreten Fall bezogen).
Noch besser: Ein h*-Element für die Überschrift, ein p für den Text.
Hm, ein <p> hatte ich deshalb nicht genommen, weil das ja schon wieder Formatierung mit sich bringt? Also einen eigenen Absatz?Natürlich, der nachfolgende Text *ist* ja auch ein Absatz für sich. Wie er dann aussehen soll (Abstände, Schriftgrößen, trallala), kannst du ja dann nach Belieben festlegen. Nochmal: Lass dich in deiner Entscheidung, wie dein Markup aussehen sollte, nicht von der Default-Formatierung bestimmter Elemente leiten. Die ist von den Browserherstellern so vordefiniert, dass sie in vielen Fällen "vernünftig" aussieht, aber natürlich nicht immer.
Und der Sinn an einem <span>Element ist doch grade, dass es standardmäßig keine Formatierung mitbringt, sondern nur Inline-Elemente zusammenfasst? Zumindest hab ich das so verstanden^^'
Exakt. Es dient ausschließlich zur Gruppierung von Inline-Inhalten. Genau wie sein Vetter, das div-Element, das auch nur zur Gruppierung anderer Elemente dient, aber im Gegensatz zum span einen eigenen Block bildet.
Bitte nicht h6 nehmen, nur weil "es dann so aussieht wie gewünscht".
"weil es dann so aussieht wie gewünscht" war nicht meine Überlegung, aus der heraus ich mich für <h6> entschieden hatte. Ich habe <h6> genommen, weil ich eine Überschrift nehmen wollte, und mir sicher war, dass es unterhalb dieser Überschriftenebene keine andere mehr geben wird. Daher die Entscheidung für den niedrigsten <h>-Tag. Die Formatierung wollte ich ja ohnehin selbst übernehmen.Okay. Aber die h*-Elemente stellen ja in gewisser Weise auch eine Gliederung dar, und die Struktur h1-h2-h6 wirkt ein wenig ... ähm, eigenartig.
Schönes Wochenende,
Martin--
Finanztipp:
Leihen Sie sich Geld von einem Pessimisten.
Er rechnet sowieso nicht damit, dass er es zurückbekommt.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-
-
Änderungen:
- Ich verwende nun sinnigerweise <li> zur Darstellung der Fußnoten.
- Ich verwende <h1> zur Formatierung der Überschrift. (Weil es die erste Überschriftenordnung innerhalb der Tabelle ist)
- Ich habe & benutzt um "&" darzustellen.
- Ich habe mittels "Element untersuchen" vom Browser geschaut woher meine Formate eigentlich kommen und dann da, wo es notwendig war, entsprechende Änderungen vorgenommen. (Juhuu, ich beginne mein Stylesheet zu verstehen! *g*)
Ergebnis und Code:
Link: http://wcraft.lorebase.org/neuer-tabellentest/
<style type="text/css"> table.ausgabe { border:0px; table-layout:auto; text-align:left; vertical-align:baseline } table.ausgabe tr { border:0px } table.ausgabe th { border:0px } table.ausgabe td { border:0px } table.ausgabe sup {font-size:0,7rem; color:navy } table.ausgabe tbody { border:thin solid gray } table.ausgabe tfoot { border:thin solid gray } table.ausgabe tfoot h1 { padding:0px; border:0px none; margin:0px; font-weight:bold; font-size:0.8rem } table.ausgabe tfoot ol { padding:0px; border:0px; margin:0px } table.ausgabe tfoot li { padding:0px; border:0px none; margin:0px; display: list-item; list-style: upper-alpha inside none; font-size:0.75rem; line-height:130%; } </style>... <tfoot> <tr> <td colspan="2"> <h1>Informationsnachweise:</h1> <ol> <li>Laut Simon & Schuster Onlineshop: <a href="http://books.simonandschuster.com/Warcraft-Day-of-the-Dragon/Richard-A-Knaak/Warcraft/9780671041526" target="_blank">Link</a>, letzter Zugriff 20.11.2013.</li> <li>Laut Amazon.com Onlineshop: <a href="http://www.amazon.com/Day-Dragon-WarCraft-Book-No-1/dp/0671041525/ref=tmm_mmp_title_0?ie=UTF8&qid=1385030981&sr=8-1" target="_blank">Link</a>, letzter Zugriff 21.11.2013.</li> <li>Laut Impressum von Warcraft (1). Der Tag des Drachen, 9. Auflage Taschenbuch, September 2007.</li> </ol> </td> </tr> </tfoot> ...Noch offene Fragen:
1. Gibt es eine Möglichkeit die Aufzählungszeichen meiner Liste einzufärben? Ich habe zwar verschiedene Formate (Zahlen, Buchstaben, usw.) gefunden und sogar die Möglichkeit ein eigenes Bild einzubinden, aber eine schlichte Farbzuweisung konnte ich nicht finden?
2. Warum kann ich nicht statt
table.ausgabe tr { border:0px } table.ausgabe th { border:0px } table.ausgabe td { border:0px }einfach
table.ausgabe tr,th,td { border:0px }schreiben?Wenn ich das tue passiert das:
http://wcraft.lorebase.org/neuer-tabellentest-mit-liste-kaputt/
-
Om nah hoo pez nyeetz, Patrick86!
http://wcraft.lorebase.org/neuer-tabellentest-mit-liste-kaputt/
Der Button „Link“ oberhalb des Antworttextfeldes kann dir beim Verlinken helfen. Wenn du kein JavaScript eingeschaltet hast, kannst du die Links auch per Hand erzeugen. ~~~ [lіnk:http://example.com@title=Link auf example.com]
Was ist an der Liste kaputt? btw: vielen Dank für das Lob bzgl. der Element-Tag-Attribut-Seite Matthias -- Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Hebe und Hebelgesetz](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=H#hebe). -
Om nah hoo pez nyeetz, Patrick86!
http://wcraft.lorebase.org/neuer-tabellentest-mit-liste-kaputt/
Der Button „Link“ oberhalb des Antworttextfeldes kann dir beim Verlinken helfen. Wenn du kein JavaScript eingeschaltet hast, kannst du die Links auch per Hand erzeugen. ~~~html
[lіnk:http://example.com@title=Link auf example.com]
Werde ich zukünftig benutzen, hab ich bisher schlicht übersehen. ^^' Danke für den Hinweis! > Was ist an der Liste kaputt? An der Liste nichts, aber an den Formatierungen der <tbody>Elemente, weil ich da etwas falsch geschrieben hatte. Das Problem ist aber inzwischen ebenfalls gelöst :)
-
-
Hallo,
- Gibt es eine Möglichkeit die Aufzählungszeichen meiner Liste einzufärben?
nein, nicht direkt - nur über einen Workaround mit zusätzlichen Elementen. Aber wenn du die sowieso hast ...
<li> <h3>Bären</h3> <p>Man unterscheidet gemeinhin zwischen Grizzly-, Teddy- und Brombären.</p> </li>Hier hätte man die Möglichkeit, dem h3- und dem p-Element eine andere Textfarbe zuzuweisen als dem li. Die Textfarbe des li-Elements bestimmt dann auch die Farbe des Bullets oder der Numerierung, während der eigentliche Text seine eigene Farbe hat.
- Warum kann ich nicht statt
table.ausgabe tr { border:0px }
table.ausgabe th { border:0px }
table.ausgabe td { border:0px }> > einfach `table.ausgabe tr,th,td { border:0px }`{:.language-css} schreiben? Kannst du, aber das ist nicht dasselbe. Der Selektor "table.ausgabe tr,th,td" ist aber dasselbe wie "td, th, table.ausgabe tr". Verstehst du, worauf ich hinaus will? - Du kannst mit dem Komma getrennt mehrere Selektoren aufzählen, aber jeder für sich muss vollständig sein. Übrigens: Beim Wert 0 darf man, wie in der Physik und der Technik, die Einheit auch weglassen. Ciao, Martin -- Du kannst dem Leben nicht mehr Tage geben. Aber dem Tag mehr Leben. Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hallo,
- Gibt es eine Möglichkeit die Aufzählungszeichen meiner Liste einzufärben?
nein, nicht direkt - nur über einen Workaround mit zusätzlichen Elementen. Aber wenn du die sowieso hast ...
<li>
<h3>Bären</h3>
<p>Man unterscheidet gemeinhin zwischen Grizzly-, Teddy- und Brombären.</p>
</li>> > Hier hätte man die Möglichkeit, dem h3- und dem p-Element eine andere Textfarbe zuzuweisen als dem li. Die Textfarbe des li-Elements bestimmt dann auch die Farbe des Bullets oder der Numerierung, während der eigentliche Text seine eigene Farbe hat. So hab ich es dann gemacht. :) Danke für den Hinweis! [Link zum Ergebnis](http://wcraft.lorebase.org/neuer-tabellentest/) > > 2. Warum kann ich nicht statt > > > > ~~~css table.ausgabe tr { border:0px } > > table.ausgabe th { border:0px } > > table.ausgabe td { border:0px }einfach
table.ausgabe tr,th,td { border:0px }schreiben?Kannst du, aber das ist nicht dasselbe. Der Selektor "table.ausgabe tr,th,td" ist aber dasselbe wie "td, th, table.ausgabe tr". Verstehst du, worauf ich hinaus will? - Du kannst mit dem Komma getrennt mehrere Selektoren aufzählen, aber jeder für sich muss vollständig sein.
Das ist diese Methode, die ich in der Charta gelesen habe, hm? Dem Fragenden nicht direkt die Antwort geben, sondern ihn zu eigenem Verständnis führen? Gefällt mir.
Die Anwendung meines neuen Wissens:
table.ausgabe tr, table.ausgabe th, table.ausgabe td { border:0 } table.ausgabe tbody, table.ausgabe tfoot { border:thin solid gray }Allerdings muss ich sagen, dass ich das dann doch weniger übersichtlich finde. welchem Prinzip würdet ihr da den Vorzug geben: der Übersichtlichkeit oder der Effizienz?
Ich tendiere ja grade zur Übersicht, damit ich später wieder leichter erkenne, was ich da programmiert habe. (btw: Spricht man beim html-schreiben vom "Programmieren"?)
-
n'Abend!
<li>
<h3>Bären</h3>
<p>Man unterscheidet gemeinhin zwischen Grizzly-, Teddy- und Brombären.</p>
</li>> > So hab ich es dann gemacht. :) Danke für den Hinweis! Gern geschehen. Helfen macht Spaß, wenn man merkt, dass der Hilfesuchende sich auch selbst bemüht, die Hinweise zu verstehen. Sogar dann, wenn er schließlich meint, "Verstehe, aber ich möchte es doch anders machen, weil ..." > > Der Selektor "table.ausgabe tr,th,td" ist aber dasselbe wie "td, th, table.ausgabe tr". Verstehst du, worauf ich hinaus will? - Du kannst mit dem Komma getrennt mehrere Selektoren aufzählen, aber jeder für sich muss vollständig sein. > Das ist diese Methode, die ich in der Charta gelesen habe, hm? Dem Fragenden nicht direkt die Antwort geben, sondern ihn zu eigenem Verständnis führen? Gefällt mir. ;-) > ~~~html table.ausgabe tr, table.ausgabe th, table.ausgabe td { border:0 } > table.ausgabe tbody, table.ausgabe tfoot { border:thin solid gray }Allerdings muss ich sagen, dass ich das dann doch weniger übersichtlich finde.
Ja, kann ich verstehen. Ich mache genau deshalb nach jedem Komma einen Zeilenumbruch. Wobei ich erwähnen sollte, dass ich das Komma als Trennzeichen in CSS selten verwende.
Ich tendiere ja grade zur Übersicht, damit ich später wieder leichter erkenne, was ich da programmiert habe.
Ich auch.
(btw: Spricht man beim html-schreiben vom "Programmieren"?)
Nein, weil weder HTML noch CSS Programmiersprachen sind: Sie können keine Abläufe oder Schrittfolgen abbilden.
So long,
Martin--
Zwei Stammtischbrüder:
Hier steht, dass laut Statistik über 60 Prozent aller Ehefrauen fremdgehen.
Was soll ich mit dieser Information? Ich brauche Namen, Fotos, Telefonnummern ... !
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(