Strukturierung des CSS bei Wordpress-Menü
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
blocken
designer
display
falsche reihenfolge
funktion
gewichtung
internet
kostprobe
list
normal code
normal text
ordentlichen strukturierung
prinzip
problem
projekt
struktur
text
tip
type
vererbung
-
Ich bin gerade dabei ein Template für Wordpress zu schreiben. Ich benutze für das Menü die PHP-Funktion wp_page_menu();. Wordpress erzeugt damit auch gleich passende CSS-Klassen um das Menü zu formatieren. Soweit so gut.
Das Problem bei mir ist jetzt, dass mit Menüunterpunkten, Hover-Effekten und dann auch noch den entsprechenden "aktiven" Einträge die Struktur des CSS sehr unübersichtlich, häufig auch durch die Gewichtung der Selektoren unnötig aufgeblasen und "doppelt-gemoppelt" ist!
Nur mal als Kostprobe (bisheriges CSS fürs Menü, ist noch nicht vollständig):
.menu { border-bottom: 1px solid #707F90; font-family: Verdana,Arial,sans-serif; font-size: 14px; float: left; height: 100%; list-style-type: none; margin-top: 70px; width: 20%; z-index: 1; } .menu .page_item { background-color: #7A7A7A; color: #FFF; } .menu .page_item a { background-color: #555E6B; border-bottom: 1px solid #3C444D; border-top: 1px solid #707F90; color: #FFF; display: block; font-size: 12px; padding: 10px 15px 10px 25%; text-decoration: none; } .menu .page_item a:hover { background-color: #ADADAD; color: #525252; font-weight: bold; } .menu .current_page_item { border-bottom: 1px solid #3C444D; } .menu .current_page_item a { background: none repeat scroll 0 0 #ADADAD; color: #525252; font-weight: bold; text-decoration: underline; } .menu .current_page_item a:hover { background-color: #555E6B; color: #FFF; } .menu .current_page_item .children li { background-color: #7A7A7A; } .menu .page_item .children { visibility: collapse; } .menu .current_page_item .children { list-style-type: none; margin-left: 8%; visibility: visible; } .menu .current_page_ancestor .children { list-style-type: none; margin-left: 8%; visibility: visible; } .menu .current_page_item .children .page_item a { background-color: #9E947D; border-bottom: 1px solid #ADADAD; border-left: 1px solid #525252; border-top: 1px solid #ADADAD; color: #FFF; font-weight: normal; margin-left: 0%; padding: 5px 15px 5px 10%; text-decoration: none; width: 100%; } .menu .current_page_ancestor { border-bottom: 1px solid #3C444D; } .menu .current_page_ancestor a { background: none repeat scroll 0 0 #ADADAD; color: #525252; font-weight: bold; text-decoration: underline; } .menu .current_page_ancestor a:hover { background-color: #555E6B; color: #FFF; } .menu .current_page_ancestor .children .page_item a { background-color: #9E947D; border-bottom: 1px solid #ADADAD; border-left: 1px solid #525252; border-top: 1px solid #ADADAD; color: #FFF; font-weight: normal; margin-left: 0%; padding: 5px 15px 5px 10%; text-decoration: none; width: 100%; } .menu .current_page_ancestor .children .page_item a:hover { background-color: #ADADAD; color: #525252; font-weight: bold; text-decoration: underline; } .menu .current_page_ancestor .children .current_page_item a{ background-color: #ADADAD; border-bottom: 1px solid #525252; color: #525252; font-weight: bold; text-decoration: underline; } .menu .current_page_ancestor .children .current_page_item a:hover { background-color: #9E947D; color: #FFF; } .menu .current_page_ancestor .children .current_page_item .children .page_item a { background-color: #7D8C9E; border-top: 0 none; border-bottom: 1px solid #ADADAD; color: #FFF; font-size: 10px; font-weight: normal; text-decoration: none; width: 84%; } .menu .current_page_ancestor .children .current_page_item .children .page_item a:hover { color: #525252; text-decoration: underline; } .menu .current_page_item .children .page_item a:hover { background-color: #ADADAD; color: #525252; font-weight: bold; text-decoration: underline; } .menu .current_page_item .children .page_item .children li { border: 0 none; } .menu .current_page_item .children .page_item .children .page_item a { background-color: #7D8C9E; border-top: 0 none; font-size: 10px; width: 84%; } .menu .current_page_item .children .page_item .children .page_item a:hover { font-weight: normal; }
Was ich jetzt suche sind Vorschläge zur ordentlichen Strukturierung, vllt. gibts da ja Tipps im Internet, ich konnte aber leider nichts brauchbares finden? Wie geht man bei komplexeren CSS-Projekten vor, damit keine Probleme durch Vererbung, Gewichtung der Selektoren, falsche Reihenfolge etc. entstehen? Gibts da Erfahrungen, wie man das angehen kann??
Ich wäre euch für Tipps sehr dankbar!
PS: Hat niemand eine Idee, wie ich das besser handhaben könnte?
Beitrag zuletzt geändert: 27.3.2011 19:29:07 von roboterbastler -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage