---

http://www.skolekammeraten.dk/jubelfest.php
Indhold og layout kan altid diskuteres - men er irellevant for spørgsmålet,
der alene går på teknikken?

Nu er det jo fremstillet til IE og først bagefter konstateret at være
ulovlig - altså metodikken, ikke indholdet

Midterkollonen er en DIVboks med baggrundsfarve og er det primære af sidens
budskab, mens kolonnerne på hver side er af mindre betydning, hvorfor
billederne er anbragt i hver sin flydende DIVboks - med z-index:-1, som i IE
bevirker at illustrationerne glider bag hovedvinduet , når brugerens vindue
er mindre end forudsat - hvilket altså er en helt tilsigtet effekt.

Hvordan kan samme effekt opnås med valid kode?

--
Med venlig hilsen Poul Erik Jensen
www.genealog.dk www.skolekammeraten.dk
jep at domænet dot dk

---

Poul Erik Jensen wrote:
> http://www.skolekammeraten.dk/jubelfest.php
> Indhold og layout kan altid diskuteres - men er irellevant for spørgsmålet,
> der alene går på teknikken?
>
> Nu er det jo fremstillet til IE og først bagefter konstateret at være
> ulovlig - altså metodikken, ikke indholdet
>
> Midterkollonen er en DIVboks med baggrundsfarve og er det primære af sidens
> budskab, mens kolonnerne på hver side er af mindre betydning, hvorfor
> billederne er anbragt i hver sin flydende DIVboks - med z-index:-1, som i IE
> bevirker at illustrationerne glider bag hovedvinduet , når brugerens vindue
> er mindre end forudsat - hvilket altså er en helt tilsigtet effekt.
>
> Hvordan kan samme effekt opnås med valid kode?
>

Din kode validerer godt nok ok til html 4.01
transitional.

Nu er en validering ikke nogen garanti for
/logisk/ korrekt kode, hvad din side er
et fremragende eksempel på.

I stedet for at pege på 30 eksempler på
ulogisk, ustruktureret kode vil jeg
stille dig et spørgsmål: Hvad er vigtigst
for dig - at få formidlet dit budskab eller
få siden til at se ud, som /du/ synes den
skal se ud?

Hvis det vitterligt er det første,
synes jeg du skal gøre dig én ting klart:

/Hvert eneste tiltag du gør for at
*præsentationsformatere* dit stof afskærer
en større eller mindre del af publikum
fra at modtage dit budskab./

Dit problem løses bedst ved
at opdele din side i to kolonner:

<div id="indhold">
Dit artikelstof, korrekt strukturformateret.
</div>
<div id="menuspalte">
Alt det ragelse du har i højre kolonne,
korrekt strukturformateret.
</div>

og indsætte følgende i headdelen af
din side:

<style type="text/css">
div#indhold {
margin:20px 250px 1em 1em;}
div #menuspalte {
position:absolute;
right:20px;
width:230px;
}
</style>

Glemt alt om z-index og andre CSS-egenskaber,
du alligevel åbentlyst ikke kender til (z-index
kan ikke have negative værdier)

Dermed indretter din websides bredde sig efter
browservinduets bredde, og du lan
droppe det sludder:
"Siderne er skabt - og ses derfor bedst - i 1024 x 768 pixler"

Drop det der vajende dannebrogsflag, det
er til at blive helt syg af.

Drop det styleshhet du har, ingen i verden,
end ikke dig selv, vil jeg påstå, kan få
hverken hoved eller hale på det.

Ovenstående stylesheet er alt rigeligt
til at begynde med. + plus brug af h1,h2,h3 og p
i din tekst, og ikke alle de der div'er med
mystiske klasenavne.
--

Med venlig hilsen

Jørgen Farum Jensen
http://www.webdesign101.dk
..

---

"Jørgen Farum Jensen" <jfjenzen@yahoo.dk> skrev i en meddelelse
news:44992173$0$12646$edfadb0f@dread14.news.tele.dk...
> Nu er en validering ikke nogen garanti for
> /logisk/ korrekt kode, ...

