[css] drie level lijst verspreid over pagina

[BetuweKees]

ben bezig aan een site met de volgende layout:

code:

+----------------------------+
|                            |
+-------+--------------------+
|       |                    |
|       |                    |
|       |                    |
|       |                    |
+-------+--------------------+
|                            |
+----------------------------+

om over de site te navigeren staat aan de boven, onder en linker zijde menu's die eigenlijk gezien zouden kunnen worden als lijsten, met dat verschil dat level 1 van de lijst aan de onderzijde staat, level 2 aan de bovenzijde en level 3 links.

edit:
(hiermee bedoel ik dus het lijstje zoals woudlooper dat in de reply hieronder geeft)

om mooi volgens alle accesbility normen te werken zou het natuurlijk het mooiste zijn om deze lijst in een geheel op te nemen aan de onderin mjin html docment, de lijst door middel van divjes te schikken over het scherm en door middel van een mooie selected class de correcte menuutjes voor de op dat moment bekeken pagina weer te geven.

ik zit echter te twijfelen over de haalbaarheid en het nut van een dergelijke oplossing. aangezien de pagina namelijk uit heel wat meer bestaat dan die menuutjes alleen zit ik ook met ander elemeneten in de opmaak waar ik rekening mee dien te houden (ondanks het feit dat ik mijn layout enkel met css in elkaar zal zetten). de enige manier om eea enigszins netjes te houden is namelijk door middel van absolute overplaatsing van de betreffende menus over de pagina opzet, en ik vrees dat het op die manier een beetje een rommeltje gaat worden. daarnaast is het nadeel van overplaatsen natuurlijk weer dat je allerlei problemen met je z-index krijgt als er in de layer die overplaats wordt ook elementen staan die clickable dienen te zijn.

is er wellicht iemand die een andere methode weet om een dergelijke opzet netjes te verwerken? of is het uberhaupt niet nuttig om zo ver te gaan met accesibility en kan ik beter drie losse lijsten gebruiken? meningen?

[ Voor 3% gewijzigd door BetuweKees op 09-01-2004 17:50 . Reden: verduidelijken ]

[Woudloper]

Ik snap niet helemaal wat je bedoelt met de opmerkingen lever 1, 2, en 3. Moet ik dit zien als volgt:

HTML:

<ul>
 <li>level 1
  <ul>
   <li<level 2</li>
    <ul>
     <li>level 3</li>
    </ul>
   </li>
  </ul>
 </li>
</ul>

Wellicht heb je ook nog wat aan dit topic waarin crisp een mooi voorbeeld geeft van zo'n soort layout als jij zou willen.

[cutter]

1. Werk met de visibility van divs.
2. Je kunt ook nog gaan denken aan een serverside scripting oplossing.

In het kader van de accessibility zal:
1. Niet handig zijn omdat de inhoud van alle divs in de non-css browser zichtbaar is. Degene met een functiebeperking zal veel meer links te zien krijgen dan iemand met een css browser.
2. Met php kun je de menu's laten zien als de user op een link klikt. Misschien betekent dat voor jou een hogere load op je server. Zal qua accessibility misschien overzichtelijker zijn.

[BetuweKees]

Woudloper schreef:
Ik snap niet helemaal wat je bedoelt met de opmerkingen lever 1, 2, en 3. Moet ik dit zien als volgt:

precies, dat bedoel ik.

ik zal de topic van crisp eens doorlezen.

cutter schreef:
In het kader van de accessibility zal:
1. Niet handig zijn omdat de inhoud van alle divs in de non-css browser zichtbaar is. Degene met een functiebeperking zal veel meer links te zien krijgen dan iemand met een css browser.
2. Met php kun je de menu's laten zien als de user op een link klikt. Misschien betekent dat voor jou een hogere load op je server. Zal qua accessibility misschien overzichtelijker zijn.

1. dit is juist de bedoeling; iemand met functie beperking zou idd het hele pagina overzicht in een keer moeten zien, vandaar dat ik die lijst ook aan de onderzijde van de pagina te zetten zodat bv iemand met spraak browser niet eerst hele menu hoeft af te luisteren.
2. php komt er sowieso bij, aangezien er veel data in een database staat opgeslagen; die server load is er dus toch wel. daarnaast zou een kort menu betekenen dat er meer geklikt moet worden voordat de juiste pagina bereikt is; dat is dan toch juist minder gebruiksvriendelijk

[BetuweKees]

ok nu eindelijk die post gelezen (druk, hele dag practicum gehad ) maar zie dat die voornamelijk op het in elkaar zetten van de pagina gaat door middel van de layers. dit is voor mij het probleem niet; hier kom ik wel uit.
mijn vraag is voornamelijk: hoe dit mooi te combineren met een lijst die ik als geheel opneem, maar toch verspreid over de pagina weergeef..

dus als iemand nog ideeen hierover heeft: graag!

[Verwijderd]

BetuweKees schreef op 09 januari 2004 @ 17:48:
mijn vraag is voornamelijk: hoe dit mooi te combineren met een lijst die ik als geheel opneem, maar toch verspreid over de pagina weergeef..

Absoluut positioneren. Heel lastig, zeker met content van varierende lengte. Dit is een ideetje (als ik het probleem goed begrijp).

HTML:

    <ul id="nivo1">
        <li>Optie 1</li>
        <li>Optie 2</li>
        <li>Optie 3</li>
        <li>
            Optie 4
            <ul id="nivo2">
                <li>Optie 4.1</li>
                <li>
                    Optie 4.2
                    <ul id="nivo3">
                        <li>Optie 4.2.1</li>
                        <li>Optie 4.2.2</li>
                        <li>Optie 4.2.3</li>
                    </ul>
                </li>
                <li>Optie 4.3</li>
            </ul>
        </li>
        <li>Optie 5</li>
    </ul>

Cascading Stylesheet:

        ul {
            position:absolute;
            padding:0;
            margin:0;
            list-style:none;
        }
        li { float:left; }

        ul#nivo1 {
            left:0;
            top:200px;
            color:#0F0;
        }

        ul#nivo2 {
            left:0;
            top:-200px;
            color:#F00;
        }

        ul#nivo3 {
            left:0;
            top:40px;
            color:#00F;
        }
        ul#nivo3 li {
            float:none;
        }

[BetuweKees]

heb je opzet eens geprobeerd (bijna gelijk aan wat ik al in gedachten had) en werkt prima, alleen erg ranzig met dat positioneren enzo, maar zonder style zit het er nu wel prima uit..
moet eens hard over denken of dit de moeite waard is. eens kijken wat design gaat worden; zou best eens kunnen dat er veel graphics in komt, dus dat is dat positioneren wellicht iets minder erg..

[ Voor 16% gewijzigd door BetuweKees op 09-01-2004 20:50 ]