---
title: "CSS positionering basics"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/179694-css-positionering-basics"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "invecklaren"
published: "2009-08-08T14:54:08.000Z"
updated: "2009-08-13T09:39:27.000Z"
replies: 5
views: 668
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/179694-css-positionering-basics"
---

# CSS positionering basics

## #1 — invecklaren, 2009-08-08T14:54Z

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?

Permalänk: https://www.webforum.nu/p/179694

## #2 — Web-Tor, 2009-08-12T11:43Z

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>
```

Permalänk: https://www.webforum.nu/p/2198434

## #3 — rhdf, 2009-08-12T17:56Z

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\>](http://www.w3schools.com/TAGS/tag_label.asp)

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>
```

Permalänk: https://www.webforum.nu/p/2198473

## #4 — dAEk, 2009-08-12T19:08Z

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

Permalänk: https://www.webforum.nu/p/2198482

## #5 — Web-Tor, 2009-08-13T07:55Z

Som jag skrev så finns det många sätt att lösa det här på och mitt exempel var just det &#8211; 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.

Permalänk: https://www.webforum.nu/p/2198527

## #6 — icaaq, 2009-08-13T09:39Z

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

Permalänk: https://www.webforum.nu/p/2198560

---

Tråden på webben: https://www.webforum.nu/amne/html-css/179694-css-positionering-basics
