Archief - HTML/CSS : input fields gelijk alignen

C

Cakeman

Legacy Member

• 26 apr 2005

• #1

Ik ben bezig met een klein siteje om een database van mijn boeken aan te leggen. Het is een hele tijd geleden dat ik nog HTML en CSS gebruikt heb, en dat is te merken

Ik heb een form op de pagina waar ik boeken kan toevoegen.

Dat ziet er ongeveer zo uit:

Titel: [tekstvak]
ISBN: [tekstvak]
Gekocht op: [tekstvak]
Pagina's: [tekstvak]

Nu zou ik graag hebben dat die tekstvakken links gelijk uitgelijnd staan.
Hoe krijg ik dat voor mekaar?
Ik kan natuurlijk een tabel maken, maar dat doe ik liever niet.

Edit:
Ik heb net dit gevonden:

Code:

<form method="get">
	<div class="section">
		<span class="fields">Titel :</span><input type="text" /><br />
		<span class="fields">ISBN :</span><input type="text" /><br  />
		<span class="fields">Gekocht op :</span><input type="text" />
		<span class="fields">Pagina's :</span><input type="text" /><br />
	</div>
</form>

met als CSS :

Code:

div.section {
	border:1px solid black;
	width : 700px;
	padding : 5px;
	background-color: #dedede;
}
input {
	border : 1px solid #666;
}

div.section .fields {
	display:block;
	width : 100px;
	float : left;
}

Iets zegt me echt dat het niet de beste manier is... Wat denken jullie ervan?

o

orez

Legacy Member

• 26 apr 2005

• #2

staat erges op a list apart een heel article over... maar kweet hem nu niet meteen terug te vinden

C

Cakeman

Legacy Member

• 26 apr 2005

• #3

Ik heb net dat artikel gevonden: http://www.alistapart.com/articles/practicalcss/
Dan moet je wel voor elke "rij" (een label met een inputfield) een div maken, een span per label en een span per inputfield...
Dan heb je nog evenveel code als met tables...
Hmm...

Z

Zero Grav

Legacy Member

• 26 apr 2005

• #4

Dit is een handige methode:
http://www.quirksmode.org/css/forms.html

Deze ni echt nagekeken maar het staat in favo's als "formulieren zonder tabellen":
http://www.stuffandnonsense.co.uk/archives/trimming_form_fields.html

C

Cakeman

Legacy Member

• 26 apr 2005

• #5

Zero Grav zei:

Dit is een handige methode:
http://www.quirksmode.org/css/forms.html

Deze ni echt nagekeken maar het staat in favo's als "formulieren zonder tabellen":
http://www.stuffandnonsense.co.uk/archives/trimming_form_fields.html

Klik om te vergroten...

Bedankt. Ik gebruik nu de methode uit je eerste link; iets aangepast aan mijn noden.

Verder hebben die links mij wel veel bijgeleerd.
Ik heb nooit echt veel met form gewerkt, en ik had nog nooit gehoord van de label, fieldset, optgroup en legend tags

D

DarkBone

Legacy Member

• 26 apr 2005

• #6

Ging net zeggen da ge enkel labels en inputs nodig hebt, maar die link naar quircksmode is dus die ideale guide

C

Cakeman

Legacy Member

• 26 apr 2005

• #7

Ligt het aan mij of kan je de border van een <input type="file" /> niet aanpassen met CSS? Dat dit bij dropdown lijstjes niet ging, wist ik.

Z

Zero Grav

Legacy Member

• 27 apr 2005

• #8

Gaat inderdaad niet heb'k gehoord .. in een thread van enkele weken terug