Nej, det er eftehånden gået op for mig. Men det er også blevet klart, at der
er regler, der ikke kan læse nogen steder, men som er formet af den
erfaring, som jeg bestemt savner. Det fremgår f.eks. ikke nogen steder, at
z-index skal være positivt, lige som jeg har set det angivet negeativt (har
faktisk forgæves forsøgt at finde ud af om det var tilladt - men fandt kun
ud af, at det ikke var forbudt

Det vigtiste er naturligvis budskabet - uanset underlige layouts og dumme
spørgsmål her. Men det er vel også tilladt at være legebarn, der gerne vil
stille klodserne op på en anderledes skæv facon - og få det til at virke.
Bevares, både dine og de andre sider, der ustandseligt henvises til - ja,
selv den højt besungne Zen Garden - er jo informative og stilrene, men
tørre/kedelige/duksede, set med mine øjne.

> /Hvert eneste tiltag du gør for at
> *præsentationsformatere* dit stof afskærer
> en større eller mindre del af publikum
> fra at modtage dit budskab./

Ja, jeg forstår pointen - men det er jo også det der gør det sjovt at lege
med. Og jeg klager bestemt ikke over manglende publikumstilslutning. Siden
mestre over 500 brugere ud af en rimelig snæver målgruppe - og der er ikke
nogen der klager, tværtimod (hvilket selvfølgelig ikke beviser at det
teknisk er OK).

> Drop det styleshhet du har, ingen i verden,
> end ikke dig selv, vil jeg påstå, kan få
> hverken hoved eller hale på det.

Det har jeg nu ingen problemer med - og forstår egentlig ikke hvad der er
galt med den. Bevares, der kan sikkert ryddes op i det, efterhånden som der
bliver tilpasset med "godkendte" metodikker (jeg forsøger faktisk på at gøre
som foreslået). Som flere har opfordret er såvel doctype og CSS tilføjet -
ganske vist før jeg helt forstod teknikken, med det resultat, at der
naturligvis skal tilrettes efterhånden som der bliver trukket ny forståelse
ud af "eksperterne".

Og så er der lige det med kontinuiteten - det er ikke lige sådan at lave om
på et site med over 100 sider, der er arbejdet på i flere år, og som
forventes at fungere.

Din "Dropdown menu eksempel 8" kan formentlig erstatte den ret tunge
java-menu, som jeg længe har forsøgt at komme af med. Den skal dog kunne
tilpasses samme udseende og funktion som den nuværende, for brugerne brokker
sig højlydt, hvis jeg laver om på noget )

--
Med venlig hilsen Poul Erik Jensen
www.genealog.dk www.skolekammeraten.dk
jep at domænet dot dk

---

Poul Erik Jensen wrote:

