Centrer hjemmesiden
Sat på siden 09-10-2005
Jeg elsker at undervise! Jeg lærer noget nyt hver gang ;-)
Ved hjælp af stylesheets er det forholdsvis let at få indholdet af hjemmesiden til at være centreret, sådan som du fx kan se det på http://www.foxladi.com/projekt.html
Åh, ja, det virker ikke i IE, som ikke overholder standarden. Der skal der flere krumspring til, det er derfor, at det kun er "forholdsvis let".
I princippet er det faktisk ret enkelt.
Du laver en ID, som omfatter hele sidens indhold. Min hedder "main". I den fastsætter du en bredde på indholdet (fx width: 550px;), og så sætter du følgende marginer:
margin-left: auto;
margin-right: auto;
For lige at vise strukturen på hjemmesiden så vil den i grove træk
være:
<html>
<head>
titel, link til stylesheet
m.m.
</head>
<body>
<div
id="main">
<h1>Overskrift</h1>
<p>Tekst,
billeder og bla bla
bla</p>
</div>
</body>
</html>
Så vil indholdet automatisk blive centreret i browsere, der understøtter CSS2.
Det gør IE som bekendt ikke.
Så, suk, vi må gøre lidt ekstra for, at den browser kan forstå det.
Hvis du ikke allerede har en body-kode i css, så opret en og tilføj:
body{
text-align: center;
min-width: 550px;
}
"min-width" skal være det samme som den bredde, du har valgt til "main".
Dette centrerer indholdet OG tekst på siden, så vi skal lige tilbage til "main" for at tilføje:
text-align: left;
Prøv at se mit stylesheet til http://www.foxladi.com/projekt.html
Du finder det (hvis du ikke bruger Firefox) her:
http://www.foxladi.com/projekt.css
I FireFox kan man finde det lettere ved hjælp af værktøjslinjen Web Developer Tools (se tidligere tip om emnet).
Smart, ikke?
Hvis du godt kunne tænke dig at bruge ovenstående, men det er volapyk for dig, så meld dig til mit kursus "Begynd med stylesheets", næste gang det starter. Følg med på http://www.e-skole.com