[Chidori]

Som ni ser vill jag ha frågetecknet längst till höger men har inte en susnign om hur jag ska fixa det. Koden jag arbetar med är en det en annan snubbe som skapat från grunden. Jag tycker inte om hans lösning där han hade helt simpelt satt ut blanksteg för att flytta frågetecknet till höger.

Har ni någon kodsnåll lösning till att flytta tecknet till höger med kanske runt en 5px marginal till kanten?

<tr>
<td>Country:</td>
<td valign="middle" id="goinput">
<label><select name="select" size="1" id="select"><option value="Sweden" selected="selected">Sweden</option></select></label>
<a href="#"><img src="images/what.jpg" alt="" width="20" height="20" border="0" /></a>
</td>
</tr>

[KarlRoos]

Kör med 3 kolumner och colspan="2" på dem som inte har frågetecken.

Ex..

<tr>
<td>First name:</td>
<td colspan="2"><input type="text" /></td>
</tr>

Och ...

<tr>
<td>Country:</td>
<td><select>
<option>Sweden</option>
</select></td>
<td><a href="?"><img src="?" /></a></td>
</tr>

Hoppas du förstår vad jag menar, annars kan jag koda ihop ett "riktigt" exempel.

5px marginal gör du i CSS, td a img {margin: 5px;} eller något.

[Chidori]

Tack, satt och tänkte på den lösningen själv men samtidigt undra jag om det fanns någon smartare lösning. Tanken är sen att det ska komma upp en liten ruta med hjälptext om man för musen över den.

[martine]

Den smartaste och mest korrekta lösningen är att ha bilden i som bakgrund i css:en och skippa tabellerna till förmån för label, fieldset och andra semantiskt korrekta element.

label {background: url(frågetecken.gif) 50% right no-repeat}

[hnn]

Originally posted by martine@Feb 25 2009, 12:59

Den smartaste och mest korrekta lösningen är att ha bilden i som bakgrund i css:en och skippa tabellerna till förmån för label, fieldset och andra semantiskt korrekta element.
label {background: url(frågetecken.gif) 50% right no-repeat}

Kan du utveckla varför det är mest "korrekt"?

[tartareandesire]

Ursprungligen postat av hnn

Kan du utveckla varför det är mest korrekt?

Den eviga tabell-diskussionen =) Tycker väl också man bör följa semantiken så länge det inte blir alltför snårigt. Tycker dessutom det ser bättre ut som du har det men det är väl en smaksak =)

[Chidori]

Kan ni ge mig kod exempel på hur ni hade lagt upp det ?

[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.)

[Magnus_A]

Enklast är bäst:
gör en lista av alla rader med inputelement.
sätt en lagom width på listelementen
sätt bilden lös efter inputelementet med align=right.

Fungerar i både IE och FF.

PS. vill du inte att bilden ska ligga ute i kanten sätter du lagom mycket padding på den.

PS2: vill du ha tooltip så sätter du en title på bilden med den text du önskar, alternativt gör ett block synligt med onmouseover på bilden och osynligt med onmouseout.
googla på tooltip och javascript.
BAkgrundsbilder är säkert bra men är svåra att sätta tooltip på.
DS

[martine]

Ursprungligen postat av Magnus_A

Enklast är bäst:
gör en lista av alla rader med inputelement.
sätt en lagom width på listelementen
sätt bilden lös efter inputelementet med align=right.

Nu frågade ju inte Chidori efter den simplaste lösningen utan efter hur man kan förbättra koden.

Om man vill minska ner koden så går det ju utmärkt att använda:

<label>Land: <input type="text" name="land" value="Sverige"/><span title="Välj land"></span></label>

Och fortfarande vara semantisk.

Originally posted by -Magnus_A@Feb 26 2009, 15:19
BAkgrundsbilder är säkert bra men är svåra att sätta tooltip på.

Bakgrunden sätter du på span-elementet och bibehåller möjligheten att ändra samtliga ?-symboler i formuläret (eller till och med i samtliga formulär).


list-element skulle jag reservera för liknande behov:

<ul>
<li><label><input type="radio" name="val" value="a"/> Sematisk design är toppen</label></li>
<li><label><input type="radio" name="val" value="b"/> Tabeller är guld värda, desto fler desto bättre</label></li>
</ul>

(en lista av alternativ)

Ursprungligen postat av Magnus_A

PS2: vill du ha tooltip så sätter du en title på bilden med den text du önskar, alternativt gör ett block synligt med onmouseover på bilden och osynligt med onmouseout.
googla på tooltip och javascript.

Jag gav ju ett komplett exempel ovan på hur man gör "tooltip" i inlägget ovan utan att behöva ens krångla med javaskript. Enklast kanske är bäst trots allt…

(Men för all del - det går ju att göra även som Magnus_A föreslår men det är knappast särskilt mycket enklare när väl all css och javascript kommer till.)