[CSS] Elke geneste <ul> op nieuwe regel

[Reveller]

Neem als voorbeeld de volgende html list:

HTML:

<style>
ul li {
  display: inline;
}

ul ul {
  color: red;
}

ul ul ul {
  color: green;
}
</style>

<ul>
  <li>Vlees
    <ul>
      <li>Rood
        <ul>
          <li>Vet</li>
          <li>Mager</li>
        </ul>
      </li>
      <li>Bruin</li>
    </ul>
  </li>
  <li>Brood</li>
  <li>Vis</li>
</ul>

De standaard output van de lijst hierboven is onder elkaar. Ik probeer hem nu al een hele tijd op de volgende manier te krijgen:

HTML:

Vlees Vis Brood
Rood Bruin
Vet Mager

De sleutel hiertoe is de display: inline, voor zover ik begrepen heb. Probleem is alleen dat ik niet weet hoe ik de geneste ul's moet "scheiden" van de andere uls. Met bovenstaande css komen Vlees, Brood en Vis nooit naast elkaar te staan, omdat de browser nog steeds Rood en alle andere nodes tussen Vlees en Brood propt...hoe zorg ik ervoor dat elke geneste ul op een nieuwe regel begint?

[ Voor 12% gewijzigd door Reveller op 18-05-2005 16:45 ]

[Verwijderd]

alle li's inline,
tweede niveau ul absoluut positioneren, met top 1em en left 0;
derder niveau idem

dan heb je wel brood en vis andersom, maar dan moet je dat maar in je source omdraaien (is toch een ul, dus de volgorde boeit niet)

[ Voor 42% gewijzigd door Verwijderd op 18-05-2005 16:50 ]

[Savantas]

Zo kom je enigszins in de buurt:

code:

<style>
li {
  display: inline; padding: 0 5px; 
  border-left: 1px solid black; 
  border-right: 1px solid black; 
}

ul ul {
  color: red;
  top: 2em; left: 0;
position: absolute;
}

ul ul ul {
  color: green;
  top: 1em; left: 0;
position: absolute;
}

body {
    margin: 0; padding: 0;
}
</style>

Maar of het zo mooi is... Rood blijft in het block van Vlees hangen, en Vet weer onder Rood. Eigenlijk zou je een mix willen hebben van absolute en relative positioning. De een vertikaal, de ander toegepast op horizontaal.
Er zijn wel menu's via CSS die een dergelijk trucje uithalen, heb je al met Google gezocht?

Niet helemaal, Mophor. Als ik jouw methode probeer moet ik voor FF bij het tweede niveau top: 2em gebruiken. IE maakt er helemaal zut van...

[ Voor 30% gewijzigd door Savantas op 18-05-2005 17:05 . Reden: Mophor's ideeen verwerkt ]

[Verwijderd]

op alistapart staat een artikeltje over geneste lists. je voorbeeld van hoe het eruit moet komen te zien vind ik btw een beetje onduidelijk... bedoel je zoiets?

code:

Vlees                                   |    Vis            |    Brood
    Rood                  |    Bruin    |
        Vet    |    Mager

[Reveller]

Verwijderd schreef op woensdag 18 mei 2005 @ 16:56:
op alistapart staat een artikeltje over geneste lists. je voorbeeld van hoe het eruit moet komen te zien vind ik btw een beetje onduidelijk... bedoel je zoiets? [...]

Bijna Zoiets dus:

code:

Vlees | Vis | Brood |
Rood | Bruin |
Vet | Mager

Gewoon onder elkaar - elke ul op een aparte regel. Wat jij bedoelt lijkt me een stuk ingewikkelder, maar ook zeker interessant om eens uit te werken (een andere keer )

@mophor, Savantas - dat komt idd dicht in de buurt! Met enige toevoeging ziet het er perfect uit in FF:

code:

li {
  display: inline;
}

ul {
  position: absolute;
  padding: 0;
}

ul ul {
  color: red;
  left: 0;
  position: absolute;
}

ul ul ul {
  color: green;
  left: 0;
  position: absolute;
}

IE maakt er alleen zut van - alles door elkaar op dezelfde regel...ideeen, iemand? Zie post hieronder - dank je, mophor!

[ Voor 48% gewijzigd door Reveller op 18-05-2005 17:10 ]

[Verwijderd]

dit werkt toch (in ff, misschien in IE wat hacks nodig)

code:

ul {
margin: 0;
padding: 0;
position: relative;
}

li {
display: inline;
}

ul ul {
position: absolute;
top: 1em;
left: 0;
}

[ Voor 2% gewijzigd door Verwijderd op 18-05-2005 17:08 . Reden: geen hacks nodig ]

[Verwijderd]

beetje offtopic, maar waarom zou je die informatie op die manier willen tonen? wat gebeurt er als een van de andere items een subitem krijgt?

[Reveller]

Volgend probleem: uiteindelijk wil ik dit menu in een div plaatsen. Bij onderstaande css staat alleen de "Vlees, Brood, Vis" regel in de (lime groene) div. De rest niet; doordat die absolute geplaatst zijn:

code:

<style>
#nav {
  background: lime;
  width: 600px;
}

