En simpel layout

Denna guiden går igenom hur man skapar en simpel layout med hjälp av HTML och CSS. Layouten kommer bestå av ett huvud överst, och under den ska en meny finnas på vänster sida och till höger om menyn ska själva innehållet finnas. Under menyn och innehållet ska en fot ligga.

GUIDEN ÄR UNDER UTVECKLING!

Layouten vi är ute efter är följande:

Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet tellus justo. Donec ultrices interdum dui, sed placerat dui faucibus at. Aliquam faucibus risus dictum metus convallis placerat. Phasellus aliquet, neque a viverra suscipit, arcu sapien malesuada nunc, quis lacinia arcu enim vitae mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus fermentum tristique. Aliquam consequat, orci at facilisis egestas, quam tortor consequat magna, vel ultrices ante risus ut mi. Proin eu magna non tortor laoreet cursus ut eu magna. Integer tristique consequat ipsum a fermentum. Donec eu hendrerit mauris. Pellentesque sit amet mauris convallis dui vehicula accumsan sed adipiscing erat. Morbi urna magna, volutpat fringilla porta at, pulvinar eu odio. Morbi egestas nisi facilisis ligula lobortis mollis. Vivamus metus odio, auctor vitae mollis non, porta vitae ipsum. Mauris orci augue, luctus vitae tristique ac, accumsan id lorem. Aenean sagittis, nisl eget consequat mollis, libero risus iaculis purus, eu blandit metus diam sit amet velit. Donec ultricies tempor luctus.

Lorem Ipsum - slumpade ord

Där följande villkor finns:

  • Huvudet ska vara 100% bred.
  • Menyn ska vara ett bestämt antal pixlar bred, och innehållet åt höger om denna ska ta upp resten av sidan.
  • Foten ska vara 100% bred och ligga under menyn och innehållet.

Det är viktigt att en hemsida är uppbyggd på ett logiskt och välstrukturerat sätt (att rätt HTML-taggar används till rätt sak), för det underlättar inte bara när vi sedan ska designa sidan med CSS, utan sökmotorer får det även lättare att plocka ut relevant information om din hemsida. Det första vi ser är att sidan består av fyra sektioner: sidhuvudet, menyn, innehållet och sidfoten. Det är därför väldigt lämpligt att använda <div>-taggen för att ange dessa sektioner, då det är det den anger. Vår HTML-kod bör alltså se ut såhär (med lämpliga id på sektionerna):

HTML - HyperText Markup Language
<!-- Sidhuvudet --> <div id="huvud"></div> <!-- Menyn --> <div id="meny"></div> <!-- Innehållet --> <div id="innehall"></div> <!-- Sidfoten --> <div id="fot"></div>

Utöver detta kan det vara bra att ha en sektion som hela sidan ligger i. På det sättet kan man till exempel enkelt göra sidan smalare vid ett senare tillfälle, om man inte vill att sidan ska vara 100% bred. I och med att menyn och innehållet ska ligga intill varandra så är det även lämpligt att dessa ligger i en och samma sektion.

HTML - HyperText Markup Language
<!-- Hela sidan --> <div id="hela"> <!-- Sidhuvudet --> <div id="huvud"></div> <!-- Menyn och innehållet --> <div id="menyOchInnehall"> <!-- Menyn --> <div id="meny"></div> <!-- Innehållet --> <div id="innehall"></div> </div> <!-- Sidfoten --> <div id="fot"></div> </div>

Nu lägger vi till lite innehåll i sektionerna, så vi ser vad vi har att jobba emot.

