Bygg en csslayout i två kolumner

Fler och fler använder sig av layouter byggda enbart i css. Här får du lära dig steg för steg hur du bygger en två-kolumns layout och vi ska göra den i webbstandard xhtml 1.0. För att följa med i beskrivningen behöver du till att börja med öppna två tomma dokument. Det ena ska vara i css-format med filändelsen css. Döp detta dokument till stil.css Det andra ska vara i vanligt htmlformat med filändelsen htm. Döp detta exempelvis till bygga.htm Då kör vi igång!

När man använder sig av css är det viktigt att veta att man bara kan använda ett unikt id i sina “divar”. Vill man ha flera olika divar med olika funktioner måste man alltså döpa var och en av dessa till sitt eget speciella namn. Divar är ungefär detsamma som block och kan sägas vara en motsvarighet till de traditionella tabellerna. Skillnaden är att med divar kan du styra utseendet på sidan eftersom css är tänkt att sköta den saken.

Vi börjar att lägga in följande kod i HTML-dokumentet bygga.htm.

DOCTYPE

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

Detta doctype talar om för webbläsarna att ditt dokument är byggt utifrån en webbstandard där man fortfarande kan lägga till vissa attribut som finns i vanlig html-kodning. Ordet transitional betyder i detta fall övergång.

Nästa steg att införa i ditt dokument är dessa koder:

CONTENT/MIME-files

<head>
<title>Din Titel på sidan</title>
<meta name=”keywords”
content=”” />
<meta name=”description”
content=”” />
<meta http-equiv=”Content-Type” content=”application/xhtml+xml; charset=iso-8859-1″ />

För att layouten ska kunna fungera behöver vi naturligtvis vår css-mall. Du kan välja mellan att länka den till sidan på traditionellt vis, eller så låter du importera den. Koderna har du nedanför.

Länka stilmallen

Alternativ:1
<style type=”text/css”>
/*<![CDATA[*/
@import url(stil.css);
/*]]>*/
</style>

Alternativ2:
<link rel=”stylesheet” href=”stil.css” type=”text/css” />

Därefter tar vi ett raskt kliv ned till body genom att infoga koderna, sedan stänger vi sidan genom att sätta dit slutattributen:

Avsluta dokumentet

</head>
<body>
</body>
</html>

Så här ser sidan ut just nu: Kika!

Nu ska vi börja att bygga vårcsslayout. Växla därför dokument så du har stil.css öppet.

När det handlar om att göra en csslayout är det viktigt att veta att de inte alltid är fullt crossbrowser om man inte lägger till vissa “hacks”. Internet Exploder – som många css-skapare kallar Explorer för – tolkar inte alltid css på samma sätt som till exempelvis Netscape eller Mozilla. Därför behöver man lägga in extra koder i sin css-mall så att de även omfattar dessa webbläsare.

OBS! Viktig information om IE 7

Läs mer om detta på Quirks Mode,
Gtalbot,
Css Discuss,
Jeffrey Zeldman och
Mezzo Blue

Först lite information i stort.
När man använder sig av div-block så får de sina specifika egna namn. Vissa av namnen är sådana som alla använder, andra kanske döper om till egna namn. Det är i alla fall viktigt att man kan särskilja på de olika div-blocken och veta vad de betyder. När man då börjar med att skapa sig en css-layout måste man ha en bakgrund – med en bakgrundsbild om man vill. Från detta märke kan man också styra storleken på bokstäverna, färgen på dessa, om det ska vara luft mellan raderna o s v. Vi börjar i alla fall med att klistra in denna kod i stil.css:

Vi bygger upp stilmallen

