[martine]

Originally posted by Chidori@Feb 25 2009, 16:52
Kan ni ge mig kod exempel på hur ni hade lagt upp det ?

För att ta samma kodsnutt som du visade:

<div>
<label for="land">Country</label>
<select size="1" name="land"><option value="se">Sweden</option></select>
<span><dfn>För närvarande kan endast Sverige väljas</dfn></span>
</div>

Alltihop sedan i ett fieldset-element med en legend.

Med följande css:

fieldset div {position: relative}
label {display: inline-block; width: 10em}
fieldset span {width: 10px; height: 10px; background: url(frågetecken.gif) center center no-repeat; position: absolute; top: 50%; right: 0.2em; z-index: 100}
fieldset span>dfn {display: none; border: 1px solid black; background-color: #eee; width: 5em}
fieldset span:hover>dfn {display: block; position: absolute; top: -0.5em; right: 1em; z-index: 200}

Alternativt och lite mer kompakt (men semantiskt kanske lite mindre logiskt) kan du förstås även använda:

<div title="För närvarande kan endast Sverige väljas">
<label for="land">Country</label>
<select size="1" name="land"><option value="se">Sweden</option></select>
</div>

med bara label ovan i css:en.

Jag har inte testat det så hur det ser ut får du själv prova… (Poängen är att info-texten ska visas automatiskt när man åker över frågetecket - eller i andra exemplet över raden.)

hnn:
1. label-elementet är mer korrekt eftersom det är avsett för det ändamålet även om ett td-element även kan användas. (En sax är mer korrekt att använda för att klippa även om det går utmärkt även med en kniv, om du förstår liknelsen.)
2. att inte ha bilden med som en bild på sidan är mer korrekt eftersom den inte är del av innehållet utan formgivningen på sidan (formgivning hör hemma i css:en). Det är också mycket enklare att uppdatera och underhålla eftersom du endast måste ändra på ett ställe om du byter symbol.
(Jag misstänker att du egentligen mycket väl förstår vad jag menar - semantisk design är ju av någon anledning en väldigt känslig fråga.)