mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 24.11.2017 12:02 Benutzername: Passwort: Auto-Login

Thema: css menü prob reihenfolge <a> & <li> vom 22.02.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> css menü prob reihenfolge <a> & <li>
Autor Nachricht
KaffeePaule
Threadersteller

Dabei seit: 02.02.2010
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Mo 22.02.2010 16:31
Titel

css menü prob reihenfolge <a> & <li>

Antworten mit Zitat Zum Seitenanfang

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 16:42, insgesamt 4-mal bearbeitet
  View user's profile Private Nachricht senden
pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 44
Geschlecht: Männlich
Verfasst Mo 22.02.2010 16:36
Titel

Antworten mit Zitat Zum Seitenanfang

quelltext sagt mehr als tausend bilder *zwinker*

ich denke, da braucht man schon ein onlinebeispiel der seite, um effektiv helfen zu können.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
KaffeePaule
Threadersteller

Dabei seit: 02.02.2010
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Mo 22.02.2010 16:44
Titel

Antworten mit Zitat Zum Seitenanfang

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ß
  View user's profile Private Nachricht senden
owntheworld

Dabei seit: 26.12.2009
Ort: Augsburg
Alter: 30
Geschlecht: Männlich
Verfasst Mo 22.02.2010 18:42
Titel

Antworten mit Zitat Zum Seitenanfang

Poste doch den verantwortlichen Quelltext-Ausschnitt, dann kann dir sicher jemand weiterhelfen.
  View user's profile Private Nachricht senden
KaffeePaule
Threadersteller

Dabei seit: 02.02.2010
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Di 23.02.2010 23:17
Titel

Antworten mit Zitat Zum Seitenanfang

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 &amp; 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
  View user's profile Private Nachricht senden
easteregg

Dabei seit: 15.02.2003
Ort: Deutschland
Alter: 29
Geschlecht: Männlich
Verfasst Mi 24.02.2010 01:35
Titel

Antworten mit Zitat Zum Seitenanfang

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 * grmbl *
  View user's profile Private Nachricht senden
KaffeePaule
Threadersteller

Dabei seit: 02.02.2010
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Mi 24.02.2010 01:57
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
 
Ähnliche Themen css positionierungs prob
CSS-Prob mit emailformular...
CSS Menü - Finde nicht das richtige Menü
css-prob mit border-bottom im ie 6
css prob im IE - im Opera und Fox funzt es
<Php include + Script ?> - ist das möglich?; Css Code Prob.
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.