:  Retur til startside  
Testmenu (hvis den eksisterer) 		 :  Retur til hovedside om css    :  Retur til hovedside om css-attributter
 :  Til siden om diverse css-attributter

C S S -   attributter   til   B O X             


 
På indledende side om CSS-attributter er defineret:
Hvad er en box
margin
margin-top,
     right / bottom / left
padding
padding-top,
     right / bottom / left
border-width
border-top-width,
     right / bottom / left 		border-style
border-color
border
width
height
float
clear 		 


    : Netscape4.5  (4-kanter)                 Virker        Virker nogenlunde
       Virker ret dårligt   Virker ikke
    : Netscape6.2.3  (6-kanter)
    : Interner Explorer4.0

      
   
oversigt:                
 Box type à 
 attribut â		 <BODY>-
   afsnit		 <TABLE>
<TR> og
<TD>		 <OL><UL>
<LI>		 lidt om attributten
 margin             fra ramme/yderkant til omgivelser
 padding             fra ramme/yderkant til indmad
 border-width            rammens tykkelse
 border-style            rammens stregtype
 border-color            rammens farve
 width             box bredde med margin
 height             box højde med margin
 flow             placering i.f.t. omgivne tekst
 clear             flyt box til fri position ?
 
   margin
Samlerkoden margin
Samler de 4 koder    margin-top,    margin-right,    margin-bottom,    margin-left
til én, der kan så angives 1, 2, 3 eller 4 værdier. De skrives uden andet skilletegn end mellemrum, og hver værdi kan angives som:
   <længde>    eller
   <tal>%        eller
     auto.
  • angives 1 værdi gælder den for både top, right, bottom og left.
  • angives 2 værdier gælder 1.ste for top og bottom, 2.den for right og left.
  • angives 3 værdier gælder 1.ste for top, 2.den for right og left, 3.je for bottom.
  • angives 4 værdier gælder de for henholdsvis top, right, bottom og left.
  margin-bottom
 Box type à 
 attribut â		 <BODY>-
   afsnit		 <TABLE>     <TR>         <TD>     <OL>< UL>     <LI>    
margin     virker ikke     virker ikke    virker ikke virker ikke    Virker ikke virker ikke    Ingen UL-attributter dur virker ikke    
margin-top     virker ikke- ved en fejl er det margin-botton der sætter margin-top    virker ikke    virker ikke    Virker ikke        
margin-right meningsløs    meningsløs meningsløs    meningsløs meningsløs    meningsløs virker ikke    virker ikke meningsløs    meningsløs fjerner foranstillet tegn på første LI    
margin-bottom Meningsløs    Meningsløs sætter margin-bottomtop     virker ikke- ved en fejl er det margin-bottom der sætter hele tabellens margin-top    virker ikke virker, men hvis den sættes med margin kommer den kun somme tider med?    virker ikke     virker ikke    
margin-left angives sidenhen f.eks TABLE width=100% vil tabellen rage ud over højremargin     virker ikke     Meningsløs    Meningsløs    Virker ikke    har kun en svag effekt fjerner foranstillede tegn på første LI    
 
  padding    Samlerkoden samler de 4 koder:
  padding-top, padding-right, padding-bottom, padding-left;     sml. margin ovenfor.
  Mulige værdier:
    <længde>
    <tal>%
Padding er afstanden fra border=rammen udenom, til indmaden.
Når der skrives padding-attribut på en hel tabel, eller en række i en tabel, opfatter både Netscape og I.Expl. det som om attributten var skrevet på hvert eneste af de tilhørende felter.  
 Box type à 
 attribut â		 <BODY>-
   afsnit		 <TABLE>     <TR>         <TD>     <OL>< UL>     <LI>    
