---

Nu er jeg endelig ved at have struktureret siden helt som den skal være
vha. xhtml og stylesheets. Nu vil jeg imidlertid gerne til at arbejde
lidt med forskellige layouts og alternative stylesheets, men når jeg
sidder og kigger lidt over sådan et stylesheet, så er det jo rigtig,
rigtig langt med nogle klasser som kun bruges på enkelte sider.

Hvad er egentlig smart at gøre? Har lige været lidt rundt på
http://www.csszengarden.com/ - som virkelig er et sted, hvor css styrke
kommer frem, synes jeg, men de har jo også fordelen, at de kun har en
side :)

--
Lars
www.fodboldenslegestue.dk   www.larsolesen.dk
www.discimport.dk      www.vih.dk

---

> Hvad er egentlig smart at gøre? Har lige været lidt rundt på
> http://www.csszengarden.com/

De udnytter i øvrigt at sætte en span på fx alle
<h1><span>Overskrift</span></h1> for at de kan skjule overskriften, men
i stedet erstatte den med et billede. Det virker som en ret smart måde?
Er I enige?

--
Lars
www.fodboldenslegestue.dk   www.larsolesen.dk
www.discimport.dk      www.vih.dk

---

Lars Olesen skrev:

> De udnytter i øvrigt at sætte en span på fx alle
> <h1><span>Overskrift</span></h1> for at de kan skjule
> overskriften, men i stedet erstatte den med et billede. Det
> virker som en ret smart måde? Er I enige?

Jeg har ikke set siden, men umiddelbart virker det ikke smart. Jeg
ville bruge <h1 class="skjult">Overskrift</h1> i stedet.
--
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 har ikke set siden, men umiddelbart virker det ikke smart. Jeg
> ville bruge <h1 class="skjult">Overskrift</h1> i stedet.

Det tror jeg nu ikke at jeg ville, for tænk hvis du pludselig alligevel
vil vise din h1 :) Så er det for det dumt, at den hedder class="skjult".
Det er efter min mening smartere, at vi fx har lavet et område ala følgende:

HTML:

<div id="omraade">
   <h1><span>Overskrift</span></h1>
   <p>Test</p>
   <hr />
</div>

CSS
#omraade h1 { background: white url(overskrift1.jpg); }
#omraade h1 span { display: none; }
#omraade hr { display: none; }

Så har jeg større muligheder senere. Om det er nødvendigt med en <span>
inde i <h1> for at gøre det muligt at erstatte teksten med et billede i
stedet, ved jeg ikke helt.

--
Lars
www.fodboldenslegestue.dk   www.larsolesen.dk
www.discimport.dk      www.vih.dk

---

Lars Olesen wrote:
>
>
> De udnytter i øvrigt at sætte en span på fx alle
> <h1><span>Overskrift</span></h1> for at de kan skjule overskriften, men
> i stedet erstatte den med et billede. Det virker som en ret smart måde?
> Er I enige?
>

Mezzoblue har taget det op her:
http://mezzoblue.com/archives/2003/12/12/accessible_i/

Jeg syntes at hvis det er til den første overskrift, selve sidens
overskrift, så er det OK, med et span element i et h1 element.
Den overskrift går jo igen på alle sider og ligger ofte i en inklude fil
eller en form for XSL- eller template-system. Det er nemt og hurtigt at
rette på samtlige sider.

....men hvis det er til selve brødteksten på siden, så mener jeg at det
er forurening af indholdet og bør undgåes.

Det ville være grimt at benytte <hx><span> i sin brødtekst, hvis det om
et par år er muligt at lave den samme effekt i ren CSS.

Så jeg holder på at man skal lave sin HTML-kode så simpel og ren som
overhoved muligt.

Hintzmann c",)

---

Lars Olesen skrev:

> Det tror jeg nu ikke at jeg ville, for tænk hvis du pludselig
> alligevel vil vise din h1 :) Så er det for det dumt, at den
> hedder class="skjult".

Så giv den et andet navn fra starten. Det er også alligevel også
bedre at navngive efter funktion i stedet for visning (altså fx
"kapiteloverskrift" i stedet for "fedoverskrift").


> <div id="omraade">
> <h1><span>Overskrift</span></h1>

Det er ikke til at se hvad span-indpakningen skal gøre godt for
uden at se den tilhørende css-kode. Det synes jeg er en skam.

> #omraade h1 { background: white url(overskrift1.jpg); }
> #omraade h1 span { display: none; }

Nu kan jeg se en begrundelse for span - for ovenstående kan ikke
direkte lægges i en enkelt kode (så vidt jeg kan se). Men
overskriften vil være ubrugelig uden billedet - det er ikke godt.
Hvis billedet af en eller anden grund ikke loades (enten fordi
billedvisning er slået fra eller fordi det er blevet
flyttet/slettet), får brugeren en tom overskrift.

Baggrundsbilleder er IMO ikke beregnet til at være
informationsbærende sådan som det sker her.

I stedet kunne man lave en overskrift som følger:

<h1><img src="overskrift1.jpg" alt="Overskrift" /></h1>

- der vil virke både med og uden billeder.
--
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

---

> Så giv den et andet navn fra starten. Det er også alligevel også
> bedre at navngive efter funktion i stedet for visning (altså fx
> "kapiteloverskrift" i stedet for "fedoverskrift").

Helt enig.

>><div id="omraade">
>> <h1><span>Overskrift</span></h1>
>
>
> Det er ikke til at se hvad span-indpakningen skal gøre godt for
> uden at se den tilhørende css-kode. Det synes jeg er en skam.

Det synes jeg faktisk også. Men måske giver ovenstående den største
fleksibilitet, hvis du vil arbejde med forskellige layouts, for så får
du netop mulighed for kun vha. stylesheetet også at udskifte
overskrifter, og på den måde kan du virkelig køre med forskellige
stylesheets.

> Nu kan jeg se en begrundelse for span - for ovenstående kan ikke
> direkte lægges i en enkelt kode (så vidt jeg kan se). Men
> overskriften vil være ubrugelig uden billedet - det er ikke godt.

Overskriften er ubruglig uden billedet i et stylesheet, der bruger
billeder som baggrund, men hvis jeg nu også har lavet et alternativt
stylesheet, som ikke bruger billeder, så er det jo brugbart. Og hvorfor
skulle billedet ikke loades eller være blevet flyttet? Jeg kan se det,
hvis billedet er slået fra, men så kan vi måske bare sætte en title på
selve h1 til at undgå dette. Hvis man bruger denne form, vil man dog
formentlig også have lavet et stylesheet som ikke kræver billeder slået til.

> Baggrundsbilleder er IMO ikke beregnet til at være
> informationsbærende sådan som det sker her.

Nej, det synes jeg heller ikke de er. Men vi kommer ikke uden om en
diskussion, om hvordan vi skal lave vores markup for at give os selv
størst mulig fleksibilitet.

> I stedet kunne man lave en overskrift som følger:
> <h1><img src="overskrift1.jpg" alt="Overskrift" /></h1>

Ja, det kunne man, men så står <h1> jo stadig uden information?

--
Lars

---

Lars Olesen skrev:

> Overskriften er ubruglig uden billedet i et stylesheet, der
> bruger billeder som baggrund, men hvis jeg nu også har lavet
> et alternativt stylesheet, som ikke bruger billeder, så er det
> jo brugbart.

Tjo - men så skal man altså skifte stylesheet før man kan se din
overskrift (hvis man er uheldig).

> men så kan vi måske bare sætte en title på selve h1 til at
> undgå dette.

Det tror jeg ikke vil virke. Title kommer på som ekstraoplysning
til et element - men oftest kun ved mouseover, og kun når elementet
har en udstrækning. Det vil ikke være tilfældet med en usynlig h1.


>> Baggrundsbilleder er IMO ikke beregnet til at være
>> informationsbærende sådan som det sker her.

> Nej, det synes jeg heller ikke de er. Men vi kommer ikke uden
> om en diskussion, om hvordan vi skal lave vores markup for at
> give os selv størst mulig fleksibilitet.

Jeg kan godt se problemet. Men jeg vil nok vægte tilgængeligheden
frem for fleksibiliteten.

>> I stedet kunne man lave en overskrift som følger:
>> <h1><img src="overskrift1.jpg" alt="Overskrift" /></h1>
>
> Ja, det kunne man, men så står <h1> jo stadig uden
> information?

Hvis overskrift1.jpg ikke vises, kommer alt-teksten frem. Jeg ved
ikke hvordan søgemaskiner mv. vil håndtere sådan en overskrift, men
den er synlig for alle typer browsere.
--
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

---

>>Overskriften er ubruglig uden billedet i et stylesheet, der
>>bruger billeder som baggrund, men hvis jeg nu også har lavet
>>et alternativt stylesheet, som ikke bruger billeder, så er det
>>jo brugbart.
>
> Tjo - men så skal man altså skifte stylesheet før man kan se din
> overskrift (hvis man er uheldig).

Men så skal man alligevel være lidt uheldig ikke :) Med mindre man selv
har slået billederne fra.

>>men så kan vi måske bare sætte en title på selve h1 til at
>>undgå dette.
>
> Det tror jeg ikke vil virke. Title kommer på som ekstraoplysning
> til et element - men oftest kun ved mouseover, og kun når elementet
> har en udstrækning. Det vil ikke være tilfældet med en usynlig h1.

Det har du nok ret i. Det var også bare en hurtig strøtanke.

[snip at bruge baggrundsbilleder giver fleksibilitet]
> Jeg kan godt se problemet. Men jeg vil nok vægte tilgængeligheden
> frem for fleksibiliteten.

Jeg mener jo stadig at siden er ret tilgængelig. Det er faktisk kun
folk, som har slået billeder fra, eller folk som er usædvanligt uheldige
med at et billede pludselig ikke kan vises, der ikke kan se en sådan
overskrift. Ofte vil man ikke benytte sig af muligheden for at bruge
billeder som overskrifter, men den dygtige designer skal have muligheden
synes jeg :)

>>>I stedet kunne man lave en overskrift som følger:
>>><h1><img src="overskrift1.jpg" alt="Overskrift" /></h1>
>>
>>Ja, det kunne man, men så står <h1> jo stadig uden
>>information?
>
> Hvis overskrift1.jpg ikke vises, kommer alt-teksten frem.

Ja, den er synlig i alle browsere, men din <h1> bliver unødvendig, gør
den ikke?


--
Lars
www.fodboldenslegestue.dk   www.larsolesen.dk
www.discimport.dk      www.vih.dk

---

Lars Olesen skrev:

> Ja, den er synlig i alle browsere, men din <h1> bliver
> unødvendig, gør den ikke?

Jeg ved faktisk ikke om h1 vil påvirke visningen af alt-teksten. I
princippet skulle h1-markeringen også få søgemaskiner til at
tillægge større værdi til alt-teksten, men jeg ved heller ikke om
det er tilfældet.
--
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

---

>>Ja, den er synlig i alle browsere, men din <h1> bliver
>>unødvendig, gør den ikke?
>
> Jeg ved faktisk ikke om h1 vil påvirke visningen af alt-teksten. I
> princippet skulle h1-markeringen også få søgemaskiner til at
> tillægge større værdi til alt-teksten, men jeg ved heller ikke om
> det er tilfældet.

Ok - tak for en god diskussion.

--
Lars
www.fodboldenslegestue.dk   www.larsolesen.dk
www.discimport.dk      www.vih.dk

---

Lars Olesen wrote:

> Nu er jeg endelig ved at have struktureret siden helt som den skal være
> vha. xhtml og stylesheets. Nu vil jeg imidlertid gerne til at arbejde
> lidt med forskellige layouts og alternative stylesheets, men når jeg
> sidder og kigger lidt over sådan et stylesheet, så er det jo rigtig,
> rigtig langt med nogle klasser som kun bruges på enkelte sider.
>
> Hvad er egentlig smart at gøre? Har lige været lidt rundt på
> http://www.csszengarden.com/ - som virkelig er et sted, hvor css styrke
> kommer frem, synes jeg, men de har jo også fordelen, at de kun har en
> side :)
>

Det kommer også an på hvad der skal være i de alternative stylesheets.
1) Er de alternative stylesheets et helt nyt layout/design af siden?
2) Eller er layout/desing det samme, men alternativet er om brugeren
ønsker fast eller flydende layout?
3.a) Eller kan brugeren få et valg imellem font-typer ?
3.b) eller font-størrelser ?
4) Eller skift af nogle grundfarver?
5) Eller noget helt femte...

Hvis vi udelukker 1'eren, så vil jeg nok lave et grundlæggende
stylesheet, med simpel style og layout af siden, såsom farver og fonte.
Dette minimalistiske stylesheet ses af ældre browsere.
<link rel="stylesheet" type="text/css" href="default.css" />

Heri laves der en import af et nyt stylesheet til nyere browsere.
@import url(advanced.css);

Her efter kan man lave de alternative stylesheet.
<link rel="alternate stylesheet" type="text/css" href="fast.css"
title="Fast" />
<link rel="alternate stylesheet" type="text/css" href="flydende.css"
title="Flydende" />

eller 3.a

<link rel="alternate stylesheet" type="text/css" href="lille.css"
title="Lille tekst" />
<link rel="alternate stylesheet" type="text/css" href="mellem.css"
title="Mellem tekst" />
<link rel="alternate stylesheet" type="text/css" href="stor.css"
title="Stor tekst" />

eller 3.b

<link rel="alternate stylesheet" type="text/css" href="serif.css"
title="Med fødder" />
<link rel="alternate stylesheet" type="text/css" href="sansserif.css"
title="Uden fødder" />

eller 4

<link rel="alternate stylesheet" type="text/css" href="lime.css"
title="Lime" />
<link rel="alternate stylesheet" type="text/css" href="lightblue.css"
title="Lyseblå" />

Hvis du ønsker 1'eren hvor de alternative stylesheets er helt nye
layout/design af siden. Vil jeg nok flytte @import'en fra default
stylesheet'et til de alternative stylesheet.

Hintzmann c",)

---

> Det kommer også an på hvad der skal være i de alternative stylesheets.
> 1) Er de alternative stylesheets et helt nyt layout/design af siden?

Ja, det var netop meningen, at der skulle være mulighed for det.

> 3.a) Eller kan brugeren få et valg imellem font-typer ?
> 3.b) eller font-størrelser ?

Dette er vel ikke nødvendigt, hvis fontene allerede er relative. Jeg har
nemlig lige fjernet den løsning jeg ellers havde lavet vha.
styleswitcher.js :)

> Heri laves der en import af et nyt stylesheet til nyere browsere.
> @import url(advanced.css);

Hvilke elementer skal flyttes til sådan et advanced stylesheet?

> Her efter kan man lave de alternative stylesheet.
> <link rel="alternate stylesheet" type="text/css" href="fast.css"
> title="Fast" />
> <link rel="alternate stylesheet" type="text/css" href="flydende.css"
> title="Flydende" />

Det er vel smartere at beslutte sig for enten fast eller flydende
stylesheet som forfatter?

> Hvis du ønsker 1'eren hvor de alternative stylesheets er helt nye
> layout/design af siden. Vil jeg nok flytte @import'en fra default
> stylesheet'et til de alternative stylesheet.

Men spørgsmålet er jo så, om vi overhovedet kan have et default
stylesheet, når nu hele molevitten skal skiftes? Yderligere så var et
underspørgsmål, hvordan man skal behandle de elementer, som kun optræder
på en side - det mest rette-venlige er vel at alt er samlet i et
stylesheet? Jeg er med på, at det hele skal laves så simpelt som muligt
- og at det naturligvis er smag og behag. Men hvad er jeres smag så? :)


--
Lars
www.fodboldenslegestue.dk   www.larsolesen.dk
www.discimport.dk      www.vih.dk

---

Lars Olesen wrote:

>
>> 3.a) Eller kan brugeren få et valg imellem font-typer ?
>> 3.b) eller font-størrelser ?
>
>
> Dette er vel ikke nødvendigt, hvis fontene allerede er relative. Jeg har
> nemlig lige fjernet den løsning jeg ellers havde lavet vha.
> styleswitcher.js :)
>

Det har du ret i men det var bare for at skrive de forskellige
muligheder op.

>> Heri laves der en import af et nyt stylesheet til nyere browsere.
>> @import url(advanced.css);
>
>
> Hvilke elementer skal flyttes til sådan et advanced stylesheet?
>

Stort set alt med positionering af elementer og float af elementer.


>> Her efter kan man lave de alternative stylesheet.
>> <link rel="alternate stylesheet" type="text/css" href="fast.css"
>> title="Fast" />
>> <link rel="alternate stylesheet" type="text/css" href="flydende.css"
>> title="Flydende" />
>
>
> Det er vel smartere at beslutte sig for enten fast eller flydende
> stylesheet som forfatter?
>

Ved et fast side-layout opnår man en fast linie længde på brødteksten,
hvilket er godt hvis man skal læse meget tekst.
Ved et flydende layout, kan linierne i meget stor opløsning (1600x1200
o.lign) blive så lange at det forstyr læsbarheden. Så alt efter hvad
brugere finder bedst kunne man jo have et fast eller flydende bredde på
brødteksten.


>> Hvis du ønsker 1'eren hvor de alternative stylesheets er helt nye
>> layout/design af siden. Vil jeg nok flytte @import'en fra default
>> stylesheet'et til de alternative stylesheet.
>
>
> Men spørgsmålet er jo så, om vi overhovedet kan have et default
> stylesheet, når nu hele molevitten skal skiftes?

Du behøves ikke et default stylesheet, det er bare mere til gamel IE4 og
NS4. Det plejer at være noget af det sidste jeg laver.

Yderligere så var et
> underspørgsmål, hvordan man skal behandle de elementer, som kun optræder
> på en side - det mest rette-venlige er vel at alt er samlet i et
> stylesheet? Jeg er med på, at det hele skal laves så simpelt som muligt
> - og at det naturligvis er smag og behag. Men hvad er jeres smag så? :)
>

Jeg ville inddele mit stylesheet på følgende måde.
1) HTML
Her vil jeg have diverse HTML-elementer.

2) #ID'er
Her vil jeg have blok-op-delerne (div elementerne) og det tilhørende
område specifikke styling

3) .CLASS'er
Diverse class'er, ingen med område styling.

4) Spec.
Her vil jeg have speciel side CSS.

5) Hacks
Her vil jeg have diverse hacks. Her tænker jeg specielt på IE5 og IE5.5.

Hintzmann c",)

---

>>> 3.a) Eller kan brugeren få et valg imellem font-typer ?
>>> 3.b) eller font-størrelser ?
[snip]
> Det har du ret i men det var bare for at skrive de forskellige
> muligheder op.

Den er jeg med på :)

>> Det er vel smartere at beslutte sig for enten fast eller flydende
>> stylesheet som forfatter?
> Ved et fast side-layout opnår man en fast linie længde på brødteksten,
> hvilket er godt hvis man skal læse meget tekst.

Ja, det har du naturligvis ret i. En god pointe. Man skal huske at tænke
over det der med linielængden.

> Jeg ville inddele mit stylesheet på følgende måde.
[snip]
> 3) .CLASS'er
> Diverse class'er, ingen med område styling.

Hvorfor vil du ikke have områdestyling på dine classes?

Ellers en god opdeling - og langt hen ad vejen den jeg selv havde
arbejdet mig hen i mod. Det skaber imidlertid altid lidt mere klarhed at
vende diskussionerne med nogle andre :)

--
Lars
www.fodboldenslegestue.dk   www.larsolesen.dk
www.discimport.dk      www.vih.dk

---

Lars Olesen wrote:
>
>> 3) .CLASS'er
>> Diverse class'er, ingen med område styling.
>

Jeg får ikke altid læst mine indlæg igennem sorry
Der skulle have stået:

Diverse class'er. Igen med område styling.

>
> Hvorfor vil du ikke have områdestyling på dine classes?
>

Det ville jeg jo så også
F.eks. hvis man har nogle bokse men en overskrift og noget indhold.
..box {...}
..box h2 {...}
..box p {...}

Der er område styling kanon.

> Ellers en god opdeling - og langt hen ad vejen den jeg selv havde
> arbejdet mig hen i mod. Det skaber imidlertid altid lidt mere klarhed at
> vende diskussionerne med nogle andre :)
>

Jeg syntes det er rart at have sådan nogle diskussioner, så man kan se
tingene fra andre sider.

Hintzmann c",)

---

>>> 3) .CLASS'er
>>> Diverse class'er, ingen med område styling.
>
> Jeg får ikke altid læst mine indlæg igennem sorry
> Der skulle have stået:
>
> Diverse class'er. Igen med område styling.

Hehe, jeg mente det jo nok :)

> Jeg syntes det er rart at have sådan nogle diskussioner, så man kan se
> tingene fra andre sider.

Helt enig. Hvornår går dit nye site i øvrigt i luften. Synes jeg læste i
et tidligere indlæg, at du var ved at lave om?

--
Lars
www.fodboldenslegestue.dk   www.larsolesen.dk
www.discimport.dk      www.vih.dk

---

Lars Olesen wrote:
>
> Helt enig. Hvornår går dit nye site i øvrigt i luften. Synes jeg læste i
> et tidligere indlæg, at du var ved at lave om?
>

Jeg er i gang med at lave et micro-XML/CMS-system til min hjemmeside.
Jeg vil prøve at lave det så vidt muligt efter alle kunstens regler, men
nogle gange har det jo også noget med smag og behag.

Design mæssigt vil det blive en 2-spalte layout med mulighed for fast
eller flydende bredde af brødteksten.
Global navigeringen bliver noget ala "Sliding Doors of CSS"
http://www.alistapart.com/articles/slidingdoors2/
og local navigeringen bliver min egen mhaList.

Det bliver en af de første uger i det nye år at den kommer online.

Godt Nytår til dig Lars

Hintzmann c",)

---

Martin Hintzmann Andersen wrote:

>> Helt enig. Hvornår går dit nye site i øvrigt i luften. Synes jeg læste
>> i et tidligere indlæg, at du var ved at lave om?
>
> Jeg er i gang med at lave et micro-XML/CMS-system til min hjemmeside.
> Jeg vil prøve at lave det så vidt muligt efter alle kunstens regler, men
> nogle gange har det jo også noget med smag og behag.

Ja, det er det. Har selv leget lidt med et lille cms-system til
larsolesen.dk i php, men der skal tænkes på mange ting. Hvad gør man
egentlig i forbindelse med XML? Du lægger vel det hele ned i databaser
stadigvæk, eller...

> Design mæssigt vil det blive en 2-spalte layout med mulighed for fast
> eller flydende bredde af brødteksten.

Ikke så dumt tænkt. Det er ret smart valgmulighed.

> Global navigeringen bliver noget ala "Sliding Doors of CSS"
> http://www.alistapart.com/articles/slidingdoors2/

Ja, den synes jeg også ret godt om :)

> og local navigeringen bliver min egen mhaList.

Ja, det ville jo være dumt ikke at udnytte den!

> Det bliver en af de første uger i det nye år at den kommer online.

Det glæder jeg mig til at se! Det er altid sjovt og inspirerende at se,
hvad andre finder på!

> Godt Nytår til dig Lars

I lige måde. Pas nu på ikke at blive skudt af :)

--
Lars
www.fodboldenslegestue.dk   www.larsolesen.dk
www.discimport.dk      www.vih.dk