#nav ul {
  margin: 0;
  padding: 0;
  position: relative;
}

#nav li {
  display: inline;
}

#nav ul ul {
  position: absolute;
  top: 1em;
  left: 0;
}
</style>

<div id="nav">
<ul>
  <li>Vlees
    <ul>
      <li>Rood
        <ul>
          <li>Vet</li>
          <li>Mager</li>
        </ul>
      </li>
      <li>Bruin</li>
    </ul>
  </li>
  <li>Brood</li>
  <li>Vis</li>
</ul>
</div>

Maar als ik onderstaande wijziging aanbreng, is het resultaat complete onzin. Alles staat dan wel in de div, maar de logica is wat uit de list:

code:

#nav ul ul {
  position: relative;
  left: 0;
}

/*
resultaat:

Vlees 
Rood 
Vet Mager 
Bruin 
Brood Vis 
*/

Hoe los ik dit nu op?

@juaron - uiteindelijk wordt dit een admin menuutje bovenaan het admin deel van mijn siteje:

code:

artikelen instellingen comments
nieuw edit delete

dit is bv. het menuutje als ik op artikelen > nieuw klik. (met natuurlijk wat css om aan te geven wat het actieve item is).

[ Voor 10% gewijzigd door Reveller op 18-05-2005 19:11 ]

[Verwijderd]

Als je dat wilt, waarom doe je het dan niet zo?

code:

<ul>
  <li>artikelen</li>
  <li>instellingen</li>
  <li>comments</li>
</ul>

<ul>
  <li>nieuw</li>
  <li>edit</li>
  <li>delete</li>
</ul>

code:

ul {
  list-style: none;
}

li {
  list-style: none;
  float: left;
}

[Verwijderd]

de div een expliciete hoogte geven, omdat je subul's absoluut gepositioneerd zijn zitten ze niet meer in de flow, dus vandaar dat de div er geen rekening meer mee houdt

[Reveller]

Verwijderd schreef op woensdag 18 mei 2005 @ 19:16:
Als je dat wilt, waarom doe je het dan niet zo?

code:

...

Omdat ik mijn systeem flexibel wil houden - misschien wil ik later toch eens de links in een verticale lijst. Ik wil dan niet mijn php functies hoeven aan te passen, maar met een wijziging in de css de site een ander uiterlijk kunnen geven...

Verwijderd schreef op woensdag 18 mei 2005 @ 19:16:
de div een expliciete hoogte geven, omdat je subul's absoluut gepositioneerd zijn zitten ze niet meer in de flow, dus vandaar dat de div er geen rekening meer mee houdt

Is er geen manier om de subul's relatief te positioneren zodat ze automatisch worden meegenomen in de div en dat de lay-out van de subul's toch behouden blijft? Ik heb dit in mijn vorige post geprobeerd te bereiken, maar kreeg toen rare resultaten (zie aldaar). Misschien heeft iemand een beter idee dan ik?

[Verwijderd]

dit werkt in ff, alleen niet in IE en ook niet in Opera

Ik weet ook niet zeker of het gewenst gedrag is eigenlijk (Anne?)

code:

<style type="text/css">
ul {
margin: 0;
padding: 0;
position: relative;
}

li {
display: inline;
}

ul ul {
position: absolute;
top: 1em;
left: 0;
}
div {
background-color: lime;
overflow: hidden;
}
</style>
<div>
<ul>
  <li>Vlees
    <ul>
      <li>Rood
        <ul>
          <li>Vet</li>
          <li>Mager</li>
        </ul>
      </li>
      <li>Bruin</li>
    </ul>
  </li>
  <li>Brood</li>
  <li>Vis</li>
</ul>
</div>
<p>foep

[ Voor 28% gewijzigd door Verwijderd op 18-05-2005 19:56 ]

[Reveller]

Zie ^^ Kan iemand mij uitleggen waarom deze oplossing wel in FF, maar niet in IE / Opera werkt? Als ik naar IE kijk, staat alles wel de div, maar de logica is weg uit de lijst: Vlees, Brood en Vis staan niet meer naast elkaar; Vet en Mager wel maar Rood en Bruin weer niet

[Rowanov]

Volgens mij kan je dit ook met floats en clears oplossen, alleen zit je dan weer met allerlei ander ongewenst gedrag.

[Reveller]

Rowanov schreef op donderdag 19 mei 2005 @ 13:20:
Volgens mij kan je dit ook met floats en clears oplossen, alleen zit je dan weer met allerlei ander ongewenst gedrag.

Die oplossing vereist ook meer code. Daarnaast gaat het wat voorbij aan het idee - het moet in principe toch mogelijk zijn een list ook horizontaal weer te geven in een div zonder allerlei hacks? Niet dat je het vaak nodig hebt, maar het zou toch ondersteunt moeten worden eigenlijk - een list is ervoor om geordende data weer te geven, en ik zou als eindgebruiker vrij moeten zijn in de weergave daarvan. De oplossing van mophor werkt idd erg goed in FF, maar niet in IE. Daarom nogmaals de vraag - is er iemand met veel verstand van css die aan kan geven waar de voud zit; wat IE niet ondersteunt uit het voorbeeld van mophor wat FF wel ondersteunt? Is FF in dit geval de enige browser die de css correct interpreteert of is de css eigenlijk een hack die alleen FF toevallig goed weergeeft?

[Verwijderd]

het gedrag dat die div meerekt komt door die overflow: hidden en is geinspireerd op het super simple clearing of floats (zie bv http://annevankesteren.nl/archives/2005/03/clearing-floats).

ik weet alleen niet helemaal zeker of dit volgens de spec correct gedrag is (in dit geval), daarom roep ik al heel hard ANNE! want, hij weet er vast iets over te zeggen

de in anne's artikel genoemde IE oplossingen werken iig niet in dit geval

[Sappie]

zo dan? lijkt goed te werken (in zowel IE als FF)

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
    <title>test</title>
    <style type="text/css">
        ul {
            margin: 0;
            padding: 0;
            float: left;
            clear: both;
        }
        
        li {
            display: inline;
        }
        
        div {
            background-color: lime;
            overflow: hidden;
            width: 100%;
        }
    </style>
</head>
<body>
    <div>
        <ul>
          <li>Vlees
            <ul>
              <li>Rood
                <ul>
                  <li>Vet</li>
                  <li>Mager</li>
                </ul>
              </li>
              <li>Bruin</li>
            </ul>
          </li>
          <li>Brood</li>
          <li>Vis</li>
        </ul>
    </div>
    <p>foep
</body>
</html>

edit:
ff netter gemaakt

[ Voor 166% gewijzigd door Sappie op 19-05-2005 20:26 ]

[Rowanov]

Reveller schreef op donderdag 19 mei 2005 @ 16:55:
Die oplossing vereist ook meer code. Daarnaast gaat het wat voorbij aan het idee - het moet in principe toch mogelijk zijn een list ook horizontaal weer te geven in een div zonder allerlei hacks? Niet dat je het vaak nodig hebt, maar het zou toch ondersteunt moeten worden eigenlijk - een list is ervoor om geordende data weer te geven, en ik zou als eindgebruiker vrij moeten zijn in de weergave daarvan. De oplossing van mophor werkt idd erg goed in FF, maar niet in IE. Daarom nogmaals de vraag - is er iemand met veel verstand van css die aan kan geven waar de voud zit; wat IE niet ondersteunt uit het voorbeeld van mophor wat FF wel ondersteunt? Is FF in dit geval de enige browser die de css correct interpreteert of is de css eigenlijk een hack die alleen FF toevallig goed weergeeft?

Volgens mij heb ik verkeerd gelezen, in dit geval kan het alleen door relatief/absoluut te positioneren omdat je namelijk wil afwijken van de normale document flow. Alleen met position kan je elementen uit de normale flow krijgen. In dat geval heb je gelijk, dan zijn floats idd niet handig

Goed, dit kan ik natuurlijk niet op me laten zitten dus hier een versie met floats die alleen in firefox werkt. Het kan dus wel met floats

code:

<html>
<head>
<title>test</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: 0;
}
ul{
    width: 300px;
}
li{ 
    list-style: none;
    display: inline;
    float: left;
    width: 100px;
    height: 20px;
}
</style>
</head>
<body>
<ul>
    <li>Vlees
            <ul>
                <li>Rood
                    <ul>
                        <li>Vet</li>
                        <li>Mager</li>
                    </ul>
                </li>
                <li>Bruin</li>
            </ul>
        </li>
        <li>Brood</li>
        <li>Vis</li>
</ul>
</body>
</html>

edit:

Ik begin heel erg traag te worden, aangezien de drie posts boven mij al bewezen hebben dat het kan.

[ Voor 45% gewijzigd door Rowanov op 19-05-2005 20:12 ]

[Reveller]

Sappie schreef op donderdag 19 mei 2005 @ 17:24:
zo dan? lijkt goed te werken (in zowel IE als FF)

code:

...

Hey, dank je! Dat werkt perfect...nu nog even goed bekijken en inzien waarom ik hier niet op kon komen...