[CSS] tree menu

[Verwijderd]

Hello allemaal,

hier is mijn (povere) poging om een CSS tree menu te maken:
http://www.rodeofreaks.com/test/


Zoals jullie zullen zien zijn er enkele problemen:

* onder elke parent zou een lijntje moeten weergegeven worden (ik doe dit door in mijn CSS een gif als background te definiëren). Het probleem is dat hij de gif niet volledig weergeeft, de gif wordt enkel weergegeven tot waar de tekst komt. Hoe kan ik ervoor zorgen dat hij over de volledige breedte wordt weergegeven?
(als je het lijnjte niet ziet moet je maar eens met je muis over de parent gaan, dan kleurt hij rood en is het duidelijker. Hieronder kunnen jullie de volledige gifs zien.)






* bij mijn submenu's zou een klein vierkantje voor het menuitem moeten weergegeven worden (ook weer een gif). Deze worden nu wel weergegeven, maar niet voor het menu-item maar er over...






En dan nog een bijkomende vraag, hoe kan ik ervoor zorgen dat wanneer ik een submenu-item geselecteerd heb, het vierkantje in het rood blijft? Nu verkleurt het enkel bij een a:hover.


Mijn CSS-file ziet er als volgt uit:

code:

#menuTree {
  width: 160px;
  padding: 5px 10px;
  margin: 0 0 2px 0;
  font: small verdana, arial, sans-serif;
  color: #292963;
  background-color: #FFFF93;
}

#menuTree li a {
  text-decoration: none;
}

#menuTree li {
  list-style-type: none;
}

#menuTree ul.item li {
  font-size: 10px;
}

#menuTree ul.item li a {
  background: url(images/item.gif) no-repeat;
}

#menuTree ul.item li a:hover {
  background: url(images/item_hover.gif) no-repeat;
}

.open ul { display: block; }

.open a.parent {
  color: #292963;
  background: url(images/minus.gif) no-repeat 0 bottom;
  padding-left: 0px;
}

.open a.parent:hover {
  background: url(images/plus.gif) no-repeat 0 bottom;
}

.open a.sub {
  background: url(images/minus.gif) no-repeat 0 bottom;
  padding-left: 0px;
}
  
.closed ul { display: none; }

.closed a.parent {
  color: #292963;
  background: url(images/plus.gif) no-repeat 0 bottom;
  padding-left: 0px;
}

.closed a.parent:hover {
  background: url(images/minus.gif) no-repeat 0 bottom;
}

.closed a.sub {
  color: #292963;
  background: url(images/plus.gif) no-repeat 0 bottom;
  padding-left: 0px;
}

Hopelijk ziet iemand anders wat ik juist fout doe!


Steven

[André]

Zet je #menuTree li a op display:block en ik vermoed dat het blokje door de tekst heen staat doordat je de padding-left van een item op 0 hebt staan. En het actief houden doe je met :active

[ Voor 13% gewijzigd door André op 28-09-2004 14:58 ]

[Eskimootje]

En wat doet list-style-position:outside; als je die toevoegd?

[OkkE]

Aan het element waar je dat lijntje (als achtergrond) aan hebt hangen, als je daar de Width het zelfde maakt als die van het achtergrond plaatje zal je het waarschijnlijk wel in zijn geheel zien.

[ Voor 5% gewijzigd door OkkE op 28-09-2004 15:11 ]

[Verwijderd]

OK, alvast heel veel dank voor de tips!


display:block did the trick voor mijn lijntje, dus dat is al één ding dat al in orde is . Alleen geeft IE natuurlijk weer een extra ruimte tussen de twee parents (maar dat is niet zo'n grote ramp).

Ik heb er ook voor kunnen zorgen dat mijn blokjes voor de tekst komt te staan (mbv padding-left: 15px;) alleen wordt nu de layout volledig om zeep geholpen. Zie:
http://www.rodeofreaks.com/test2/


Iemand nog een tip om dit op te lossen?


PS iemand een goede site waar alle CSS functies op bescheven worden.

[Verwijderd]

http://www.w3schools.com/css/css_reference.asp

en natuurlijk

http://www.w3.org/TR/CSS21/

[OkkE]

Ik vind www.w3schools.com altijd een erg handige website. Maar waarom gebruik je een background-image voor de subs en niet een custom list-style-item?

[Verwijderd]

OkkE schreef op 28 september 2004 @ 15:35:
Maar waarom gebruik je een background-image voor de subs en niet een custom list-style-item?

Omdat ik eigenlijk niet wist dat dat ging ;-). Bedankt dus!

Het werkt nu allemaal, alleen geeft IE op sommige plaatsen meer tussenruimte als FireFox, maar daar zal ik mee moeten leven vermoed ik...