---

Hej igen.

Der er hele tiden nye sp der kommer frem.

Når man laver en css fil, skal der så stå noget bestemt i toppen ???
!DOCTYPE ????


Nu er jeg ved at designe en tabel ved css.

kan man lave noget generelt for hele tabellen ? som f.eks.

..tabel001
{
width : 580px;
color : black;
border : 3px ridge silver ;
font : 13px "Verdana";
padding : 5px;
}

og så bagefter så det ikke virker som en ændring - men en tilføjelse .

..td001
{
width : 220px;
border : 3px ridge silver ;
height : 30px;
}

..td002
osv.

??


--
Venlig hilsen
Erik Isager

---

"Is" <detteerminnewsgruppemailadresse2@get2net.dk> wrote:

> Når man laver en css fil, skal der så stå noget bestemt i toppen
> ??? !DOCTYPE ????

Nej. Der skal ikke noget yderligere indhold i en CSS-fil, end ren
CSS-kode. Doctypen skal bruges i (X)HTML-dokumentet; den fortæller
browseren hvilken version (X)HTML, der benyttes på siden, hvilket har
betydning for, hvordan browseren fortolker den strukturelle kode
såvel som CSSen.

Martin Hintzmann Andersen har skrevet (et udkast til) en udmærket
artikel om det:

<http://www.hintzmann.dk/articles/doctype/>

> Nu er jeg ved at designe en tabel ved css.

Du er nok snarere ved at definere CSS-regler for, hvordan en given
tabel skal præsenteres

> kan man lave noget generelt for hele tabellen ?
[snip]
> og så bagefter så det ikke virker som en ændring - men en
> tilføjelse

Ja: tildel tabellen flere klasser:

<table class="skema eksport sjov">
<tr><th>Type</th><th>Beløb</th></tr>
<tr><td>Gummiænder</td><td>kr. 1.234,-</td></tr>
</table>

..skema {
border: 2px solid #f00;
border-collapse: collapse;
margin: 20px 60px;
}

..skema td, .skema th {
padding: 4px;
}

..eksport td {
background: #ccc;    
}

..sjov th {
text-align: left;
background: fcc;
}

..sjov td {
color: #f00;
}


Ovenstående tabel er tildelt tre klasser, der hver især via CSS-koden
tilføjer nye regler for, hvordan celler, indhold og kanter
præsenteres.

--
Anders Thorsen Holm, BSc i datalogi-multimedier.

Jeg søger fuldtidsjob i Århus - gerne studierelevant, men ingen
betingelse. Læs mit CV: http://www.thorsenholm.dk/cv/

---

Anders Thorsen Holm wrote:
> Ja: tildel tabellen flere klasser:
>
> <table class="skema eksport sjov">
> <tr><th>Type</th><th>Beløb</th></tr>
> <tr><td>Gummiænder</td><td>kr. 1.234,-</td></tr>
> </table>
>
> .skema {
> border: 2px solid #f00;
> border-collapse: collapse;
> margin: 20px 60px;
> }
>
> .skema td, .skema th {
> padding: 4px;
> }
>
> .eksport td {
> background: #ccc;
> }
>
> .sjov th {
> text-align: left;
> background: fcc;
> }
>
> .sjov td {
> color: #f00;
> }
>
>
> Ovenstående tabel er tildelt tre klasser, der hver især via CSS-koden
> tilføjer nye regler for, hvordan celler, indhold og kanter
> præsenteres.

Fint nok, men hvis jeg har en tabel med 3 kolonner og 10 rækker.

Så vil jeg tildele kolonne 1: text-align : center;
Så vil jeg tildele kolonne 2: text-align : left;

Række 8 en cellehøjde : height : 85px;

hvordan gøres det ???


Men det er måske i det heletaget en dårlig ide at bestemme størrelse H/B på
celler i en tabel ? bare skrive bredden på tabellen, og så lade indholdet i
cellerne bestemme resten. ??


--
Venlig hilsen
Erik Isager

---

"Is" <detteerminnewsgruppemailadresse2@get2net.dk> wrote:

> Fint nok, men hvis jeg har en tabel med 3 kolonner og 10 rækker.
>
> Så vil jeg tildele kolonne 1: text-align : center;
> Så vil jeg tildele kolonne 2: text-align : left;
>
> Række 8 en cellehøjde : height : 85px;

Tildel cellerne passende klasser:

<table>
....
<tr>
<td class="vare">Gummiand</td>
<td class="beskrivelse">Gul og grim</td>
<td class="pris">kr. 42,-</td>
</tr>
....
<tr class="speciel">
<td class="vare">Gummiged</td>
<td class="beskrivelse">Stor og tung</td>
<td class="pris">Alt for meget</td>
</tr>
....
</table>


td.vare {
   text-align: center;
}

td.beskrivelse {
   text-align: left;    
}

..speciel td {
   height: 85px;
}


Man kan også benytte <colgroup>- og <col>-elementerne til at angive
enkelte attributter, f.eks. bredde:

<table>
<colgroup>
<col class="vare" />
<col class="beskrivelse" />
<col class="pris" />
</colgroup>
....
<tr>
<td class="vare">Gummiand</td>
<td class="beskrivelse">Gul og grim</td>
<td class="pris">kr. 42,-</td>
</tr>
....
</table>

col.vare {
   width: 20%;
}

col.beskrivelse {
   width: 60%;
}

col.pris {
   width: 20%;
}


Men desværre er det kun ganske få attributter, man kan ændre på
celler via <col>. Ellers havde det været enkelt at tildele egenskaber
for hele kolonner/søjler.

Begrænsningen skyldes, så vidt jeg forstår, at tabelceller ikke er
"børn" af <col>-elementer, men <tr>-elementer, hvorfor der ikke kan
foretages nogen nedarvning:

<http://www.w3.org/TR/REC-CSS2/tables.html#q4>

> Men det er måske i det heletaget en dårlig ide at bestemme
> størrelse H/B på celler i en tabel ? bare skrive bredden på
> tabellen, og så lade indholdet i cellerne bestemme resten. ??

Der er sådan set ikke noget i vejen for at angive dimensioner for
celler eller tabellen som helhed via CSS - man skal bare være
forberedt på problemer, hvis indholdet reelt fylder mere, end der er
angivet plads til.

--
Anders Thorsen Holm, BSc i datalogi-multimedier.

Jeg søger fuldtidsjob i Århus - gerne studierelevant, men ingen
betingelse. Læs mit CV: http://www.thorsenholm.dk/cv/

---

Anders Thorsen Holm wrote:
> Tildel cellerne passende klasser:
>
> <table>
> ...
> <tr>
> <td class="vare">Gummiand</td>
> <td class="beskrivelse">Gul og grim</td>
> <td class="pris">kr. 42,-</td>
> </tr>
> ...
> <tr class="speciel">
> <td class="vare">Gummiged</td>
> <td class="beskrivelse">Stor og tung</td>
> <td class="pris">Alt for meget</td>
> </tr>
> ...
> </table>
>
>
> td.vare {
> text-align: center;
> }
>
> td.beskrivelse {
> text-align: left;
> }
>
> .speciel td {
> height: 85px;
> }
---

er det bare en smutter ? ".speciel td "








>
>
> Man kan også benytte <colgroup>- og <col>-elementerne til at angive
> enkelte attributter, f.eks. bredde:
>
> <table>
> <colgroup>
> <col class="vare" />
> <col class="beskrivelse" />
> <col class="pris" />
> </colgroup>
> ...
> <tr>
> <td class="vare">Gummiand</td>
> <td class="beskrivelse">Gul og grim</td>
> <td class="pris">kr. 42,-</td>
> </tr>
> ...
> </table>
>
> col.vare {
> width: 20%;
> }
>
> col.beskrivelse {
> width: 60%;
> }
>
> col.pris {
> width: 20%;
> }
>
>
> Men desværre er det kun ganske få attributter, man kan ændre på
> celler via <col>. Ellers havde det været enkelt at tildele egenskaber
> for hele kolonner/søjler.
>
> Begrænsningen skyldes, så vidt jeg forstår, at tabelceller ikke er
> "børn" af <col>-elementer, men <tr>-elementer, hvorfor der ikke kan
> foretages nogen nedarvning:
>
> <http://www.w3.org/TR/REC-CSS2/tables.html#q4>
>
>> Men det er måske i det heletaget en dårlig ide at bestemme
>> størrelse H/B på celler i en tabel ? bare skrive bredden på
>> tabellen, og så lade indholdet i cellerne bestemme resten. ??
>
> Der er sådan set ikke noget i vejen for at angive dimensioner for
> celler eller tabellen som helhed via CSS - man skal bare være
> forberedt på problemer, hvis indholdet reelt fylder mere, end der er
> angivet plads til.

Tak for svar , jeg vil så fortsat gøre som det øverste du viste.
http://www.dch-haslev.dk/jmail/testindmeld.asp


--
Venlig hilsen
Erik Isager

---

Is wrote:

>> <tr class="speciel">
>> <td class="vare">Gummiged</td>
>> <td class="beskrivelse">Stor og tung</td>
>> <td class="pris">Alt for meget</td>
>> </tr>

>> .speciel td {
>> height: 85px;
>> }
> ---
>
> er det bare en smutter ? ".speciel td "

Nej. Her er td barn af <tr class="speciel">. Derfor nævnes klassen først og
derefter td. Derved kommer reglen kun til at gælde for de td'er, der er
indeholdt i <tr class="speciel">.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://hjem.get2net.dk/egin

---

Erik Ginnerskov wrote:

> Nej. Her er td barn af <tr class="speciel">. Derfor nævnes klassen
> først og derefter td. Derved kommer reglen kun til at gælde for de
> td'er, der er indeholdt i <tr class="speciel">.

Hvorfor kun <tr class="speciel"> og ikke <tr class="speciel td"> ??


Og betyder det at jeg kan lave nogle generelle oplysninger så jeg laver en
<.th> og en <.special th> , og de oplysninger der så er forskellige lægge
dem i <.td001>, <.td002>, <.td003>

hvor jeg så vil lægge <.th> eller <.special th> i <tr class="xxx">
og så

<td class="td001">1</td>
<td class="td002">2</td>
<td class="td003">3</td>

???
hvis det jeg her har beskrevet kan virker, kan jeg så gøre det med følgende?

Jeg har her under klippet en del af en css som er til en tabel, hvor den
øverste del er som den ser ud nu, derefter har jeg ændret det til brug i
ovenstående.

---
..tabel001
{
background-color : silver;
color : Black;
width : 580px;
border : 2px ridge #999999;
}
..td001
{
width : 220px;
color : Black;
border : 3px ridge silver ;
height : 27px;
font : 13px "Verdana";
padding : 5px;
}
..td002
{
width : 281px;
color : Black;
border : 3px ridge Silver;
height : 27px;
font : 12px "Verdana";
text-align : left;
padding : 5px;
}
..td003
{
text-align : center;
width : 44px;
border : 3px ridge silver ;
height : 27px;
font : 12px "Verdana";
padding : 5px;
}
---------
/* ændres til*/
---------
..tabel001
{
background-color : silver;
color : Black;
width : 580px;
border : 2px ridge #999999;
}

..td {
color : Black;
border : 3px ridge Silver;
height : 27px;
font : 12px "Verdana";
padding : 5px;
}
..special td
{
color : Black;
border : 3px ridge Silver;
height : 85px;
font : 12px "Verdana";
padding : 5px;

}
..td001
{
width : 220px;
text-align : center;

}
..td002
{
width : 281px;
text-align : left;
}
..td003
{
width : 44px;
text-align : center;

}


--
Venlig hilsen
Erik Isager

---

Is skrev:

>> .speciel td {
>> height: 85px;
>> } ---
>
> er det bare en smutter ? ".speciel td "

Nej - det betyder td-elementer der ligger inde i elementer med
klassen speciel.

Det vil fange (påvirke) celler i en række som denne:

<tr class="speciel">
   <td>1</td>
   <td>2</td>
   <td>3</td>
</tr>

Det smarte ved den type koder er at man slipper for at sætte en
klasse eller style på hver eneste celle i rækken - man fortæller
bare at den angivne css-kode skal gælde for alle td-elementer der
er indeholdt i noget med klassen speciel.

Der findes flere forskellige sammensatte selektorer - men det er
desværre kun ovenstående der er bredt understøttet (IE har
problemer med de fleste andre sammensætninger).

NB: Du må gerne klippe lidt i dine citater.
--
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

---

Is skrev:

> Hvorfor kun <tr class="speciel"> og ikke <tr class="speciel
> td"> ??

Fordi det kun er "speciel" der er klassenavnet. Det smarte ved css-
selektoren ".speciel td" er netop at _alle_ elementer af typen td
der er indeholdt i et element med klassen speciel bliver påvirket.


> Og betyder det at jeg kan lave nogle generelle oplysninger så
> jeg laver en <.th> og en <.special th>

..th i css svarer til class="th" i html - ikke til <th> (og html-
klammerne < og > bruges ikke omkring css-koder)

..special th vil ramme th-cellerne i rækken her:

<tr class="special">
   <th>1</th>
   <th>2</th>
   <td>Denne celle rammes ikke</td>
</tr>

Det virker også selvom th ikke er direkte barn af elementet med
klassen special - fx som her:

<table class="special">
   <tr>
       <th>Denne celle er også ramt</th>
   </tr>
</table>


Jeg kan ikke helt gennemskue dine ændringer - det ser umiddelbart
fint ud, men prøv det evt. selv og læg ændringerne op, så er det
lettere at vurdere.
--
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 wrote:
>
> Fordi det kun er "speciel" der er klassenavnet. Det smarte ved css-
> selektoren ".speciel td" er netop at _alle_ elementer af typen td
> der er indeholdt i et element med klassen speciel bliver påvirket.
---

Betyder det man kan lave flere af typen ? .hvadsomhelst td

---
> Jeg kan ikke helt gennemskue dine ændringer - det ser umiddelbart
> fint ud, men prøv det evt. selv og læg ændringerne op, så er det
> lettere at vurdere.

---

De gik på at alle de ting der var ens for .td001 + .td002 + .td003 , de er
flyttet til en .td som jeg så vil referere til i <tr class= td> .

eller de skal måske i .tabel istedet ??


--
Venlig hilsen
Erik Isager

---

Is skrev:

> Betyder det man kan lave flere af typen ? .hvadsomhelst td

Bestemt - du kan lave så mange du har lyst til.0


> De gik på at alle de ting der var ens for .td001 + .td002 +
> .td003 , de er flyttet til en .td som jeg så vil referere til
> i <tr class= td> .

Jeg vil fraråde dig at bruge navne på html-elementer som
klassenavne. Det er ikke forbudt, men din kode bliver en del
vanskeligere at læse.

Du kan fint bruge <tr class="speciel"> kombineret med css-reglen
..speciel td { ... } til at ramme alle td-celler i rækken. Du kan
også godt gøre det med klassenavnet td: <tr class="td"> og
..td td { ... } - men læseligheden ved den sidste udgave er ikke
god.


> eller de skal måske i .tabel istedet ??

Der er én ting du skal have på det rene. Når et navn i css står
efter et punktum svarer det til et klassenavn i html: td.foo (eller
blot .foo) svarer til <td class="foo">.
Står der ikke noget punktum, svarer css-koden til et html-element:
td svarer til <td>, table svarer til <table> etc.

Der er ikke nogen "standardklasse" for et html-element - så tr.td
svarer altså ikke til <tr><td> og tr.tr svarer ikke til <tr>.
--
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

---

Jeg takker for alle svarene.

lige til sidst, laver man EN css fil, også hvis der er flere forskellige
tabeller (bare med hver sit navn) , eller laver man flere lidt mindre css
filer.


--
Venlig hilsen
Erik Isager

---

"Is" <detteerminnewsgruppemailadresse2@get2net.dk> wrote:

> laver man EN css fil, også hvis der er flere forskellige tabeller
> (bare med hver sit navn) , eller laver man flere lidt mindre css
> filer.

Det står dig ganske frit at benytte en, to eller ti css-filer. Nogle
gange kan det være praktisk at skille css-reglerne op i flere css-filer
for overskuelighedens skyld.

F.eks. kan man have alle regler, der omhandler sidens overordnede
layout (placering af menu, hovedindhold, headers, footers m.v.) i een
fil, og så har man i en anden fil reglerne for, hvordan overskrifter og
brødtekst skal tage sig ud.

Men der er intet i vejen for at samle dem allesammen i een enkelt fil
(medmindre man i de forskellige regler kommer til at omdefinere
præsentationen af elementer med en given klasse).

--
Anders Thorsen Holm, BSc i datalogi-multimedier.

Jeg søger fuldtidsjob i Århus - gerne studierelevant, men ingen
betingelse. Læs mit CV: http://www.thorsenholm.dk/cv/