HTML - HyperText Markup Language
<!-- Hela sidan --> <div id="hela"> <!-- Sidhuvudet --> <div id="huvud">Lorem Ipsum</div> <!-- Menyn och innehållet --> <div id="menyOchInnehall"> <!-- Menyn --> <div id="meny"> <ul> <li><a href="sida.html">Lorem Ipsum</a></li> <li><a href="sida.html">Lorem Ipsum</a></li> <li><a href="sida.html">Lorem Ipsum</a></li> <li><a href="sida.html">Lorem Ipsum</a></li> </ul> </div> <!-- Innehållet --> <div id="innehall"> <h1>Lorem Ipsum</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet tellus justo. Donec ultrices interdum dui, sed placerat dui faucibus at. Aliquam faucibus risus dictum metus convallis placerat. Phasellus aliquet, neque a viverra suscipit, arcu sapien malesuada nunc, quis lacinia arcu enim vitae mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus fermentum tristique. Aliquam consequat, orci at facilisis egestas, quam tortor consequat magna, vel ultrices ante risus ut mi. Proin eu magna non tortor laoreet cursus ut eu magna. Integer tristique consequat ipsum a fermentum. Donec eu hendrerit mauris. Pellentesque sit amet mauris convallis dui vehicula accumsan sed adipiscing erat. Morbi urna magna, volutpat fringilla porta at, pulvinar eu odio. Morbi egestas nisi facilisis ligula lobortis mollis. Vivamus metus odio, auctor vitae mollis non, porta vitae ipsum. Mauris orci augue, luctus vitae tristique ac, accumsan id lorem. Aenean sagittis, nisl eget consequat mollis, libero risus iaculis purus, eu blandit metus diam sit amet velit. Donec ultricies tempor luctus.</p> </div> </div> <!-- Sidfoten --> <div id="fot">Lorem Ipsum - slumpade ord</div> </div>
Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet tellus justo. Donec ultrices interdum dui, sed placerat dui faucibus at. Aliquam faucibus risus dictum metus convallis placerat. Phasellus aliquet, neque a viverra suscipit, arcu sapien malesuada nunc, quis lacinia arcu enim vitae mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus fermentum tristique. Aliquam consequat, orci at facilisis egestas, quam tortor consequat magna, vel ultrices ante risus ut mi. Proin eu magna non tortor laoreet cursus ut eu magna. Integer tristique consequat ipsum a fermentum. Donec eu hendrerit mauris. Pellentesque sit amet mauris convallis dui vehicula accumsan sed adipiscing erat. Morbi urna magna, volutpat fringilla porta at, pulvinar eu odio. Morbi egestas nisi facilisis ligula lobortis mollis. Vivamus metus odio, auctor vitae mollis non, porta vitae ipsum. Mauris orci augue, luctus vitae tristique ac, accumsan id lorem. Aenean sagittis, nisl eget consequat mollis, libero risus iaculis purus, eu blandit metus diam sit amet velit. Donec ultricies tempor luctus.

Lorem Ipsum - slumpade ord

Nu har vi HTML-koden klar, låt oss nu börja med CSS-koden. Det första man bör göra, även om man inte vill ha det i den slutfärdiga versionen, är att ge varje sektion en bakgrundsfärg. Då ser man snabbt och enkelt vart sektionerna börjar och vart de slutar under tiden som man lägger till CSS-koden.

CSS - Cascading Style Sheets
/* Hela */ #hela{ background-color: silver; } /* Huvudet */ #huvud{ background-color: lime; } /* Menyn och innehållet */ #menyOchInnehall{ background-color: brown; } /* Menyn */ #meny{ background-color: orange; } /* Innehållet */ #innehall{ background-color: red; } /* Foten */ #fot{ background-color: blue; }
Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet tellus justo. Donec ultrices interdum dui, sed placerat dui faucibus at. Aliquam faucibus risus dictum metus convallis placerat. Phasellus aliquet, neque a viverra suscipit, arcu sapien malesuada nunc, quis lacinia arcu enim vitae mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus fermentum tristique. Aliquam consequat, orci at facilisis egestas, quam tortor consequat magna, vel ultrices ante risus ut mi. Proin eu magna non tortor laoreet cursus ut eu magna. Integer tristique consequat ipsum a fermentum. Donec eu hendrerit mauris. Pellentesque sit amet mauris convallis dui vehicula accumsan sed adipiscing erat. Morbi urna magna, volutpat fringilla porta at, pulvinar eu odio. Morbi egestas nisi facilisis ligula lobortis mollis. Vivamus metus odio, auctor vitae mollis non, porta vitae ipsum. Mauris orci augue, luctus vitae tristique ac, accumsan id lorem. Aenean sagittis, nisl eget consequat mollis, libero risus iaculis purus, eu blandit metus diam sit amet velit. Donec ultricies tempor luctus.

Lorem Ipsum - slumpade ord

I och med att de fyra sektionerna ligger efter varandra så kan man tycka att vi inte borde se någon silvrig bakgrundsfärg, men troligtvis gör du det. De flesta webbläsare visar som standard en del taggar med marginaler, och det är dem som gör att vi får se den silvriga bakgrunden (det samma gäller för den röda bakgrunden). Just nu bryr vi oss inte om det, det tar vi hand om senare.

