---

Jeg har et layout som grundlæggende er en tabel, finpudset med css.

Jeg vil gerne have 2 px hvid luft mellem mine celler.
For en celle der skal være præcis 100px x 100px (incl. de hvide streger
forsøger jeg at styre det med:

..tabelkvadrathvidright { width: 100px; height: 100px; border-top:
none white; border-right: 2px solid white; border-bottom: 2px solid
white; border-left: none white }

Men så bliver cellen tilsyneladende bredere end 100px.

så retter jeg til:

..tabelkvadrathvidright { width: 98px; height: 98px; border-top: none
white; border-right: 2px solid white; border-bottom: 2px solid white;
border-left: none white }

Men det bliver den også for bred af.

Hvis jeg imidlertid helt sletter border og siger:

..tabelkvadrathvidright { width: 98px; height: 98px; border-style: none;
border-color: white }

- så ser den ud som jeg vil have det, og det forstår jeg egentlig ikke,
hvor kommer de hvide kanter fra? Og hvad er den rigtigste måde at lave
det på?

http://home19.inet.tele.dk/storms/skabelon/test.html


--
Venlig hilsen Nina Storm

---

Storm skrev:

> Jeg har et layout som grundlæggende er en tabel, finpudset med css.
>
> Jeg vil gerne have 2 px hvid luft mellem mine celler.
> For en celle der skal være præcis 100px x 100px (incl. de hvide
> streger forsøger jeg at styre det med:
>
> .tabelkvadrathvidright { width: 100px; height: 100px; border-top:
> none white; border-right: 2px solid white; border-bottom: 2px solid
> white; border-left: none white }
>

Klassisk Box model! Tag et godt kig på w3c's hjemmeside og du vil
opdage at border, såfremt din side er i standardsmode, skal lægges til
din bredde!! (IE i quirksmode - eg. gamle browsere, gjorde det forkert
og tog bredden som den samlede bredde af det hele!)

Men når du har en tabel så skal du huske at nulstille både paddings og
margins, da hver browser har sine egne indstillinger!
(border-collapse:collapse; er også god at smide ind!) hvis du i css
skriver * {padding:0; margin:0;} så nulstiller du ALLE elementers
padding og margin, hvilket kan hjælpe dig meget kraftigt med at skabe
et mere ensformigt design på tværs af browsere og platforme, så skal du
kun sætte dem på de elementer der har behov (en liste der bruges som en
"opremsning" eksvis.)

Claus

---

Claus Jacobsen <cj@ingenspamoverhovedettak.dk> wrote:

> Klassisk Box model! Tag et godt kig på w3c's hjemmeside og du vil
> opdage at border, såfremt din side er i standardsmode, skal lægges til
> din bredde!! (IE i quirksmode - eg. gamle browsere, gjorde det forkert
> og tog bredden som den samlede bredde af det hele!)

Takker, det har jeg også gået ud fra.

> Men når du har en tabel så skal du huske at nulstille både paddings og
> margins, da hver browser har sine egne indstillinger!
> (border-collapse:collapse; er også god at smide ind!) hvis du i css
> skriver * {padding:0; margin:0;} så nulstiller du ALLE elementers
> padding og margin, hvilket kan hjælpe dig meget kraftigt med at skabe
> et mere ensformigt design på tværs af browsere og platforme, så skal du
> kun sætte dem på de elementer der har behov (en liste der bruges som en
> "opremsning" eksvis.)

Jeg prøver med alle kombinationer synes jeg.
order-collapse: collapse; kan jeg ikke helt få til at fungere. Jeg har
ihvertfald smidt den ud igen.

Nu ser det i princippet rigtigt ud, i de variationer jeg vil bruge det.
(Med forbehold for at jeg nu kun har kigget med forskellige browsere på
Mac.)

Dog vil jeg mene at de hvide border er mere end 2 pixels brede.

Tak for hjælp.

--
Venlig hilsen Nina Storm

---

Storm skrev:


> Dog vil jeg mene at de hvide border er mere end 2 pixels brede.
>
> Tak for hjælp.

Jep de er 4px! du skal jo huske på, at hvis du "bare" laver en
border:2px solid #fff; så gælder det jo hele vejen rundt! :), jeg kan
se du har lavet klasses til alle cellerne i din css. Så du skal "bare"
huske hvilke der er hvad og hvor stor den skal være, men hvis du vil
undgå det, sætter du bare border:1px; så skulle der jo gerne være 2
pixels imellem cellerne!

Claus

---

"Claus Jacobsen" <cj@ingenspamoverhovedettak.dk> wrote in message
news:420fcefe$0$29275$14726298@news.sunsite.dk...
> Storm skrev:
>
>
>> Dog vil jeg mene at de hvide border er mere end 2 pixels brede.
>>
>> Tak for hjælp.

Dit eksempel kan du dog sagtens lave smartere med den halve kode med div'er
i ren CSS.
Så får du også meget lettere styring over hver enkel kasse.


TL

- - -
www.lindkold.dk

---

TL <lindkoldNEJTIL@SPAMcity.dk> wrote:

> >> Dog vil jeg mene at de hvide border er mere end 2 pixels brede.
> >>
> >> Tak for hjælp.
>
> Dit eksempel kan du dog sagtens lave smartere med den halve kode med div'er
> i ren CSS.
> Så får du også meget lettere styring over hver enkel kasse.

Ja, jeg kan nok lave det smartere og sammenskrive mine egenskaber, men
jeg kan så vidt jeg har forstået ikke lave det i ren css med div'er hvis
jeg samtidigt gerne vil have at hver kasse skal fungere som et link.

--
Venlig hilsen Nina Storm

---

TL <lindkoldNEJTIL@SPAMcity.dk> wrote:

> Dit eksempel kan du dog sagtens lave smartere med den halve kode med div'er
> i ren CSS.
> Så får du også meget lettere styring over hver enkel kasse.

Jo, jeg må jo gerne lægge links i div'er - bare ikke div'er i links.
Jeg prøver at bygge det op med div'er istedet.

--
Venlig hilsen Nina Storm

---

Claus Jacobsen <cj@ingenspamoverhovedettak.dk> wrote:

> Storm skrev:
>
>
> > Dog vil jeg mene at de hvide border er mere end 2 pixels brede.
> >
> > Tak for hjælp.
>
> Jep de er 4px! du skal jo huske på, at hvis du "bare" laver en
> border:2px solid #fff; så gælder det jo hele vejen rundt! :), jeg kan
> se du har lavet klasses til alle cellerne i din css. Så du skal "bare"
> huske hvilke der er hvad og hvor stor den skal være, men hvis du vil
> undgå det, sætter du bare border:1px; så skulle der jo gerne være 2
> pixels imellem cellerne!

Jeg har lavet classes til alle cellerne, men det er kun for at gøre klar
til at de skal fungere som links.

Indtil videre har jeg kun tildelt de classes der styrer layoutet, og her
vil jeg _kun_ have en hvid kant i højre side og i bunden af hver celle.

Derfor skriver jeg f.eks:

..tabelkvadrathvidright { width: 98px; height: 98px; border-top: none;
border-right: 2px solid white; border-bottom: 2px solid white;
border-left: none }

Ja, den burde nok bare hedde celle istedet for tabel...
Jeg er i tvivl om det er vigtigt at slutte med ; } - eller om ; er
ligegyldigt til sidst.


--
Venlig hilsen Nina Storm

---

Storm skrev:


> .tabelkvadrathvidright { width: 98px; height: 98px; border-top:
> none; border-right: 2px solid white; border-bottom: 2px solid white;
> border-left: none }
>
> Ja, den burde nok bare hedde celle istedet for tabel...
> Jeg er i tvivl om det er vigtigt at slutte med ; } - eller om ; er
> ligegyldigt til sidst.

uanset hvad, skal css se sådan ud: selector {attribut:værdi;} så ja
uanset hvad skal du afslutte!


Claus

---

Claus Jacobsen skrev:

> uanset hvad, skal css se sådan ud: selector {attribut:værdi;} så ja
> uanset hvad skal du afslutte!

Niks - tag et kig på css-specifikationen igen:

****
A declaration-block (also called a {}-block in the following text)
starts with a left curly brace ({) and ends with the matching right
curly brace (}). In between there must be a list of zero or more
semicolon-separated (;) declarations.
****
<http://www.w3.org/TR/CSS21/syndata.html#q10>

Semikolon bruges til at adskille flere deklarationer i en blok. Det er
valgfrit efter den sidste deklaration i blokken.

--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

Jens Gyldenkærne Clausen skrev:

****
> A declaration-block (also called a {}-block in the following text)
> starts with a left curly brace ({) and ends with the matching right
> curly brace (}). In between there must be a list of zero or more
> semicolon-separated (;) declarations.
> ****
> <http://www.w3.org/TR/CSS21/syndata.html#q10>
>
> Semikolon bruges til at adskille flere deklarationer i en blok. Det er
> valgfrit efter den sidste deklaration i blokken.

Jamen for hundrede, så lærte jeg også noget nyt idag! :) Det sparer jo
da trods alt et par tastaturtryk!!

Claus