Liste nicht valide

sero79

Hallo,

ich habe folgende Liste erstellt:

HTML

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> </title>
<meta name="author" content="srost">
<meta name="editor" content="html-editor phase 5">




<style type="text/css">
ul.liste_a, ul.liste_b {
width:800px;
list-style:none;
float:left;
border:0px solid #000000;
}


ul.liste_a {
background: #DFDFDF;
}
ul.liste_b {
background: #FFFFFF;
}
ul.liste_a li, ul.liste_b li{
height:18px;
line-height:18px;
width:25%;
float:left;
border:0px solid #000000;
}


#block a{
cursor: pointer;
text-decoration:none;
color:#8C8C8C;
}


#block a:hover{
color:#FF0000;
}




</style>






</head>


<body>












<div  id="block">


	<a href="#">
         <ul class="liste_a">
         [*]Name 1
         [*]Vorname 1
         [*]Email 1
         [*]Ort 1
         [/list]</a>


	<a href="#">
         <ul class="liste_b">
         [*]Name 2
         [*]Vorname 2
         [*]Email 2
         [*]Ort 2
         [/list]</a>


	<a href="#">
         <ul class="liste_a">
         [*]Name 3
         [*]Vorname 3
         [*]Email 3
         [*]Ort 3
         [/list]</a>


	<a href="#">
         <ul class="liste_b">
         [*]Name 4
         [*]Vorname 4
         [*]Email 4
         [*]Ort 4
         [/list]</a>
</div>


</body></html>

Alles anzeigen

Die Liste nutze ich, um die 4 Elemente: Name, Vorname, Email und Ort in Spalten anzuordnen. Jede Listenzeile ist in ein Link (beim ueberfahren faerbt sich der Text rot - a:hover). Nach W3C Standards ist das valide: a umschliesst ein ul Element. Allerdings faellt mir keine bessere Loesung ein. Rein technisch funktioniert es ja auch. Habt ihr Vorschlaege fuer das Problem?

Sero

Dodo

gib den link in deine li-Elemente

Code

li a
{ display:block;
}

sero79

Das habe ich schon versucht, aber dann wird beim ueberfahren nur das jeweilge Listenelement (z.B. Name) zum link und nicht die gesamte Zeile. Ich moechte, das die gesamte Zeile ein link ist und bei a:hover sich die Schriftfarbe und Hintergrundfarbe der Zeile aendert.

Dodo

ul:hover?

sero79

ul:hover funktioniert irgendwie nicht . Allerdings gefaellt mir nicht, dass ich in jedem li einen Link schreiben muss mit gleichem Ziel.
Vielleicht kann man das ja ganz anders loesen?

sejuma

Ich hätte eine Tabelle mit tr: hover gemacht.
Allerdings kann der IE nur a: hover und kein Hover bei anderen Elementen.
Mit einem Javascript kann man auch den IE trimmen. Aber da kenn ich mich nicht aus.
Siehe auch hier csshover.htc:
http://www.drweb.de/leseproben/klappmenu.shtml

Dodo

ul:hover sollte funktionieren
nur nicht in IE5/6

mit JavaScript
<ul onmouseover="einfaerben();">

sero79

also nochmal zusammengefasst: in jedes li den link setzen (da komme ich nicht drumherum) und mit ul:hover und <ul onmouseover="einfaerben();"> die gesamte Zeile einfaerben wenn mouseover.

sejuma: man die das auch mit einer Tabelle loesen, aber ich finde listen besser.

Warum ist das eigentlich vailde, es funktioniert doch, wie ich es ursprunglich versucht hatte?

sejuma

Sagen wir's mal so:
Es wurden Regeln, Standards definiert. Und dagegen "verstößt" dein Quelltext, weil diese Konstruktion nicht erlaubt ist, selbst wenn sie funktioniert.
Ist ungefähr so, wie wenn du ein Wort falsch schreibst, das im Duden nach der Rechtschreibung eben anders geschrieben wird.
Davon geht die Welt auch nicht unter.
Allerdings: Generell sollten sich Browser an die definierten Regeln halten. Tatsächlich ist es so, dass es der eine Browser mehr, der andere weniger tut.
Unterschiedliche Browser haben somit unterschiedliche Toleranzen.
Somit kann es in deinem Browser funktionieren, in einem anderen muss es nicht unbedingt klappen.
Um möglichst sicher zu gehen, dass die Seite in allen Browsern einheitlich dargestellt wird, sollte man sich eben an die Standards halten und seine Seiten valide coden. Eine Garantie für ein einheitliches Ergebnis hast du deshalb aber auch nicht.
Teste deinen "nicht-validen" Code mal in den unterschiedlichsten Browsern. Wenn sich keiner dran stört, kannst du's auch lassen. Dann hast du zwar gegen eine "Norm" verstoßen, aber keiner hat's gemerkt.

Dodo

Zitat von sero79

also nochmal zusammengefasst: in jedes li den link setzen (da komme ich nicht drumherum) und mit ul:hover und <ul onmouseover="einfaerben();"> die gesamte Zeile einfaerben wenn mouseover.

Also ich weiß nicht ob du javascript kannst.
Aber einfaerben() muss eine Javascript-Funktion sein.
du kannst es auf SelfHTML nachlesen, wie es geht.
ul:hover brauchst dud ann nicht.

Zitat von sero79

Warum ist das eigentlich vailde, es funktioniert doch, wie ich es ursprunglich versucht hatte?

Wenn etwas valide ist (in HTML) heißt es nicht unbedingt, dass es richtig ist.
Das A-Element darf u.A. keine Listen enthalten undauch keine Listenelemente

sero79

Danke noch mal fuer euer Hilfe.
Ich habe mal die invalide Liste in den gaengigen aktuellen Browsern getestet und es funktioniert. Ich gehe aber auf Nummer sicher und fuege den Link in das Listenelement email ein. Das mit dem Hintergrund bei a:hover lasse ich weg.
Aber mich wuerde trotzdem mal interessieren wie man mein Beispiel umsetzen koennte: jede Zeile = Link, Spaltenartige Anordnung von z.B. 4 Elementen. Beim ueberfahren der Zeile a:hover und bei Klick wird der Link ausgeloest.

Dodo

Code

[url='seite.html']Text[/url]

Tags