Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag04.10.2009 um 19:27 (UTC)    
Titel: Menüpunkte unterschiedliche Hintergrundbilder

Hallo zusammen,
wie ihr schon an der überschrift lesen könnt möchte ich ein vertikales Menü mtit CSS erstellen. Im Grunde weiß ich auch wie das geht, nur bei einer Sache bin ich ratlos.
Und zwar möchte cih für jeden Menüpunkt einen anderen Hintergrund haben. So soll bsp. der Hintergrund von "News" anders sein als der hintergrund vom "Impressum".
Wisst ihr wie ich da die BIlder der Buttons zuweise?

Ich hoffe ihr könnt mir helfen.

liebe Grüße Ines
Beitrag07.10.2009 um 10:26 (UTC)    
Titel:

Das kannst du ganz einfach mit CSS tun du gibst einfach jedem menu Punkt eine andere class.

Also:

Code:

<div id="menu">
   <ul>
      <li><a href="#">home</a></li>
      <li><a href="#" class="green">about us</a></li>
      <li><a href="#" class="blue">services</a></li>
      <li><a href="#" class="orange">solutions</a></li>
      <li><a href="#" class="brn">contact us</a></li>                        
   </ul>


Und in CSS sieht das dan so aus:

Code:

#menu{
      background:#fff;
      width:170px;
   }
      #menu ul{
         list-style:none;
      }
         #menu li{
            list-style:none;
            margin:2px 0;
         }
            #menu li a{
               list-style:none;
               background:#82837c;
               color:#fff;
               text-transform:uppercase;
               font-size:11px;
               font-weight:bold;
               text-decoration:none;
               border:solid #777776;
               border-width:0 6px 0 6px;
               display:block;
               height:30px;
               line-height:30px;
               padding:0 0 0 10px;
            }
               #menu li a:hover{
                  background: url(Bildadresse);
                  color:#fff;
                  text-decoration:none;
               }
            #menu li a.green{
               background: url(Bildadresse);
               border:solid #6f9234;
               border-width:0 6px 0 6px;
            }
               #menu li a:hover.green{
                  background: url(Bildadresse);
               }
            #menu li a.blue{
               background: url(Bildadresse);
               border:solid #377e9f;
               border-width:0 6px 0 6px;
            }
               #menu li a:hover.blue{
                  background: url(Bildadresse);;
               }
            #menu li a.orange{
               background: url(Bildadresse);
               border:solid #d65611;
               border-width:0 6px 0 6px;
            }
               #menu li a:hover.orange{
                  background: url(Bildadresse);
               }
            #menu li a.brn{
               background: url(Bildadresse);
               border:solid #87249f;
               border-width:0 6px 0 6px;
            }
               #menu li a:hover.brn{
                  background: url(Bildadresse);
               }


Hoffe ich konnte dir weiterhelfen.
______________
WebDesign | Corporate Design | Redesign



Zuletzt bearbeitet von nuo-designs am 07.10.2009, 11:27, insgesamt einmal bearbeitet
Beitrag08.10.2009 um 14:52 (UTC)    
Titel: WOW

WOW
vielen lieben dank das hat mir sher geholfen ich mahc mich gleihc an die arbeit Laughing Laughing
vielen dnak Very Happy Very Happy Very Happy
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de