nicht angemeldet
linie mit a:hover ändern
Gernot Back
Gunnar BittersmannHallo,
ich möchte, dass die linie die ich definiert habe
.linie {border-top: 1px solid lightskyblue}
beim mouseover die farbe wechselt.
wie kann ich das in a:hover einhbinden, dass das fuktionoiert
Hier der Code:
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
a { font-family: arial, helvetica, sans-serif; font-size: 12px; font-weight:bold}
a:link, a:visited {color: #005f8c; text-decoration: underline;border-top: 1px solid lightskyblue}
a:hover, a:active {color: #deeffa; text-decoration: none;background-color:#ff9900;}
.linie {border-top: 1px solid lightskyblue}
</style>
</head>
<body bgcolor="#ffffff" leftmargin="20" topmargin="30" marginwidth="20" marginheight="30" scroll="auto">
<table border="0" width="90" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="aliceblue" class="linie"><a href="index.html">startseite</a></td>
</tr>
<tr>
<td><img src="blindgif.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td bgcolor="aliceblue" class="linie"><a href="seite1.html">link1</a></td>
</tr>
<tr>
<td><img src="blindgif.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td bgcolor="aliceblue" class="linie"e><a href="seite2.html">link2</a></td>
<tr>
<td><img src="blindgif.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td bgcolor="aliceblue" class="linie"><a href="seite3.html">link3</a></td>
</tr>
<tr>
<td><img src="blindgif.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td bgcolor="aliceblue" class="linie"><a href="seite4.html">link4</a></td>
</tr>
</table>
</body>
</html>
-
Hallo koerschgen2001,
ich möchte, dass die linie die ich definiert habe
.linie {border-top: 1px solid lightskyblue}
beim mouseover die farbe wechselt.wie kann ich das in a:hover einhbinden, dass das fuktionoiert
a:link, a:visited {color: #005f8c; text-decoration: underline;border-top: 1px solid lightskyblue}
a:hover, a:active {color: #deeffa; text-decoration: none;background-color:#ff9900;}
a {color: #deeffa; text-decoration: none;background-color:#ff9900;}sollte reichen.
indem du überhaupt erst mal auch für den Hoverzustand Angaben bezüglich Border machst, die vom Normalzustand abweichen. Wie soll sich da was ändern, wenn du da nichts anderes vorsiehst?
Gruß Gernot
-
Ich korrigiere:
> a {color: #005f8c; text-decoration: underline;border-top: 1px solid lightskyblue}sollte reichen.
Gruß Gernot
-
Ich korrigiere:
a {color: #005f8c; text-decoration: underline;border-top: 1px solid lightskyblue}
> sollte reichen. > Das funktioniert ja schon nicht. Da kann das bei a:hover auch nicht funktionieren-
In Firefox schon, aber nicht bei Netscape und im Intenet Explorer.
-
-
-
-
Hi koerschgen2001,
Hier der Code:
</faq/#Q-07b>, </faq/#Q-07c>
Aber wenn du schon mal viel mehr als nötig preisgibst:
<body bgcolor="#ffffff" leftmargin="20" topmargin="30" marginwidth="20" marginheight="30" scroll="auto">Du nutzt doch schon CSS. Tu es konsequent. Weg mit den missbilligten HTML-Attributen, mache die entsprechenden Angaben im Stylesheet (Trennung von Struktur und Layout).
<table border="0" width="90" cellspacing="0" cellpadding="0">Dann ist auch kein Missbrauch des table-Elements zum Layouten nötig.
<td><img src="blindgif.gif" width="1" height="15" alt=""></td>Und auch der Unsinn mit „Grafiken“ als Platzhalter nicht.
<td bgcolor="aliceblue" class="linie"e><a href="seite2.html">link2</a></td>^
Die Zeile schau dir nochmal genauer an.Nun zu deiner Frage: Du legst die blaue Linie für das td-Element fest. Die kannst du nicht beim Eintreten von :hover für das eingeschlossene a-Element ändern, sondern musst das auf das td-Element anwenden. IIRC setzt aber der IE td:hover nicht um.
Bevor wir anfangen, an schlechtem Code herumzudoktern, gleich die Totaloperation: Du willst eine Aufzählung von Links, also eine Navigations_liste_. Also ul oder ol. (In XHTML 2 wird es nl geben, aber soweit sind wir noch nicht.)
<ol id="nl"> <li><a href="seite1.html">link1</a></li> <li><a href="seite2.html">link2</a></li> <li><a href="seite3.html">link3</a></li> <li><a href="seite4.html">link4</a></li> </ol>Diese formatierst du mit CSS:
Du willst nicht 1., 2., 3., 4. davor stehen haben?
ol#nl {list-style-type: none}Die Abstände setzt du mit margin und padding für ol und li. blindgif.gif kommt in die Mülltonne.
Wenn du die gewünschte blaue Linie für li angibst, stehst du wieder vor dem Problem, dass IEs li:hover nicht umsetzen. Gib also die Linie für die a-Elemente an. Diese sind aber Inline-Elemente, nehmen also nur soviel Platz ein wie nötig. Willst du die Linie über die ganze Breite (der Liste) haben, ändere diese Eigenschaft:
ol#nl a {display: block}Jetzt wirst du dich noch etwas mit CSS beschäftigen müssen; SELFHTML hilft dir dabei.
Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)-
Jetzt wirst du dich noch etwas mit CSS beschäftigen müssen; SELFHTML hilft dir dabei.
Stimmt. Habe noch die alte Selfhtml verison aufm Pc. Dann werd ich mir mal den Abschnitt CSS-basierte Layouts durchlesen.
Den kenn ich noch nicht.
Danke.-
Habe noch die alte Selfhtml verison aufm Pc.
koerschgen2001,
Dann würde ich schleunigst SELFHTML 8.1 herunterladen.Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
-
-