|
Udskrift tabellayout med CSS
|
|
Mange websider er opbygget af tabeller. DSom du måske
har lært tidligere, er det idag mere almindeligt at anvende CSS og
box-modellen til at strukturere websiderne. VI skal se et eksempel på
hvordan en 'gammel' webside kan opdateres til CSS.
|
|
Udgang punktet er denne webside.
Se html-koderne ved i browseren at vælge Vis -> Kilde |
Body |
I mit BODY tag er f.eks indsat følgende formatering
<BODY text=gray bgColor=white><FONT face=verdana>
Jeg sletter det hele så der kun står <body>. Formateringen indsættes
i stedet i et stylesheet. I eksemplet her anvendes et globalt stylesheet.
Se resultatet her. Ok
- det ser ens ud - men det var også meningen. |
Slet tabellerne... |
Nu går jeg mere radikalt til værks. Tabel-koderne skal
slettes , og erstattes med div- elementer, som defineres i stylesheet'et.
Øverst vil jeg have et element til mit sidehoved. Koden hertil kan se
sådan ud:
.sidehoved {
width:80%;
height:80px;
}
Efter <body> taget i websiden indsætter jeg nu <div class="sidehoved">
og klipper nu mit img-tag (som henter mit logo) samt overskrifterne ud
af tabel-strukturen og op efter <div class="sidehoved"> og afslutter
elementet med </div> .
Se resultatet her.
Nej det ser ikke rigtigt ud.
Jeg skal lige venstre-justere mit billede ved i img-tag'et at tilføje
align="left" .
Se nu resultatet - det var meget bedre :-) |
Øvrige elementer |
Udover sidehovedet - vil jeg have to elemeter mere på
siden . en venstre margen og en højre margen. Jeg starter med igen at
definere disse to elementer i mit style sheet.
.left {
width:30%;
float:left;
font-size:xx-small;
}
På tilsvarende måde definerer jeg min andet element som:
.right {
width:70%;
background-color:whitesmoke;
border-left:dashed 1px;
}
|
Fjern tabelkoder |
Nu fjerner jeg alle tabel koderne -altså :
<table><tr><td> og </td></tr></table> fra websiden.
Indsætter mine elementer 'left' og 'right' og flytter tekst og link m.v
ind i de respektive elementer.
Se resultatet her .
der er noget galt her - jeg skal ændre bredden på elementet 'left' så
det flugter med logoet ovenover. Jegkunne her vælge at bruge en fast
bredde i for elementet 'left' f.eks samme bredde som billedet har. Men
jeg kan også prøve mig frem med %' er . 25 % syntes at virke .
Se resultatet her. |
Padding |
Indholdet af mine elementer (teksten) er klinet
op af kanterne på elementerne. Det ændres med egenskaben 'padding' som
jeg tilføjer i mit stylesheet og giver værdien '10px'
Se resultat - det var
meget bedre..:-)
|
|
Check også koderne i websiden ... se hvor smukt det nu
er - ingen tabelkoder. Vi er ved at adskille indholdet ( vores tekst
m.v.) fra layout .
fremover vil det være nemmere at oprette nye sider og redigere
eksisterende. I virkelighedens verden - vil man selvflig lægge
stylesheetet som et 'linked stylesheet'
dvs. som en separat fil.
|
Det videre arbejde |
Jeg når pt ikke at lave mere på eksemplet her.
Men det man kunne gøre var f.eks. at indsætte et element som sidefod -
ligesom med sidehovedet. Måske sidehovedet skulle deles op i to
underelementer - et til logo og et til overskrifter . |