Hoi hoi,

Af en toe durf ik bijna niet eens meer te posten ;0) Maar ik heb weer wat en ik pieker me suf om wat het kan zijn.

Op deze site http://www.goliathdesign.nl/voorbeeld/stephan/ zie je aan de linkerkant een menu. Het is opgebouwd uit lijsten en de submenu's springen in. Maar de lijst is in elkaar geschoven en het moet dus gewoon allemaal netjes onder elkaar staan.

Iemand een idee wat er fout gaat?

Bedankt zovast!

Knufs Astrid.

Er missen wat </li>-tjes, misschien helpt het om alles netjes af te sluiten.

Ah oke! Thnx........ na een tijdje gaat al die code lopen ;0)

Knufs Astrid.
Aanvullend bericht:
Eh......... nu kan ik alleen niet vinden waar?....

Knufs Astrid.

#kolom1 ul li bevat een height, verwijder die height en het zou opgelost moeten zijn.

Hoi hoi,

Inderdaad dat hielp. Alleen nu verspringen er 2 haakjes. Weet iemand hoe dat kan?

THNX!

Knufs Astrid.

Wat zijn haakjes?

Al naar je margins en paddings gekeken?

Misschien een rare vraag, maar u update de link in de eerste post ook? Zodat ik/wij hier kan zien hoe ver de oplossingen al genoemd zijn.

Als dit het geval is zal ik kijken hoe je dit kunt oplossen.
Aanvullend bericht:
Toen ik via mijn mozilla Webdeveloper toolbar de pagina aanpaste kwam ik tot de conclusie dat er - zoals J. Haan ook al zei - wat sluitingen van li'tjes.

De code om dit aan te passen is als volgt:

Code:

<ul>
    <li>Productcategorie</li>
    <li>Productcategorie</li>
    <li>Productcategorie</li>
    <li>Productcategorie</li>
    <li>Productcategorie</li>
    <li>Productcategorie</li>
    <li>Productcategorie</li>
    <li>Productcategorie</li>
    <li>Productcategorie</li>
    <li>Productcategorie</li>
    <ul id="sub">
          <li>subcategorie</li>
          <li>subcategorie</li>
          <li>subcategorie</li>
          <li>subcategorie</li>
          <li>subcategorie</li>
          <ul>
             <li>subcategorie</li>
             <li>subcategorie</li>
             <li>subcategorie</li>
          </ul>
          <li>subcategorie</li>
    </ul>
    <li>Productcategorie</li>
    <li>Productcategorie</li>
    <li>Productcategorie</li>
    <li>Productcategorie</li>
</ul>

Er mist dan alleen nog iets om de padding van de subcategorie van de subcatergorie te onderscheiden van de eerste subcategorie, als je snapt wat ik bedoel.

Alles zou dan weer op zijn plaats vallen.

Met vriendelijke groet,

Boyd Dames
www.inooid-themes.nl

Ik weet niet of onderstaande via de regels is, maar het werkt wel:

CSS:

#kolom1 ul {
margin:0;
padding:0;
list-style-type:none;
}

#kolom1 li {
padding-left:10px;
padding-top:5px;
margin-left:10px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
border-bottom:1px solid #fff;
height:19px;
}

#kolom1 li.sub1 {
padding-left:30px;
background:#c0d4db;
font-size:12px;
font-weight:bold;
color: red;
}
#kolom1 li.sub2 {
padding-left:50px;
background:#c0d4db;
font-size:10px;
font-weight:bold;
color: yellow;
}


HTML:

<div id="kolom1">
<h3>THEMA</h3>
<ul>
<li>Productcategorie</li>
<li>Productcategorie</li>
<li>Productcategorie</li>
<li>Productcategorie</li>
<li>Productcategorie</li>
<li>Productcategorie</li>
<li>Productcategorie</li>
<li>Productcategorie</li>
<li>Productcategorie</li>
<li>Productcategorie</li>
<li class="sub1">subcategorie</li>
<li class="sub1">subcategorie</li>
<li class="sub1">subcategorie</li>
<li class="sub1">subcategorie</li>
<li class="sub1">subcategorie</li>
<li class="sub2">subsubcategorie</li>
<li class="sub2">subsubcategorie</li>
<li class="sub2">subsubcategorie</li>
<li class="sub1">subcategorie</li>
<li>Productcategorie</li>
<li>Productcategorie</li>
<li>Productcategorie</li>
<li>Productcategorie</li>
</ul>
</div>

Hoi hoi,

Heel heel erg bedankt!!!! Maar nu heb ik nog 1 klein dingetje........ voor de links staan plaatjes pijltjes naar links maar die verspringen nu niet mee met de tekst subcategorie..... is daar nog iets aan te doen? (het zijn plaatjes).

Ik heb wel eens gezien dat ze een background met pixels op zijn plaats zetten maar ik weet niet hoe het moet..... sorry ;0)

Knufs Astrid.

Zeg even een vraagje, of naja misschien meer een tip. Waarom geef je die sub categoriën classes?! Het is veel makkelijker en overzichtelijker om het als volgt op te bouwen:

<ul>
<li>Normaal</li>
</ul>

<ul>
<li>
<ul>
<li>Sub categorie</li>
<li>Sub categorie</li>
</ul>
</li>
</ul>

Dan maak je het net wat overzichtelijker en logischer. Is gewoon een tipje :)


Ps: nu ziet misschien niet zo goed uit, maar als je het met tab's doet, dan is de boomstructuur al snel duidelijk en helder. Probeer het zou ik zeggen!

De oplossing is me gegeven door iemand anders.......... mijn lijstenkennis voldeed blijkbaar niet ;0)
Met tab's?

Groetjes Astrid.

Met tabs wordt bedoeld dat de <ul> en <li> inspringen zodat je dat duidelijk kunt zien.
Helaas vervallen die als de code hier gekopieerd wordt, vandaar dat alles recht onder elkaar staat.

Stefan: wat jij voorstelt is makkelijker, alleen kreeg ik dat niet werkend met dit voorbeeld.

Astrid: met een achtergrondplaatje kan ook, die kun je dan in het css in de class aangeven.

Hio hoi,

Ja het achtergrondplaatje staat erin maar alle plaatjes staan nu recht onder elkaar in plaats van dat ze verspringen als de li verspringt.

Knufs Astrid.

Dat het niet werkt zoals je het wilt hebben komt omdat je lijsten niet genest zijn. Wat J. Haan heeft geschreven is wel goed en werkt natuurlijk prima maar is geen semantic markup. Wat bedoel ik met nesten..

Code voorbeeld:

<ul id="sitemap">
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2 Sub 1</li>
<li>Item 2 Sub 2
<ul>
<li>Sub 2 Sub A</li>
<li>Sub 2 Sub B</li>
</ul>
</li>
<li>Item 2 Sub 3</li>
</ul>
</li>
<li>Item 3</li>
</ul>

Zou opleveren:

• Item 1
• Item 2
  
  • Item 2 Sub 1
  • Item 2 Sub 2
    
    • Sub 2 Sub A
    • Sub 2 Sub B
• Item 3

Okay, leuk maar daar heb je nu even niets aan. Hoe je het wel op kunt lossen:
background:#c0d4db url(../images/bullit.png) no-repeat {X} {Y};

Waar X en Y ofwel genoteerd staat in pixels danwel procenten.

Voorbeeld:
http://markkerssens.nl/test/lists.html


Als laatst, niets ten nadele tegen jouw maar probeer je wat meer in te lezen hoe lijsten doorgaans worden opgemaakt. Het help je de begrijpen hoe ze werken.