kostenloser Webspace werbefrei: lima-city

Wordpress Grafische Buttons statt Textnavigation

lima-city → Forum → Die eigene Homepage → Homepage Allgemein

1. Autor dieses Themas

   rotuganda

   

   rotuganda hat kostenlosen Webspace.

   21:55, 4.2.2011

   Hallo,
   
   wie schaffe ich es die Navigation, also das Menü von Wordpress mit grafischen Mouseoverbuttons zu realsieren? Ein Ansatz müsste folgendes sein:
   

   li#menu-item-302 a:link  {background-image: url("bild_normal.jpg");}
   li#menu-item-302 a:hover  {background-image: url("http://rolfholunder.files.wordpress.com/2008/01/rolf-holunder-300.jpg");}

   
   Aber es tut nicht es rührt sich leider gar nichts.
   
   Und der Quelltext sieht so aus:
   

   <div id="nav">
           <div id="nav-content" class="clearfix">
           <div class="menu-menue-container"><ul id="menu-menue" class="sf-menu menu clearfix"><li id="menu-item-1728" class="menu-item menu-item-type-post_type menu-item-1728"><a href="http://go.intoxi-hd.de/?page_id=1477">Produkte/Leistungen</a><span class="myimg">&nbsp;</span></li>
   <li id="menu-item-1729" class="menu-item menu-item-type-post_type menu-item-1729"><a href="http://go.intoxi-hd.de/?page_id=1161">Blog</a><span class="myimg">&nbsp;</span></li>
   
   <li id="menu-item-1730" class="menu-item menu-item-type-post_type menu-item-1730"><a href="http://go.intoxi-hd.de/?page_id=576">Impressum</a><span class="myimg">&nbsp;</span></li>
   <li id="menu-item-1731" class="menu-item menu-item-type-post_type menu-item-1731"><a href="http://go.intoxi-hd.de/?page_id=129">Kontakt</a><span class="myimg">&nbsp;</span></li>
   <li id="menu-item-1732" class="menu-item menu-item-type-post_type menu-item-1732"><a href="http://go.intoxi-hd.de/?page_id=113">Galerien</a><span class="myimg">&nbsp;</span></li>
   <li id="menu-item-1733" class="menu-item menu-item-type-post_type menu-item-1733"><a href="http://go.intoxi-hd.de/?page_id=51">Sitemap</a><span class="myimg">&nbsp;</span></li>
   </ul></div>

   
   
   Anschauen könnt ihr euch die Seite hier: www.go.intoxi-hd.de und hier noch meine css Datei: http://rotuganda.lima-city.de/css.txt
   
   Herzlichen Dank!

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

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

3. Autor dieses Themas

   rotuganda

   

   rotuganda hat kostenlosen Webspace.

   11:46, 6.3.2011

   Hallo,
   dank dir für deine Antwort (die ich völlig Sinn-frei finde) denn "nur" der HTML-Code hilft mir erstmal garnichts, denn ich muss die Menüelemente (Variablen) bei Wordpress gezielt ansprechen. Hättest du dir die Testseite mal angesehen, hättest du gemerkt das ich es inzwischen gelöst habe:
   

   <div class="menu-menue-container"><ul id="menu-menue" class="sf-menu menu clearfix"><li id="menu-item-1735" class="menu-item menu-item-type-post_type menu-item-1735"><a href="http://go.intoxi-hd.de/?page_id=1161">Blog</a></li>

   
   Und die Css dazu (denn HTML Mouseover wollte ich nicht):
   

   /* main navigation Mouseover */
   
   #menu-item-1735 { background: url(http://i46.photobucket.com/albums/f133/rotuganda/Polaroid_Blog_off.png)no-repeat;width: 500px; height: 400px; }
   
   #menu-item-1735:link    { text-decoration: underline;  font-size: 50px; color: #000; }
   #menu-item-1735:hover   { background-image:url(http://i46.photobucket.com/albums/f133/rotuganda/Polaroid_Blog_on.png); }
   #menu-item-1735:active  { background-image:url(http://i46.photobucket.com/albums/f133/rotuganda/Polaroid_Blog_on.png); }

   
   
   Eigentlich war ichs chon auf dem richtigen Weg es hatte nur irgendwie nicht recht geklappt, wenn ich das so für die anderen Menüpunkte fortführe habe ich mein Menü fertig. Die Position der einzelnen Elemente kann ich noch anpassen mit background-position.
   
   So vielleicht interessiert Jemand die Lösung, Thema ist erledigt :)

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

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

Dir gefällt dieses Thema?