css aanpassen bij een form

Status
Niet open voor verdere reacties.

janbe63

Gebruiker
Lid geworden
21 okt 2007
Berichten
64
Graag wil ik de style van de elementen in een form aanpassen in een css-file.

Uiteraard kan dit binnen bij een element. Maar graag wil ik dit in de css-file.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>	
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="janbe" />
	<title>Untitled 1</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>


<body> 
<form method="post" action="">
    <input type="hidden" value="login" name="actie" />
    <a id="inlognaam">Gebruikersnaam</a>
    <a style="position: absolute; right 20px; top: 20px"><input type="text" name="gebruikersnaam" /></a>
    <a style="position: absolute; right: 200px; top: 60px">Wachtwoord</a>
    <a style="position: absolute; right: 20px; top: 60px"><input type="password" name="wachtwoord" /></a>
    <a><input type="submit" value="Login" /></a>    
</form>
</body>
</html>

Wat moet ik nu in styles.css neerzetten zodat de positie van id="inlognaam" is: position: absolute; right 200px; top: 20px.

Alvast bedankt

Jan
 
Dag Jan,

Voordat we overstappen op de CSS even een vraagje. Waarom maak je gebruik van <a> tag, een <a> tag definieert een hyperlink.
Gebruik voor de tekst labels en geef alvast een id aan de input om deze makkelijk vanuit CSS te kunnen stylen. Voorbeeldje voor Gebruikersnaam:
HTML:
<label for="gebruikersnaam">Gebruikersnaam</label>
<input type="text" name="gebruikersnaam" id="gebruikersnaam" />

Als je elementen onder elkaar zet, zoals de labels en de inputfields, adviseer ik om de labels rechts uit te lijnen en de inputfields links. Dit zal steeds evenveel ruimte tussen elke label en inputfield geven en er netter uit zien. Als je verder leert in GUI design, zul je ook zien dat dit sterk wordt aanbevolen.

Ik zie het resultaat wel en hoor wel wat je precies wilt, dan zal ik je helpen met de styling (indien nodig). :thumb:

Vriendelijke groet,

Bart
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan