|
|||
Bunte Liste: Code kürzen?
Moin,
mir ist eben in den Sinn gekommen, dass eine "bunte" Liste ziemlich viel Code mitbringt, auch wenn sie nur ein paar Wörter enthält. Mich würde mal interessieren, ob man da etwas umschreiben kann, damit nicht soviel Code entsteht. Die Spans hab ich wegen der Übersichtlichkeit mal untereinander geschrieben und viel Sinn macht das Beispiel auch nicht. Die Frage ist jetzt eher generell, für den Fall der Fälle. Code:
#liste li span.first, #liste li span.third { color:#FF0000; } #liste li span.second { color:#00FF00; font-weight:bold; } #liste li span.third { font-size:2em; } #liste li a.mehr { color:#FFFF00; } <div id="liste"> <li> <span class="first">Hallo 1</span> <span class="second">wie 1</span> <a href="domain.de">gehts 1</a> <span class="third">!</span> <a href="domain.de" class="mehr">mehr 1</a> </li> <li> <span class="first">Hallo 2</span> <span class="second">wie 2</span> <a href="domain.de">gehts 2</a> <span class="third">!</span> <a href="domain.de" class="mehr">mehr 2</a> </li> <li> usw. </li> </div> |
Sponsored Links |
|
|||
Für modernere Browser könnte sich der Geschwisterselektor eignen:
Beispiel: Cascading Style Sheets { Vollreferenz zu CSS 1 und CSS 2.1 : Nachbar-Selektor } Dann kannst Du auf die spans verzichten und etwa so auszeichnen: Code:
.liste li { color: black; } .liste li + li { color: red; } .liste li + li + li { color: blue; }
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hilfe mit der Positionierung einer verschachtelten Liste | VitaminT | CSS | 2 | 03.06.2008 14:46 |
Wort in Javascript Code einfügen; dann Javascript Code ausgeben | Sp33dy G0nz4l3s | Javascript & Ajax | 1 | 23.05.2008 10:37 |
Abstände in Liste automatisch mitwachsen lassen... | Retrax | CSS | 5 | 30.11.2005 10:34 |
Abstand von Liste in div ändern | N!KO | CSS | 2 | 04.01.2005 00:50 |
Liste in DIV | SPMan | CSS | 13 | 28.07.2004 16:37 |