---

Jeg har en listbox og et textarea. De skal placeres ved siden af
hinanden, og derudover skal der være en label ovenover hver.

Hvordan løser jeg det med CSS?

Jeg har løst det med en tabel, men jeg synes jo det ville være pænest
hvis det kunne gøres med CSS.

Jeg har ikke umiddelbart mulighed for at poste et link.

--
Thomas Due
Software Developer
Scanvaegt Nordic A/S
Posted with XanaNews version 1.16.1.11

---

Thomas Due skrev:

> Jeg har en listbox og et textarea. De skal placeres ved siden
> af hinanden, og derudover skal der være en label ovenover
> hver.

En mulighed er at benytte float:

<div id="box">
   <label for="lbox">Labeltekst</label><br />
   <input type="text" id="lbox" />
</div>
<div id="box">
   <label for="tbox">Labeltekst</label><br />
   <textarea...></textarea>
</div>


> Jeg har løst det med en tabel, men jeg synes jo det ville være
> pænest hvis det kunne gøres med CSS.

Tabeller er ikke altid af det onde. En opstilling som fx

(ses med fastbreddeskrift)

Fornavn: [___________]
Efternavn: [___________]
Adresse: [___________]
Postnr: [___________]
By: [___________]

- er bøvlet at lave uden en tabel. Her vil jeg også mene at der er
tale om en tabelopstilling, hvor tabeller er det oplagte valg til
en implementering.


> Jeg har ikke umiddelbart mulighed for at poste et link.

Det var en skam. Det er stadig meget lettere at hjælpe med et link.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

Jens Gyldenkærne Clausen wrote:

> Tabeller er ikke altid af det onde. En opstilling som fx
>
> (ses med fastbreddeskrift)
>
> Fornavn: [___________]
> Efternavn: [___________]
> Adresse: [___________]
> Postnr: [___________]
> By: [___________]
>
> - er bøvlet at lave uden en tabel. Her vil jeg også mene at der er
> tale om en tabelopstilling, hvor tabeller er det oplagte valg til
> en implementering.

Det kan dog godt lade sig gøre:

<style type="text/css">
div.formrow
{
clear: both;
padding-top: 1em;
}

div.formrow label
{
float:left;
width:15em;
}
</style>

<div class="formrow">
<label for="fornavn">Fornavn:</div>
<input type="text" id="fornavn" name="fornavn" />
</div>

Dette er bl.a. implementeret på:

<http://www.vih.dk/bestilling/bestil_materiale_form.php>

Derfor kan det være meget relevant, om der var en yderligere diskussion
af, om tabeller er den rette måde at opstille formularen på.

--
Lars Olesen
Konkurrence på <http://www.fodboldenslegestue.dk>
Kan det gøres bedre? Navigation og brugervenlighed!

---

Lars Olesen skrev:

>> Tabeller er ikke altid af det onde. En opstilling som fx

[snip]

>> - er bøvlet at lave uden en tabel.

> Det kan dog godt lade sig gøre:

Det er jeg helt klar over. Men jeg mener at det er lidt bøvlet på
grund af følgende linje:


> width:15em;

- der definerer bredden på dine labels. Det betyder at indholdet i
labels er underlagt en restriktion der er defineret i css-filen -
nemlig at maksbredden er 15em. Det giver fin mening at bruge netop
em her - fordi man så burde være sikret mod ombrydningsfejl fordi
folk har større skrifttyper end man selv benytter.

Men det betyder samtidig at webdesigneren skal vide at en label
ikke bliver længere end 15 tegn (hvis man vil undgå ombrydning) -
samt at der nemt kan blive for meget luft mellem labels og
inputelementer, fordi de 15 tegn man maks tør tillade i en label
ofte vil fylde noget mindre end 15em i bredden.

Hvis man bruger en tabel, vil inputelementerne i kolonne to
automatisk rette ind så det passer med den længste labeltekst
(forudsat at man ikke eksplicit definerer bredden). Den
fleksibilitet synes jeg er rar at have.

> Derfor kan det være meget relevant, om der var en yderligere
> diskussion af, om tabeller er den rette måde at opstille
> formularen på.

Den tager jeg gerne. Jeg mener bestemt ikke der er noget semantisk
forkert i at undlade en tabel i en sådan formularopstilling (som du
har gjort det på vih.dk). Men omvendt mener jeg så også at en tabel
sagtens kan forsvares, fordi opstilling i rækker og kolonner netop
er det der kendetegner en tabel.

Med div/css kan man sagtens placere indhold i én dimension - altså
tilpasse indhold vandret eller lodret. Men div/css giver ikke
mulighed for at have række- og kolonne-relationer. Hvis man har
brug for det, er tabellen så vidt jeg kan se eneste fornuftige
mulighed.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

Thomas Due wrote:
> Jeg har en listbox og et textarea. De skal placeres ved siden af
> hinanden, og derudover skal der være en label ovenover hver.
>
> Hvordan løser jeg det med CSS?
>
> Jeg har løst det med en tabel, men jeg synes jo det ville være pænest
> hvis det kunne gøres med CSS.
>
> Jeg har ikke umiddelbart mulighed for at poste et link.
>

Hej thomas

Prøv med følgende:

<style type="text/css">
..fld {
   width:150px;
   float:left;
}   
..fld label {
   display:block;
}
</style>


<form action="">
<div class="fld">
   <label for="selectbox">Select-box</label>   
   <select id="selectbox">
      <option>option</option>
      <option>option</option>
   </select>
</div>
<div class="fld">
   <label for="textarea">Textarea</label>
   <textarea cols="10" rows="10" id="textarea"></textarea>
</div>
</form>

Hintzmann c",)

---

Martin Hintzmann Andersen wrote:

> .fld label {
>    display:block;
> }

Takker og bukker. display:block var lige det der skulle til. Derudover
lidt fiflen med div'erne og så var den på plads.

Mange tak for hjælpen.

--
Thomas Due
Software Developer
Scanvaegt Nordic A/S
Posted with XanaNews version 1.16.1.11