| Autor |
Nachricht |
Partychopper
Threadersteller
Dabei seit: 27.11.2003
Ort: Offenburg
Alter: 43
Geschlecht: 
|
Verfasst So 21.10.2007 12:39
Titel CSS-Trick für Rollovermenü ohne Preloader klappt nicht :( |
  |
|
Moin zusammen,
ich habe irgendwo bei Dr. Web oder so einen Trick gelesen, wie man sein Rollovermenü schick in CSS
umsetzen kann ohne Preloader. Und zwar ist das so gedacht, dass man den Mouse-out- und Mouse-over-Effekt
in eine Bilddatei packt und das Bild durch CSS dann nur noch in der Position dementsprechend verschiebt...
Hab das mal versucht, aber das funzt in Firefox nicht, obwohl ich den hierzu benötigten display:block - Style angewandt habe.
Hier ist der Link zu dem "Trick":
http://www.drweb.de/csspraxis/css-rollover-menu.shtml
und hier mein Stylesheet:
| Code: |
<style type="text/css">
#rollovermenu a {background:url(testbutton.gif) 0px 0px no-repeat; display:block; }
#rollovermenu a:hover { background-position: 0px -18px; }
#navi {
width:800px;
height:75px;
text-align:center;
border-bottom:1px solid black;
}
#kontextnavi {
float:left;
width:135px;
height:360px;
background-color:#CC0000;
background-image:url(../Bilder/Kontext_Navi.jpg)
}
#inhalt {
float:left;
width:665px;
height:360px;
background-color:#33FFFF;
}
#container {
width:800px;
height:500px;
margin-left:auto;
margin-right:auto;
margin-top:50px;
}
body {
background-image:url(../Bilder/loungetapete.gif)
}
</style>
|
...und hier der Ausschnitt aus dem Code:
| Code: |
</div>
<div id="kontextnavi">
<div id="rollovermenu">
<a href="/"></a>
</div>
</div>
<div id="inhalt">
</div>
</div> |
Noch eine Zusatzfrage: Müsste ich dann für jeden Munüpunkt eine separate id definieren?
Herzlichen Dank im Voraus für eure Mithilfe 
|
|
| |
   |
 |
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst So 21.10.2007 13:04
Titel
|
|
|
was genau "funzt" nicht. oder anders, was stellt sich derzeit da? zeigs mal online.
du siehst schon, dass du deinen code mit </div> anfängst, oder?
edit: ja, jedes menü sollte ne eigene id haben. allerdings kannst du die styles, die alle gemein haben ja zusammen fassen, und nur noch die einzelnen backgrounds definieren...
Zuletzt bearbeitet von pixelpapst303 am So 21.10.2007 13:06, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 21.10.2007 13:26
Titel
|
|
|
|
Ohne breiten und höhen Angabe kann da auch nichts sein wenn das Hyperlink Element leer ist.
|
|
| |
|
|
Partychopper
Threadersteller
Dabei seit: 27.11.2003
Ort: Offenburg
Alter: 43
Geschlecht:
|
Verfasst So 21.10.2007 17:32
Titel
|
|
|
Wunderbar... es lag an den fehlenden Größenangaben... 
@ Pixelpapst: ich hab es jetzt dann mal so versucht, dass ich die Eigenschaften, die für alle gelten dem globalen Rollovermenu-div zuweise und in die einzelnen Menüpunkte nur noch die entsprechenden Hintergrundbilder einfüge.
Irgendwie übernehmen sie jetzt aber nimmer die übergeordneten Eigenschaften, darum habe ich dann explizit nochmal definiert: position:inhertit, damit sie die Position des Elternelements übernehmen, aber das hat leider dazu geführt, dass mein Effekt jetzt im Eimer ist...
Könntest du mir vielleicht die richtigen Stylesheets und den Code dazu verraten? 
Zuletzt bearbeitet von Partychopper am So 21.10.2007 17:33, insgesamt 2-mal bearbeitet
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
|
| |
|
|
Partychopper
Threadersteller
Dabei seit: 27.11.2003
Ort: Offenburg
Alter: 43
Geschlecht:
|
Verfasst So 21.10.2007 18:36
Titel
|
|
|
@ m: soweit ich dieses Beispiel verstanden habe ist dort das ganze Menü durch ein einziges Bild aufgebaut, dass alle Buttons beinhaltet und immer wieder verschoben wird.
Mir erscheint es aber bissl einfacher (und zugleich wüsste ich gern wie es funzt...  ) wenn ich pro Menüpunkt eine Bilddatei habe, die ich dann immer nur horizontal um den gleichen Wert verschieben muss...
Kann mir jemand sagen wo genau der Fehler in meinem Beispiel liegt???
|
|
| |
|
|
Partychopper
Threadersteller
Dabei seit: 27.11.2003
Ort: Offenburg
Alter: 43
Geschlecht:
|
Verfasst Sa 03.11.2007 21:54
Titel Hilfääää! |
|
|
| Partychopper hat geschrieben: |
@ Pixelpapst: ich hab es jetzt dann mal so versucht, dass ich die Eigenschaften, die für alle gelten dem globalen Rollovermenu-div zuweise und in die einzelnen Menüpunkte nur noch die entsprechenden Hintergrundbilder einfüge.
Irgendwie übernehmen sie jetzt aber nimmer die übergeordneten Eigenschaften, darum habe ich dann explizit nochmal definiert: position:inhertit, damit sie die Position des Elternelements übernehmen, aber das hat leider dazu geführt, dass mein Effekt jetzt im Eimer ist...
|
Hilfäää, kann mir nicht irgendjemand plausibel erklären, wieso das so nicht funzt?
Ich bin nur noch am nachlesen und nachrecherchieren, aber komme meinem Problem nicht näher auf die Spur! 
Ich bin nahe dran, in dreamweaver einfach eine Tabelle zu erstellen und dort vorgefertigte Rolloverbuttons "reinzuklatschen".... aber ich will´s doch professioneller machen... 
Kann mir da jemand unter die Arme greifen?
Zuletzt bearbeitet von Partychopper am Sa 03.11.2007 21:55, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
help - gibts n Trick wie ich die Lycoswerbung loswerde?
Navigationsmenü Trick? (Master Page Item)
preloader -->
Preloader für *.swf
Probleme mit Preloader
[sitecheck]preloader
|
|
Willkommen auf dem Portal für Mediengestalter
