CSS positionering basics

5 svar · 656 visningar · startad av invecklaren 8 aug. 2009

invecklarenMedlem sedan jan. 2008280 inlägg

Frågan8 aug. 2009 14:54#1

Hej, jag undrar vad som är bästa sätt att positionera element på t ex en loginsida under följande förutsättningar:
- Ett html-element för anv namn
- Ett html-element för lösenord
- En knapp för att skicka
- Elementen ska vara centrerade på sidan
- Skickaknappen ska vara högerställd och placerad under lösenords-elementet.

Ska man använda tabeller, eller divs eller vad är eg best practise?

Web-TorMedlem sedan nov. 200013 890 inlägg

12 aug. 2009 11:43#2

Det finns många sätt att lösa det på men jag tycker absolut att du skall använda DIV och CSS. Här är ett sätt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
	<title>Logga in</title>
	<style type="text/css">
	*			{margin:0;padding:0;}
	HTML,BODY	{height:100%;height:100%;font-family:"Trebuchet MS", sans-serif;}
	P			{float:left;margin-bottom:4px;clear:both;font-size:0.8em;}
	INPUT		{float:right;margin-bottom:4px;clear:both;}
	#login		{width:260px;margin:100px auto;padding:10px;background:#F9F9F9;border:1px solid #CCC;}
	</style>
</head>
<body>

	<div id="login">
		<p>Namn:</p> <input type="text" style="width:160px;" /><br />
		<p>Lösenord:</p> <input type="password" style="width:160px;" /><br />
		<input type="submit" value="Logga in" />
	</div>

</body>
</html>

rhdfMedlem sedan okt. 2007446 inlägg

12 aug. 2009 17:56#3

jag skulle vilja påpeka några små brister i Tors exempel:
<p> taggarna har inget där att göra
för formulärettiketter använder man <label>

Jag skulle nog gjort nånting i stil med

<style type="text/css">
	#login		{width:260px;margin:100px auto;padding:10px;background:#F9F9F9;border:1px solid #ccc; text-align:right;}
	label		{float:left;font-size:0.8em; width:90px; text-align:left;}
	input[type=text],input[type=password]{width:160px;margin-bottom:4px;}
</style>

<div id="login">
	<form>
	<label for="txtUser">Namn:</label><input id="txtUser" type="text" /><br />
	<label for="txtPass">Lösenord:</label><input id="txtPass" type="password" /><br />
	<input type="submit" value="Logga in" />
	</form>
</div>

dAEkMedlem sedan feb. 20041 816 inlägg

12 aug. 2009 19:08#4

Ska vi börja leta fel i varandras markup nu? Ok, då föreslår jag att man väljer en modulbaserad approach, t.ex. enligt följande:

<form class="login">
	<fieldset>
		<legend>Logga in</legend>
		
		<div class="username">
			<label for="usernameInput">Användarnamn</label>
			<input type="text" name="usernameInput" id="usernameInput"...>
		</div>
		
		<div class="password">
			<label for="passwordInput">Lösenord</label>
			<input type="password" name="passwordInput" id="passwordInput">
		</div>
		
		<div class="execution-eller-nåt">
			<input type="submit...
		</div>
	</fieldset>
</form>

</besserwisser> ;) :bire

Web-TorMedlem sedan nov. 200013 890 inlägg

13 aug. 2009 07:55#5

Som jag skrev så finns det många sätt att lösa det här på och mitt exempel var just det – ett exempel.
Det handlar om hur mycket tid du vill lägga ner. Vilken målgrupp du har och hur intresserad du är av att knacka HTML.

icaaqMedlem sedan okt. 20005 273 inlägg

13 aug. 2009 09:39#6

Bara för att jag har tråkigt fyller jag på med min variant:

<form action="#">
	<fieldset>
		<legend>Logga in</legend>
		
			<label for="usernameInput">Användarnamn
			<input type="text" name="usernameInput" id="usernameInput"...></label>
		
			<label for="passwordInput">Lösenord
			<input type="password" name="passwordInput" id="passwordInput"></label>
		
			<input type="submit" value="skicka" />
	</fieldset>
</form>

</besserwisser> ;) :bire