Martin Hintzmann Andersen wrote:
Hej Vint (og Jens)
Du må undskylde at jeg ikke har fået svaret tilbage, men jeg har
simpelthen overset tråden... sorry. Jens har svaret på nogle af de
spørgsmål du havde, men her kommer de igen og lidt ekstra.
>
> Følgende virker i nyere browsere (Mozilla(FF), Opera, Safari, MSIE 6.0)
>
> Punkt 1 - DOCTYPE som tricker standard-mode
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
>
Dette er en doctype som forklare i hvilken version af HTML-siden er
skrevet i. Personligt benytter jeg mig altid af XHTML 1.0 strict, men
det står dig frit at vælge en anden doctype. F.eks. HTML 4.01. Strict
eller Transitional. Dog bør du altid bruge en fuld korrekt doctype som
tricker standard mode i diverse browsere, da det gør det lettere at få
tingene til at se ens ud i de forskellige browsere.
Her kan du se en liste over de mest gængse DOCTYPEr
http://www.hintzmann.dk/articles/doctype/#gaengse
> Punkt 2 - HTML
> <div id="page">
> <div id="head">Head</div>
> <div id="main">
> <div class="box" id="box1">B-1</div>
> <div class="box" id="box2">B-2</div>
> <div class="box" id="box3">B-3</div>
> </div>
> <div id="foot">Foot</div>
> </div>
>
Jeg benytter mig for det meste af en opbygning a lá ovenstående.
#page omklamre hele siden og giver den en fast bredde og kan benyttes
til bl.a. at centre siden, background-image o.lign.
En alternativ måde er at give #head #main og #foot samme faste bredde,
men jeg fortrækker at gøre det et sted, altså på #page.
#main er blot en wrapper som indeholder de 3 bokse.
> Punkt 3 - CSS
> #page {
> width:250px;
> /*
> box1+box2+box3
> (5+10+50+10+5)+(5+5+10+50+10+5+5)+(5+10+50+10+5)
> */
> }
Den totale bredde er beregnet ud fra de 3 bokse.
Generelt for boksene har de en width, padding og border. Den midterste
har også margin for at give lidt mellemrum imellem boksene.
Bredden for en boks udregnes ved at sammenlægge margin, border, padding
og width, altså sålede:
width =
margin-left + border-left + padding-left + width + padding-right +
border-right + margin-right
Den midterste boks er således (5+5+10+50+10+5+5) 90px i bredden.
De to yderste bokse er så (5+10+50+10+5) 80px i bredden, da de ingen
margin har.
De 3 bokse er således 80px + 90px + 80px = 250px.
Og det er den width jeg har givet #page. Dette er en minimums værdi,
hvis du vil have boksene til at stå ved siden af hinanden. Du kan godt
lave #page større, der vil så bare komme lidt luft i højre side. Altså
at #head og #foot er længere end bredden på de 3 bokse.
> #head {
> background:lightblue;
> }
Her giver jeg blot en baggrundsfarve på #head, så man kan se den.
> #main {
> padding-top:5px;
> padding-bottom:5px;
> width:100%;
> float:left;
> clear:left;
> }
#main indholder som sagt de 3 bokse. For at give lidt afstand imellem
#head og #foot indtil de 3 bokse har jeg givet den lidt padding i toppen
og bunden.
Jeg float #main, hvilket gør at indholdet får automatisk width sat til
auto. Det vil sige at den er kun så stor som nødvendigt er, altså
bredden på den bredeste boks (den midterste 90px).
Jeg giver den derfoe width 100% så de 3 bokse står på linie med hinanden.
Jeg clear left for ikke at #foot står ud til højre. Det er en generelt
god ide at clear efter man er færdig med at float'e.
> #foot {
> background:lightblue;
> clear:left;
> }
Lidt baggrundsfarve og en endnu en clear left, hvilket nok er lidt
overkanten da der også er en på #main. Men den skader ikke.
> .box {
> padding:10px;
> border:5px solid lightblue;
> width:50px;
> float:left;
> }
Her er det generelle layout af en boks.
> #box1 { }
En tom regel for bokse 1, blot for at vise at man kan style den
forskelligt, bla. ved at give den en anden border farve.
> #box2 {
> margin-right:5px;
> margin-left:5px;
> }
Her er der lidt luft imellem de 3 bokse. Dette kunne også sættes på
#box1 og #box3, altså som en margin-right på #box1 og margin-left på
#box3. Jeg har ingen specifik grund til at sætte den på den midterste.
Det var bare tilfældigt.
> #box3 { }
>
Samme princip som #box1
--
Martin Hintzmann Andersen
http://www.hintzmann.dk/