padding     virker ikke altid, mystisk     sætter margin-top ?     glemmer padding-right     virker ikke     virker ikke    
padding-top         virker ikke             virker kun på 1.ste LI    
padding-right meningsløs    meningsløs meningsløs     virker ikke     virker ikke        virker ikke, men er også ret meningsløs virker ikke, men fjerner liste-char    virker ikke, men er også ret meningsløs
padding-bottom meningsløs    meningsløs sætter både top og bund     sætter margin-top ?         virker ikke     virker men foranstillede tegn rykker ikke med    
padding-left angives sidenhen f.eks TABLE width=100% vil tabellen rage ud over højremargin                 virker ikke     virker men fjerner foranstillede tegn    
 
  border-width Samlerkoden samler de 4 koder:
  border-top-width, border-right-width, border-bottom-width, border-left-width;     sml. margin ovenfor.
Mulige værdier:
         thin
       medium
       thick
    <længde> 
Border-width er tykkelsen af stregen på den ramme, der tegnes udenom.
  Det virker med Netscape på <UL>, men ikke på <TABLE>, <TR>, <TD> og <IMAGE> ;   på <LI> laves der nok en ramme, men den ligger lige ovenover teksten.
  Det virker med Internet Explorer4.0 på <TD>, <UL> og <LI> ;   men ikke på <TR> og <IMAGE> ;   på <TABLE> virker det, såfremt der også er angivet en border-style.
 
  border-style
Der kan skrives 1, 2, 3 eller 4 værdier svarende til top, right, bottom, left (sml. margin ovenfor.), men der er ikke noget der hedder "border-top-style".
  virker kun på UL; OL får ødelagt nummereringen, og LI får sat ramme men ovenover teksten i stedet for omkring.  Netscape: Border-width skal også sættes.
 Mulige værdier :
 overflødig, men virker - dog OL og UL får det foranstillede lavet om til en lille firkant  virker på TABLE, TD, OL, UL og LI, men ikke på TR  none
Ramme om OL: 
<ol style="border-style: xxx; border-width:3px">
<li>xxx </ol> 		 
Denne tabel har ikke anført border-style
Denne tabel dotted
Denne tabel dashed
Denne tabel solid
Denne tabel double
Denne tabel groove
Denne tabel ridge
Denne tabel inset
Denne tabel outset
  1. none
  1. dotted
  1. dashed
  1. solid
  1. double
  1. groove
  1. ridge
  1. inset
  1. outset
 virker som solid i 4.7, men virker i version 6  virker som solid  dotted
 virker som solid i 4.7, men virker i version 6  virker som solid dashed 
 bordercolor bliver sort hvis den ikke sættes. Virker kun på UL; OL får ødelagt nummereringen, og LI får sat ramme men ovenover teksten i stedet for omkring  virker på TABLE, TD, UL og LI, men ikke på TR. Med OL når rammen ikke omkring nummereringen solid
 bordercolor bliver sort hvis den ikke sættes. Virker kun på UL; OL får ødelagt nummereringen, og LI får sat ramme men ovenover teksten i stedet for omkring  virker på TABLE, TD, UL og LI, men ikke på TR. Med OL når rammen ikke omkring nummereringen double
 virker kun på UL; OL får ødelagt nummereringen, og LI får sat ramme men ovenover teksten i stedet for omkring  virker på TABLE, TD, UL og LI, men ikke på TR. Med OL når rammen ikke omkring nummereringen groove
 virker kun på UL; OL får ødelagt nummereringen, og LI får sat ramme men ovenover teksten i stedet for omkring  virker på TABLE, TD, UL og LI, men ikke på TR. Med OL når rammen ikke omkring nummereringen ridge
 virker kun på UL; OL får ødelagt nummereringen, og LI får sat ramme men ovenover teksten i stedet for omkring  virker på TABLE, TD, UL og LI, men ikke på TR. Med OL når rammen ikke omkring nummereringen inset
 virker kun på UL; OL får ødelagt nummereringen, og LI får sat ramme men ovenover teksten i stedet for omkring  virker på TABLE, TD, UL og LI, men ikke på TR. Med OL når rammen ikke omkring nummereringen outset
 
  border-color
