|
Af Jesper Hermansen
Opdateret marts 2003
Send e-mail >>
Drop tables til design,
og få fuld udbytte af CSS!
Historie
Da HTML blev udviklet for mange år siden, var det kun
meningen, at det skulle kunne fremvise tekst,
så det stod overskueligt og struktureret. Den gang var der ikke noget,
der hed layout, men web-designerne skulle bruge noget,
så de også kunne lave en nogenlunde pæn hjemmeside, som ikke bare var
en lang bane med tekst.
Tables var den gang svaret! Simpelthen fordi tables
gjorde det muligt at opdele tingene i bokse, sætte en vis afstand mellem
de forskellige objekter, gøre brug af rammer og så videre.
Det var tiden, hvor man delte
en hel side ind i et eller flere tables, og så lavede utallige row/colspan,
indsatte tomme billeder for at få afstand, og du kender sikkert selv
flere tricks!
Nu sidder du sikkert og siger: "Jamen alle de store
sider er da lavet med tables. F.eks. www.dr.dk, www.computerworld.dk
ja selv www.a-begynder.dk!" ... og så svarer jeg: "Ja, men hvorfor ikke lære det rigtigt
før dem?" Når du er færdig med denne artikel,
vil du forstå! ;-)
Standarder
Før vi fortsætter, vil jeg gerne
fortælle dig noget om åbne standarder! HTML og CSS er begge åbne standarder,
hvilket betyder at alle kan:
Men hvorfor er det så vigtigt med åbne standarder??
Prøv at forestille dig at internettet og HTML var blevet udviklet af
to forskellige firmaer... Et firma lavede deres browser, og det andet lavede deres. Begge fulgte
de deres egen lukkede standard, og i sidste ende, ville det resultere
i, at du skulle bruge én browser for at komme ind på nogle sider, og
en anden til andre sider!! Forestil dig så at der var 3 forskellige
firmaer, og forestil dig så igen at der var 7 forskellige firmaer!!
I sidste ende skulle du sidde som bruger med 7 forskellige browsere
og prøve dig frem for hver side, du gik ind på, hvilken browser siden
nu var lavet til!! Jeg tror næppe internettet var blevet så populært,
hvis ikke der fra starten havde været en fælles åben standard som i
dag!
Om 5-10 år sidder vi måske i vores små hjem, og til den tid kan køleskabet,
fjernsynet og komfuret gå på nettet, hvilket betyder, at vi bliver nød
til at have en standard som er tilgængelig for alle, og som alle kan
gøre brug af! Det gør det også lettere for udviklerne at lave tingene
ordentligt på den måde!
3,2,1 Start
Så går vi i gang. I denne artikel vil jeg udelukkende gøre brug af XHTML
og CSS version 2. Grunden til det, er at de begge er ret godt fremtidssikrede,
og det er hvad W3C (World Wide Web Consortium) anbefaler! Jeg antager
desuden, at du har lidt basisviden inden for HTML og CSS.
Så går vi ellers i gang:
Opret en mappe til dine filer, og derefter følgende:
-
index.html
-
default.css
-
default (endnu en mappe)
Åbn filerne i et rent tekst-program (gerne med syntax-highlighting,
hvis du har). Notepad er fin, jeg synes selv godt om Programmeres Notepad
2 (http://www.pnotepad.org/download.php, husk at hente version 2).
Copy and paste dette ind i
index.html, så gennemgår vi det lige hurtigt:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<meta http-equiv="Content-type"
content="text/html; charset=ISO-8859-1" />
<title>Drop tables til design!</title>
<link
rel="stylesheet" type="text/css" href="default.css" media="screen,projection"
title="Default" />
</head>
<body>
<div id="banner">
<h1><span>Se min flotte
hjemmeside!</span></h1>
</div>
<div id="menu">
<h2><span>Dette er hoved-menu'en</span></h2>
<ul>
<li>Forside</li>
<li>Næste
side</li>
<li>3. side</li>
<li><a class="external" href="http://www.eksperten.dk/">Eksperten</a></li>
<li><a
class="external" href="http://www.ebruger.dk/">eBruger</a></li>
</ul>
</div>
<div
id="content">Bla bla bla...</div>
</body>
</html>
Fordi vi benytter XHTML skal vi starte med at fortælle browseren, at
dette er XML (som XHTML jo kommer af). Samtidig fortæller vi, at det
er XHTML version 1.1, dansk sprog, hvilke tegn der er bruges osv. Informationen
er for så vidt ligegyldig for personen, der skal se siden, men nødvendig
for at browseren kan vise siden ordentligt!
Desuden fortæller vi, at vi gerne vil bruge vores stylesheet,
default.css,
og at det kun kan bruges i forbindelse med fremvisning på en skærm,
eller en projekter.
Resten af dokumentet er helt analogt. Vi har et banner, en menu, bestående
af punkter og noget indhold (content). Alt sammen inddelt i div-tags.
Hvis vi så siden i en browser nu, ville den se ualmindelig kedelig ud.
Derfor skal vi nu igang med CSS'en...
Under default-mappen skal du oprette en fil med navnet
basic.css. Åbn
også den og skriv følgende:
body { font-family: Verdana, Arial, Sans-serif;
font-size:
13px;
background-color: white;
color: black;}
Hvis vi så resultatet i browseren nu, ville der ikke komme noget som
helst, da vi jo refererer til default.css i samme mappe som index.html
ligger i. Det gør vi noget ved.
Åbn default.css og skriv:
@charset "ISO-8859-1";
@import "default/basic.css";
Tadaaa... Resultatet ses med det samme, men hvad skete der lige??
Først fortalte vi, hvilken type bogstaver der findes i dokumentet,
@charset
"ISO-8859-1", hvilket ikke giver noget synligt resultat.
Men det gør @import "default/basic.css" til gengæld.
Dette er et eksempel på noget
rigtig smart ved CSS. Nemlig at man kan importere andre CSS-dokumenter.
På den måde kan du let
holde tingene adskilt, eller f.eks. importere standard indstillinger,
hvis du udvikler til et stort firma, som har nogle standarder for, hvordan
deres overskrifter, links osv. skal se ud.
Lad os straks oprette endnu et CSS-dokument under default-mappen,
banner.css.
Vi kan ligeså godt smide den ind i default.css med det samme, så der
nu står:
@charset "ISO-8859-1";
@import "default/basic.css";
@import "default/banner.css";
Åbn den og lad os få placeret banneret. Vi starter med følgende:
#banner { position: absolute;
left: 0px;top: 0px;
height: 50px;width: 100%;
margin:
0px;
background-color: black;
color: white;}
Nu bliver det interessant!! Vi tager det en linie ad gangen:
1. #banner {
#-tegnet fortæller, at der refereres til noget med en id-attribut i HTML'en.
I dette tilfælde, objektet med id'et "banner" (det samme id må kun være
at finde en gang på hver side, alternativt må man bruge class).
2. position: absolute;
Position fortæller, hvordan elementet skal positioneres.
Static ignorerer
positioneringen (standard). Relative sætter objektet i forhold til hvor
det står. Absolute sætter det præcist på pladsen, afhængig af afstanden
fra kanterne. Og til sidst fixed som holder objektet fast på stedet,
også når der scrolles (understøttes ikke af Internet Explorer).
3. left: 0px;
Sætter objektets venstre kant 0 pixels i forhold til venstre kant af
indholdssiden.
4. top: 0px;
Sætter objektets top kant 0 pixels i forhold til toppen af indholdssiden.
Resten burde være til at gennemskue.
Prøv at se resultatet i din
browser!
Hmmm... Det er næsten godt nok, men teksten kunne måske godt sættes
lidt mere præcist.
Tilføj dette til banner.css:
#banner h1 { padding: 6px 0px 6px 10px;
margin: 0px;}
Vi tager det endnu en gang, linie for linie:
1. #banner h1 {
Nu sætter vi egenskaber for alle de h1-tags, der findes inde i #banner-id'et.
Dette er intet mindre end genialt, da vi på den måde ikke behøver at
give hver h1 en klasse eller et id, men blot kan referere til #banner-id'et,
og finde alle h1-tags derfra!
2. padding: 6px 0px 6px 10px;
At opstille tingene på denne måde kaldes for "shorthand-properties".
I stedet kunne vi have skrevet padding-top: 6px; padding-right: 0px;
osv., men dette er hurtigere. Tallenes rækkefølge er: top, right, bottom,
left. Altså start fra top, og så med uret rundt.
3. margin: 0px;
Igen en shorthand-property. I stedet for at fortælle hver eneste margin
hvor lang den skal være, sætter vi dem alle sammen til 0px. Vi kunne
også have skrevet margin: 0px 0px 0px 0px;, men dette er betydelig nemmere.
Næste trin er menu'en... Tilføj:
@import "default/menu.css";
til default.css, og opret filen menu.css i default-mappen.
Lad os starte med at placere den:
#menu { position: absolute;
top: 50px;
left: 0px;
background-color: #88F;
color: black;
height: 350px;}
Her er tingene helt gennemskuelige!
Hvis du undrer dig over måden background-color er skrevet på, så kan
du læse mere i denne artikel:
Farver med
CSS >>
Det næste, vi skal, er at fjerne
margin og padding fra ul-tag'et. En
"Unordered List" (ul) indeholder som standard lidt margin, og lidt padding
(desværre lidt afhængig af browseren).
I menu.css skriver vi derfor:
#menu ul {margin: 0px;padding: 0px;}
Hvis du har fulgt med, burde ovenstående ikke skulle forklares nærmere.
Hvad med vores h2-tag? Vi har efterladt noget tekst, hvori der står
"Dette er hoved-menu'en", men egentlig har vi ikke brug for det!!
Det ser vi i
anden del af denne
artikel >>
stem her!
|
