---

Jeg har ændret mit stylesheet på www.vih.dk, så layoutet skulle være
mere flydende, og så der er en mere logisk opstilling af mine div-tags.

Nu har jeg imidlertid fået lidt problemer med, hvordan det vises i
Mozilla, Opera og IE. Det vises forskelligt.

* I Opera går topbaren ikke helt ud til siden med margin: 0.
* I IE starter resten af teksten først, når højrebaren slutter (undtagen
overskriften).
* I Mozilla er topmenuen ikke 100% bred.

Er der nogen der kan se, hvad der skulle være forkert i stylesheets på:

www.vih.dk/css/layout.css
www.vih.dk/css/screen.css

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

---

Lars Olesen wrote:

> Jeg har ændret mit stylesheet på www.vih.dk, så layoutet skulle være
> mere flydende, og så der er en mere logisk opstilling af mine div-tags.
>
> Nu har jeg imidlertid fået lidt problemer med, hvordan det vises i
> Mozilla, Opera og IE. Det vises forskelligt.
>
> * I Opera går topbaren ikke helt ud til siden med margin: 0.

Sæt både margin og padding til ingenting på body elementet

> * I IE starter resten af teksten først, når højrebaren slutter (undtagen
> overskriften).

Det må skyldes at vidten på de to bokse er lidt for stor. Jeg debugger tit ved at sætte en
baggrunds farve på de elementer der driller, så er det nemmere at se hvor de starter og slutter.

> * I Mozilla er topmenuen ikke 100% bred.
>

Det eksempel du fik hos maxdesign skulle gerne fylde hele vidten i alle browsere.
http://css.maxdesign.com.au/floatutorial/index.htm

> Er der nogen der kan se, hvad der skulle være forkert i stylesheets på:
>
> www.vih.dk/css/layout.css
> www.vih.dk/css/screen.css
>

Jeg kan se at du har haft rigtig mange gode tanker ved det du har lavet ved din kode.
Du har blandt andet tænkt over tilgængelighed og udskrift stylesheets. Det syntes jeg er rigtigt
fint.

Men du skal prøve at stile efter KISS-metoden, Keep It Simpel, Stupid!
http://www.digital-web.com/columns/keepitsimple/keepitsimple_2002-08.shtml

Du har mange unødvendige class'er i din HTML-kode.
F.eks.
class="dNone" er ikke smart at skrive i HTML-koden, hvis du en dag ønsker at vise et af de
elementer der har class'en "dNone", så skal du til at rette i samtlige HTML-sider, i stedet for
at rette i en enkelt CSS-fil. Dette kan du undgå ved område bestemt styling.

Du ønsker f.eks. hr elementet som logisk adskiller mellem de forskellige blokke i browsere som
ikke understøtter CSS, men det skal ikke vises i browsere der forstår CSS.
Så skriver du i stedet for <hr class="dNone" /> i dit stylesheet således.
hr {display:none;}. Det er meget nemmere.
Hvis du så ønsker at vise dine hr elementer der hvor du har din brødtekst skriver du således.
#content hr {display:block;}
Så vil alle hr elementer under div elementet med id'et "content" blive vist.

Det samme gør sig gældende for class'erne "gem_for_skaerm", "gem_for_udskrift", "forsidepunkt",
"nyhederoverskrift" og "nyheder" m.fl.

De kan mere eller mindre alle fjernes fra HTML-koden ved hjælp at område styling.


Jeg vil gerne lave et oplæg til hvordan jeg ville lave det, men jeg har først tid i aften.
- Så hvis du kan vente ?

Hintzmann c",)

---

> Men du skal prøve at stile efter KISS-metoden, Keep It Simpel, Stupid!
> http://www.digital-web.com/columns/keepitsimple/keepitsimple_2002-08.shtml

Jeg er helt enig.

