---

Hej

Jeg har ca 10 checkbokse som jeg har stillet pænt op i to kolonner ved at
sætte en fast bredde på <span>:

<input type="checkbox" name="cb1" value=""><span style="width:150px;">Noget
tekst</span>
<input type="checkbox" name="cb2" value=""><span style="width:150px;">Noget
andet tekst</span>
( linjeskift og flere checkbokse osv )

På denne måde kommer mine checkboxe til at stå pænt under hinanden.
Men Netscape ignorerer width=150%.
Jeg har fundet ud af at display:block kan ændre dette - men det det gør det
kun værre i mit tilfælde da det giver en ny linje for hver checkbox.
Hvad skal der til for at også Netscape gør som jeg vil ?

Mvh
Chrisser

---

Chrisser wrote:
> Jeg har ca 10 checkbokse som jeg har stillet pænt op i to kolonner
> ved at sætte en fast bredde på <span>:
>
> <input type="checkbox" name="cb1" value=""><span
> style="width:150px;">Noget tekst</span>
> <input type="checkbox" name="cb2" value=""><span
> style="width:150px;">Noget andet tekst</span>
> ( linjeskift og flere checkbokse osv )
>
> På denne måde kommer mine checkboxe til at stå pænt under hinanden.
> Men Netscape ignorerer width=150%.
> Jeg har fundet ud af at display:block kan ændre dette - men det det
> gør det kun værre i mit tilfælde da det giver en ny linje for hver
> checkbox.
> Hvad skal der til for at også Netscape gør som jeg vil ?

- og jeg kom desværre til at poste i den forkerte gruppe

X-FUT dk.edb.internet.webdesign.html ( crosspost til HTML og svar kan kun
ses derovre )

Sorry
Chrisser

---

Chrisser wrote:
> Chrisser wrote:
>
>>Jeg har ca 10 checkbokse som jeg har stillet pænt op i to kolonner
>>ved at sætte en fast bredde på <span>:
>>

[snip kode span kode]

>>
>>På denne måde kommer mine checkboxe til at stå pænt under hinanden.
>>Men Netscape ignorerer width=150%.
>>Jeg har fundet ud af at display:block kan ændre dette - men det det
>>gør det kun værre i mit tilfælde da det giver en ny linje for hver
>>checkbox.
>>Hvad skal der til for at også Netscape gør som jeg vil ?

Hej Chrisser.

Punkt 1. Benyt label elementet
Ved tekst til et form felt skal du benytte label elementet. Ex.

<input type="checkbox" name="cb1" id="cb1" value="" />
<label for="cb1">Noget tekst</label>

På den måde kan brugeren også klikke på teksten til checkboxen, fremfor med præcision at ramme
den lille checkbox. Det er attributten for på label elementet som peger på id'et på form feltet,
som gør at de bliver kædet sammen.

Punkt 2. Benyt en div wrapper og float elementerne

<div class="checkboxline">
   <input type="checkbox" name="cb1" id="cb1" value="" />
   <label for="cb1">Noget tekst</label>

   <input type="checkbox" name="cb2" id="cb2" value="" />
   <label for="cb2">Noget andet tekst</label>
</div>

<style type="text/css">
   .checkboxline label {
      float:left;
      width:150px;
   }
   .checkboxline input {
      float:left;
   }
   .checkboxline {
      clear:left;
   }
</style>

Håber at du kan bruge det

Hintzmann c",)

---

Martin Hintzmann Andersen wrote:
> Punkt 1. Benyt label elementet
> Ved tekst til et form felt skal du benytte label elementet. Ex.
>
> <input type="checkbox" name="cb1" id="cb1" value="" />
> <label for="cb1">Noget tekst</label>
>
> På den måde kan brugeren også klikke på teksten til checkboxen,
> fremfor med præcision at ramme den lille checkbox. Det er
> attributten for på label elementet som peger på id'et på form
> feltet, som gør at de bliver kædet sammen.

Tak - det vidste jeg ikke.

> Punkt 2. Benyt en div wrapper og float elementerne

[kode]

> Håber at du kan bruge det

Det virker perfekt i min Netscape (7.1), til gengæld ser mine checkbokse ud
som om de er kastet tilfældigt på i IE6.0
Er der noget jeg kan gøre ved det ( uden at ødelægge den fine visning i NN)
?

HTML-koden ( fra vis kilde - jeg kan desværre ikke lige uploade et eks.) ser
sådan ud - css'en er nøjagtig det samme som i dit indlæg (copy/paste):

<div class="checkboxline">
<input type="checkbox" name="lmtyper0" id="lmtyper0" value="1"/><label
for="lmtyper0"> Almindelig bolig</label>
<input type="checkbox" name="lmtyper1" id="lmtyper1" value="3"/><label
for="lmtyper1"> Erhverv</label>
<br>
<input type="checkbox" name="lmtyper2" id="lmtyper2" value="2"/><label
for="lmtyper2"> Institution</label>
<input type="checkbox" name="lmtyper3" id="lmtyper3" value="4"/><label
for="lmtyper3"> Garage</label>
<br>
<input type="checkbox" name="lmtyper4" id="lmtyper4" value="5"/><label
for="lmtyper4"> Carport</label>
<input type="checkbox" name="lmtyper5" id="lmtyper5" value="6"/><label
for="lmtyper5"> Enkeltværelse</label>
<br>
<input type="checkbox" name="lmtyper6" id="lmtyper6" value="7"/><label
for="lmtyper6"> Ungdomsbolig</label>
<input type="checkbox" name="lmtyper7" id="lmtyper7" value="8"/><label
for="lmtyper7"> Ældrebolig</label>
<br>
<input type="checkbox" name="lmtyper8" id="lmtyper8" value="9"/><label
for="lmtyper8"> Kollektivbolig</label>
<input type="checkbox" name="lmtyper9" id="lmtyper9" value="10"/><label
for="lmtyper9"> Kælderrum m.v.</label>
<br>
<input type="checkbox" name="lmtyper10" id="lmtyper10" value="11"/><label
for="lmtyper10"> Parkeringspladser</label>
</div>


Chrisser

---

Chrisser wrote:
>
> Det virker perfekt i min Netscape (7.1), til gengæld ser mine checkbokse ud
> som om de er kastet tilfældigt på i IE6.0
> Er der noget jeg kan gøre ved det ( uden at ødelægge den fine visning i NN)
> ?
>
> HTML-koden ( fra vis kilde - jeg kan desværre ikke lige uploade et eks.) ser
> sådan ud - css'en er nøjagtig det samme som i dit indlæg (copy/paste):
>

Du skal blot fjerne br elementet og i stedet benytte div-blokken med class'en "checkboxline",
for hver "linie".

[snip kode med br]

<div class="checkboxline">
<input type="checkbox" name="lmtyper0" id="lmtyper0" value="1"/><label
for="lmtyper0"> Almindelig bolig</label>
<input type="checkbox" name="lmtyper1" id="lmtyper1" value="3"/><label
for="lmtyper1"> Erhverv</label>
</div>

<div class="checkboxline">
<input type="checkbox" name="lmtyper2" id="lmtyper2" value="2"/><label
for="lmtyper2"> Institution</label>
<input type="checkbox" name="lmtyper3" id="lmtyper3" value="4"/><label
for="lmtyper3"> Garage</label>
</div>

osv.

Hintzmann c",)

---

Martin Hintzmann Andersen wrote:
> Du skal blot fjerne br elementet og i stedet benytte div-blokken
> med class'en "checkboxline", for hver "linie".

Hvor er det perfekt

Takker og nejer
Chrisser

---

Martin Hintzmann Andersen <no@spam.dk> skrev:

> <input type="checkbox" name="lmtyper1" id="lmtyper1"
> value="3"/><label for="lmtyper1"> Erhverv</label>

Må man gøre sådan?

<label for="lmtyper1" class="label"><input type="checkbox"
name="lmtyper1" id="lmtyper1" value="3"/ Erhverv</label>

Det er mest for at kunne give checkbox og label en style så
man kan se hvad der hører sammen.

--
Allan
http://html-faq.dk

---

"Allan Vebel" <nospam@vebel.dk> wrote in news:3fbd3daf$0$245
$bc7fd3c@news.sonofon.dk:

> Må man gøre sådan?
>
> <label for="lmtyper1" class="label"><input type="checkbox"
> name="lmtyper1" id="lmtyper1" value="3"/ Erhverv</label>

Med al sandsynlighed: Nej.

> Det er mest for at kunne give checkbox og label en style så
> man kan se hvad der hører sammen.

Der skal du ikke ændre i HTML'en. Brug i stedet:

label[for="lmtyper1"], input#lmtyper1 {

}

For at fange label og input-felt. Ellers læg et <fieldset> eller <div>
omkring.

--
Personal: <http://www.solitude.dk>
File Thingie - PHP File Manager <http://www.solitude.dk/filethingie/>

---

Allan Vebel wrote:
> Martin Hintzmann Andersen <no@spam.dk> skrev:
>
>
>><input type="checkbox" name="lmtyper1" id="lmtyper1"
>>value="3"/><label for="lmtyper1"> Erhverv</label>
>
>
> Må man gøre sådan?
>
> <label for="lmtyper1" class="label"><input type="checkbox"
> name="lmtyper1" id="lmtyper1" value="3"/ Erhverv</label>
>
> Det er mest for at kunne give checkbox og label en style så
> man kan se hvad der hører sammen.
>

Jeg går ud fra at du mener:
<label for="lmtyper1" class="label"><input type="checkbox" name="lmtyper1" id="lmtyper1"
value="3" />Erhverv</label>

Ja, det må man godt. Se sidste eksempel i "17.9.1 The LABEL element"
http://www.w3.org/TR/html401/interact/forms.html#h-17.9

Jeg har dog haft problemer med at styre positionenen af label teksten og input feltet.
Hvis du f.eks. på label elementet sætter padding-top til x-antal em, så gælder det både teksten
og input feltet. Men det er bare et eksempel.

Derfor syntes jeg at det er lettere at have dem hver for sig med en div-blok som wapper, når man
skal style dem.

altså ...

<div class="chkboxline">
<input type="checkbox" name="lmtyper1" id="lmtyper1" value="3" />
<label for="lmtyper1">Erhverv</label>
</div>

eller som text-felt ...

<div class="fieldline">
<label for="txtnavn">Fornavn</label>
<input type="text" name="txtnavn" id="txtnavn" value="" />
</div>


Hintzmann c",)

---

Martin Hintzmann Andersen <no@spam.dk> skrev:

> Derfor syntes jeg at det er lettere at have dem hver for
> sig med en div-blok som wapper, når man skal style dem.

Det er også sådan jeg ville gøre i praksis.

--
Allan
http://html-faq.dk

---

Allan Vebel wrote:

> Må man gøre sådan?
>
> <label for="lmtyper1" class="label"><input type="checkbox"
> name="lmtyper1" id="lmtyper1" value="3"/ Erhverv</label>
>
> Det er mest for at kunne give checkbox og label en style så
> man kan se hvad der hører sammen.

Vi har brugt label en del på H.C. Andersen Centret, måske kan noget af
brugen inspirere til noget brugbart. Se fx:

<http://www.andersen.sdu.dk/titler/vaelg.html?multilang=true>

eller

<http://www.andersen.sdu.dk/forskning/bib/bibsoeg.html>

mvh

Jesper Brunholm

---

Jesper Brunholm <nospam@brunholm-scharff.dk> wrote in news:3fc0fc41$1
@news.wineasy.se:

> Vi har brugt label en del på H.C. Andersen Centret, måske kan noget af
> brugen inspirere til noget brugbart. Se fx:

Jeg kan ikke lade være med at påtale at I har valgt at cursoren skal skifte
til en hånd når man flytter den over en label. Umiddelbart vil jeg sige at
det ikke er videre smart. Hånden signalerer et link, og der er intet link.

--
Personal: <http://www.solitude.dk>
File Thingie - PHP File Manager <http://www.solitude.dk/filethingie/>

---

Andreas Haugstrup Pedersen wrote:

>>Vi har brugt label en del på H.C. Andersen Centret, måske kan noget af
>>brugen inspirere til noget brugbart. Se fx:
>
> Jeg kan ikke lade være med at påtale at I har valgt at cursoren skal skifte
> til en hånd når man flytter den over en label. Umiddelbart vil jeg sige at
> det ikke er videre smart. Hånden signalerer et link, og der er intet link.

Du er velkommen til at påtale. Vi har gjort det ud fra synspunktet at
hånden signalerer en handlingsmulighed.

Label er efter min erfaring så lidt benyttet, så hvis ikke cursoren
ændrer sig når man fører musen hen over, så vil brugeren ikke opdage den
mulighed der er tilstede.
Et alternativ kunne selvfølgelig være at lade label-feltet optræde mere
knap-agtigt, og på den måde vise handlingsmuligheden, men jeg tror ærlig
talt man skal have læst en del kommunikationsteori for at blive
forbavset over at man ikke ryger om på en ny side når man trykker på
linket til at checkboksen udfyldes.

Kan du i øvrigt ikke give et link til at intentionen med hånden er lige
præcis 'link' og ikke 'handling' - det eneste jeg lige kan finde siger
nemlig ikke noget i den retning
(http://www.w3.org/TR/NOTE-css-potential-19970819.html)

mvh

Jesper Brunholm

---

Jesper Brunholm <nospam@brunholm-scharff.dk> wrote in
news:3fc22184@news.wineasy.se:

> Label er efter min erfaring så lidt benyttet, så hvis ikke cursoren
> ændrer sig når man fører musen hen over, så vil brugeren ikke opdage
> den mulighed der er tilstede.

Det er standard-handlingsmulighed i Windows at man kan klikke på en label og
ikke kun på selve formular-dingenoten. Det er kun på internet at dette ikke
er blevet benyttet i vid udstrækning.

> Kan du i øvrigt ikke give et link til at intentionen med hånden er lige
> præcis 'link' og ikke 'handling' - det eneste jeg lige kan finde siger
> nemlig ikke noget i den retning
> (http://www.w3.org/TR/NOTE-css-potential-19970819.html)

Jo, først og fremmest har det været normal praksis siden gud-ved-hvornår. Det
i sig selv betyder rigtigt meget. Folk er vant til at når der er en hånd så
kommer man til en ny side.

Ellers er der den gode gamle CSS-specifikation der siger:

"pointer: The cursor is a pointer that indicates a link."
<http://www.w3.org/TR/CSS21/ui.html#cursor-props>

--
Personal: <http://www.solitude.dk>
File Thingie - PHP File Manager <http://www.solitude.dk/filethingie/>

---

"Chrisser" <invalid@invalid.invalid> writes:

> Jeg har ca 10 checkbokse som jeg har stillet pænt op i to kolonner ved at
> sætte en fast bredde på <span>:

Fejl! Span er et inline-element, og man kan ikke sætte bredde på
inline-elementer. IE tillader det vist, men det er en fejl.

> <input type="checkbox" name="cb1" value=""><span style="width:150px;">Noget
> tekst</span>
> <input type="checkbox" name="cb2" value=""><span style="width:150px;">Noget
> andet tekst</span>
> ( linjeskift og flere checkbokse osv )
>
> På denne måde kommer mine checkboxe til at stå pænt under hinanden.
> Men Netscape ignorerer width=150%.

Bingo. Det skal den også.

> Jeg har fundet ud af at display:block kan ændre dette - men det det gør det
> kun værre i mit tilfælde da det giver en ny linje for hver checkbox.
> Hvad skal der til for at også Netscape gør som jeg vil ?

Hmm. Prøv at sætte (med CSS):
display:inline;
display:inline-block;
display:-moz-inline-block;

IE forstår kun den første, men den tillader bredde på inline-elementer.
Opera forstår den anden, og laver elementet til en inline-block (et
block-element der liver i flow).
Mozilla bruger -moz-prefikset, ellers virker det ens.

"inline-block" er en del af CSS 2.1, men ikke CSS 2.
<URL:http://www.w3.org/TR/CSS21/visudet.html#q12>
IE forstår ikke engang CSS 2 særlig godt.

Ingen garanti for hvordan det virker i andre browsere.

Alternativt kunne du bruge positionerede elementer eller floatede.
(jeg ville nok bruge float)

---
<div style="width:160px;float:left;clear:left;">
<input type="checkbox" name="cb1" value=""> Noget tekst</div>
<div style="width:160px;float:left;">
<input type="checkbox" name="cb2" value=""> Noget andet tekst</div>

<div style="width:160px;float:left;clear:left;">
<input type="checkbox" name="cb3" value=""> Noget tredje tekst</div>
....
<div style="clear:left;"><div>
---

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

---

Lasse Reichstein Nielsen wrote:
>> Jeg har ca 10 checkbokse som jeg har stillet pænt op i to kolonner
>> ved at sætte en fast bredde på <span>:
>
> Fejl! Span er et inline-element, og man kan ikke sætte bredde på
> inline-elementer. IE tillader det vist, men det er en fejl.

Ja det fandt jeg jo ud af...

>> På denne måde kommer mine checkboxe til at stå pænt under hinanden.
>> Men Netscape ignorerer width=150%.
>
> Bingo. Det skal den også.

Hmm

>> Jeg har fundet ud af at display:block kan ændre dette - men det
>> det gør det kun værre i mit tilfælde da det giver en ny linje for
>> hver checkbox.
>> Hvad skal der til for at også Netscape gør som jeg vil ?
>
> Hmm. Prøv at sætte (med CSS):
> display:inline;
> display:inline-block;
> display:-moz-inline-block;

Jeg prøvede noget lignende men det gik ikke, jeg har gang i noget med float
som jeg har fået hjælp til i htmlgruppen, så må vi jo se om ikke jeg kan få
det til at virke

Mvh
Chrisser

---

Lasse Reichstein Nielsen wrote:
> Alternativt kunne du bruge positionerede elementer eller floatede.
> (jeg ville nok bruge float)

Løst med ovenstående i htmlgruppen - fik hjælp til det - det blev til:
<div class="checkboxline">
<input type="checkbox" name="lmtyper0" id="lmtyper0" value="1"/><label
for="lmtyper0"> Almindelig bolig</label>
<input type="checkbox" name="lmtyper1" id="lmtyper1" value="3"/><label
for="lmtyper1"> Erhverv</label>
</div>
<div class="checkboxline">
<input type="checkbox" name="lmtyper2" id="lmtyper2" value="2"/><label
for="lmtyper2"> Institution</label>
<input type="checkbox" name="lmtyper3" id="lmtyper3" value="4"/><label
for="lmtyper3"> Garage</label>
</div>
osv.
- med tilhørende css:

<style type="text/css">
..checkboxline label {
float:left;
width:150px;
}
..checkboxline input {
float:left;
}
..checkboxline {
clear:left;
}
</style>

Simpelt og lækkert

Chrisser

---

"Chrisser" <invalid@invalid.invalid> writes:

> Løst med ovenstående i htmlgruppen - fik hjælp til det - det blev til:

> <input type="checkbox" name="lmtyper0" id="lmtyper0" value="1"/><label
> for="lmtyper0"> Almindelig bolig</label>

Her ville jeg lade <label>-elementet omkranse input-elementet:
<label for="lmtyper0"><input type="checkbox" name="lmtyper0"
id="lmtyper0" value="1"/> Almindelig bolig</label>
Så virker det i alle browsere der forstår <label>. Nogle af dem forstår
ikke "for"-attributten (kan dog ikke lige huske hvilke).

> Simpelt og lækkert

CSS er godt :)

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

---

Lasse Reichstein Nielsen wrote:
> Her ville jeg lade <label>-elementet omkranse input-elementet:
> <label for="lmtyper0"><input type="checkbox" name="lmtyper0"
> id="lmtyper0" value="1"/> Almindelig bolig</label>
> Så virker det i alle browsere der forstår <label>. Nogle af dem
> forstår ikke "for"-attributten (kan dog ikke lige huske hvilke).

Ah tak, det vidste jeg heller ikke. Jeg har aldrig brugt <label> før da jeg
ikke troede at den havde nogle særlige egenskaber - jeg er blevet klogere nu



> CSS er godt :)

Yep
Chrisser

---

Lasse Reichstein Nielsen wrote:
>
> Her ville jeg lade <label>-elementet omkranse input-elementet:
> <label for="lmtyper0"><input type="checkbox" name="lmtyper0"
> id="lmtyper0" value="1"/> Almindelig bolig</label>
> Så virker det i alle browsere der forstår <label>. Nogle af dem forstår
> ikke "for"-attributten (kan dog ikke lige huske hvilke).
>

NS4 og Opera 6 kan ikke kæde label og input sammen. Lige meget om det ved hjælp af "nested"-
eller "for"-metoden.

MSIE5.x-6 kan ikke kæde label og input sammen med "nested"-metoden, men "for" virker fint.

Mozilla og Opera 7 kan både benytte "nested" og "for" -metoderne.

Derfor anbefaler jeg at man benytter "for"-metoden.

Hintzmann c",)