/*——-box model hack (for IE/Win)———–*/
body,html {
background:#fff url() repeat fixed;
line-height:150%;
text-align:center;
font:x-small/1.5em verdana,arial,Trebuchet MS,Verdana,Sans-serif;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

Som ni ser så börjar vi redan här med ett hack för att få Internet Explorer att tolka storleken på fonten rätt i din text. Storleken på pixlarna kan tolkas olika därför anger jag storlek i em. Med detta hack försöker man förmå alla webbläsare att tolka storleken så enhetligt som möjligt så att man slipper obehagliga överraskningar. Det vi har gjort är att skapa en bakgrund som bakom själva layouten, du ser det i märkningen html. Men vi har även angett bodykroppen med samma bakgrund genom att lägga till just body i märkningen. Självfallet kan du styra utseendet på just bodykroppen så den inte ser likadan ut. Vi kommer till det strax. text-align:center; anger var på sidan du vill ha layouten. I detta fall är den centrerad.
Observera en sak, skulle du nu skriva ut text som inte är formaterad inom <p> märkningen kommer den också att bli centrerad. Därför skrivs all löpande text i layouten hädanefter inom formateringen <p> eftersom varje divblock kan formateras var för sig. Nästa kliv blir att göra själva layouten och det divblock som utgör denna. Det gör vi genom att klistra in följande:

Div-block container

#container {
width: 680px;
\width: 700px;
w\idth: 680px;
border: 1px solid gray;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px;
background:#fff url() repeat; fixed;
line-height:150%;
font:x-small/1.5em verdana,arial,Trebuchet MS,Verdana,Sans-serif;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

Även här har vi med lite hacks. Men först:
Divmärket #container är det stora block som utgör stommen för din layout. Du kan se den som en jätteruta. Ibland kallar man detta för wrapper eller mainbox eller liknande. Det vanligaste är dock container eller wrapper. Kikar vi på bredden så upptäcker Ni säkert något som ni kanske inte har sett tidigare. Det finns nämligen tre stycken olika märkningar i width. Alla anger de dock samma sak även om breddens pixlar särskiljer sig med 20 pix. Det är detta som kallas för boxmodel-hack. Internet explorer har nämligen problem med att tolka padding i boxarna. Detta gäller även IE Mac OS. Eftersom vi har 10 pixlars padding innebär detta att för att det ska fungera i IE så måste man dra ifrån 20 pixlar från själva layoutbredden. Så här är det. 10 pix + 10 pix = 20 pixlar. Du har 10 pixlar på vänster sida och 10 pixlar på höger sida. Tillsammans med 680 pixlar ger det en layoutbredd på 700 pixlar. Alltså är detta ett hack för Internet Explorer så sidan inte ser annorlunda i den webbläsaren. Om inte paddingen funnits hade vi inte behövt ange 680 pix utan enbart 700. Någon höjd anger vi inte här eftersom även den är svårttolkad av IE om man inte lägger till en if-definition på varje sida. Fortfarande använder vi oss av samma hack när det gäller fonten. All text i själva “main” i layouten kan du alltså formatera här.

Nu vill vi ha en header – eller top som man säger i “tabellspråk”. Det blir alltså det första divblocket i layouten, och vi vill ha den högst upp.
Här är koden:

Div-block header

#banner {
height:200px;
padding: 5px;
margin-bottom: 5px;
background:#F4F6F5 url() no-repeat left top;
text-align:right;
}
#banner h3 {
padding:10px;
text-align:right;
}

Här har vi tagit med höjden eftersom vi vill ha ett absolut mått. All text kommer också att vara högerställd. Vi har även med värdedefinitionen banner h3 vilket innebär att du kan ha en rubrik i din header som särskilt formateras utan att andra h3 märken omfattas. Varje div ska påbörjas med märkningen # i stilmallen. Dina classes har ingen märkning framför, möjligtvis en liten punkt. Vi ska nu börja med att föra in våra första divblock på sidan bygg.htm i body. Eftersom vi vet att det handlar om själva “huvud-diven” # container och headern som här heter # banner gör vi så här:

Dokumentet bygg.htm steg 1

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<head>
<meta name=”keywords” content=”” />
<meta name=”description” content=”” />
<title>Din Titel på sidan</title>
<meta http-equiv=”Content-Type” content=”application/xhtml+xml; charset=iso-8859-1″ />
<style type=”text/css”>
/*<![CDATA[*/
@import url(stil.css);
/*]]>*/
</style>
<link rel=”stylesheet” href=”stil.css” type=”text/css” />
</head>
<body>
<div id=”container”>
<div id=”banner”><h3>en rubrik?</h3>
Här kan du lägga ut lite text eller länkar om du vill.</div>

Var nu observant på att avsluta alla divar. Vår div container håller vi däremot öppen än så länge eftersom det är i den vi ska bygga vår layout. Alltså – öppnar vi banner så har vi märkningen <div id=”banner”>. I denna kan vi stoppa in fler värdemärkningar som rubrik, fler divblock, länkar och så vidare. Förutom att vi måste komma ihåg att stänga just diven banner </div>> innan vi kan gå vidare med att bygga är det lika viktigt att avsluta alla eventuella divblock inuti div banner. En bra metod är att när man skriver ut märkningen så avslutar man också märkningen på samma gång. Då vet man att man både har öppnat diven – och sedan stängt diven. Mellan dessa taggar kan man sedan laborera som man vill.