> Du har mange unødvendige class'er i din HTML-kode.
> F.eks.
> class="dNone" er ikke smart at skrive i HTML-koden, hvis du en dag
> ønsker at vise et af de elementer der har class'en "dNone", så skal du
> til at rette i samtlige HTML-sider, i stedet for at rette i en enkelt
> CSS-fil. Dette kan du undgå ved område bestemt styling.

class="dNone" er naturligvis dumt, hvis jeg på et tidspunkt vil lave det
om. Det kan jeg godt se. Den skal egentlig erstatte gem_for_skaerm,
fordi den er lidt mere mundret d(isplay)None. Jeg er som sagt ved at
lave det om fra et gammelt layout, og jeg er blevet noget klogere :)

> Du ønsker f.eks. hr elementet som logisk adskiller mellem de forskellige
> blokke i browsere som ikke understøtter CSS, men det skal ikke vises i
> browsere der forstår CSS.

Ja, det ønsker jeg nogen gange. Men på fx www.vih.dk/langekurser/ bruges
den som adskiller også i skærmoutputtet.

> Så skriver du i stedet for <hr class="dNone" /> i dit stylesheet således.
> hr {display:none;}. Det er meget nemmere.

Helt enig!

> Hvis du så ønsker at vise dine hr elementer der hvor du har din
> brødtekst skriver du således.
> #content hr {display:block;}

Ja, det er netop sådan noget jeg er begyndt at arbejde lidt med, fx i
menuen, hvor jeg tidligere ville have sat en class på alle. Jeg kan
sagtens se, hvad du mener med at stramme endnu mere op, bl.a. ved at
fjerne nyheder mv., fordi jeg så laver noget ensartet i højre boks.

> De kan mere eller mindre alle fjernes fra HTML-koden ved hjælp at område
> styling.

Ja, det er sgu den store nye opdagelse. Det er altså smart. Jeg synes
faktisk, at dem der har opfundet css burde have en lille klapsalve.

> Jeg vil gerne lave et oplæg til hvordan jeg ville lave det, men jeg har
> først tid i aften.
> - Så hvis du kan vente ?

Man har jo aldrig tid til at vente. Har måttet lave et lille hack på
forsiden ved at sætte hele #content-areaet ind i et table - så kan IE
godt klare det. Det er blot en midlertidig løsning.

Glæder mig til at lære mere!


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

---

> Ja, det er sgu den store nye opdagelse. Det er altså smart. Jeg synes
> faktisk, at dem der har opfundet css burde have en lille klapsalve.

Og så en stor klapsalve til de browser producenter, der forstår at
OVERHOLDE skidtet ;)


--
Thomas Due
Software Developer
Scanvaegt Nordic A/S
Posted with XanaNews version 1.15.8.4

---

Lars Olesen wrote:
>
> Man har jo aldrig tid til at vente. Har måttet lave et lille hack på
> forsiden ved at sætte hele #content-areaet ind i et table - så kan IE
> godt klare det. Det er blot en midlertidig løsning.
>
> Glæder mig til at lære mere!
>
>

Hej Lars

Jeg har lavet et oplæg til din side, som jeg ville lave den.
Det skal ikke opfattes som et færdigt resultat, men en hjælp på vejen.

Først siden uden CSS, som den vil se ud i bla. NS4 og IE4
http://users.cybercity.dk/~dsl58854/testcenter/css/www_vih_dk/index.html

HTML-koden har jeg prøvet at lave så simpel som muligt (KISS).
Jeg har derfor fjernet mange af class'erne og unødvendige elementer.

Den er inddelt i nogle forskellige div-blokke, med nogle hr-elmenter imellem

head
gnav (Global navigering)
main
- content
- extra
- - box'es
pagenav (Side navigering)
foot
- address
- about


Som ren HTML-kode er siden som sådan tilgængelig for alle browsere, på nær genvejsmenu'en.

Søgemaskiner kan ikke finde de sider der er i genvejsmenu'en, folk uden javascript kan ikke
benytte menuen og folk med javascript som benytter tastaturet kan ikke benytte alle links.
Jeg vil forslå dig at lave den som en liste, men jeg vidste ikke hvor du ville have placeret den
så jeg lod den være. Men den _skal_ ændres.

Jeg har med vilje på nogle af billederne sat en tom alt-attributten. F.eks. ved de 6 thumbnails.
Folk med billeder slået fra, vil i dette tilfælde blive mere forviret af en alt-attribut.

Jeg har for IE5.0 og IE5.5 skyld været nødsaget til at benytte &nbsp i menuen. Ellers er der
ikke noget HTML-hacks.

Jeg har benyttet lister så meget som muligt.



Her er siden som den vil se ud med CSS, slået til
http://users.cybercity.dk/~dsl58854/testcenter/css/www_vih_dk/index_css.html

Jeg har ikke haft tid til at lave stylesheet til print. Men det er bare at lave display:none; på
de div-blokke du ikke vil have med ud på print.

Hoved stylesheet'et er vih.css og det er her, hvis du har tid, du skal style til NS4 og IE4.

vih.css importere 2 stylesheets, default.css til alle nyere browsere og IE5xFixes.css med
hacks/fixes til IE5.0 og IE5.5.

default.css benytter kun et lille fix på #main ellers er det frit for hacks.

Layout'et er lavet som et 2-spalte layout, hvor begge spalter float'er left.
Width'en på spalterne udgør med vilje ikke 100%. Og ved meget bredde browser vinduer vil man i
højre side kunne se de manglende procenter.
Dette er som sagt gjort med vilje, da jeg ønskede at spalte 2, så "sent" som muligt float'er
left ved meget små browser vinduer i IE.
Når spalte 2 endelig float'er left i meget små browser vinduer, er spalte 2 stadig tilgængeligt
under indholdet.


Jeg håber at du kan bruge mit forslag til noget. Du kan tage koden som den er og arbejde videre
med eller bare bruge dele af den.
Men den kræver under alle omstændigheder mere tid og kærlighed

PS. Desuden syntes jeg også personligt at grupperingen af navigeringen på siden er lidt rodet.
Men det er nok bare mig.

Hintzmann c",)

---

> Jeg har lavet et oplæg til din side, som jeg ville lave den.
> Det skal ikke opfattes som et færdigt resultat, men en hjælp på vejen.

Det ser godt ud. Jeg har allerede udnyttet ideerne i det, og min forside er nu mere overskuelig, så
vidt jeg kan se.

> Den er inddelt i nogle forskellige div-blokke, med nogle hr-elmenter imellem

Foreløbig har jeg ikke brugt <hr> imellem blokkene, men vil sikkert gøre det. Har bibeholdt mine <hr
class="dNone"> som adskillere. Det skyldes at jeg på fx www.vih.dk/langekurser/ udnytter <hr> som
adskillere på selve siden også.

> pagenav (Side navigering)
> foot
> - address
> - about

De to nederste har du også i #main. Er der nogen særlig grund til det?

> Som ren HTML-kode er siden som sådan tilgængelig for alle browsere, på nær genvejsmenu'en.

Genvejsmenuen skal laves om. Jeg har allerede lavet den om til en liste og skjult alle links. Er det
ikke korrekt, at der ikke er nogen vej uden om javascript for at fremvise listen nu?

> Jeg har benyttet lister så meget som muligt.

Nu er det meste på selve forsiden vist i lister. Og jeg må sige, at det der med lister er ret smart.

> Jeg har ikke haft tid til at lave stylesheet til print. Men det er bare at lave display:none; på
> de div-blokke du ikke vil have med ud på print.

Det kan jeg godt finde ud af :)

> vih.css importere 2 stylesheets, default.css til alle nyere browsere og IE5xFixes.css med
> hacks/fixes til IE5.0 og IE5.5.

Kan jeg ikke bare lade være at bruge hacks? Hvilken forskel gør det?

> default.css benytter kun et lille fix på #main ellers er det frit for hacks.

Jeg har fundet hacket, men forstår det vist ikke helt. Kan du forklare, hvad det gør?