Det enda som inte är så som vi vill ha det är att menyn och innehållet inte ligger intill varandra och att menyn inte är ett bestämt antal pixlar bred. Vi kan få dem att ligga intill varandra genom att använda egenskapen float på menyn, och bredden på menyn ändrar vi med egenskapen width.

CSS - Cascading Style Sheets
/* Hela */ #hela{ background-color: silver; } /* Huvudet */ #huvud{ background-color: lime; } /* Menyn och innehållet */ #menyOchInnehall{ background-color: brown; } /* Menyn */ #meny{ background-color: orange; float: left; /* Var flytande åt vänster */ width: 200px; /* Var 200 pixlar bred */ } /* Innehållet */ #innehall{ background-color: red; } /* Foten */ #fot{ background-color: blue; }
Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet tellus justo. Donec ultrices interdum dui, sed placerat dui faucibus at. Aliquam faucibus risus dictum metus convallis placerat. Phasellus aliquet, neque a viverra suscipit, arcu sapien malesuada nunc, quis lacinia arcu enim vitae mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus fermentum tristique. Aliquam consequat, orci at facilisis egestas, quam tortor consequat magna, vel ultrices ante risus ut mi. Proin eu magna non tortor laoreet cursus ut eu magna. Integer tristique consequat ipsum a fermentum. Donec eu hendrerit mauris. Pellentesque sit amet mauris convallis dui vehicula accumsan sed adipiscing erat. Morbi urna magna, volutpat fringilla porta at, pulvinar eu odio. Morbi egestas nisi facilisis ligula lobortis mollis. Vivamus metus odio, auctor vitae mollis non, porta vitae ipsum. Mauris orci augue, luctus vitae tristique ac, accumsan id lorem. Aenean sagittis, nisl eget consequat mollis, libero risus iaculis purus, eu blandit metus diam sit amet velit. Donec ultricies tempor luctus.

Lorem Ipsum - slumpade ord

Nu ligger menyn på vänster sida, men då menyn tar slut så fortsätter innehållet direkt under. Det är inte särskilt snyggt, men vi kan råda bot på det genom att låta innehållets vänstermarginal vara lika mycket som menyn är bred.

CSS - Cascading Style Sheets
/* Hela */ #hela{ background-color: silver; } /* Huvudet */ #huvud{ background-color: lime; } /* Menyn och innehållet */ #menyOchInnehall{ background-color: brown; } /* Menyn */ #meny{ background-color: orange; float: left; width: 200px; } /* Innehållet */ #innehall{ background-color: red; margin-left: 200px; /* Var 200 pixlar från vänsterkanten */ } /* Foten */ #fot{ background-color: blue; }
Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet tellus justo. Donec ultrices interdum dui, sed placerat dui faucibus at. Aliquam faucibus risus dictum metus convallis placerat. Phasellus aliquet, neque a viverra suscipit, arcu sapien malesuada nunc, quis lacinia arcu enim vitae mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus fermentum tristique. Aliquam consequat, orci at facilisis egestas, quam tortor consequat magna, vel ultrices ante risus ut mi. Proin eu magna non tortor laoreet cursus ut eu magna. Integer tristique consequat ipsum a fermentum. Donec eu hendrerit mauris. Pellentesque sit amet mauris convallis dui vehicula accumsan sed adipiscing erat. Morbi urna magna, volutpat fringilla porta at, pulvinar eu odio. Morbi egestas nisi facilisis ligula lobortis mollis. Vivamus metus odio, auctor vitae mollis non, porta vitae ipsum. Mauris orci augue, luctus vitae tristique ac, accumsan id lorem. Aenean sagittis, nisl eget consequat mollis, libero risus iaculis purus, eu blandit metus diam sit amet velit. Donec ultricies tempor luctus.

Lorem Ipsum - slumpade ord

Nu är layouten precis som vi vill, och då vi snyggar till den lite och tar bort marginalerna som ställer till det lite får vi följande:

