Artiklar » (X)HTML/CSS » Skapa en footer med CSS och <div>

 
 

Skapa en footer med CSS och <div>

Författare: Robbie
Datum: den 30 april 2007
Antal lästa: 10578
Ej stjärnmärkt

Det här postade jag ursprungligen som en tråd i forumet. Många svarade och tyckte att jag borde lägga upp den som en artikel, så nu gör jag det. Jag har bara kopierat över forumposten rakt av till artikel-avdelningen.

Jag har märkt att många, både här och på andra forum, har problem med att få en footer (sidfot) att fungera så som dom vill att den ska fungera. Andra löser det med hjälp av tabeller, men vid det här laget har vi väl lärt oss att inte använda tabeller för layout? Jag gjorde en sökning på just "footer” och hittade ingen sådär helt klockren post. Iofs letade jag inte så noga så om det finns nån bättre footer-tutorial med en rubrik man inte kan missa så ställer jag mig i skamvrån ett tag.

Nåväl, nu har vi en post med en rubrik som inte går att missa, då börjar vi väl med att gå igenom hur man skapar en footer. Vi vill att den antingen ska ligga i botten av fönstret eller botten av websidan beroende på vad som sträcker sig längst ned, vi vill inte att den ska ska lägga sig i ett lager över eller under innehållet på sidan och vi vill dessutom att den ska jobba likadant i olika webläsare.

Jag börjar med att gå igenom hur man bygger upp XHTML-dokumentet.

Först och främst får du lägga hela ditt innehåll i en <div id=”fullheight”>. Längst ned i den diven, under allt annat innehåll skapar du en <div id=”footermargin”>. Och slutligen lägger du din <div id=”footer> längst ned i dokumentet. Då borde det se ut ungefär såhär:

Kod:

<div id="fullheight">
<div>Ditt innehåll..</div>
<div id="footermargin"></div>
</div>

<div id="footer">© 2006 Förnamn Efternamn</div>



För att alla dessa divar ska göra nån nytta behöver vi tilldela dem några style-attribut, så om du öppnar din CSS-fil eller scrollar upp till style-taggen så kan du börja med att lägga in följande:

Kod:

html {height:100%;}
body {height:100%; margin:0px; padding:0px;}



Inte några konstigheter där, margin och padding sätter vi till 0 för att slippa få en scroll på sidan om den inte behövs, eftersom body-taggen numera tar upp 100% av höjden exklusive margin/padding.

Sen fortsätter vi med att lägga till:

Kod:

div#fullheight {min-height:100%; _height:100%;}



min-height:100% betyder att diven ska vara minst 100% av höjden, men sträcka ut sig när innehållet kräver det. Tyvärr fungerar inte ”min-height” i IE, lyckligtvis jobbar ”height” på samma sätt i IE, och genom att lägga till ett understreck (_height) så kommer webläsare utöver IE att hoppa över den.

Okej, över till footerdiven, som ju faktiskt är anledningen till att du läser det här över huvud taget. Vi vill att den ska vara 20 pixlar hög, men eftersom den ligger under en div som tar upp 100% av höjden kommer den att lägga sig så att man måste scrolla ner till den oavsett hur lite innehåll och hur stort fönster man har. Det löser vi genom att lägga till en negativ topmargin som är lika med höjden på footern, alltså:

Kod:

div#footer {height:20px; margin-top:-20px;}



Då har vi en footer som ligger längst ned i fönstret oavsett hur stort fönster man har. Problemet kommer när innehåller tar upp mer än fönstrets storlek, då kommer den att överlappa innehållet, vilket inte är speciellt snyggt. Eftersom höjden på #full är 100% kan vi inte lägga till padding eller margin i botten av diven för att lösa problemet, då kommer vi att tvinga fram en scrollbar, och det är inte heller så snyggt ifall innehållet tar upp ~hälften av fönstret.

Det är här diven ”footermargin” kommer in i bilden. Den ligger inuti ”fullheight” och ingår därför i dessa 100%, så vi gör den bara lika hög som footern, och passar på att se till att den inte kan få för sig att lägga sid brevid något annat element, såhär:

Kod:

div#footermargin {height:20px; clear:both;}



Violá! Nu har vi skapat en footer som sköter sig, hoppas guiden kan vara till hjälp för någon.

Jag påstår inte att det är det enda sättet att lösa problemet på, inte ens det bästa. Men jag har använt mig av den här lösningen och det har fungerat bäst av de varianter jag testat i IE6, Opera 8 och Firefox 1.5
 
     

  » Logga in  
 
Användarnamn

Lösenord

 
     

  » Bli medlem  
  Bli medlem på ASPsidan!  
     

     
  Microsoft  
     

  » Partners  
  Comsolvia  
     
  » ANNONS  
  ingen annons än  
     

  » Senast online  
  Endast för inloggade  
  Antal inloggade: 1  
     

Copyright © 2007 www.ASPsidan.se
ingen sponsrar längre ASPsidan med Dedikerad Server
ASPsidan RSS
   
 XHTML / CSS
Det tog 0,2344 sekunder att ladda sidan