| Autor |
Nachricht |
KaffeePaule
Threadersteller
Dabei seit: 02.02.2010
Ort: Berlin
Alter: -
Geschlecht: 
|
Verfasst Mo 22.02.2010 17:31
Titel css menü prob reihenfolge <a> & <li> |
  |
|
Hallo liebe Nonprinter,
Ich habe ein Problem mit meinem Css-Dropdown-Menü: Wenn ich mit dem Cursor hinabscrolle, ereignet sich das beim Linkeintrag "SHOWS" illustrierte Phänomen:
Sobald der Cursor in die Unterkategorien wandert, bleibt die Unterlegung des <a>-Tags bestehen, das <li>-Element switcht aber zurück in die Ausgangs-jpg.
Anhand von "MOVIES" wird mal das gewünschte verhalten veranschaulicht...
Ich schätze, das ließe sich schnell hinbiegen, indem man die Überlappung von <li> und <a> umkehrt.
Wie mache ich das möglichst effektiv?
Vielen Dank im Voraus,
wärmste Grüße
Zuletzt bearbeitet von KaffeePaule am Mo 22.02.2010 17:42, insgesamt 4-mal bearbeitet
|
|
| |
  |
 |
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Mo 22.02.2010 17:36
Titel
|
|
|
quelltext sagt mehr als tausend bilder 
ich denke, da braucht man schon ein onlinebeispiel der seite, um effektiv helfen zu können.
|
|
| |
 |
|
|
Anzeige
|
|
|
KaffeePaule
Threadersteller
Dabei seit: 02.02.2010
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Mo 22.02.2010 17:44
Titel
|
|
|
Möglich - Aber ich dachte, es ist vielleicht ein 0815-Problem, und jeder weiß gleich Bescheid.
Hab mich auch nicht so bestens ausgedrückt, deswegen nochmal der Nachtrag.
Gibts nen Filehoster, wo ich eine html mit css zur Ansicht uploaden kann?
Gruß
|
|
| |
|
|
owntheworld
Dabei seit: 26.12.2009
Ort: Augsburg
Alter: 37
Geschlecht:
|
Verfasst Mo 22.02.2010 19:42
Titel
|
|
|
|
Poste doch den verantwortlichen Quelltext-Ausschnitt, dann kann dir sicher jemand weiterhelfen.
|
|
| |
|
|
KaffeePaule
Threadersteller
Dabei seit: 02.02.2010
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Mi 24.02.2010 00:17
Titel
|
|
|
Ja - ist vielleicht am besten, hier nun also die entscheidenden Skripte:
html
| Code: | <ul class="dropdown dropdown-horizontal">
<li><a href="./">Home</a></li>
<li><a href="./" >Music</a>
<ul>
<li class="first"><a href="./" >Artists</a></li>
<li><a href="./">Your Music</a></li>
<li><a href="./" >Lyrics</a></li>
<li class="last"><a href="./">Billboard Charts</a></li>
</ul>
</li>
<li><a href="./" >Shows</a>
<ul>
<li class="first"><a href="./">TV Schedule</a></li>
<li class="mitte"><a href="./">MTV Shows Gossip</a></li>
<li><a href="./">Show Photos</a></li>
<li><a href="./">Be on MTV</a></li>
<li class="last"><a href="./">Shop MTV Shows</a></li>
</ul>
</li>
<li><a href="./" >News</a>
<ul>
<li class="first"><a href="./">News Main</a></li>
<li><a href="./">Newsroom Blog</a></li>
<li><a href="./">Video Games Blog</a></li>
<li><a href="./">Street Team '08</a></li>
<li><a href="./">Hottest MCs</a></li>
<li class="last"><a href="./">News Alerts</a></li>
</ul>
</li>
<li><a href="./" >Movies</a>
<ul>
<li class="first"><a href="./" >Movies</a></li>
<li><a href="./" >Video Games</a></li>
<li><a href="./" >Online Games</a></li>
<li><a href="./">Activism</a></li>
<li><a href="./" >Mobile</a></li>
<li class="last"><a href="./">Contest & Sweepstakes</a></li>
</ul>
</li>
</ul> |
CSS:
| Code: | ul.dropdown a:link,
ul.dropdown a:visited { color: #fff; text-decoration: none;}
ul.dropdown a:hover {
background: #058acf url(images/mouseover.png) 0 0 repeat-x ;
color: #fff;
}
ul.dropdown li {
background: url(images/navbutton.png) 0 0 no-repeat;
}
ul.dropdown li a{
background: url(images/navbutton.png) right -30px no-repeat;
}
ul.dropdown li:hover {
background: #058acf url(images/mouseover.png) 0 0 repeat-x ;
} |
Bei navbutton.png handelt es sich um eine Grafikdatei mit den untereinander angelegten Teilen des NavButtons.
Ich habe selbst noch einmal darüber getüftelt - und ich bin zum Schluß gekommen, daß die in <li> angelegte png visuell über die in <a> angelegte png gelegt werden muß. Eigentlich sollte das mit z-index gehen, das hat aber irgendwie nicht gefunzt. Bin deswegen entsprechend unsicher und frage lieber mal erfahrene Developer, vielleicht lieg ich ja auch völlig daneben.
Liebe Grüße
|
|
| |
|
|
easteregg
Dabei seit: 15.02.2003
Ort: Deutschland
Alter: 36
Geschlecht:
|
Verfasst Mi 24.02.2010 02:35
Titel
|
|
|
Ein CSS-Dropdown ist das aber nicht wirklich, weil bei dir die Unterpunkte ja nicht ausklappen (es sei denn, du hast den Code jetzt gekürzt, den du uns zeigst).
Weil du eh schon mit :hover bei Elementen arbeitest, die keine Links sind, hier mal ein Lösungsansatz:
Link und Liste von einem Element umspannen lassen, und diesem Element im :hover-Status die Hintergrundgrafik geben, die momentan dein Link hat.
Solltest du nicht eh schon Javascript in deiner eigentlichen Lösung einsetzen, käme jetzt der Augenblick, darüber nachzudenken. Denn mit purem CSS bist du ohne Workarounds im IE erfolglos 
|
|
| |
|
|
KaffeePaule
Threadersteller
Dabei seit: 02.02.2010
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Mi 24.02.2010 02:57
Titel
|
|
|
JA, die meines Erachtens unwichtigen Stellen habe ich einfach gekürzt.
Das ganze ist ein Template gewesen, und kommt gänzlich ohne js aus. Daher waren für den IE6 ein paar Hacks mit eingebaut - ich denke, das haut alles hin.
Probiere den Tip gleich mal aus, danke.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
wie erstelle ich diesen menü effekt bzw. das gesammte menü?
CSS Menü - Finde nicht das richtige Menü
div-Reihenfolge
Div-Prob
prob mit png im IE
Anordnung von Ebenen (Reihenfolge)
|
|
Willkommen auf dem Portal für Mediengestalter
