I dag handler det om HTML og CSS skabelonerne. I første omgang handler det om at gøre det så enkelt som muligt. Der er ingen grund til gøre det hele mere kompliceret end det er.
Jeg bygger min html uden tabeller og jeg bruger lister til navigation, men nu går jeg vist en smule for hurtigt frem.
Den grundlæggende html skabelon er i virkeligheden meget enkel. Den ser ud som følger:
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
<body>
<div id=”divPlaceholder”>
<div id=”divHeader”>
Title
</div>
<div id=”divLeftOne”>
Sidebar 1
</div>
<div id=”divLeftTwo”>
Sidebar 2
</div>
<div id=”divContent”>
En masse spændende indhold
</div>
</div>
</body>
</html>
Som du kan se har jeg allerede tilføjet et stylesheet. Der står ikke noget i mit stylesheet endnu, men ved at have oprettet filen og tilføjet den i html’en kan jeg hurtigt komme igang. Det er en meget enkel html skabelon med en div der omkranser alt indholdet. Det er den jeg bruger til at positionere de andre elementer midt på siden med.
Hvis du laver din egen html fil med ovenstående kode og får den vist i en browser vil du bemærke at alle elementerne bliver vist i rækkefølge ovenpå hinanden. Det er noget af det første jeg vil bruge CSS’en til at gøre noget ved. For nemmere at manipulere med elementerne har jeg givet dem alle sammen id’er, som jeg selv synes er sigende.
#divLeftOne{
display: inline;
}
#divLeftTwo{
display: inline;
}
#divContent{
display: inline;
}
Det første jeg gør er at oprette selektorer for de tre indholdselementer. Derefter giver jeg dem egenskaben; display: inline; Det sørger for at de alle tre kommer op på niveau med hinanden. Før blev de vist under hinanden.
I næste skridt giver jeg dem forskellige baggrundsfarver. Det er midlertidige farver jeg kun skal bruge til tydeligere at se hvordan de forskellige elementer står i forhold til hinanden.
#divPlaceholder{
}
#divHeader{
background-color: blue;
}
#divLeftOne{
background-color: red;
display: inline;
}
#divLeftTwo{
background-color: green;
display: inline;
}
#divContent{
background-color: yellow;
display: inline;
}
Jeg har valgt at jeg i det her design vil styre bredden med hård hånd. Jeg vil gerne sikre mig at brugere med en browserstørrelse på 800×600 også kan se hele siden.
#divPlaceholder{
width: 760px;
}
#divHeader{
background-color: blue;
}
#divLeftOne{
background-color: red;
display: inline;
}
#divLeftTwo{
background-color: green;
display: inline;
}
#divContent{
background-color: yellow;
display: inline;
}
Jeg tilføjer derfor en bredde på 760px til divPlaceholder div’en. Det næste og sidste skridt i dag er at centrere layoutet. Det ser sådan her ud:
body{
text-align: center;
}
#divPlaceholder{
width: 760px;
text-align: left;
margin: 0 auto;
}
#divHeader{
background-color: blue;
}
#divLeftOne{
background-color: red;
display: inline;
}
#divLeftTwo{
background-color: green;
display: inline;
}
#divContent{
background-color: yellow;
display: inline;
}
Jeg har gjort to ting. For det første har jeg tilføjet text-align: center i body elementet og text-align: left; i divPlaceholder selektoren. Det er jeg desværre nødt til for at få det til at virke i Internet Explorer.
Alle andre browsere er tilfredse med margin: 0 auto; i divPlaceholder selektoren. Det var det for i dag. I morgen kigger vi på valg af farver og skrifttyper.