CSS - Cascading Style Sheets
/* Hela */ #hela{ /* Denna bakgrundsfärgen är borttagen */ border: 3px solid black; /* Svart kant runt */ } /* Huvudet */ #huvud{ background-color: lime; border-bottom: 2px solid black; /* Svart kant på undersidan */ font-size: 30px; /* Lite större textstorlek */ text-align: center; /* Centrera dess innehåll */ } /* Menyn och innehållet */ #menyOchInnehall{ /* Denna bakgrundsfärgen är borttagen */ } /* Menyn */ #meny{ background-color: orange; float: left; width: 200px; } #meny ul{ margin: 0; /* Bort med marginaler */ padding: 0; /* Bort med padding */ list-style-type: none; /* Bort med listpunkterna */ } #meny ul li a{ display: block; /* Visa dem som block */ padding-left: 4px; /* Indentera vänsterkanten lite */ } /* Innehållet */ #innehall{ background-color: red; margin-left: 200px; /* Var 200 pixlar från vänsterkanten */ } #innehall h1{ margin: 0; /* Bort med marginaler */ padding: 5px; /* Ha lite padding */ } #innehall p{ margin: 3px 0 0 0; /* Endast marginaler på ovansidan */ padding: 5px; /* Ha lite padding */ } /* Foten */ #fot{ background-color: blue; border-top: 1px solid black; /* En svart kant på ovansidan */ text-align: center; /* Centrera dess innehåll */ }
Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet tellus justo. Donec ultrices interdum dui, sed placerat dui faucibus at. Aliquam faucibus risus dictum metus convallis placerat. Phasellus aliquet, neque a viverra suscipit, arcu sapien malesuada nunc, quis lacinia arcu enim vitae mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus fermentum tristique. Aliquam consequat, orci at facilisis egestas, quam tortor consequat magna, vel ultrices ante risus ut mi. Proin eu magna non tortor laoreet cursus ut eu magna. Integer tristique consequat ipsum a fermentum. Donec eu hendrerit mauris. Pellentesque sit amet mauris convallis dui vehicula accumsan sed adipiscing erat. Morbi urna magna, volutpat fringilla porta at, pulvinar eu odio. Morbi egestas nisi facilisis ligula lobortis mollis. Vivamus metus odio, auctor vitae mollis non, porta vitae ipsum. Mauris orci augue, luctus vitae tristique ac, accumsan id lorem. Aenean sagittis, nisl eget consequat mollis, libero risus iaculis purus, eu blandit metus diam sit amet velit. Donec ultricies tempor luctus.

Lorem Ipsum - slumpade ord

Nu har en till synes fullt fungerande layout, men det finns vissa saker som kan ställa till det. Vad händer om menyn är högre än innehållet? Vi får följande:

Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem Ipsum - slumpade ord

I och med att menyn är flytande så kommer den att fortsätta utanför sin föräldratagg. Kan vi gardera oss mot detta på något sätt? Ja, det kan vi, lösningen är att lägga till ett element efter #innehall och som inte tillåter flytande element på sin vänstersida. Detta elementet kommer alltid att ligga under #meny och #innehall, så #menyOchInnehall kommer alltid att vara lika hög som den högsta av #meny och #innehall.

HTML - HyperText Markup Language
<!-- Hela sidan --> <div id="hela"> <!-- Sidhuvudet --> <div id="huvud"></div> <!-- Menyn och innehållet --> <div id="menyOchInnehall"> <!-- Menyn --> <div id="meny"></div> <!-- Innehållet --> <div id="innehall"></div> <!-- Ett element som inte tillåter några flytande element till vänster om sig --> <div style="clear: left;"></div> </div> <!-- Sidfoten --> <div id="fot"></div> </div>
Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem Ipsum - slumpade ord

Nu spelar det ingen roll vilket element som är högst av #meny och #innehall, #menyOchInnehall kommer att bli lika hög som den högsta av dem.

En vanlig fråga är om man kan få sektionerna #meny och #innehall lika höga, så att man aldrig ser bakgrunden som #menyOchInnehall har. Man kan få kolumnerna lika höga med hjälp av Javascript, men det är ingen rekommenderad lösning i och med att inte alla har Javascript aktiverat. Du kan inte få dem lika höga med hjälp av CSS, med det finns ett sätt att få det att se ut som att dem är lika höga. Knepet heter Faux Columns, och den utnyttjar att #menyOchInnehall alltid är lika hög som den högsta av #meny och #innehall. Man tar bort bakgrunderna från #meny och #innehall, och så anger man en bakgrundsbild för #menyOchInnehall som repeteras i y-led. I exemplet nedan använder vi följande bild:

Bild på orange bakgrund.

Bilden vi använder heter backgroundOrange.png och är 200 pixlar bred.

