Gunnar Bittersmann: linie mit a:hover ändern

Beitrag lesen

SELF-Forum

linie mit a:hover ändern

Gunnar Bittersmann Homepage des Autors
+2 Informationen zu den Bewertungsregeln

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)
Beitrag melden
+2
Informationen zu den Bewertungsregeln