✔ Hintergrund von Tabellenzellen bei a:hover ändern

Status
Nicht offen für weitere Antworten.
H

herrgarnele

Erfahrenes Mitglied
Hallo Tutorials-Gemeinde (mal wieder :))

ich habe ein Problem mit der Formatierung eines Menus. Das große Ding ist, dass das Menu eine fertige Komponente eines CMS ist, ich also an dessen Struktur leider nichts ändern kann. Dennoch soll das Menu eine gewisse Funktionalität gewährleisten:

Das gute Stück soll beim 'Mausdraufzeigen' Hintergrundfarbe sowie Schriftfarbe der betreffenden Menuzeile wechseln. Und bei dem wechseln des Hintergrundes habe ich so meine Probleme- wie bekomme ich das (!) bei bestehendem Layout (!) gebacken?

Ich hab den Code der Übersicht halber zusammengekürzt, also nicht erschrecken, wenn das ein wenig seltsam ausschaut!

HTML: 
<body>

<div id="left">
    <table cellpadding="0" cellspacing="0" class="moduletable">
        <tr>
            <td>
                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr align="left"><td><a href="#" class="mainlevel" id="active_menu">Link1</a></td></tr>
                    <tr align="left"><td><a href="#" class="mainlevel" >Link2</a></td></tr>
                    <tr align="left"><td><a href="#" class="mainlevel" >Link3</a></td></tr>
                    <tr align="left"><td><a href="#" class="mainlevel" >Link4</a></td></tr>
                    <tr align="left"><td><a href="#" class="mainlevel" >Link5</a></td></tr>
                    <tr align="left"><td><a href="#" class="mainlevel" >Link6</a></td></tr>
                    <tr align="left"><td><a href="#" class="mainlevel" >Link7</a></td></tr>
                </table>
            </td>
        </tr>
    </table>
</div>

</body>
Code: 
/* ---------- general template settings ---------- */

body, html {
margin:0;
background-color:#e1e1e2;
text-color:#363636;
text-align:center;
}

#left { /* left = Menu, Suche, deutsch|english */
width:170px;
border-top:12px solid #fff;
}


/* ---------- type settings ---------- */

body {
font-family:Arial, Helvetica, sans-serif;
font-size:0.75em;
color:#363636;
}


/* ---------- left settings, also Menu, Suche usw. ---------- */

table.moduletable { /* Tabelle in der Module wie Menu, Suche usw angeordnet werden (AUCH NEWS-MODUL!) */
width:100%;
margin:0;
}

#left table.moduletable { /* Tabelle für Module, in #left, d.h. Menu, Suche & Deutsch/Englisch */
margin:40px 0 0px 0; /* ÄNDERN! */
border-top:1px solid #fff; /* NUR obere Linie über einem GESAMTEN Modul in der Menuleiste */
}

#left table.moduletable tr td table tr td { /* GENAU eine Zelle des Menus */
border-bottom:1px solid #fff; /* untere Linien im Menu */
}

a.mainlevel:link, a.mainlevel:visited { /* Menu-Text */
font-family:"Times New Roman", Times, serif;
font-weight:bold;
font-size:1.1em;
color:#fff;
text-decoration:none;
line-height:2.2em;
padding-left:20px;
}

a.mainlevel:active, a.mainlevel:hover {
color:#e22630;
}

.mainlevel#active_menu {
color:#e22630;
}
Wie gesagt kann ich in den html-Code nicht eingreifen..
Ich hoffe es wird klar was ich meine? Wenn der Link hover ist, soll der Hintergrund der Zelle weiss werden..
Geht das bei bestehendem html überhaupt?

Danke!!
 
So sieht mein Lösungsvorschlag aus:

Code: 
a.mainlevel:link, a.mainlevel:visited { /* Menu-Text */
font-family:"Times New Roman", Times, serif;
font-weight:bold;
font-size:1.1em;
color:#fff;
text-decoration:none;
line-height:2.2em;
padding-left:20px;
display: block;
width: 150px;
height: 2.2em;
}

a.mainlevel:hover {
background: #fff;
}
 
:eek: Wie schnell, wie einfach..

Hey vielen Dank, jetzt hast Du mir zum zweiten Mal innerhalb von zwei Tagen mein Leben zwecks Stressminderung verlängert ;)

Vielen vielen Dank!!



// EDIT:
Sorry jetzt muss ich dene Thread doch nochmal öffnen...
Weisst Du, warum jeweils an der Unterkante der Buttons etwa der eine Pixel oberhalb des Trennstrichs nicht weiss gefüllt wird? (Problem scheint im IE6 nicht aufzutreten, FF1.5 only..)
 
Zuletzt bearbeitet:
herrgarnele hat gesagt.:
// EDIT:
Sorry jetzt muss ich dene Thread doch nochmal öffnen...
Weisst Du, warum jeweils an der Unterkante der Buttons etwa der eine Pixel oberhalb des Trennstrichs nicht weiss gefüllt wird? (Problem scheint im IE6 nicht aufzutreten, FF1.5 only..)
Zum Vergrößern anklicken....
Probier's mal hiermit:

Code: 
a.mainlevel:link, a.mainlevel:visited { /* Menu-Text */
font-family:"Times New Roman", Times, serif;
font-weight:bold;
font-size:1.1em;
color:#fff;
text-decoration:none;
line-height:2.2em;
padding-left:20px;
display: block;
width: 150px;
height: 2.2em;
margin-bottom: -1px !important;
}
 
Ah okay, in dem Fall ist das einer von vielen IE-/FF-Interpretations-Unterschieden..?
Die !important-Regel gilt aber nur im IE, oder?
Dann müsst ichs nämlich andersrum machen.. Grundsätzlich 1px höher und im IE -1px..

Ah egal, das kann ich nu aber wirklich auch so nachlesen!
Vielen Dank, Du hast mir echt sehr geholfen!!
 
Nein, die !important-Regel gilt in diesem Fall für den Firefox (und alle übrigen Gecko-Browser, die ebenfalls eine Lücke zum unteren Zellenrand aufreissen); der IE ignoriert nämlich diese Angabe.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück