---

Hej alle

Jeg har lavet en ny menu til Fidusosiderne. Den kan afprøves her:

   http://www.fiduso.dk/index_NEW.php

Det er de rigtige Fidusosider der vises.

Hvis man åbner en arkivside og derefter bruger linket til
"Forside", ryger man over i den rigtige styring. Øvrige links
bliver inden for den nye menu.

Jeg har lavet en feature ud af en bug:
Markeringen med sort og ikke-link bliver stående ved den aktuelle
side også selv om man åbner en anden gruppe som lukker den ellers
åbne.

Styringen er baseret på ren HTML - inspireret af Allan Vebels idé
- og virker ens i alle browsere. Det er lavet med PHP.

Virker det overskueligt? Det spørgsmål drejer sig også om
opdelingen af siderne.

Er det bedre at få pilemarkeringen til at stå ens (langt til
højre) ved alle gruppelinks? Hvordan opnår jeg det? (tabel med to
felter og højrestilling virker lidt voldsomt).


Nu jeg alligevel havde lavet det, tænke jeg at jeg lige så godt
kunne offentliggøre det, så hvis nogen bliver begejstrede for
ideen, er der et demosystem med PHP-kode her:

   http://bertel.lundhansen.dk/webdesign/index.php

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

---

"Bertel Lund Hansen" skrev i en meddelelse...

> Jeg har lavet en ny menu til Fidusosiderne. Den kan afprøves her:
>
> http://www.fiduso.dk/index_NEW.php

[...]
> Styringen er baseret på ren HTML - inspireret af Allan Vebels idé
> - og virker ens i alle browsere. Det er lavet med PHP.
>
> Virker det overskueligt? Det spørgsmål drejer sig også om
> opdelingen af siderne.

Det ? hører vel nærmest til i Ris+Ros.
Men jo, princippet, at siden ikke linker til sig selv, er rigtig, og
anbefales. Og menuen som sådan er lige efter mit hoved, som den ses på dit
link, når CSS er aktiv, men...

For at lave en menu med undermenu, som også vises logisk uden CSS, så kan du
følge en metode med at bruge enten dl eller ul, og så blande dem. Jeg er
kommet frem til, at den bedste måde at gøre det på, er at bruge dl til
hovedmenupunkterne, og så ul til undermenu.

Menuen skal jo som sagt kunne vises logisk/forståeligt uden CSS, og der er
lister i lister genialt. Det er muligt at sætte list-image på ul, men det er
yderligere muligt at sætte background-image på begge. Dette kan løse nogle
problemer med at på pilene i starten, for list-image vises ikke nødvendigvis
ens i alle browsere.

Et eksempel på en menu:

<dl>
<dt>Hovedmenu</dt>
<dd>Hovedmenupunkt 1</dd>
<dd>
<ul>
<li>Undermenupunkt1 til hovedpunkt 1</li>
<li>Undermenupunkt 2 til hovedpunkt 1</li>
</ul>
</dd>
<dd>Hovedmenupunkt2</dd>
</dl>

....testet og vises logisk uden CSS (har dog ikke lavet stylesheet til det).
Desuden, så bør det være muligt at style både menupunkter og
undermenupunkter, samt aktive (ren tekst) og ikke-aktive links uden at bruge
class (som som regel er et problem), og så vidt jeg lige kan se med ét
stylesheet. Idéen er at style alle listepunkterne ens, og så style linksne i
dem anderledes. Teksten for nuværende side er så ikke et link, og vil få
stylen fra listepunktet, mens linksne indeni vil være ens. Altså ligesom på
din side, men mere logisk bygget op i HTMLen.

MVH
Rune Jensen

NOTER:
<dl> http://www.w3schools.com/tags/tag_dl.asp
<ul> http://www.w3schools.com/tags/tag_ul.asp
Generelt om list-style: http://www.w3schools.com/css/pr_list-style.asp
Og om background-image på lister:
http://www.wpdfd.com/issues/82/using_graphics_in_css_styles/

---

"Rune Jensen" skrev i en meddelelse...

> Et eksempel på en menu:
>
> <dl>
> <dt>Hovedmenu</dt>
> <dd>Hovedmenupunkt 1</dd>
> <dd>
> <ul>
> <li>Undermenupunkt1 til hovedpunkt 1</li>
> <li>Undermenupunkt 2 til hovedpunkt 1</li>
> </ul>
> </dd>
> <dd>Hovedmenupunkt2</dd>
> </dl>


Og jo... en mere logisk menu vil måske nok være at lave hovedmenupunktet med
definition term, så den kommer til at se sådan ud:

<dl>

<dt>Hovedmenupunkt 1</dt>
<dd>
<ul>
<li>Undermenupunkt1 til hovedpunkt 1</li>
<li>Undermenupunkt 2 til hovedpunkt 1</li>
</ul>
</dd>
<dt>Hovedmenupunkt2</dt>
</dl>

MVH
Rune Jensen

---

"Rune Jensen" skrev i en meddelelse...

> Og jo... en mere logisk menu vil måske nok være at lave hovedmenupunktet
> med definition term, så den kommer til at se sådan ud:

Eksempel med CSS, som også vises logisk uden, kan ses her:
http://www.legeplads.net/test/menu/test.html

....det bør ikke være svært at skjule alle undermenuer end den aktive med
PHP.

MVH
Rune Jensen

---

Rune Jensen skrev:

> For at lave en menu med undermenu, som også vises logisk uden CSS, så kan du
> følge en metode med at bruge enten dl eller ul, og så blande dem.

Nu har jeg (foreløbig) valgt en metode med tabel. Det kan man
mene er ulogisk, men det betyder at jeg kan skyde pilen, », ud
til højre. Så har jeg benyttet mig af th til bloknavnene og td
til sidenavnene.

Opsætningen er nu lavet uden afstandsmellemrum.

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

---

"Bertel Lund Hansen" skrev i en meddelelse...

> Rune Jensen skrev:
>
>> For at lave en menu med undermenu, som også vises logisk uden CSS, så kan
>> du
>> følge en metode med at bruge enten dl eller ul, og så blande dem.
>
> Nu har jeg (foreløbig) valgt en metode med tabel. Det kan man
> mene er ulogisk, men det betyder at jeg kan skyde pilen, », ud
> til højre.

burde da ikke være nødvendigt. Brug et background-image og så f.eks.

td{
display: block;
background: url(arrow.gif) right 50%;
}


> Så har jeg benyttet mig af th til bloknavnene og td
> til sidenavnene.

Den metode, jeg skitserer bruger samme princip, men er mere moderne


> Opsætningen er nu lavet uden afstandsmellemrum.

Fair nok. Iøvrigt har dit table intet at sige på mobil - der er det ikke
alignet til højre, men vises bare lige efter teksten. sæt evt. en class (nu
alle er så glade for det ) på din tekst-pil, som du skjuler med css, så
vil den vises uden css, mens baggrundsbilledet vil vises med. Så kan "min"
metode stadig bruges.


Link: http://www.legeplads.net/test/menu/test.html

MVH
Rune Jensen

---

"Rune Jensen" skrev i en meddelelse...

> sæt evt. en class (nu alle er så glade for det ) på din tekst-pil, som
> du skjuler med css, så vil den vises uden css, mens baggrundsbilledet vil
> vises med. Så kan "min" metode stadig bruges.

den mere minimalistiske model er pænere i HTMLen, men gir så færre
muligheder

http://www.legeplads.net/test/menu/test2.html

....til gengæld nemmere end med table - efter min ringe mening.

MVH
Rune Jensen

--
WinAMP: Apollo - Dance

---

Bertel Lund Hansen wrote:

> Er det bedre at få pilemarkeringen til at stå ens (langt til
> højre) ved alle gruppelinks?

Det ville jeg foreslå.

> Hvordan opnår jeg det? (tabel med to
> felter og højrestilling virker lidt voldsomt).

Du kan sagtens behole dine lister. De listepunkter, der har underpunkter,
kan du tildelle en class="hasSubs" og du kan så i css lave dette:

..hasSubs {
background url(arrow.gif) right no-repeat;
}

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

---

"Erik Ginnerskov" skrev i en meddelelse...

> Du kan sagtens behole dine lister. De listepunkter, der har underpunkter,
> kan du tildelle en class="hasSubs" og du kan så i css lave dette:
>
> .hasSubs {
> background url(arrow.gif) right no-repeat;
> }

....Men vil dette vises logisk uden CSS? Og forsøger man ikke at undgå
classer så meget som muligt og så style på selve tagget/tagsne i stedet? Er
ideologisk HTML-renheds-nørd

Kan ikke lige se det for mig, så spørger af ren nysgerrighed...

MVH
Rune Jensen

---

Rune Jensen skrev:
> "Erik Ginnerskov" skrev i en meddelelse...
>
>> Du kan sagtens behole dine lister. De listepunkter, der har underpunkter,
>> kan du tildelle en class="hasSubs" og du kan så i css lave dette:
>>
>> .hasSubs {
>> background url(arrow.gif) right no-repeat;
>> }
>
> ....Men vil dette vises logisk uden CSS? Og forsøger man ikke at undgå
> classer så meget som muligt og så style på selve tagget/tagsne i stedet? Er
> ideologisk HTML-renheds-nørd

Hvis du er det, forholder det sig jo lige omvendt.
En HTML-purist accepterer ikke andre attributter
end class, id og title. style-attributten er bandlyst,
for inline styles er lige det modsatte af adskillelse
af form og indhold.

En CSS-lam browser vil ikke vise noget baggrundsbillede,
hvis det er det du tænker på. Det, der vises logisk i
en CSS og/eller JavaScript-lam browser er HTML-markørerne
i deres "naturlige" tilstand, det vil sige som de er be-
skrevet i DTD'en.


--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

Rune Jensen wrote:

> ...Men vil dette vises logisk uden CSS?

Uden css vil det bare vises som liste i liste. Ingen problemer i det.

> Og forsøger man ikke at undgå
> classer så meget som muligt og så style på selve tagget/tagsne i
> stedet?

Næ, hvorfor dog det? Et inline-css kan ikke genbruges andre steder, det skal
specifikt skrives overalt, hvor man vil bruge det. Det er da om at få så
meget css som muligt lagt ud i eksternt, hvor det kan genbruges . Her er
class og id et glimrende middel til at sætte noget css på enkelte elementer
uden at ramme andre tilsvarende elementer.

> Er ideologisk HTML-renheds-nørd

Det er du ikke ene om.

> Kan ikke lige se det for mig, så spørger af ren nysgerrighed...

Jeg har brugt det i et par år på begge mine sider (3. linje i min
signatur) - det fungerer upåklageligt i IE 5+, NS6.2+, FF1+, Op7.54+

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

---

"Erik Ginnerskov" skrev i en meddelelse...

> Rune Jensen wrote:
>
>> ...Men vil dette vises logisk uden CSS?
>
> Uden css vil det bare vises som liste i liste. Ingen problemer i det.
>
>> Og forsøger man ikke at undgå
>> classer så meget som muligt og så style på selve tagget/tagsne i
>> stedet?
>
> Næ, hvorfor dog det? Et inline-css kan ikke genbruges andre steder, det
> skal specifikt skrives overalt, hvor man vil bruge det. Det er da om at få
> så meget css som muligt lagt ud i eksternt, hvor det kan genbruges . Her
> er class og id et glimrende middel til at sætte noget css på enkelte
> elementer uden at ramme andre tilsvarende elementer.

Farum og Erik... Jeg tror, vi taler forbi hinanden - men når to samtidig
opfatter det på samme måde, så må jeg jo formulere mig dårligt. Men det var
nu ogs¨sent i går.

Når jeg taler om at style på selve tagget, så mener jeg at tilgå egenskaber
for tagget direkte i CSSen, dvs. ingen classer. Kig på mit eksempel, så kan
i se, hvad jeg mener... der er så heller ingen classer, for det er jo dem,
jeg forsøger at undgå. Og det virker iøvrigt på alle browsere, som bare
forstår anchor tagget, ul og dl. Prøv selv at se uden CSS.
http://www.legeplads.net/test/menu/test.html. Man kan nemt tilgå egenskaber
i stylesheetet for hver enkelt menupunkt, hvadenten det er aktivt eller ej
helt uden brug af class.

Det er nogenlunde samme metode, som anbefales af w3.org (selvom de selv
bruger classer, så her er jeg uenig med mange). Her bruges bare ul i ul. Man
sætter en undermenu ind i en menu med en liste i en liste. Bertel har brugt
den samme liste til både hovedpunkter og undermenuer, hvilket jeg finder
ulogisk.

Så udover den HTML, jeg beskriver, så ville jeg foreslå en serverside kode,
som ved hjælp af Request.ServerVariables("PATH_INFO")spørger for aktuel
sides sti og tjekker det op mod et array, og derudfra danner menuen. På
denne måde undgås variable i sideadressen. Ved ikke, hvad det hedder i PHP,
men der må være en lign. metode. Det må også være muligt at danne samme
effekt med at lade undermenupunktet stå, når man åbner en anden hovedmenu.

Variable bør for så vidt undgås til definerering af side/underside og til
vigtig navigering - efter min mening... før i tiden af hensyn til
søgemaskiner, men stadig også fordi det vil være sværere at huske en sides
navn, så. Altså den "rå" side bør kunne ses uden nogen variabler defineret,
og menuen skal her vises logisk. På samme måde så bør sidens menu kunne ses
logisk uden CSS. Og ligeledes forsøger jeg at undgå class, div og span for
den sags skyld til menuer.

Et spørgsmål: Når man ser Bertels side uden CSS, så er undermenuen
indrykket - er dette opnået med en ekstra space?

Nå, dette er kun mine betragtninger og meninger. Ingen som siger, de er de
rigtige, men altså dem, jeg arbejder efter.




PS. Bertel - noget helt andet: du mangler en <h1> ovenover din tekst.


MVH
Rune Jensen

---

"Erik Ginnerskov" skrev i en meddelelse...

> Rune Jensen wrote:
>
>> ...Men vil dette vises logisk uden CSS?
>
> Uden css vil det bare vises som liste i liste. Ingen problemer i det.

Jeg kan altså ikke se andet, end at der kun er brugt én liste, hvadenten det
er med eller uden undermenuer. Og det ser ud, som om indrykning til
undermenu er foretaget med ekstra space. Er jeg forkert på den? Ret mig
gerne, hvor jeg tar fejl.

MVH
Rune Jensen

---

Rune Jensen wrote:

> Jeg kan altså ikke se andet, end at der kun er brugt én liste,
> hvadenten det er med eller uden undermenuer.

<ul>
<li>foo</li>
<li>bar
<ul>
<li>bar-foo</li>
<li>foo-bar</li>
</ul>
</li>
</ul>

Det er en liste i en liste, ikke kun en liste. Men det er kun en type liste
(uordnet), hvor dit eksempel er en uordnet liste i en definitionsliste.

> Og det ser ud, som om
> indrykning til undermenu er foretaget med ekstra space.

Uden css sker indrykningen som en default visning af lister. Sådan opfører
uformaterede lister sig - lige som dd-elementet i en definitionsliste
default rykkes ind i forhold til dt-elementet.

> Er jeg
> forkert på den? Ret mig gerne, hvor jeg tar fejl.

Skulle være gjort med ovenstående.

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

---

"Erik Ginnerskov" skrev i en meddelelse...

> Rune Jensen wrote:
>
>> Jeg kan altså ikke se andet, end at der kun er brugt én liste,
>> hvadenten det er med eller uden undermenuer.
>
> <ul>
> <li>foo</li>
> <li>bar
> <ul>
> <li>bar-foo</li>
> <li>foo-bar</li>
> </ul>
> </li>
> </ul>
>
> Det er en liste i en liste, ikke kun en liste. (...)

Du må meget gerne dolumentere, hvilken side, du ser dette på. Jeg ser og
lærer.


>> Og det ser ud, som om
>> indrykning til undermenu er foretaget med ekstra space.
>
> Uden css sker indrykningen som en default visning af lister. Sådan opfører
> uformaterede lister sig - lige som dd-elementet i en definitionsliste
> default rykkes ind i forhold til dt-elementet.

....og ser jeg Bertels menu uden CSS i Firefox, så indrykkes undermenu
nøjagtigt én space, og bullet er ens på samtlige listepunkter. Sådan opfører
<ul> lister i <ul> lister sig ikke. Hverken i Firefox eller IE. Men det
passer uhyre godt med, at det kun er én enkelt liste.


>> Er jeg
>> forkert på den? Ret mig gerne, hvor jeg tar fejl.
>
> Skulle være gjort med ovenstående.

Du bliver altså nødt til at dokumentere, Erik, ellers ved vi ikke, om vi
snakker om det samme. Det du beskriver er jo, hvordan menuen _kunne_ se ud,
hvis den var lavet sådan som de fleste anbefaler i dag. Så hvilken side ser
du dette på? Jeg ser én enkelt uordnet liste, men hvor indrykning er sket
med en space til undermenu (dén efter <li>, linje 5-12 i nedenstående uddrag
af kode.), samt ekstra space til hver side på alle links iøvrigt. Ingen af
delene finder jeg fuldt korrekte - det bør laves med CSS - omend de
selvfølgelig virker efter hensigten.

Eksempelkode (uddrag) med aktiv undermenu,
http://www.fiduso.dk/index_NEW.php?page=sammenskrevet&menu=1

<div class='indholdsramme'> <div class='menu'>
<ul class='ingen'>
<li><a href='?'> Forside </a></li>
<li><strong> Sprogfejl » </strong></li>
<li> <a href='?page=skraekeksempler&amp;menu=1'> Skrækeksempler </a></li>
<li> <a href='?page=splittet&amp;menu=1'> Splittede ord </a></li>
<li> Sammenskrevne ord </li>
<li> <a href='?page=apostroffer&amp;menu=1'> Apostroffer </a></li>
<li> <a href='?page=metaformiks&amp;menu=1'> Metaformiks </a></li>
<li> <a href='?page=skraellemaend&amp;menu=1'> Skrællemænd </a></li>
<li> <a href='?page=diverse&amp;menu=1'> Diverse fejl </a></li>
<li> <a href='?page=nutids-r&amp;menu=1'> Nutids-r </a></li>
<li><a href='?page=sammenskrevet&amp;menu=2'><strong> Bevidst sprog »
</strong></a></li>
<li><a href='?page=sammenskrevet&amp;menu=3'><strong> Historie »
</strong></a></li>
<li><a href='?page=sammenskrevet&amp;menu=4'><strong> Meninger »
</strong></a></li>
<li><a href='?page=sammenskrevet&amp;menu=5'><strong> Sproginfo »
</strong></a></li>
<li><a href='?page=sammenskrevet&amp;menu=6'><strong> Medlemmer »
</strong></a></li>
<li><a href='?page=sammenskrevet&amp;menu=7'><strong> Teknisk »
</strong></a></li>
<li><a href='?page=sammenskrevet&amp;menu=8'><strong> Arkiv »
</strong></a></li>
&nbsp;<br>
</div> <!-- end class 'menu' -->
<div class='indhold'>
<div class='spalte'>

<p>Fra Jonas Schmeltz Aaberg, 8/12-2006:</p>



....så hvor nøjagtigt er den ekstra <ul>???

Jeg har så prøvet at søge på <ul i hele dokumentet for at være sikker, og
der er ganske rigtigt kun én. Jeg fandt ved samme lehlighed ud af, at der så
også mangler en afsluttende </ul>. Den skal vist være der, når det er
strict, selvom det ikke har noget umiddelbart at sige.
http://www.htmlhelp.com/cgi-bin/validate.cgi?url=http%3A//www.fiduso.dk/index_NEW.php%3Fpage%3Dsammenskrevet%26menu%3D1&warnings=yes&input=yes

Hvis du/i kan modbevise ovenstående påstande og tydeligt dokumentere, hvor
jeg tager fejl, så ville det være en stor hjælp for mig.


MVH
Rune Jensen

---

Rune Jensen wrote:

> Du må meget gerne dolumentere, hvilken side, du ser dette på. Jeg ser
> og lærer.

På mine sider er menuen uordnede lister i en uordnet liste - visse steder
endda i tre niveauer:

http://hjemmesideskolen.dk
http://ginnerskov.dk - min hjemmeside
http://ginnerskov.dk/majbrit/ - min kones hjemmeside

På den side, du kom med link til i går 20:47, er menuen en uordnet liste i
en definitionsliste:

http://www.legeplads.net/test/menu/test.html

> ...og ser jeg Bertels menu uden CSS i Firefox, så indrykkes undermenu
> nøjagtigt én space, og bullet er ens på samtlige listepunkter.

Bertels eksempel er kun en enkelt liste, hvor undermenuerne bare er rykket
ind med en [Space]:

http://www.fiduso.dk/index_NEW.php

> Du bliver altså nødt til at dokumentere, Erik, ellers ved vi ikke, om
> vi snakker om det samme.

Det er det, jeg prøver på.

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

---

Rune Jensen skrev:

> er med eller uden undermenuer. Og det ser ud, som om indrykning til
> undermenu er foretaget med ekstra space.

Det er rigtigt, og du har ret i din underforståede pointe at det
bør laves med style.

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

---

Rune Jensen skrev:

> ...Men vil dette vises logisk uden CSS? Og forsøger man ikke at undgå
> classer så meget som muligt og så style på selve tagget/tagsne i stedet? Er
> ideologisk HTML-renheds-nørd

Det er ikke af mangel på interesse at jeg ikke har reageret før,
men jeg har lige haft mit barnebarn på ferie i nogle dage, og så
kan/vil jeg ikke sidde ved computeren.

Jeg har læst alle svarene, og der er flere ting at arbejde videre
med. Nu til debatten:

Jeg forstår ikke at det skulle være smart at undgå klasser -
tværtimod. Det er en måde at binde flere forskellige elementer
sammen på så de altid får samme style. Derudover glemmer du vist
at de automatisk dokumenterer koden. Det er noget nemmere at
afkode

   <dl class='menu'>
   <dt> ...
   </dl>

end

   <dl>
   <dt> ...
   </dl>

Id kan naturligvis det samme, men jeg bruger normalt klasser
uanset om de kun forekommer ét sted.

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/