zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bunte Liste: Code kürzen?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.01.2008, 12:00
Schnabeltasse
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 25.04.2006
Beiträge: 169
Steakfred befindet sich auf einem aufstrebenden Ast
Frage 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.01.2008, 12:18
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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;
}
Der IE 6 kanns noch nicht, aber wer benutzt den schon noch
__________________
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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.01.2008, 12:43
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Nur 50% aller www-Nutzer (schon klar, dass es Ironie war.) Aber bei ihm passieren die Farbänderungen innerhalb eines li (und dessen Listenpunktes soll farblich sicher auch unabhängig sein), also braucht er die spans.

Wenn es überall laufen soll, kannst Du allenfalls die Klasse first weglassen (also ein span ohne Klasse), den Rest brauchst Du leider für Dein Vorhaben.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:00 Uhr.