> Nej, det er eftehånden gået op for mig. Men det er også blevet klart, at der
> er regler, der ikke kan læse nogen steder, men som er formet af den
> erfaring, som jeg bestemt savner. Det fremgår f.eks. ikke nogen steder, at
> z-index skal være positivt, lige som jeg har set det angivet negeativt (har
> faktisk forgæves forsøgt at finde ud af om det var tilladt - men fandt kun
> ud af, at det ikke var forbudt

http://www.w3.org/TR/REC-CSS2/visuren.html#z-index

eller side 176 i min bog, som jeg tidligere har refereret til.

Du kan læse /alle/ reglerne i w3c's standarder.
>
> Det vigtiste er naturligvis budskabet - uanset underlige layouts og dumme
> spørgsmål her. Men det er vel også tilladt at være legebarn, der gerne vil
> stille klodserne op på en anderledes skæv facon - og få det til at virke.
> Bevares, både dine og de andre sider, der ustandseligt henvises til - ja,
> selv den højt besungne Zen Garden - er jo informative og stilrene, men
> tørre/kedelige/duksede, set med mine øjne.

"It's not about Art, it's about making money".
Og hvis du er sådan et legebarn, der vil bryde
reglerne for enhver pris, hvordan have du så
egentlig tænkt dig, nogen i denne nyhedsgruppe
kan hjælpe dig?
>
>>/Hvert eneste tiltag du gør for at
>>*præsentationsformatere* dit stof afskærer
>>en større eller mindre del af publikum
>>fra at modtage dit budskab./
>
>
> Ja, jeg forstår pointen - men det er jo også det der gør det sjovt at lege
> med. Og jeg klager bestemt ikke over manglende publikumstilslutning. Siden
> mestre over 500 brugere ud af en rimelig snæver målgruppe - og der er ikke
> nogen der klager, tværtimod (hvilket selvfølgelig ikke beviser at det
> teknisk er OK).

Der er aldrig nogen der klager, uanset hvilket
stjernelort du laver. De bli'r bare væk.


>>Drop det styleshhet du har, ingen i verden,
>>end ikke dig selv, vil jeg påstå, kan få
>>hverken hoved eller hale på det.
>

Du har i snesevis af formregler for klassers
højde og bredde som tilsyneladende ikke opfylder
nogetsomhelst fornuftigt formål.

Og forklar mig lige, hvorfor det er nødvendigt med
5 klassenavne:

<div class="v w475 p10 bv3sb bgstd">

(Kun et eksempel ud af mange).

> Din "Dropdown menu eksempel 8" kan formentlig erstatte den ret tunge
> java-menu, som jeg længe har forsøgt at komme af med. Den skal dog kunne
> tilpasses samme udseende og funktion som den nuværende, for brugerne brokker
> sig højlydt, hvis jeg laver om på noget )

Det skulle du ta'og gøre i en fart, for den menu, du nu har,
virker som en brækket arm i Firefox.


--

Med venlig hilsen

Jørgen Farum Jensen
http://www.webdesign101.dk
..

---

"Jørgen Farum Jensen" <jfjenzen@yahoo.dk> skrev i en meddelelse
news:44994c73$0$12602$edfadb0f@dread14.news.tele.dk...
> http://www.w3.org/TR/REC-CSS2/visuren.html#z-index

Der kan jeg ikke finde noget forbud mod at vælge negativ index.

> "It's not about Art, it's about making money".

Ja - det er det ikke for mig!

> Og hvis du er sådan et legebarn, der vil bryde
> reglerne for enhver pris,

Det vil jeg jo netop ikke gerne!
- D.v.s. kodereglerne - for det kan meget vel være at jeg vil bruge de
korrekte regler til at præsentere noget på en facon der er dig fremmet.

> Der er aldrig nogen der klager, uanset hvilket
> stjernelort du laver. De bli'r bare væk.

Det har du nu ikke helt ret i - men også her forstår jeg godt din pointe.

> Og forklar mig lige, hvorfor det er nødvendigt med
> 5 klassenavne:

Du kan da have ret i, at det kan lade sig gøre at samle disse i en - men det
gør jo ikke classen universel - hvilket jeg troede var formålet med
besværet. Skal man lave en samlet class for ethvert element på siderne, så
kan der jo lige så godt benyttes style="...;" direkte i koden.

> Det skulle du ta'og gøre i en fart, for den menu, du
> nu har, virker som en brækket arm i Firefox.

Det er jo det jeg ved - og tager hensyn til.

--
Med venlig hilsen Poul Erik Jensen
www.genealog.dk www.skolekammeraten.dk
jep at domænet dot dk

---

Poul Erik Jensen wrote:
> "Jørgen Farum Jensen" <jfjenzen@yahoo.dk> skrev i en meddelelse
> news:44994c73$0$12602$edfadb0f@dread14.news.tele.dk...
>> http://www.w3.org/TR/REC-CSS2/visuren.html#z-index
>
> Der kan jeg ikke finde noget forbud mod at vælge negativ index.

Det står ellers helt tydeligt:

<citat fra visuren.html#z-index>
9.9.1 Specifying the stack level: the 'z-index' property
'z-index'
Value: auto | <integer> | inherit
</citat>

Integer er pr. definition et positivt heltal. Altså kan du ikke benytte
negative værdier.

>> Og hvis du er sådan et legebarn, der vil bryde
>> reglerne for enhver pris,
>
> Det vil jeg jo netop ikke gerne!
> - D.v.s. kodereglerne - for det kan meget vel være at jeg vil bruge de
> korrekte regler til at præsentere noget på en facon der er dig
> fremmet.

At bruge reglerne kunstnerisk, men stadig i henhold til standarden er ikke
at bryde relgerne.

Men at lave sine egne regler (eller at bruge IE's specielle regler) for at
opnå en bestemt virkning, og så bagefter kalde de standard-overholdende
browsere uduelige/gammeldags, fordi de ikke gør sådan som du vil have dem
til - det er at bryde reglerne.

Gør det til en vane at benytte Firefox eller Opera som monitor, mens du
udvikler og sørg for, at din DTD trigger standards-mode i alle browsere -
også IE - så bliver der meget lidt at skulle tilrette specielt af hensyn til
IE.

Arbejder man den anden vej - bruger IE som monitor - og 'giver fanden i'
standarder - vil man i de fleste tilfælde opdage, at sidens design og/eller
funktion helt vælter i de andre browsere.

> Skal man lave en samlet class for ethvert
> element på siderne, så kan der jo lige så godt benyttes style="...;"
> direkte i koden.

Derved afskærer du dig fra at genbruge definitionen andre steder på samme
eller andre sider. Det kan ikke anbefales.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk/

---

"Erik Ginnerskov" <erik@donotspammmeplease.invalid> skrev i en meddelelse
news:449970e4$0$15784$14726298@news.sunsite.dk...
> Integer er pr. definition et positivt heltal.

OK.

> Men at lave sine egne regler ....

Det kan man naturligvis ikke - men det er for de fleste vanskeligt, at hitte
ud af alle de forskellige standarder, så det er da forståeligt når nogen
giver op og blæser på dem - selv om det er forkert.

> ... en vane at benytte Firefox eller Opera ....som monitor, ...

Det gør jeg.

>> ..., så kan der jo lige så godt benyttes style="...;"
> Derved afskærer du dig fra at genbruge ...

Netop.

> Det kan ikke anbefales.

Nu oplever jeg at "eksperterne" er uenige (selv om det nok ikke forholder
sig sådan )

--
Med venlig hilsen Poul Erik Jensen
www.genealog.dk www.skolekammeraten.dk
jep at domænet dot dk

---

"Erik Ginnerskov" <erik@donotspammmeplease.invalid> wrote in
news:449970e4$0$15784$14726298@news.sunsite.dk:

> <citat fra visuren.html#z-index>
> 9.9.1 Specifying the stack level: the 'z-index' property
> 'z-index'
> Value: auto | <integer> | inherit
> </citat>
>
> Integer er pr. definition et positivt heltal. Altså kan du ikke benytte
> negative værdier.

Nope!
"The integers consist of the positive natural numbers (1, 2, 3, …), their
negatives (-1, -2, -3, ...) and the number zero."

http://en.wikipedia.org/wiki/Integer

Negativ z-index er OK!

--
Venlig hilsen | Kind regards | Cordialement
Frank

---

Frank Olieu wrote:
> "Erik Ginnerskov" <erik@donotspammmeplease.invalid> wrote in
> news:449970e4$0$15784$14726298@news.sunsite.dk:
>
>
>><citat fra visuren.html#z-index>
>> 9.9.1 Specifying the stack level: the 'z-index' property
>> 'z-index'
>> Value: auto | <integer> | inherit
>></citat>
>>
>>Integer er pr. definition et positivt heltal. Altså kan du ikke benytte
>>negative værdier.
>
>
> Nope!
> "The integers consist of the positive natural numbers (1, 2, 3, …), their
> negatives (-1, -2, -3, ...) and the number zero."

Ok, det er nyt for mig, men så har jeg da lært
noget af denne diskussion. Samt foranlediget
nedenstående eksperiment.


> Negativ z-index er OK!
>

Tjekker ud i validatoren, men...

Har du prøvet det?
Det gi'r et lidt interessant resultat:

div#box3 {
position:absolute;
top:200px;
left:150px;
z-index:-1;
background:#257;
}

gi'r samme resultat som

div#box3 {
visibility:hidden;}

med andre ord: Boksen skjules i både IE og FF.

Og i øvrigt kan jeg slet ikke se at Poul Erik
har brug for z-index, mere for at bruge
<h1>100årsfesten</h1>
i stedet for
<div class="overskrift">100årsfesten</div>
og p-markøren i stedet for div og br,
osv osv.
--

Med venlig hilsen

Jørgen Farum Jensen
http://www.webdesign101.dk
..

---

Jørgen Farum Jensen <jfjenzen@yahoo.dk> wrote in news:449985bc$0$12646
$edfadb0f@dread14.news.tele.dk:

> Det gi'r et lidt interessant resultat:
> div#box3 {
> position:absolute;
> top:200px;
> left:150px;
> z-index:-1;
> background:#257;
> }
> gi'r samme resultat som
> div#box3 {
> visibility:hidden;}
>
> med andre ord: Boksen skjules i både IE og FF.

Det lyder logisk: du får #box3 til at ligge /under/ parent-elementet.
Men det er svært at vurdere udenfor sammenhænget...
Har du et link? :)

> Og i øvrigt kan jeg slet ikke se at Poul Erik
> har brug for z-index, mere for at bruge
> <h1>100årsfesten</h1>
> i stedet for
> <div class="overskrift">100årsfesten</div>
> og p-markøren i stedet for div og br,
> osv osv.

Det er en helt anden snak ;)

--
Venlig hilsen | Kind regards | Cordialement
Frank

---

Frank Olieu wrote:

> Det lyder logisk: du får #box3 til at ligge /under/ parent-elementet.
> Men det er svært at vurdere udenfor sammenhænget...
> Har du et link? :)
>

Ja, nu har jeg:

http://www.webdesign101.dk/x/zindex.php

Og jeg tog fejl, i min første test havde jeg en
kontekstfejl.

>>Og i øvrigt kan jeg slet ikke se at Poul Erik
>>har brug for z-index, mere for at bruge
>><h1>100årsfesten</h1>
>>i stedet for
>><div class="overskrift">100årsfesten</div>
>>og p-markøren i stedet for div og br,
>>osv osv.
>
>
> Det er en helt anden snak ;)

Nej, men er det ikke mærkeligt at så mange
gi'r sig i lag med det noget komplicerede
før de mestrer den simple strukturformatering?

Poul Erik er jo ikke den første og nok heller
ikke den sidste.

Det er som om mange newbies tror, at alm.
html er meget sværere end både CSS og
JavaScript...


--

Med venlig hilsen

Jørgen Farum Jensen
http://www.webdesign101.dk
..

---

Jørgen Farum Jensen ramte sit keyboard den 21-06-2006 23:09 og fik dette
ud af det:

> Det er som om mange newbies tror, at alm.
> html er meget sværere end både CSS og
> JavaScript...

Who should have thunk it?

--
Benny Nissen
www.bennynissen.dk

---

Jørgen Farum Jensen <jfjenzen@yahoo.dk> wrote in
news:4499b506$0$12695$edfadb0f@dread14.news.tele.dk:

> http://www.webdesign101.dk/x/zindex.php

Nice demo...
Jeg fandt ud af at FF og IE renderer den ret forskelligt: boksene
forsvinder i FF, mens de glider i baggrund i IE (se LRNs indlæg). Hvis man
sætter 'position:relative' og 'z-index:0' på <body> (eller anden 'parent'
container) virker FF til gengæld på samme måde som IE.