Hur långt har vi då kommit? Kika!

Nu ska vi bygga vidare på vår stilmall. Under vår header ska vi ha ett till div-block. Närmare bestämt en höger ställd kolumn. Vad vi då måste infoga i stil.css är denna kod:

Div-block sidebar-a högerkolumn

#sidebar-a {
float: right;
width: 200px;
\width: 210px;
w\idth: 200px;
margin: 0;
margin-left:5px;
padding: 5px;
background:#ccc;
}

Vid det här laget är Ni bekanta med de olika hacks vi måste infoga. Det är samma princip med bredden på detta div-block som det var i själva huvud-diven container. Bredden är satt till 210 pixlar fast nu har vi endast 5 pixlars padding. 5 pix + 5 pix = 10 pix. 200 pix + 10 pix = 210 pixlar. Även här är vi tvungna att dra av 5 pixlar från vänster respektive höger sida för att få samma storlek i de olika webbläsarna. Skulle du vilja ha 10 pixlars padding måste du därför dra av ytterligare 10 pixlar från själva bredden. Den blir då 190 pix + 20 pixlar = 210 pix. Eller enklare sett: 10 pix + 10 pix = 20 pix. 20 pix + 190 pix = 210 pixlar. Ni ser mönstret? Begreppet boxmodelhack handlar med andra ord inte bara om själva huvudlayouten utan den ska införas i varje div du har i själva layouten om du anger ett värde i padding. Detta gäller bara själva uppbyggnaden av div-blocken, inte själva formateringen av innehållet i dessa.

Placeringen av diven är till höger. Vi ser det i definitionen float: right;. Float betyder ungefär “flyta” och det innebär dels att den ska följa med layouten i olika optimeringar samt att den ska ligga “flytande” på en och samma plats i de olika optimeringarna. Skulle vi däremot ange en bestämd position kan denna div hamna över textmassan om upplösningen på skärmen är mindre, det vill säga 600 x 800 eller mindre. Likaså skulle detta element hamna utanför layouten om optimeringen på skärmen är större än den Du har anpassat layouten till. Enkelt kan man nog säga att värdet float motsvarar procent i en tabell så att helheten anpassar sig efter skärmens storlek. Givetvis kan det vara svårt att få en layout med en bredd på 800 pixlar att få plats i en optimering på just 800x 600 då scroll-listen tar utrymme. Men principen borde inte vara så svår att förstå. Nu tycker jag att vi stoppar in dessa värdeelement i själva dokumentet bygga.htm

Dokumentet bygg.htm steg 2

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<head>
<meta name=”keywords” content=”” />
<meta name=”description” content=”” />
<title>Din Titel på sidan</title>
<meta http-equiv=”Content-Type” content=”application/xhtml+xml; charset=iso-8859-1″ />
<style type=”text/css”>
/*<![CDATA[*/
@import url(stil.css);
/*]]>*/
</style>
<link rel=”stylesheet” href=”stil.css” type=”text/css” />
</head>
<body>
<div id=”container”>
<div id=”banner”><h3>en rubrik?</h3>
Här kan du lägga ut lite text eller länkar om du vill.</div>

<div id=”sidebar-a”>Här emellan kan du har en lista med länkar om du vill</div>

Nu ska vi Kika igen!

Hmmm…varför hamnar diven ovanpå headern?
Lugn – detta fenomen “clearar” vi strax upp. Men först måste vi infoga själva div content. Det vill säga den plats i layouten där du har din text och bilder. Alltså växlar vi till stilmall.css än en gång.

Nu ska vi sätta in det divblock som många benämner “main” i tabeller. Själva diven heter content och koden har Ni här:

Div-block content

#content {
padding: 5px;
margin-right: 215px;
margin-top: 5px;
margin-bottom: 15px;
background:rgb(235, 235, 235) url() repeat;
}
#content p {
color: #333;
text-align:left;
padding:10px 10px 10px 10px;
line-height:150%;
}

Marginalen är satt till 215 pixlars avstånd till höger. Varför? Jo – återigen det här med att anpassa divarna vid boxmodelhack. Den högra kolumnen var ju 210 pixlar bred, sedan vill vi ha 5 pixlars padding i content. Därför behöver vi lägga till 5 pixlar på avståndet mellan div blocket contents högra sida till den högra kolumnen sidebar-a. Inte nog med det – vi måste också infoga hela det högra divblockets bredd i marginalen. Det ger oss detta: 5 pixlars avstånd till själva blockets kant + 210 pixlar eftersom kolumnen är så bred. Det ger oss 215 pixlars avstånd i marginal från div blocket contents högra kant ut till den högra kanten längst ut på layouten.

