[HTML] tabellen elimineren

[-FoX-]

Momenteel ben ik bezig om in een bestaande webapplicatie alle tabellen in de forms te vervangen, om ervoor te zorgen dat het geheel wat overzichtelijker wordt en dus ook beter onderhoudbaar. Dit lukt vrij aardig. Het aantal lijnen HTML gaat zienderogen achteruit

Dit heb ik gedaan door gebruik te gaan maken van 'labels'.

De CSS die ik hiervoor gebruikt heb is de volgende:

Cascading Stylesheet:

label, input, select {
  display: block;
  float: left;
  margin-bottom: 10px;
  font-size: 10px;
  font-family: verdana, arial;
}

label {
  width: 125px;
  text-align: right;
  padding-right: 20px;
}

br { clear: left; }    /* reset de floats */

In de HTML gebruik ik dan het volgende:

HTML:

<label for="username">Username</label>
<input id="username" name="username"><br>

En dit werkt zonder problemen...

Echter als ik ga werken met radio buttons, checkboxen of meerdere submitbuttons, dan loopt de layout wel wat door elkaar:

HTML:

<label>Test</label>
<input name="test"><br>

<label>Radio's</label>
<input type="radio" name="radiogroup"> Man
<input type="radio" name="radiogroup"> Vrouw
<br>

Op welke manier kan ik het doorlopen van deze elementen het best vermijden?

[ Voor 22% gewijzigd door -FoX- op 15-10-2005 12:37 ]

[BasieP]

zorgen dat je die elementen een size specifieceerd, of gewoon zorgen dat het past

* BasieP snapt denk ik je vraag niet helemaal

[StarLite]

Elk [afwijkend] item een uniek ID geven en dan spelen met de position, zo heb ik het opgelost iig

[Erkens]

om radiobuttons doe ik vaak een <fieldset> en de labels van de radiobuttons, daar gooi ik dus het <label> omheen

[-FoX-]

Erkens schreef op zaterdag 15 oktober 2005 @ 12:53:
om radiobuttons doe ik vaak een <fieldset> en de labels van de radiobuttons, daar gooi ik dus het <label> omheen

Hmm, misschien wel de oplossing ja.
En dan via css ervoor zorgen dat de labels in een fieldset andere waarden meekrijgen.

Maar hoe doe je dat dan met de buttons, bvb: Save - Delete - Cancel
Plaats je die dan alsnog in een tabelletje, of los je dit ook op met CSS?

[ Voor 20% gewijzigd door -FoX- op 15-10-2005 13:48 ]

[Verwijderd]

gewoon slim gebruik maken van fieldsets en p's. Een dl wil ook nog wel eens van pas komen.

dit

code:

<label>Radio's</label>
<input type="radio" name="radiogroup"> Man
<input type="radio" name="radiogroup"> Vrouw

is overigens geen goed gebruik van label. "man" en "vrouw" die moeten in een label, "radio's" gewoon in een p

[ Voor 59% gewijzigd door Verwijderd op 15-10-2005 14:10 ]

[Erkens]

Vaak gebruik ik idd een DL, waarbij ik de labels in een DT doe en het input field in een of meerdere DD's

[-FoX-]

Lists zijn in dit geval niet erg bruikbaar.

Stel, ik zou een input veld willen maken voor een rekening nummer, maar ik zou deze ook willen opsplitsen in 3 delen. Dan zou ik deze 3 veldjes mooi naast elkaar willen weergeven. Maar door bovenstaande CSS kan dit niet aangezien er dan voor ieder input veldje een block en float left wordt uitgevoerd.

Kan ik dit omzeilen door een nieuwe css entry te maken zodat er de css maar 1x op het hele block uitgevoerd wordt?

[Erkens]

wie zegt dat je een list altijd onderelkaar moet hebben?
een display:inline is zo gezet