Deprecated: Function split() is deprecated in /storage/content/91/176891/ewik.se/public_html/textpattern/lib/txplib_misc.php(594) : eval()'d code on line 471 100% höjd på ett enkelt sätt | Ewik

100% höjd på ett enkelt sätt

För ett tag sedan fick jag många förfrågningar om hur man gör en sida som täcker hela höjden, är centrerad och har skuggor på sidorna. För att ha något att hänvisa till bestämde jag mig för att skriva en kort guide. Nackdelen med den här metoden är att sidan blir fast, man får en pixelbaserad bredd.

Det som behövs är en bakgrundsbild som är bredare än de största upplösningarna (fönsterstorlekarna). Jag har valt att ha bilden 2000 px bred. Den bild jag har valt att använda ser ut så här (klicka på bilden för att se den i orginalstorlek):

Det är alltså i bakgrundsbilden som skuggorna och sidans bakgrundsfärg finns.
Den HTML -kod som jag använder för att skapa HTML-sidan ser ut så här:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
  2. <html>
  3. <head>
  4. <title>Ewik.se | Centrerad bakgrund</title>
  5. <link rel="stylesheet" href="main.css" type="text/css" media="screen">
  6. </head>
  7. <body>
  8. <div id="wrap">
  9. <p>Lorem ipsum dolor…</p>
  10. </div>
  11. </body>
  12. </html>
  13. 100-procent-hojd-1.txt

För att lägga till lite mer utseende och även själva bakgrundsbilden använder jag självklart CSS i en separat CSS-mall.

  1. body {
  2. background-image:url(bakgrund.gif);
  3. background-position:center;
  4. background-repeat:repeat-y;
  5. text-align:center;
  6. }
  7. #wrap {
  8. margin:20px auto;
  9. text-align:left;
  10. width:680px;
  11. }
  12. 100-procent-hojd-2.txt

Jag har nu bestämt att bakgrunden är centrerad och att den bara repeterar sig i y-led (lodrätt). Sen har jag på rad 8 skrivit att innehållet på sidan centreras genom att sätta höger- och vänstermarginalerna till auto, det fungerar inte i äldre versioner av IE(Internet Explorer) som jag tycker det är tveksamt om man måste stödja fortfarande, i alla fall har jag också lagt till text-align:center; i body (rad 5) vilket egentligen bara ska fungera på text och bilder men i äldre IE versioner fungerar det även på block.

Här kan du se hur mitt resultat blev.

Skriv kommentar | Postad 2 februari 2007 i kategorin Tips & trix med taggarna , , , .

Skriv kommentar

Arbetat med

Några projekt som jag har dragit igång/arbetat med.

Tallbackskyrkan

Jag har skapat Tallbackskyrkans hemsida eftersom man vill synas på Internet och visa upp vad man har för programverksamhet.

Kumla Cementvaror & Åkeri AB

En webbplats till Kumla Cementvaror & Åkeri AB. Jag har skapat sidan för att man ska kunna visa upp produkter och verksamhet. Visa att man finns.

Bilder