Detta innebär också att du har en fast storlek på din högra kolumn. Själva content, eller “main” kommer att anpassas efter vilken storlek du har på skärmen. I vissa fall kan därför content bli stor, i andra mindre. Dock kommer den högra kolumnen alltid att vara 210 pixlar bred. Nu stoppar vi in följande kod i bygga.htm

Dokumentet bygg.htm steg 3

<div id=”content”>
</div>

Återigen ska vi Kika!

Nu börjar vi att närma oss slutet. Vad vi har kvar är en så kallad footer. Först växlar vi till stilmallen stil.css och där placerar vi in följande värden:

Div-block footer

#footer {
clear: both;
padding: 5px;
margin-top: 5px;
background-color:#818A93;
}
#footer p {margin:0;
line-height: 140%;
font-size: 8pt;
voice-family: “\”}\””;
voice-family:inherit;
text-align:center;
color:#333;
padding:10px;
}
#footer a {color:#fff; font-size: 8pt;}
#footer a:link, a:visited a:active
{
color: #fff;
text-decoration: none;
font-size: 8pt;
}
#footer a:hover
{
color: #000;
text-decoration: none;
font-size: 8pt;
}

När man använder sig av “flytande” element som float måste man avsluta dessa. I vårt fall sker det i stilmallen. Du kan se det i värdet clear: both;. Detta innebär att man avslutar både den högra kolumnen som divblocket content. De får en “gräns” varifrån de ska sluta att “flyta”. I bland kan man se att man avslutar divblocken direkt i htmlkoden genom att ange detta värde: <div>clear:both;</div>. Nu behöver vi inte sätta ut detta för att vi låter vår stilmall sköta utseendet och den tar därför hand om detta. Däremot ska vi göra klart dokumentet
bygga.htm. Det gör vi genom att sätta in de sista koderna.

Dokumentet bygg.htm steg 4

<div id=”footer”>
</div>

NU är det också dags att stänga själva divblocket container. Och det gör vi genom att infoga den allra sista diven.

Avsluta dokumentet bygg.htm steg 5

</div>

HÄR ser den färdiga css-layouten ut!

Hämta stilmallen här

Liknande poster:

7 Comments Add yours

  1. Nette says:

    ojoj, här har man att bita i. Vill ju så gärna ha en fin blogg, men sitter och klistrar och klipper på egen hand, letar var ändringarna hamnar osv.. Men orkar man göra från grunden när man har en ful blogg man haft i två år? Hur ser det ut då man inför ändringarna då man har en ful blogg sedan tidigare och kanske lagt upp bilder i storlek som passat det tidigare utseendet?

    1. Lena says:

      Hej!
      Övning ger färdighet vet du väl? =)

  2. Kaj says:

    Hej! Detta var ju en bra sida i ett lära sig css med, tycker jag. Begriplig för även 60+. Nu skall jag försöka skriva om en av mina webbsidor i css, vilket kommer att ta tid, men jag har fattat idén.
    Har alltid tyckt om att skriva koden själv, men enbart HTML blir inte så snyggt jag vill ha det.
    Tack för en utmärkt introduktion !
    ——
    Skall bli enormt kul o se om jag lyckas.

    1. Lena says:

      Hej!
      Vad kul att guiden var till nytta. Jag hoppas att du lyckas med din hemsida och du får gärna lämna en kommentar när du är klar så jag får se hur den blev =) Mvh/Lena

      1. Kaj says:

        Jag fick i alla fall på 2 timmar igång en fungerande variant. Kolla http://www.tigeamusic.com. Men jag skall byta lite färger, tecken snitt och så, och lägga in nån bild till.
        Men snabbt gick det !!! Tack igen !…..;)

  3. Erica says:

    Hejhej!
    Jag förstår inte riktigt hur man ska göra när man ska lägga in kodningen på sin blogg.. Jag menar eftersom det är två dokument. Ska man bara lägga in “Stil” och låta “Bygga” ligga kvar på hårdisken? (Förlåt om svaret är helt uppenbart)
    Tack i förhand 🙂

    1. Lena says:

      Hej!
      Stilmallen är ett dokument och “bygga” är ett html-dokument. Båda ska användas av servern. Alltså ska båda skickas upp till mappen.

Leave a Reply

Your email address will not be published. Required fields are marked *