Rammens farve. Der kan skrives 1, 2, 3 eller 4 værdier svarende til top, right, bottom, left (sml. margin ovenfor.), men der er ikke noget der hedder "border-top-color". Netscape forstår kun én værdi; skrives der flere bruges det 2.det navn til alle.
Mulige værdier:
<farvenavn>
Hvorvidt det virker eller ej afhænger helt af, om man samtidig sætter Border-width og Border-style:
border-width
sat?		 border-style
sat?		 hvorvidt border-color virker
<TABLE>  <TR>   <TD>  <UL><OL>  <LI> 
nej nej                    
nej ja                    
ja nej                 rammen kommer ikke om LI-teksten men lige ovenover   
ja ja                 Rammen kommer ikke om LI-teksten men lige ovenover   
Afhængig af den valgte border-style kan nogle af rammens sider blive vist i en mørkere farve. Det er den valgte farve med reduceret lysintensitet.
 
  border-top, border-right, border-bottom, border-left
Der kan skrives 1, 2 eller 3 værdier til hvert af disse, svarende til
         <border-width>
         <border-style>
         <border-color>
 
 tabel  
 
Eks: <TABLE style="border-top: double green 2cm; border-right: red solid 2mm; border-bottom: 2mm double green; border-left: 10mm red solid">. Resultat ® 
     Koden virker i det omfang de tilhørende border-width, border-color og border-style virker. Da enhederne for værdierne er forskellige, er rækkefølgen width-color-style ligegyldig.
 
  border
Sætter border-top, border-right, border-bottom og border-left så de alle 4 får samme værdi. Der kan sættes 1, 2 eller 3 værdier, for:
         <border-width>
         <border-style>
         <border-color>
 Koden virker i det omfang de tilhørende border-width, border-color og border-style virker.
eks: <table style="border: 1cm double fuchsia">     à 
1 cm
 x 2
 
  width
   Sætter bredden af box-element:
I   Netscape   virker attributten på UL og OL-lister men ikke tabeller.
I   I. Explorer virker attributten på tabeller, men ikke på lister.
Alt i alt er attributten ubrugelig når vi kræver, at det skal virke både med Netscape og I. Expl.
Tilladte værdier:
     auto   /* default */
     <længde>
     <tal> /* virker ikke */
 
  height
   Sætter højden af af box-element; virker ikke i Netscape, men nok i I.Exp. på TABLE, TR og TD.
     auto /* default */      <længde>
 
  float
 IMG har altid float: both og det kan ikke stilles IMG har altid float: both og det kan ikke stilles 
Denne tabel
har style=
"float: left"
Denne tabel
har style=
"float: right"
Hvor box-elementet skal placeres i forhold til den omgivne tekst. Mulige værdier: <br>
     none /* default for table og UL */
     left
     right
Med Internet Explorer, men ikke med Netscape, placeres den omgivne tekst mellem de to tabeller. Kildeteksten til de to tabeller er skrevet inden den omgivne tekst. De to lister nedenfor tilsvarende.
  • Denne
  • UL-liste
  • har style=
  • "float: left"
  1. Denne
  2. OL-liste
  3. har style=
  4. "float: right"
Netscape placerer denne tekst mellem de to lister, I.Explorer nedenfor.
Alt i alt er float-attributten ubrugelig når vi kræver, at det skal virke både med Netscape og Internet Explorer.
 
  clear
 brug ikke STYLE på IMG, i stedet for CLEAR indsæt linieskift brug ikke STYLE på IMG, i stedet for CLEAR indsæt linieskift Placer Box ved næste fri position, mulige værdier:
     none  /* default */
     left
     right
     both
Denne tabel
har style=
"float: left"
Her var så første tabel, nu kommer anden tabel:
Denne tabel
har style=
"float: left"
Med I.Expl. kommer den anden tabel ret fjollet i forlængelse af den første. Den kunne være rykket til en fri venstre position med clear=left (eller both).
  • Denne
  • UL-liste
  • har style=
  • "float: left"
  1. Denne
  2. OL-liste
  3. har style=
  4. "float: left"
Netscape placerer somme tider de to lister i forlængelse af hinanden, men er upålidelig (periodisk fejl) - dette kan undgås med "clear: left" på den 2.den liste.
Med I.Expl. kommer den 1.ste liste til at rage fjollet ind i den 2.den tabel. Også dette kan undgås, her med "clear: left" på den 1.ste liste.
 

  :  Til toppen af siden