En ny HTML-side fra grunden

Indlæs andet indhold på denne side:

Indramninger

Siden er opdateret 12. 12. 2005

Generelt har jeg på mine sider indsat billeder og grafik uden indramning af nogen form. Det har jeg gjort ved at lave en definition i min *.css-fil:

img{
border: none
}

Dertil har jeg IKKE nogen borderdefinition ved kald til illustrationer og knapper på siderne:

<img src="zzz.gif" width="xx" height="yy" alt="">

Men der er rige muligheder for - af dekorative eller illustrative grunde - at sætte rammer omkring billeder eller tabeller (eller celler i tabeller eller div'er, you name it). Jeg vil her først vise forskellige typer indramning omkring billeder (andre elementer tildelses indramning på samme måde):

Sådan ser det ud Sådan kodes i CSS Sådan kaldes det
Erik .groo{
border:6px groove red
}
<img class="groo" src="zz.gif" width="...

Border er lavet som en graveret rille omkring billedet.

Se skemaet med navngivne farver på denne side
eller se siden om Websikre farver.
Erik .ridg{
border:6px ridge red
}
<img class="ridg" src="zz.gif" width="...

Border er lagt på som en ophøjet kant omkring billedet.
Erik .inst{
border:6px inset red
}
<img class="inst" src="zz.gif" width="...

Billedet er anbragt i en nedsænkning.
Erik .outs{
border:6px outset red
}
<img class="outs" src="zz.gif" width="...

Billedet er anbragt på en forhøjning.
Erik .sold{
border:6px solid red
}
<img class="sold" src="zz.gif" width="...

Billedrammen er blot helt plan.
Erik .dobl{
border:6px double red
}
<img class="dobl" src="zz.gif" width="...

Billedrammen består af to linjer á 2 pixels med et mellemrum på 2 pixels.

Forholdet mellem linjetykkelse og linjemellemrum vil - uanset samlet rammebredde - være 1:1:1.
Erik .das{
border:3px dashed red
}
<img class="das" src="zz.gif" width="...

Indramningen består af en serie korte linjestykker.
Erik .dot{
border:3px dotted red
}
<img class="dot" src="zz.gif" width="...

Indramningen består af en serie punkter.

Hvis du i denne og forrige rammedefinition sætter bredden ned til 1 pixel, kan det være meget svært at se forskel på dashed og dotted.

Man kan uden problemer lade forskellige linjetyper og/eller -farver udgøre rammens 4 sider. Til det brug defineres de fire rammedele i rækkefølgen 'top, højre, bund, venstre' (tænk på et ur: 0, 3, 6, 9):

Sådan ser det ud Sådan kodes i CSS Sådan kaldes det
Erik .dif{
border-top: 6px solid red;
border-right: 6px dashed red;
border-bottom: 6px dotted green;
border-left: 6px double green
}
<img class="dif" src="zz.gif" width="...

Border er hele vejen omkring billedet 6 pixels bred.

I toppen er brugt 'solid', til højre er brugt 'dashed', i bunden er brugt dotted og til venstre er brugt double.

Se skemaet med navngivne farver på denne side
eller se siden om Websikre farver.

Du kan altså sætte forskellig bordertype og/eller -farve på de 4 sider.
Erik .var{
border-style: solid;
border-color: red;
border-width: 1px 2px 4px 6px;
}
<img class="var" src="zz.gif" width="...

Border er hele vejen omkring billedet en ubrudt rød linje.

I toppen er den sat til 1 pixel, til højre 2 pixels, i bunden 4 pixels og til venstre 6 pixels.

Du kan altså sætte forskellig bredde på border på de 4 sider

Derudover findes en rammedefinition hidden, som kan bruges i en tabel, hvor der ellers er defineret synlige rammer mellem tabelcellerne. Definitionen virker kun med sikkerhed, hvis den sættes 'inline':

Sådan koder du i CSS Sådan ser en tabelcelle ud, når den undtagelsesvis IKKE skal have en indramning.
<td style="border-style:none"> Kode for skjult indramning er netop brugt på denne tabelcelle.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen januar 2000
Hjemmesideskolen
Du er her: Forsiden - html - En ny HTML-side fra grunden
Brugere lige nu: 1
Home Mail