> Width'en på spalterne udgør med vilje ikke 100%. Og ved meget bredde browser vinduer vil man i
> højre side kunne se de manglende procenter.
> Dette er som sagt gjort med vilje, da jeg ønskede at spalte 2, så "sent" som muligt float'er
> left ved meget små browser vinduer i IE.

Smart tænkt - og lavet!

> Jeg håber at du kan bruge mit forslag til noget. Du kan tage koden som den er og arbejde videre
> med eller bare bruge dele af den.

Om jeg kunne bruge det. Har vist brugt alle ideerne i det, og jeg har omdøbt de forskellige
elementer. Egentlig havde de fleste af elementerne samme funktion, men gnav giver mere mening, hvis
jeg fx vil flyte menuen senere til siden. Endelig var det lettere at overskue, da jeg skrev
stylesheetet om. Jeg er gået tilbage til et stylesheet, selvom www.alistapart.com i en artikel
foreslår at man bruger layout.css til positionering og markup.css til farver mv. Men det er der vel
egentlig ikke nogen grund til?

> Men den kræver under alle omstændigheder mere tid og kærlighed

Den er jeg ved at tilføre :)

> PS. Desuden syntes jeg også personligt at grupperingen af navigeringen på siden er lidt rodet.

Jeg er ret enig i at grupperingen af navigeringen er lidt rodt, men har ikke kunnet finde nogen vej
ud af det. Har du nogen forslag?

Lars Olesen
www.vih.dk

--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Lars Olesen wrote:

> Foreløbig har jeg ikke brugt <hr> imellem blokkene, men vil sikkert gøre det. Har bibeholdt mine <hr
> class="dNone"> som adskillere. Det skyldes at jeg på fx www.vih.dk/langekurser/ udnytter <hr> som
> adskillere på selve siden også.
>

Jeg har i default.css sat følgende, som gør at hr-elementer i content-blokken bliver vist.
#content hr {
   display:block;
}
Det gælder om at flytte så meget som muligt over i CSS'en.

>
> De to nederste har du også i #main. Er der nogen særlig grund til det?
>

Ups. Det er da også rigtigt. #main bruges egentlig kun til at omkranse det hele
(content/extra/foot) og give lidt luft fra kanten.

>
> Genvejsmenuen skal laves om. Jeg har allerede lavet den om til en liste og skjult alle links. Er det
> ikke korrekt, at der ikke er nogen vej uden om javascript for at fremvise listen nu?
>

I Mozilla og Opera er det muligt at sætte :hover på et hvilket som helst element som gør at
listen vises. IE kan kun sætte :hover på a-elementer. Så hvis det skal virke i IE, skal du
benytte JavaScript.

Men jeg har et andet forslag længere nede ved "grupperingen af navigeringen"

>
> Kan jeg ikke bare lade være at bruge hacks? Hvilken forskel gør det?
>

Jo, det kan du godt, men hvis du vil have IE5.0 og IE5.5 med er du tvunget til det.

Hack'et "Mid Pass Filter" syntes jeg er et af de pænere, da man ligger alle IE5.x hacks'ne i en
seperat CSS-fil.
http://users.cybercity.dk/~dsl58854/articles/skjulecss/skjulecss.html#section14
Om et års tid eller to, når IE5.x udgør et par procent kan du fjerne stylesheet'et
(IE5xFixes.css) uden at gennemgå det rigtige stylesheet'et (default.css) som overholder
w3c-standarderne. Det syntes jeg er smart, men man kan også godt lave hacks'ne i default.css

PT. bruges det kun til en bug i IE5.x når browser vinduet er for småt og man hover over et af
menupunkterne i den globale navigering.

IE5.x har også problemer med box-modellen og her vil det være oplagt at ligge deres specielle
width'er i det stylesheet.

Du kan prøve at se det ved at installere flere forskellige version af IE på din maskine.
Se posten fra "06-11-2003" http://www.hintzmann.dk

>
> Jeg har fundet hacket, men forstår det vist ikke helt. Kan du forklare, hvad det gør?
>

IE6 (og IE5.x) akkumulere nogle marginer i toppen af #main som den ikke burde i følge W3C.
Derfor har jeg lavet denne til IE6
#main {
   margin:0 1em; /* FIX (IE6+5.5+5.0) no margin-top */
}

Og den næste er til Mozilla, Opera og andre standard browsere.
#main[id] {
   margin:1em; /* MOZ + OPERA */
}
(IE forstår ikke attribut selectoren #main[id], så den får ikke margin 1em på alle kanter af
#main blokken.)

> Jeg er gået tilbage til et stylesheet, selvom www.alistapart.com i en artikel
> foreslår at man bruger layout.css til positionering og markup.css til farver mv. Men det er der vel
> egentlig ikke nogen grund til?
>

Det har lidt med smag og behag. Nogen kan godt lide at adskille stylen, jeg foretrækker dog at
have alle informationer samlet om et element i samme stylesheet.

>
> Jeg er ret enig i at grupperingen af navigeringen er lidt rodt, men har ikke kunnet finde nogen vej
> ud af det. Har du nogen forslag?
>

Det skal lige siges at jeg _ikke_ er ekspert inden for det her, men...

For mig virker navigeringen ikke helt optimalt, men det kan godt være at det er mere logisk når
man bedre kender målgruppen.

Som jeg ser det er navigeringen meget spredt på siden. Jeg tror brugeren vil have det nemmere
hvis de var mere samlet.

Her er min opfattelse af hvilke navigeringsmuligheder der PT. nu er på siden.

1) Global navigering
* Aktuelt
* Dialog
* Lange kurser
* Korte kurser
* Værd at vide
* Faciliteter
* Lærere
* Tidligere elever
* Bestil og tilmeld
* Svenska ( høre egentlig ikke til global navigering )
* Norsk ( -"- )
* English ( -"- )

2) Genvej...
* Dagbog
* Fotoalbum
* Spørgsmål og svar
* Elevchat
* Lange kurser
* Dine fag
* Korte kurser
* Hvor findes vi?

3) De 6 thumbnails
* Lange kurser
* Korte kurser
* Kursuscenter
* Rejselinien
* Politiskole
* Rundvisning

4) "Næste lange kursus"
* Kursusoversigt »
* Præsentation »
* Dine fag »
* Spørgsmål og svar »

5) Page navigation
* udskriv
* anbefal siden
* kontakt os
* hjælp
* brugervurdering
6) About
* Om websitet
* Privatlivspolitik
* Indholdsfortegnelse
* Sitemap
7) "Ledige pladser til januar!"
* Åbn fotoalbum (Virke lidt malplaceret)


Ovenstående passe ikke helt overens med sitemappet, hvilket det heller ikke behøves. Men det
ville for mig virke mere logisk hvis det gjorde.

Det er lidt svært at hjælpe dig når man ikke kender målgruppen o.lign.
Men jeg tror nok at jeg ville analysere sitet med nogle af målgrupperne (elever, lærer,
potentielle nye elever, andre)

På nogle små papir lapper skriver du en titel og en kort beskrivelse af alle de sider der er
tilgængelige på siden. Lige fra forside, søgeresultat, hjælp, nyheder, Kursusoversigt, med andre
ord alt.

Bed målgruppen om at gruppere dem så godt de kan og vægte dem efter hvad de finder vigtigst.
Hjælpe dem evt. med at forklare hvad det er er, men uden at guide dem til hvor de PT. nu ligger
grupperet.

Det er tidskrævende men giver et godt indblik i hvordan brugerne opfatter tingene og hvordan
deres "gang" er igennem siden.

Jeg har ikke lige nogle bøger eller links om emnet, men hvis du søger lidt på nettet finder du
sikkert noget.

Når du så har grupperet siderne, vil jeg så mene at 6-7 navigerings steder på siden er for meget.

