Spalter sida vid sida med CSS
Att göra element flytande är lösningen när man vill skapa en sidlayout där två spalter ligger sida vid sida. Med andra ord den absolut vanligaste lösningen på en webbplats. Oavsett om din navigering ligger som en horisontell list, så brukas oftast ändå en extra puffspalt bredvid själva innehållet.
Jag har snuddat lite vid det här i ett tidigare inlägg, men där finns ingen direkt grundlig förklaring. Så här gör man.
Floats
Eller flytande element, kallas sådana element som har CSS-egenskapen float. Egenskapen påverkar inte bara elementet i sig, utan även element som ligger efter detta.
Som värden till float kan du använda left eller right för att placera elementet i fråga till höger eller vänster om det som kommer efter. Du bör alltså tänka på i vilken ordning du lägger elementen i din XHTML-fil. Element som ska flytas, ska ligga före det innehåll de ska ligga bredvid.
Flytande div’s
Elementet div är en neutral blockbehållare utan någon annan betydelse än att fungera som avgränsare för olika sektioner i en webbsida. Den får innehålla rubriker, stycken och andra blockelement och är därför väldigt lämpad för att skapa de spalter och områden som en sidlayout byggs ihop av.
Börja därför i din XHTML-struktur med att omgärda de delar av strukturen som ska utgöra egna områden. Vanligt är t.ex. att du avgränsar navigeringsfältet, sidhuvudet, innehållet och eventuellt även andra spalter och områden.
<div id="navigering">Din navigeringslista</div>
Eftersom du använder samma tagg för avgränsning hela tiden, måste du ID-märka dem med varsitt unikt namn. Det gör att du sedan kan identifiera och formge dem var och en för sig i CSS-filen. ID-märkta element anges i stilmallen enligt nedan.
div#navigering { float:left }
Strukturera innehåll med XHTML
En rätt vanlig struktur av div’s kan i XHTML-filen se ut som nedan. För att lättare hålla ihop hela layouten använder man gärna en div som omsluter allt det andra. Vilka namn du använder på dina div’s är upp till dig, men mest praktiskt är att de antyder vilken funktion de har (svenska eller engelska spelar ingen roll).
<div id="container"> <div id="header">Kod för sidhuvud</div> <div id="navigator">Kod för navigering</div> <div id="main">Kod för huvudspalten</div> <div id="footer">Kod för sidfoten</div> </div>
Formge och placera med CSS
I stilmallen ska du sedan se till att dina div’s och deras innehåll får den form de måste ha för att stämma överens med din planerade sidlayout.
Låt oss säga att total bredd på din layout ska vara 900 pixlar. Den sammanlagda bredden på spalterna som ska ligga bredvid varandra får då inte överstiga 900 pixlar. Du måsta också räkna av pixlar för utfyllnad och eventuella kantlinjer som dina div’s får. Lite matematisk pyssel alltså! Troligtvis måste du även justera lite för olika webbläsare. Det märker du när du testkör.
Här avslutar jag med ett exempel som skulle kunna fungera som en start för strukturen ovan. Utgå gärna från koden nedan, men du måste alltid testköra och anpassa dimensionerna själv för dina förutsättningar och krav.
Ett tips är också att använda kantlinjer på alla div’s tills du har koll på var de ligger. Fyll dem också med lite dummytext så att de inte bara blir en smal horisontell remsa.
#container { width:900px; border:1px solid #000 }
#header { width:900px; height:100px }
#navigator { width:228px; float:left; padding:10px; background-color:#eee }
#main { width:628px; float:right; padding:10px}
#footer { width:900px; height:30px; clear:both }
2009-06-15 (11:51)
XHTML och CSS