CSS - Cascading Style Sheets
/* Hela */ #hela{ border: 3px solid black; } /* Huvudet */ #huvud{ background-color: lime; border-bottom: 2px solid black; font-size: 30px; text-align: center; } /* Menyn och innehållet */ #menyOchInnehall{ /* Lägg till bakgrundsbil och repetera i y-led */ background-image: url('backgroundOrange.png'); background-repeat: repeat-y; } /* Menyn */ #meny{ /* Denna bakgrundsfärgen är borttagen */ float: left; width: 200px; } #meny ul{ margin: 0; padding: 0; list-style-type: none; } #meny ul li a{ display: block; padding-left: 4px; } /* Innehållet */ #innehall{ /* Denna bakgrundsfärgen är borttagen */ margin-left: 200px; } #innehall h1{ margin: 0; padding: 5px; } #innehall p{ margin: 3px 0 0 0; padding: 5px; } /* Foten */ #fot{ background-color: blue; border-top: 1px solid black; text-align: center; }
Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet tellus justo. Donec ultrices interdum dui, sed placerat dui faucibus at. Aliquam faucibus risus dictum metus convallis placerat. Phasellus aliquet, neque a viverra suscipit, arcu sapien malesuada nunc, quis lacinia arcu enim vitae mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus fermentum tristique. Aliquam consequat, orci at facilisis egestas, quam tortor consequat magna, vel ultrices ante risus ut mi. Proin eu magna non tortor laoreet cursus ut eu magna. Integer tristique consequat ipsum a fermentum. Donec eu hendrerit mauris. Pellentesque sit amet mauris convallis dui vehicula accumsan sed adipiscing erat. Morbi urna magna, volutpat fringilla porta at, pulvinar eu odio. Morbi egestas nisi facilisis ligula lobortis mollis. Vivamus metus odio, auctor vitae mollis non, porta vitae ipsum. Mauris orci augue, luctus vitae tristique ac, accumsan id lorem. Aenean sagittis, nisl eget consequat mollis, libero risus iaculis purus, eu blandit metus diam sit amet velit. Donec ultricies tempor luctus.

Lorem Ipsum - slumpade ord

Om vi vill ha en annan bakgrundsfärg till #innehall så kan vi ange bakgrundsfärg i #menyOchInnehall, så ser det ut som att #innehall har bakgrundsfärgen, fast den egentligen inte har det.

CSS - Cascading Style Sheets
/* Hela */ #hela{ border: 3px solid black; } /* Huvudet */ #huvud{ background-color: lime; border-bottom: 2px solid black; font-size: 30px; text-align: center; } /* Menyn och innehållet */ #menyOchInnehall{ background-image: url('backgroundOrange.png'); background-repeat: repeat-y; background-color: yellow; /* Det som inte täcks av bilden ska vara gult */ } /* Menyn */ #meny{ float: left; width: 200px; } #meny ul{ margin: 0; padding: 0; list-style-type: none; } #meny ul li a{ display: block; padding-left: 4px; } /* Innehållet */ #innehall{ margin-left: 200px; } #innehall h1{ margin: 0; padding: 5px; } #innehall p{ margin: 3px 0 0 0; padding: 5px; } /* Foten */ #fot{ background-color: blue; border-top: 1px solid black; text-align: center; }
Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet tellus justo. Donec ultrices interdum dui, sed placerat dui faucibus at. Aliquam faucibus risus dictum metus convallis placerat. Phasellus aliquet, neque a viverra suscipit, arcu sapien malesuada nunc, quis lacinia arcu enim vitae mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus fermentum tristique. Aliquam consequat, orci at facilisis egestas, quam tortor consequat magna, vel ultrices ante risus ut mi. Proin eu magna non tortor laoreet cursus ut eu magna. Integer tristique consequat ipsum a fermentum. Donec eu hendrerit mauris. Pellentesque sit amet mauris convallis dui vehicula accumsan sed adipiscing erat. Morbi urna magna, volutpat fringilla porta at, pulvinar eu odio. Morbi egestas nisi facilisis ligula lobortis mollis. Vivamus metus odio, auctor vitae mollis non, porta vitae ipsum. Mauris orci augue, luctus vitae tristique ac, accumsan id lorem. Aenean sagittis, nisl eget consequat mollis, libero risus iaculis purus, eu blandit metus diam sit amet velit. Donec ultricies tempor luctus.

Lorem Ipsum - slumpade ord