När vi väl ska göra en layout finns det en rad olika vägar att gå. Vi har försökt att sammanställa dem här under.
Innebär att man oftast har specificerat bredden på sidan (width) i pixlar (px). Detta innebär att vi måste knappa in ett fast värde som inte anpassar sig efter fönsterstorleken eller teckenstorleken. Det som är negativt här är att man “måste” anpassa sig efter en viss bredd, vilket i vissa fall kan göra så man får en inte allt för eftertraktad sidscroll, eller tvärtom, får väldigt mycket tomma ytor. Problemet här är också vilken upplösning vi ska anpassa oss efter, 800×600? 1024×768? Större? Mindre? Detta är problem vi inte vågar spekulera vidare i.
Så när vill man använda en sådan här layout? Så sällan som möjligt är ett ganska bra svar. Det kan också vara svårt att skapa en dynamisk layout om man använder sig av många bilder på sidan, speciellt bakgrundbilder, eftersom att dom kanske inte kan anpassa sig efter layouten på ett bra sätt.
Flytande innebär oftast att man specificerat bredden i procent, vilket gör att webbsidan anpassar sig efter fönstrets storlek (men inte textens). Självklart får vi här brottas med problemen som vi talade om i den övre delen om fasta layouter.
Alternativ tre innebär att man specificerar bredden i em och webbsidan kommer då anpassa sig efter teckenstorleken men inte fönsterstorleken. Problemet här är att sidan kan bli bredare än fönstretsstorlek, men kan lösas genom att vi använder CSS-egenskapen max-width istället för width. Då kommer aldrig problemet med att en webbsidan blir bredare än fönstret att uppstå. max-width säger åt webbläsaren att detta är gränsen för hur bred sidan får vara, gör dig (webbläsaren) så bred du bara vill. Problemet här är att IE6 och tidigare saknar stöd för max-width.
När man gör en layout vill man oftast att den ska anpassa sig efter både teckenstorleken och fönsterstorleken. Hur gör vi då detta? Låt oss skapa en div med lite innehåll:
<div id="main">Lite innehåll för att, innehåll som sagt, innehåll! Mera text, jag gillar innehåll!</div>Så hur ska vi då göra för att en layout ska anpassa sig efter både teckenstorlek och fönsterbredd? Som sagt är max-width smidigt (som fortfarande inte fungerar i IE6), om vi sedan sätter width med enheten procent kommer den att fungera som en övre gräns för hur bred sidan får bli. Så om vi anger max-width: width; width: 90%; så kommer den anpassa sig efter teckenstorleken och kommer aldrig bli bredare än 90% av fönsterstorleken, även om inte webbläsaren har stöd för max-width!
När vi nu kan hantera dessa tekniker mer eller mindre ska vi försöka göra en webbsida av det. Vi börjar med att göra en div#container och placerar en div#main i den för att ha text i och en div#menu för att lägga menyn i:
<div id="main">
<div id="content">
<h1>Lorem Ipsum!?</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque felis pede, aliquam in, ullamcorper sed, dignissim sit amet, urna.
Aliquam commodo, eros et blandit mollis, enim justo rhoncus metus, sit amet tincidunt elit metus ac sapien. Nullam congue consectetuer elit.
Etiam volutpat metus in enim. Mauris ultricies magna a turpis. Sed molestie.
Quisque molestie, diam in pharetra ornare, risus tellus cursus justo, sed vestibulum purus lacus sed justo.
Phasellus aliquet mi rhoncus nisl. Duis convallis volutpat velit. In mattis, dui non cursus porta, libero urna convallis lorem, mollis tristique lorem justo id ipsum.</p>
<p>Vivamus id eros eget velit faucibus tristique. In eu pede consectetuer tellus dictum commodo. Nunc nulla.
Curabitur sit amet ipsum. Fusce massa urna, semper nec, volutpat eu, nonummy vel, pede. Quisque sodales fermentum sapien.
Morbi feugiat aliquam enim. Curabitur et urna sed sapien vulputate pellentesque. Sed nec neque.
Morbi magna risus, bibendum id, mattis ac, venenatis a, nulla.
Aliquam ornare, velit eu placerat commodo, nulla enim ullamcorper est, vel tincidunt ipsum metus ac orci. Maecenas hendrerit lacus ac nisl.
Aliquam interdum accumsan nisi. Aliquam erat volutpat.</p>
<p>Tack <a href="http://lipsum.com">Lorem Ipsum</a> för allt innehåll!</p>
</div>
<div id="menu">
<ul>
<li>Jag gillar min menu</li>
<li>Tyck på mig</li>
<li>Mumms</li>
<li>Om oss</li>
</ul>
</div>
</div>Först måste vi bestämma oss för hur vi ska tala om bredden på våra delar av sidan. Vi röstar för procent på denna punkt:
div#main {
max-width: 60em;
width: 90%;
background: red;
}
div#content {
width: 79.9%;
background: green;
float: left;
}
div#menu {
width:20%;
background: yellow;
float: left;
}
div#menu ul li {
list-style: none;
margin-bottom: 1em;
}Som du ser använder vi ett ganska udda värde på div#content:s width (69.9%). Detta kan tyckas onödigt, men det är för att slippa avrundningsbuggar i olika webbläsare, främst IE. Vi vill att båda div:arnas sammanlagda width ska bli så nära 100% som möjligt, absolut inte över 100% eftersom att då riskerar div#menu att inte få plats och hamna under div#content istället för på höger sida.
Vi ser också att vår röda div (div#main) inte sträcktes ut. Vi kan lösa detta genom att ge den egenskapen overflow: hidden; eller lägga till en div med egenskaperna line-height:0; clear:both;. Precis innan vi stänger div#main, vid </div> alltså. Vi skulle antagligen ha fått en smal röd linje till höger om menyn eftersom att vi använde width: 79.9%; på div#content, men vi har valt att ta bort färgerna nu eftersom att dom bara skulle visa vart elementen hade placerat sig efter vårt första försök. Vi ger istället body en mörkgrå bakgrund och div#main färgen vit.
body {
background: #666;
}
div#main {
max-width: 60em;
width: 90%;
background: #FFF;
overflow: hidden;
}
div#content {
width: 79.9%;
float: left;
}
div#menu {
width:20%;
float: left;
}
div#menu ul li {
list-style: none;
margin-bottom: 1em;
}Men texten ligger lite nära det vänstra hörnet nu kan tyckas. Det är nu dom riktiga problemen uppstår, padding! Nu måste vi räkna med padding i vår width (vi struntar i bakåtkompatibilitet med gammla webbläsare som t.ex. IE5 i detta exempel eftersom att det skulle behövas ganska avancerade tekniker för att stödja båda, något vi inte gått in på ännu). Det vi får göra är att tilldela padding-left och padding-right t.ex. 5% och sedan dra bort det från width, det borde inte vara allt för svårt.
body
{
background: #666;
}
div#main {
max-width: 60em;
width: 90%;
background: #FFF;
overflow: hidden;
}
div#content {
padding: 0 5%;
width: 69.9%;
float: left;
}
div#menu {
width:20%;
float: left;
}
div#menu ul li {
list-style: none;
margin-bottom: 1em;
}Sedan är det ju diskutabelt om det vart något snyggt resultat eller inte, men vi har i alla fall lyckats skapa en fungerande layout. padding kan användas på samma sätt på div#menu men just nu har vi löst det med att ul har tillräckligt med margin-left.
Med detta sagt börjar boken närma sig sitt slut, bara ett kapitel kvar nu. Nu gäller det hur som helst att du lär dig kombinera egenskaperna padding, margin, width, height och float. Kom ihåg att testa webbsidan i många olika webbläsare för att kolla så att du inte stött på någon märklig CSS-bugg. På tal om webbläsarbuggar finns webbplatser som t.ex. Position Is Everything som har tydlig information om hur olika webbläsarbuggar kan skapa problem.
Egenskapen position kan vara bra att känna till när man skapar en mer avancerad layout. Det mesta om det går att hitta genom en Google-sökning på “CSS position”. När vi ändå håller på med att länka kan vi upplysa dig om att det finns mycket bra länksamlingar som talar om hur och varför du ska designa på ett visst sätt. Nu när du läst igenom större delen av vår bok kommer det troligen inte vara några större problem att förstå vad som försöker säga dig. När man är på denna “avancerade” nivå finns det massor välskrivna resurser på webben om ämmnet, det är oftast grunderna som utelämnas eftersom att de utgår ifrån att du redan kan dem (som du också gör nu, grattis).