kostenloser Webspace werbefrei: lima-city

Strukturierung des CSS bei Wordpress-Menü

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   roboterbastler

   roboterbastler hat kostenlosen Webspace.

   11:34, 26.3.2011

   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

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. mmog

   mmog hat kostenlosen Webspace.

   0:12, 29.3.2011

   Mit einzelnen Klassen arbeiten und vor Vererbung abgrenzen?
   
   Im Prinzip hast du es doch gut gelöst. Schau dir einfach mal die css Dateien von professionellen WP Designern an, z.b. woothemes oder die themes von site5. Da kannste gucken wie die das strukturieren!

4. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?