nicht angemeldet
Links mit voneinander trennen... gehts auch eleganter?
Hallo,
Ich hab ein paar Links horizontal angeordnet. Ich kopier hier einfach mal den Code:
<a href="index.php">Home</a> | <a href="asd">Listen</a> | <a href="wer">Eintrag1</a>
Das sieht dann so aus:
<Link1> | <Link2> | <Link3>
Bekomme ich den Abstand zwischen den Links auch eleganter hin? Mit den vielen ist es ja doch recht Code-aufquellend.
Grüsse
Teebeutel (Max)
-
Hi,
Bekomme ich den Abstand zwischen den Links auch eleganter hin? Mit den vielen ist es ja doch recht Code-aufquellend.
eleganter: vielleicht. Weniger aufwändig: kaum.
Was hälst Du hiervon:
a:after { content:" | "; }
a.last:after { content:none; }<a href="...">...</a><a href="...">...</a><a href="..." class="last">...</a>
(ungetestet)
Cheatah
-
Hallo,
Was hälst Du hiervon:
a:after { content:" | "; }
a.last:after { content:none; }<a href="...">...</a><a href="...">...</a><a href="..." class="last">...</a>
Ginge das nicht besser mit einem 'margin-right', damit das wenigstens auf allen halbwegs aktuellen Browsern und nicht nur mit Mozilla/NS7 funktioniert?
a { margin-right: 20px; margin-left:20px; }
a.first { margin-right: 20px; }
a.last { margin-left: 20px; }<a href="..." class="first">...</a>|<a href="...">...</a>|<a href="..." class="last">...</a>
Sicher, die Methode von Cheatah ist eigentlich schöner, nur zur Zeit m.E. noch nicht so ganz praktikabel.
Gruß, Jan
-
Hallo,
Sicher, die Methode von Cheatah ist eigentlich schöner,
auf jedenfall für mich css-dau spannender ,-) Aber "schöner"? Im Prinzip nimmt man durch die erstgenannte Methode wieder "Textinhalt" zum Ausrichten von Seitenbereichen. Das zum "befüllen" des Zwischenraums mit Leerzeichen (also "textzeichen im weiteren Sinne) CSS genutzt wird, machts ja nicht direkt gradliniger. Und fürs ausrichten von Elemnten wäre dann margin doch "schöner" (im theoretischen Sinne natürlich....)
Chräcker
-
Hallo Chräcker,
auf jedenfall für mich css-dau spannender ,-) Aber "schöner"? Im Prinzip nimmt man durch die erstgenannte Methode wieder "Textinhalt" zum Ausrichten von Seitenbereichen. Das zum "befüllen" des Zwischenraums mit Leerzeichen (also "textzeichen im weiteren Sinne) CSS genutzt wird, machts ja nicht direkt gradliniger. Und fürs ausrichten von Elemnten wäre dann margin doch "schöner" (im theoretischen Sinne natürlich....)
Mit "schöner" meinte ich, daß bei der Methode mit dem ":after" die ganzen links ja immer "schön" automatisch formatiert werden. Man muß das Trennzeichen (in dem Fall das '|', aber vielleicht will man das ja auch mal austauschen) dann nicht immer von Hand zwischen die Links packen.
Am "schönsten" wäre es vielleicht beides zu kombinieren.a:after { content:"|"; margin-right: 20px; margin-left: 20px; }
a.last:after { content:none; }Aber das rafft, wie gesagt, wohl nur Mozilla/NS7.
Gruß, Jan
-
Hi Jan,
a:after { content:"|"; margin-right: 20px; margin-left: 20px; }
a.last:after { content:none; }das klappt, aber da kann man noch ein paar Bytes sparen:
a:after { content:"|"; margin:0 20px; }
a.last:after { content:none; }Aber das rafft, wie gesagt, wohl nur Mozilla/NS7.
Nicht nur. Hab' ich schon erwähnt, dass ich Opera so gern' hab'...? ;)
LG Orlando
-
Hi,
Hab' ich schon erwähnt, dass ich Opera so gern' hab'...? ;)
Ich erinnere mich dunkel an die eine oder andere Gelegenheit...
aber zu Thema: wie wäre die 'klassische' Variante mit transparentem gif? die hat den unschlagbaren Vorteil:
1. daß sie funktioniert
2. daß man eine 'zentrale Formatierung' vornehmen kann, indem man die Maße des Gif verändert.Gruß, Andreas
-
Hi Andreas,
aber zu Thema: wie wäre die 'klassische' Variante mit transparentem gif? die hat den unschlagbaren Vorteil:
- daß sie funktioniert
das hängt davon ab, was du als "funktionieren" bezeichnest. Das kann man IMHO ziemlich genau auf das "Funktionieren" im Browser eingrenzen, aber darüber hinaus bedeuten Blind-GIFs einen gehörigen Verwaltungsaufwand, mit CSS sind sind sie dagegen nicht notwendig.
- daß man eine 'zentrale Formatierung' vornehmen kann, indem man die Maße des Gif verändert.
Hm, du hast (Annahme) 100 Seiten mit je 5 blinden GIFs zwischen den Links und willst, warum auch immer, den Abstand zwischen den Links ändern.
Variante 1 - Blind-GIF:
Du ärgerst dich grün und blau und kannst froh sein, wenn dein Editor oder ein zusätzliches Tool das in einem Rutsch für dich erledigt. Hast du so ein Tool? Allerdings musst du anschließend noch 100 Dateien neu hochladen. Außerdem erzeugst du mit jeder Anfrage HTTP-Overhead, denn in Wahrheit gibt es keine 50 Byte kleinen Dateien... <evangelist>GIF? Pfui! Nimm doch PNG...</evangelist>
Variante 2 - CSS:
Du änderst während des Zusammenpackens noch schnell einen Wert im zentralen Stylesheet und genießt anschließend den Abend in den Armen deiner Traumfrau... *Das* nenne ich zentrale Formatierung mit "Style". ;)
LG Orlando
PS: Ich bin der Meinung, man sollte von der Vorstellung Abschied nehmen, Seiten müssten in jedem Browser auf's Pixel genau gleich aussehen - das funktioniert ohnehin nicht (für solche Zwecke verwende man PDF o.ä.). Ein abgespecktes Stylesheet für Netscape 4 reicht durchaus und ein reines CSS-Layout mit ein paar diesbezüglichen Kniffen gewährleistet wenigstens die Zugänglichkeit und "funktioniert". Deshalb habe ich absolut kein Verständnis für irgendwelche Prozentzahlen, sie deuten auf mangelndes Wissen hin.
-
-
-
-
-
-
Hallo, Cheatah,
Bekomme ich den Abstand zwischen den Links auch eleganter hin? Mit den vielen ist es ja doch recht Code-aufquellend.
eleganter: vielleicht. Weniger aufwändig: kaum.
Nein. Jein, s/kaum/gar nicht/.
Was hälst Du hiervon:
a:after { content:" | "; }
a.last:after { content:none; }<a href="...">...</a><a href="...">...</a><a href="..." class="last">...</a>
<linksetzer>http://www.w3.org/Consortium/Offices/Germany/Trans/WAI/webinhalt.html#tech-divide-links</linksetzer>
Jetzt bitte noch einmal darüber nachdenken, ob zwei aneinanderstoßende Links sinnvoll sind. Trennzeichen (oder mindestens Leerzeichen) zwischen Links haben nämlich nix mit der Optik zu tun, sie sind notwendig und können nicht an CSS-Regeln delegiert werden, sondern müssen im Markup vorhanden sein.
Jetzt reite bitte nicht auf dem "until user agents..." herum. Unabhängig davon ist es sinnvoll, momentan friemelt kein gängiger Browser zusammenklebende Links auseinander, und höchstens assistative Techniken werden das IMHO in Zukunft tun.
Selbst wenn die Mehrheit der Browser die CSS-Variante unterstützen würde (was sie hoffentlich zukünftig tun wird), ist man jedoch auf ewig dazu verdammt ;), nicht zu Links gehörige Zeichen zwischen Links zu schreiben. Eventuell könnte man mit ul arbeiten und li {display:inline; margin:0; content:" | "; ...}, geht das? Nur ein Gedanke.
Mathias
-
Hi,
Jetzt bitte noch einmal darüber nachdenken, ob zwei aneinanderstoßende Links sinnvoll sind.
bei überschaubaren Linkketten sehe ich da in der Praxis eigentlich kaum Probleme - insbesondere wenn man :after o.ä. einsetzt; denn wenn ich Mozilla als Referenz ansehe, wird dann zwischen Link und Trennung bei Bedarf umgebrochen ;-)
Ich weiß, Du meinst hier das direkte Aneinandertreffen von </a><a href>, welches bei mangelnder CSS-Tauglichkeit tatsächlich zu einer sehr ungünstigen Darstellung führt.
Trennzeichen (oder mindestens Leerzeichen) zwischen Links haben nämlich nix mit der Optik zu tun, sie sind notwendig und können nicht an CSS-Regeln delegiert werden, sondern müssen im Markup vorhanden sein.
Ja, dem kann ich nicht widersprechen.
Jetzt reite bitte nicht auf dem "until user agents..." herum.
Du kennst mich - das würde ich höchstens in der Weise machen, die auch beim W3C zu finden ist :-)
Selbst wenn die Mehrheit der Browser die CSS-Variante unterstützen würde (was sie hoffentlich zukünftig tun wird), ist man jedoch auf ewig dazu verdammt ;), nicht zu Links gehörige Zeichen zwischen Links zu schreiben.
Das möchte ich nicht so absolut sehen. CSS-Browsern gehört die Zukunft; für technisch ältere Systeme gibt es Light-Versionen von Mozilla; auch Text-, Braille- und andere Browser sowie andere in irgendeiner Form darstellende Clients (Suchmaschinen e.g.) können und werden sich an CSS orientieren. Ich denke, dass es sich nur noch um wenige Jahre handelt, nach denen man nicht-CSS-Clients ähnlich handhabt, wie heute Mosaic oder IE 3.
Eventuell könnte man mit ul arbeiten und li {display:inline; margin:0; content:" | "; ...}, geht das? Nur ein Gedanke.
Hm, ein solcher Ansatz ist sicher auch eine Idee - nur wird in den Browsern, die mit einem "einfachen" :after{content} Probleme haben, die Darstellung hiervon mit Sicherheit nicht im mindesten mehr der Intention des Seitenentwicklers entsprechen.
Cheatah
-
Hallo, Cheatah,
Jetzt bitte noch einmal darüber nachdenken, ob zwei aneinanderstoßende Links sinnvoll sind.
bei überschaubaren Linkketten sehe ich da in der Praxis eigentlich kaum Probleme - insbesondere wenn man :after o.ä. einsetzt; denn wenn ich Mozilla als Referenz ansehe, wird dann zwischen Link und Trennung bei Bedarf umgebrochen ;-)
Ich finde, dass das Problem ein viel grundsätzlicheres ist.
Ich weiß, Du meinst hier das direkte Aneinandertreffen von </a><a href>, welches bei mangelnder CSS-Tauglichkeit tatsächlich zu einer sehr ungünstigen Darstellung führt.
Ich finde auch </a> <a> nicht annehmbar, da ich persönlich solche Links nur schwer voneinander unterscheiden kann (ja, ich könnte mein user stylesheet anweisen, aufeinanderfolgende Links mit Abstand zu rendern, aber mir geht es nicht [nur] um mein persönliches Wohlbefinden ;)).
Die WCAG und den Bezug zu assistiven Techniken für $irgendwie eingeschränkte Benutzer habe ich bereits zitiert.Selbst wenn die Mehrheit der Browser die CSS-Variante unterstützen würde (was sie hoffentlich zukünftig tun wird), ist man jedoch auf ewig dazu verdammt ;), nicht zu Links gehörige Zeichen zwischen Links zu schreiben.
Das möchte ich nicht so absolut sehen. CSS-Browsern gehört die Zukunft; für technisch ältere Systeme gibt es Light-Versionen von Mozilla; auch Text-, Braille- und andere Browser sowie andere in irgendeiner Form darstellende Clients (Suchmaschinen e.g.) können und werden sich an CSS orientieren.
Das finde ich falsch, allein HTML ist für Hypertext zuständig. Ein UA oder gar eine Suchmaschine (?!) hat sich gar nicht bzw. nur nachrangig für die Präsentation zu interessieren.
Ich denke, dass es sich nur noch um wenige Jahre handelt, nach denen man nicht-CSS-Clients ähnlich handhabt, wie heute Mosaic oder IE 3.
Ich doch etwas überrascht von deiner Meinung... ich betrachte den Hypertext als ein von jeder Darstellung/Ausgabe unabhängiges Format, deshalb sollte eine "Kette" (dein Terminus) von Hyperlinks nicht als <a>...</a>(\s*)<a>...</a>... existieren, sondern höchstens als Liste. Das a-Element ist nämlich etwas anderes als das link-Element, ein Hyperlink hat immer einen Kontext, welcher auch offensichtlich werden sollte. Ich denke mehr in Kategorien des Textes, der in Hypertext überführt wird - da wäre eine "Linkkette" völlig unmöglich; da es hier um Hypertextnavigationen geht, müssen selbst diese eine (Hypertext-)Struktur haben und als Navigation ausgezeichnet sein, denn "Linkkette" sagt nichts über die Funktion/Semantik oder Struktur aus.
Ich weiß nicht, wieso du leugnest, dass das Autorenstylesheet optional ist, ich denke, dass das eine der wichtigsten Grundlagen von CSS zum einen und HTML & CSS als Realisation der Trennung von Hypertext und Hypertextausgabe zum anderen ist. Hypertext soll IMHO immer unabhängig vom Autorenstylesheet renderbar und vollständig benutzbar sein, genauso wie es unabhängig von ECMAScript usw. sein sollte. Du verschweißt jedoch das Stylesheet mit dem Hypertext als wäre es eine untrennbare Einheit. Denke doch einmal in XML-Dimensionen und verstehe das (X)HTML-Dokument als Ansammlung von strukturierten Daten - indem du das Stylesheet für obligat für die Verständnis der Daten erklärst, durchbrichst du genau diesen genialen Vorteil der Universalität von XML.
Der CSS-Hype hat meiner Erfahrung nach zur Folge, dass die Seiten ohne CSS völlig unbenutzbar werden, weil - wie vorher, nur mit anderne Mittel - eine Seitenstruktur nur mit Bedacht auf die Ausgabe mithilfe des Stylesheets erstellt wird; von einer herkömmlichen Textstruktur, welche im Rahmen des Hypertexts linearisierbar ist, kann man gar nicht mehr sprechen.
Denn wenn man das Autorenstylesheet zugunsten der Benutzerstylesheets bzw. der Default-Styles deaktiviert, kleben in diesem Fall die Links aneinander, folglich ist die Seite nicht benutzbar. Dies gilt auch für jedes andere Textausgabemedium. Genau so etwas ist mir schon dutzendfach im Netz auf mit CSS formatierten Seiten aufgefallen, da ich sehr oft das Autorenstylesheet zugunsten meinem Stylesheet deaktiviere, um die Lesbarkeit zu verbessern usw.
Da momentan solche Probleme einer Seite von den UAs nicht kompensiert werden, ist es noch problematischer, darauf zu hoffen, dass jegliche UAs "sowieso" in Zukunft das author stylesheet als obligat ansehen.Über CSS wird mal wieder der Hypertext vergessen, genau wie es in Zeiten von font und heillosem Tabellenlayout war.
Eventuell könnte man mit ul arbeiten und li {display:inline; margin:0; content:" | "; ...}, geht das? Nur ein Gedanke.
Hm, ein solcher Ansatz ist sicher auch eine Idee - nur wird in den Browsern, die mit einem "einfachen" :after{content} Probleme haben, die Darstellung hiervon mit Sicherheit nicht im mindesten mehr der Intention des Seitenentwicklers entsprechen.
Genau das möchte ich doch erreichen :) - wenn der Browser das CSS nicht versteht oder der Benutzer es nicht möchte, soll eine ordinäre, ungestylte Liste angezeigt werden, oder in XHTML 2 gedacht, eine Navigationsliste http://www.w3.org/TR/xhtml2/mod-list.html#sec_10.2., so wie der Benutzer es will, voll benutzbar und perfekt strukturiert.
Aber du meintest, dass die Anzeige eher zerschossen wird, wenn der UA in Sachen CSS kränkelt... ACK. Mir ging es eher um die graceful degradation.Mathias
"Je n'ai pas le temps de perdre la tête"
-
-
-