| |
Margin - border og padding
|
| |
I det foregående eksempel
havde vi indsat to blockelementer ved siden af hinanden. Vi skal nu se
hvordan vi kan styre margin omkring elementerne samt afstanden (padding)
mellem tekst og elementets kanter (border). Nedenstående model
illustrerer hvad der er elementets margin, border og padding. |
| |
 |
| |
Jeg tilføjer nu egenskaberne margin , border og
padding til elementet 'left_box' og tildeler egenskaberne nogle værdier.
|
| |
Se resultatet her - og se
samtidigt koderne til stylesheetet. |
| |
Bemærk følgende: for begge mine to elementer har jeg
angivet skriftfarven til sort. Hvis denne egenskab skal anvendes i begge
elementer kan jeg ligeså godt definere dette som gældende for hele
websiden. Det gør jeg ved at angive nogle egenskaber for HTML taget <
body >.
Jeg vil i første omgang definere egenskaberne : skifttype, - farve og
baggrundsfarve.
|
| |
Se eksempel her - check igen
koderne - se nedenfor:
|
| Margen er nu sat for hele siden - dvs. body
tag'et.
Elementernes bredde er nu angivet i % af hele skærmbredden.
Ligeledes er højden nu angivet til 100% af skræmbilledet.
For at siden skal vises rigtigt i Mozilla Browsere ( f.eks
Navigator)
bliver jeg nød til at reducere bredden på 'right_box' til 64%.
|
body {
font-family:verdana;
color:black;
margin:30px;
}
.left_box {
width:30%;
height:100%;
background-color:beige;
float:left;
padding:10px;
border:outset 1px;
}
.right_box {
width:64%; /* for Mozilla-Navigator */
height:100%;
background-color:whitesmoke;
padding:10px;
border:outset 1px;
float:right; /* for Mozilla -Navigator */
}
|
| |
Egenskaber som margin, border og padding kan angives
for alle 4 sider af elementet (som vi har gjort ovenfor) eller for en
eller flere sider. Hvis vi f.eks. vil angive forskellige margner for et
element kan vi gøre det således: |
| |
margin-top:50px;
margin-right:100px;
margin-bottom:50px;
margin-left:150px;
|
| |
Vi kan også skrive dette i en enkelt paragraf ,
påfølgende måde:
margin:50px 100px 50px 150px;
Dette er dels hurtigere , og giver dig et mere overskueligt
stylesheet.
Bemærk at værdierne skal angives i denne rækkefølge:
top, right, bottom og left.
Lad os se hvordan det virker på body-elementet i
eksemplet fra før.
|
| |
På næste side skal vi
indsætte et element i toppen af siden, som skal fungere som sidehoved. |