Jeg ville nok vælge at have 4-5 stk.:
1) Global navigering (Nogle få hovedpunkter med deres tilhørende underpunkter)
2) Page navigation (Den aktuelle sides navigering)
3) Helpers (Hjælpe funktioner såsom udskriv, anbefal, til top, sprog, søg o.lign. )
4) About (Privatlivspolitik, Sitemap o.lign.)
5) Appetizer kun på forsiden (5-6 tilfældige punkter som forklares i dybten, men skifter ved
hver side visning) (Bare en ide for at give siden lidt liv.)


Det blev en lang post det her, men ovenstående er bare nogle ideer, som du kan tænke over og
muligvis tage op med målgrupperne.

Hintzmann c",)

---

> Jeg har i default.css sat følgende, som gør at hr-elementer i content-blokken bliver vist.
> #content hr {
>    display:block;
> }

Ja, jeg så det lige efter jeg postede

> Ups. Det er da også rigtigt. #main bruges egentlig kun til at omkranse det hele
> (content/extra/foot) og give lidt luft fra kanten.

Det giver mening at omkranse #extra, fordi den er i samme gruppe som #content. Dog hører #footer ikke
rigtigt med heri, så de bør være udenfor. Så vidt jeg kan se og IMHO.

> I Mozilla og Opera er det muligt at sætte :hover på et hvilket som helst element som gør at
> listen vises. IE kan kun sætte :hover på a-elementer. Så hvis det skal virke i IE, skal du
> benytte JavaScript.

Så må jeg lige i gang med noget JS, for naturligvis skal det virke i IE. Det er trods alt hovedparten af
browserne i verden :)

> PT. bruges det kun til en bug i IE5.x når browser vinduet er for småt og man hover over et af
> menupunkterne i den globale navigering.

> Som jeg ser det er navigeringen meget spredt på siden. Jeg tror brugeren vil have det nemmere
> hvis de var mere samlet.

Det har du ret i, at den er. De bør samles mere.

> På nogle små papir lapper skriver du en titel og en kort beskrivelse af alle de sider der er
> tilgængelige på siden. Lige fra forside, søgeresultat, hjælp, nyheder, Kursusoversigt, med andre
> ord alt.

Det vil jeg gå i gang med!

> Det blev en lang post det her, men ovenstående er bare nogle ideer, som du kan tænke over og
> muligvis tage op med målgrupperne.

Det er sgu' verdensklasse. Jeg er blevet noget bedre i dag, og det er jo det det hele handler om :) Jeg
vil i gang med en stor oprydning af www.vih.dk, hvad navigationen gælder. Det har egentlig trængt længe,
men der er bare ikke nogen der har sagt det, så jeg tænkte, at det var nok ikke så slemt :)

Er det fuldstændig irrelevant at have genveje?

Med venlig hilsen
Lars


--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

> Det må skyldes at vidten på de to bokse er lidt for stor. Jeg debugger tit ved at sætte en
> baggrunds farve på de elementer der driller, så er det nemmere at se hvor de starter og slutter.

Det har jeg forsøgt, men der er tilsyneladende ikke nogen elementer, der driller. Det er mærkeligt.
Jeg lader lige baggrundsfarven være på www.vih.dk - på elementerne #content, #rightcolum,
#pyntebilleder, .billedbar, og så vidt jeg kan se, er der ikke elementer der driller i IE, men ikke
desto mindre starter selve billedet først, når #rightcolumn er færdig?

> > * I Mozilla er topmenuen ikke 100% bred.
> Det eksempel du fik hos maxdesign skulle gerne fylde hele vidten i alle browsere.
> http://css.maxdesign.com.au/floatutorial/index.htm

Ja, det synes jeg jo nok, men selve menuen fylder ikke 100% i bredden i Mozilla, og det til trods
for, at #topmenu har width: 100%.

> Det samme gør sig gældende for class'erne [SNIP] "forsidepunkt",
> "nyhederoverskrift" og "nyheder" m.fl.

Har fjernet nyhederoverskrift og nyheder nu, så det skulle være lidt mere stilet. Arbejder videre
med sagen :)

Lars Olesen
www.vih.dk

--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials