CSS

Layout utan tabeller

I sista avsnittet i HTML-delen tog vi upp ett exempel på hur bland annat DIV används för att ge dokumentet struktur. Vi ska gå vidare med samma exempel här och snygga till dess utseende med vår stilmall. Exemplet var alltså ett formulär för inloggning och från HTML-delen har det följande utseende:

Koden ser ut såhär:

<P><FORM method="post" action="#"> <DIV>	<LABEL>Användarnamn</LABEL>	<input type="text" name="username" size="32"></DIV><DIV>	<LABEL>Lösenord</LABEL>	<input type="password" name="password" size="32"></DIV><DIV>	<input type="submit" name="login" value="Logga in" class="submit"></DIV></FORM></P>

Formuläret är välstrukturerat men har ingen bra layout och det ser plottrigt ut. Ett par grepp med CSS ska rätta till detta och vi börjar med raderna som ligger i märket DIV. Vi vill generellt ha allt högercentrerat inom formuläret och detta görs med text-align : right för märket DIV.Bredden för LABEL sätts till 150px och bredden för INPUT sätts till 200px. Vi sätter dessutom bredden för varje DIV till 400px. Stilmallen har ny följande regler.

label	{	width : 150px;	}input	{	width : 200px;	}div 	{	text-align : right;	width : 400px	}	

Nu ser det lite annorlunda men vi är inte riktigt nöjda än.

Resultat

Genom att lägga till lite mellanrum till höger om varje LABEL med regeln margin-right : 20px blir utseendet mer luftigt horizontellt. Samma sak kan göras i den andra riktningen men vi använder oss nu av MARGIN-BOTTOM : 10px på elementet DIV. Det blir nu också luft mellan varje rad i formuläret.

Resultat

Till sist går det även att sätta rätt storlek på knappen. Som det är nu formas den av att den är av elementtypen INPUT och är alltså 200 px bred. På enklaste sätt gör vi en ny regel som beskriver utseendet på knappen och sätter dess bredd till auto så att den får den bredd den behöver. Med de nya ändringarna har vi nu stilreglerna:

label	{	width : 150px;	margin-right : 20px	}input	{	width : 200px	}input.submit	{	width : auto	}div	{	text-align : right;	width : 400px;	margin-bottom : 10px	}

Formuläretär nu klart att användas om man vill så.

Resultat

Eller så går man vidare med fler designsteg... Formulär behöver inte se stela och tråkiga ut. Det går även att ha LABEL,kantlinjer, olika fonter och bakgrundsfärg. Ett exempel på hur det kan se ut kan du se i resultatet nedan. På resultatsidan finns förutom resultatet också den kod som utgör själva formuläret och dess tillhörande stilmallsregler.

Resultat

Övning

ÖvningAnvänd den kod som ges på ovanstående resultatsida och sätt ihop till en fungerande HTML-sida med tillhörande stilmall. Du väljer själv vad HTML-dokumentet och stilmallen ska ha för namn. Prova ditt resultat i din webbläsare när du är klar.