Auge: div element verlinken ohne display:block möglich?

Beitrag lesen

Hallo

habs jetzt als tabelle mit onmouseover,onclick usw gelöst. ist vielleicht nicht das elleganteste aber das was vorhin dann doch am schnellsten zu lösen war.

»»doch - du kannst einen link nehmen, den mit inline-elemente befüllen und diese ausrichten - dann geht auch eine komplettverlinkung

jetzt erst hab ich glaub ich verstanden was du mir sagen wolltest. werd bei gelegenheit auch das noch versuchen.

Beispiel:

HTML

<ul class="liste">  
 <li class="datensatz"><a href="#"><span class="vorname">Willy</span><span class="familienname">Wipfel</span><span class="geburtstag">29.02.1977</span><span class="plz">99999</span><span class="wohnort">Wipfelhausen</span></a></li>  
 <!-- weitere Datensätze -->  
</ul>

CSS

  
ul.liste {  
list-style-type:none;  
/* weitere Angaben, z.B. für margin etc. */  
}  
/* mit float werden die Listenpunkte, so genug  
Platz da ist, auch nebeneinander dargestellt */  
.liste li {  
float:left;  
width:20em;  
margin:1em;  
}  
/* Der Link wird zum Block und benutzt sämtlichen  
Raum im Listenpunkt, der verfügbar ist. */  
.datensatz a {  
display:block;  
margin:0;  
}  
/* Die <span>s im Link werden ebenfalls als Blöcke formatiert,  
untereinander dargestellt und bekommen einen Text vorangestellt,  
was allerdings im MSIE _nicht_ funktioniert */  
.datensatz a .vorname,  
.datensatz a .familienname,  
.datensatz a .geburtstag,  
.datensatz a .plz,  
.datensatz a .wohnort {  
display:block;  
margin:0.5em;  
}  
.datensatz a .vorname:before {  
content:"Vorname: ";  
}  
.datensatz a .familienname:before {  
content:"Familienname: ";  
}  
.datensatz a .geburtstag:before {  
content:"Geburtstag: ";  
}  
.datensatz a .plz:before {  
content:"PLZ: ";  
}  
.datensatz a .wohnort:before {  
content:"Wohnort: ";  
}

Wie gesagt, :before funktioniert nicht in allen Browsern und wenn eine andere Darstellung gewünscht ist, muss sowieso anderer CSS-Code her. Aber es ist das, was suit meinte. Nur ein Link pro Datensatz, derohne JavaScript funktioniert, alle Informationen enthält und diese Informationen so ausgezeichnet, dass man auf sie sowohl mit CSS, als z.B. auch mit JavaScript zugreifen kann.

Noch eine Idee, die sich natürlich auch innerhalb einer Tabelle realisieren ließe:

Anstatt der von mir der Verständlichkeit wegen gewählten, deutschsprachigen Klassennamen kannst du auch die für Microformats vorgesehenen Klassennamen (für Personen: hcard) benutzen, womit die Liste auch für entprechende, Microformate auswertende Programme zugänglich wäre.

Tschö, Auge

--
Die deutschen Interessen werden am Liechtenstein verteidigt.
Veranstaltungsdatenbank Vdb 0.2