090501: Denna webbsida är under utveckling!
Egenskaper som behandlas på denna webbsida:
Positionering för mig har alltid varit något krångligt, men det kan bero på min mycket begränsade designförmåga. :-) På denna webbsida kommer jag försöka ge enkla exempel till oss "designdumma" så att vi kan göra våra webbsidor lite snyggare (och användbara?).
Vid positionering är det viktigt att bli "kompis" med div-taggen!
:-) div-taggen används för att skapa block - block som sen kan positioneras. Positioneringen
kan vara absolut (t.ex. övre högra hörnet) eller relativ ("flytande").
(Tittar man i W3C:s standard så finns det en tredje: standard, d.v.s. normalt
flöde. :-)
I exempel finns fyra fyrkantiga block (med olika färg) som har "flutits" till vänster - för det fjärde blocket har även angivits att inget får "flytas" till vänster om det (d.v.s. att det ska börja på ny rad).
Till början på sida
Relativ positionering bygger på att element "flyts" och positioneras relativt andra element (så som de färgade blocken ovan). Detta är mycket användbart för t.ex. bilder och små noteringar (som nästa stycke, i ruta nere till höger).
Detta är t.ex. en notering som "flutits" till höger.
För relativ positionering används följande egenskaper:
För att relativ positionering ska fungera så måste element (oftast) ha en bredd, men ibland även en höjd. Detta beror (som nämnt på sidan Boxar) på principen expand to fit, d.v.s. att element expanderar till fulla bredden (och ev. höjden) av sitt omslutande element (detta stycke anpassar t.ex. sin bredd till den vita ytan i den inre röda kantlinjen). (Motsatsen är shrink to fit som anpassar omslutande elements bredd, eller höjd, till aktuellt element, så som celler i tabeller.) För att ange bredd och höjd på element så används egenskaperna width resp. height.
Detta är t.ex. en notering som "flutits" till höger.
För att skapa noteringen uppe till höger används följande stilmall (endast de två första raderna har med positionering att göra, men här redovisas allt för helhetens skull :-).
float: right; /* Flyt till hoger */
width: 100px; /* Ange bredd - ett maste */
margin: 0px 0px 10px 10px;
border: 1px solid blue;
padding: 5px;
color: blue;
background: #ccc;
font-size: 90%;Den observante ser att den andra noteringen inte verkar ha flutits, men det har den. Men för att stycket efter inte ska flyta runt det så används egenskapen clear i stycket, enligt nedanstående exempel.
clear: both;
Detta är t.ex. en notering som "flutits" till höger.
Så egenskapen clear används alltså för att aktuellt element ska börja på en ny rad
efter alla eventuella flutna block. Genom att byta ut värdet
both mot left eller right så kan man istället tillåta eventuella flutna element
till höger resp. vänster.
(Jo, jag skrev rätt - detta stycke använder stilen
clear: left; och flyter runt noteringen till höger. :-)
Relativ postitionering är mycket användbart för att bygga upp webbsidors design (så som den du tittar på nu :-). Principen (som jag använder i.a.f.) bygger på att allt placeras i block (DIV-taggar med ID-attribut) och att dessa block sen flyts till vänster, om flera kolumner önskas (så som meny och innehåll i denna webbsida).
Nedan visa koden för exempel på grundläggande block i webbsida med tre kolumner samt med sidhuvud och sidfot. Ytterst (först) finns en DIV-tagg för hela webbsidans innehåll (id="sida"), vilken används för att ange bredden på webbsidans innehåll, i vilken finns webbsidans tre delar (sidhuvud, innehall och sidfot). I innehall finns sen tre DIV-taggar för kolumner (kolumn1, kolumn2 och kolumn3), vilka kommer att flytas till vänster m.h.a. stilmall.
<div id="sida">
<div id="sidhuvud">
...
</div>
<div id="innehall">
<div id="kolumn1">
...
</div>
<div id="kolumn2">
...
</div>
<div id="kolumn3">
...
</div>
</div>
<div id="sidfot">
...
</div>
</div>Stilmallar för ovanstående (X)HTML-kod visas nedan (och är ganska lång, men inte så komplicerad eftersom samma sak upprepas :-). Här är en kort genomgång av vad stilarna gör.
body {
color: black;
background-color: yellow;
font-family: Arial, Helvetica, sans-serif;
}
#sida {
width: 800px;
margin: 0px auto;
color: black;
background-color: white;
}
#sidhuvud {
color: white;
background-color: maroon;
}
#kolumn1 {
width: 200px;
float: left;
color: white;
background-color: blue;
}
#kolumn2 {
width: 380px;
float: left;
color: black;
background-color: white;
}
#kolumn3 {
width: 200px;
float: left;
color: white;
background-color: teal;
}
#sidfot {
clear: both;
color: black;
background-color: cyan;
text-align: center;
}Det är viktigt att komma ihåg att alla block har marginal, kantlinje och utfyllnad, d.v.s. när vi räknar ut hur breda element ska vara så måste vi ta hänsyn till bredden på alla dessa tre. I exempel ovan (4e 1.1) så kan vi se att jag inte tagit hänsyn till detta utan det finns en vit yta mellan tredje kolumnen och höger marginal.
Till början på sida
Absolut positionering anges med egenskapen position och sker på något av följande sätt:
Element positioineras genom att ange avståndet från två av elementets kanter relativt något annat element (eller elementets position i flödet...).
Förrvirrad? Då är du inte ensam! :-) Denna typ av positionering kräver att man håller tungan rätt i mun.
En absolut positionerad notering.
Stycket ovan (som visas till vänster) har positionerats (och formaterats) med nedanstående egenskaper. (Detta stycke har fått en vänster marginal på 110 pixlar för att det inte ska visas under det positionerade stycket. Och detta exempel visar på hur lite jag kan om detta ämne. :-)
position: absolute;
margin-left: auto;
margin-right: 10px;
width: 100px;
border: 1px solid blue;Till början på sida