--
Venlig hilsen | Kind regards | Cordialement
Frank

---

Frank Olieu wrote:

> Nice demo...
> Jeg fandt ud af at FF og IE renderer den ret forskelligt: boksene
> forsvinder i FF, mens de glider i baggrund i IE (se LRNs indlæg). Hvis man
> sætter 'position:relative' og 'z-index:0' på <body> (eller anden 'parent'
> container) virker FF til gengæld på samme måde som IE.
>

Godt fundet ud af, selv om det vel nærmest er
en kuriositet.

Jeg har nu opdateret demosiden med
den nye info.

(http://www.webdesign101.dk/x/zindex.php)
--

Med venlig hilsen

Jørgen Farum Jensen
http://www.webdesign101.dk
..

---

"Erik Ginnerskov" <erik@donotspammmeplease.invalid> writes:

> <citat fra visuren.html#z-index>
> 9.9.1 Specifying the stack level: the 'z-index' property
> 'z-index'
> Value: auto | <integer> | inherit
> </citat>
>
> Integer er pr. definition et positivt heltal. Altså kan du ikke benytte
> negative værdier.

Som det er blevet sagt, så er kan heltal være både positive og negative.
Også i CSS <URL:http://www.w3.org/TR/CSS2/syndata.html#q13>

Problemet med negativt z-index i Firefox (og andre Gecko-baserede
browsere) er at det placerer elementet under viewportens baggrund,
som ikke kan være gennemsigtig.

Andre browsere ser ud til at denne "bageste baggrund" er placeret
bag alle z-indexer (minus uendeligt).

Begge fortolkninger er i overensstemmelse med CSS-standarden.

[bruge style-attribut i stedet for mange klasser]
> Derved afskærer du dig fra at genbruge definitionen andre steder på samme
> eller andre sider. Det kan ikke anbefales.

Hvis ens klasse (fx "v") udelukkende har en visningsmæssig betydning
(fx float til venstre), så er det ikke fordi det giver mening at ændre
på dens definition. Man må formode at den er blevet brugt på steder
hvor det forventes at det er præcist den effekt den skal have.
Jeg kan ikke se den store forskel på class="v" og style="float:left".
De er lige dårlig stil :)

Hvis man i stedet havde en klasse "kommentarbox" som bliver vist
med "float:left", så kan man godt skifte det til fx at floate til
højre, fordi man ved at det *kun* er brugt til noget der faktisk
er kommentarboxe. Hvis en anden type elementer også floates til
venstre, så er de blevet erklæret uafhængigt.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

---

Lasse Reichstein Nielsen wrote:

> Problemet med negativt z-index i Firefox (og andre Gecko-baserede
> browsere) er at det placerer elementet under viewportens baggrund,
> som ikke kan være gennemsigtig.
>
> Andre browsere ser ud til at denne "bageste baggrund" er placeret
> bag alle z-indexer (minus uendeligt).

Så fik jeg også lært lidt i dag.

> Hvis ens klasse (fx "v") udelukkende har en visningsmæssig betydning
> (fx float til venstre), ....
> De er lige dårlig stil :)
>
> Hvis man i stedet havde en klasse "kommentarbox" som bliver vist
> med "float:left", så kan man godt skifte det til fx at floate til
> højre, fordi man ved at det *kun* er brugt til noget der faktisk
> er kommentarboxe.

Hvis man regelmæssigt ændrer på en sides design, kan der være nogen ræson i
den måde at tildele klasser på. Men man risikerer at skulle definere
float:left mange steder i css for at få alle elementer med.

Har man i stedet lavet en klasse .fl{float:left;}, kan den kaldes på ethvert
element, som man ønsker floated til venstre. Skulle man så ønske at flytte
et enkelt element over til at være floated til højre, er det da kun at ændre
klassekaldet fra class="fl" til class="fr" (gæt selv, hvordan den klasse er
defineret i css). Værre behøver det da ikke at være.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk/