✔ hover effekt mit CSS durch span

N

Necro_nomicon

Erfahrenes Mitglied
Hallo!

Ich habe gerade ein Untermenue umgebaut. Der Code ist valide, aber trotzdem geht manches noch nicht so wie ich will.

Obwohl es bereits einmal funktioniert hat, wird nun der Text, der im span-Tag drinnen ist im FF2.0 nicht mehr angezeigt, im IE schon (wenn man drueber faehrt).

Und wird der Text eingeblendet, dann steht er leider immer unter dem jeweiligen Tag und nicht ganz links, wie es schon mal war. Im code habe ich aber an sich nichts veraendert, nur sind nun ein paar Sachen nicht mehr dabei (z.B. b-Tags).

Wie kann ich diese Position so abaendern, dann es wieder passt? Ich seh es einfach nicht.


http://www.2wsoft.at/test3/submenue.html
http://www.2wsoft.at/test3/submenue.css
 
Hi,

dass die Unterpunkte in allen "Nicht-IE-Browsern" nicht erscheinen, liegt an der overflow:hidden-Deklaration für den umschliessenden DIV-Block .container.

Damit die Unterpunkte linksbündig ausgerichtet werden, muß position:relative für das li-Element entfernt werden.

Damit der "Strich" unterhalb der Tabs nun weiterhin korrekt ausgerichtet wird, empfehle ich Folgendes:
Code: 
<table cellpadding="0" cellspacing="0" border="0">
<tr>
        <td   valign="top"><!-- Klasse "strich" entfällt hier -->
                                                <div id="untermenu">
                                                         <div class="container">
                                                                 <ul id="menu2" class="strich">
                                                                        <li><a href="#" class="selected"><em>Analysen</em><span>Der Analysenkatalog mit umfangreichen Suchfunktionen.</span></a></li>
                                                                        <li><a href="#"><em>Analysen</em><span>Der Analysenkatalog mit umfangreichen Suchfunktionen.</span></a></li>
                                                                        <li><a href="#"><em>Analysen</em><span>Der Analysenkatalog mit umfangreichen Suchfunktionen.</span></a></li>
                                                                </ul>
                                                        </div>
                                                </div>
        </td>
</tr>
</table> <!-- fehlt in deinem Markup -->
Code: 
#menu2 {
        padding:0;
        margin:0 auto;
        list-style-type: none;
        float:left;
        position:relative;
        width:100%;
        /*** left:50%; ***/
         background:none; /*** weil Hintergrund bei Hauptmenue ***/
        }

Wozu wird diese Tabelle überhaupt benötigt? Das ganze Modell läuft auch ohne sie, und semantisch betrachtet hat sie hier überhaupt keine Daseinsberechtigung.

Übrigens hast du hier den ID-Bezeichner falsch benannt:
Code: 
#menue2 a:hover { }


mfg Maik
 
Hallo!

Vielen Dank fuer deine Hilfe! Allerdings hat nach dem Entfernen des overflow-hidden die Anzeige des Textes funktioniert. :)

Und ebenfalls das mit der linksbuendigen Ausrichtung. :)

Besonderen Dank auch fuer den Hinweis mit dem Schreibfehler von menuE2! Dadurch ist nun auch einiges klar, warum ich es an anderer Stelle sozusagen nochmal schreiben musste.

Die table bzw. der Strich:
An sich ist s bei dem Beispiel nicht notwendig. Bei der Seite aber schon, da der Strich bei einem anderen td weitergeht. Ich habe nur den Code vom Rest entfernt, weil es sonst unuebersichtlich gewesen waere.

Es funktioniert nun alles, ausser beim hover wird das Tab ploetzlich groesser. Liegt wohl irgendwo bei dem menu2. Werd ich mir noch mal anschaun muessen.

+++edit+++
So ist es.
background:none;

PS: Ich bin immer noch fuer einen donate-Button fuer Maik! Wo kann man den beantragen?!
 
Zuletzt bearbeitet:
Leider geht das nur, wenn man dazwischen auch andere Leute bewertet hat.
Ist aber so, dass du immer derjenige bist, der allen hilft!

Also ich wuerde es wirklich begruessen, da du mir schon oft weitergeholfen hast und ich somit immer neue Sachen lerne (manchmal auch langsam *g*, ich weiss) und da will man halt auch irgendwie etwas zurueckgeben sozusagen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück