[HTML/CSS] Creative oplossing gezocht voor menu structuur

[Verwijderd]

Hallo Mensen,

Ik ben de website www.inqoop.nl opnieuw in XHTML / CSS aan het zetten, omdat het momenteel niet zo super is

Maargoed, wat betreft het linker menu heeft de designer het mij toch aardig lastig gemaakt! Ik wou dit netjes met een UL/LI structuur oplossen, maar kom er helaas niet over uit. Wat mij betreft hoeft het niet persee IE6 compatible te zijn en laat ik liever JavaScript er niet aan te pas komen.

Nu dacht ik de oplossing te hebben door de LI een linker padding te geven en dan background-position:top left te zetten maar dit wilt helaas niet baten, gekker nog als ik er een border om heen zet dan trekt hij de border om de padding heen terwijl het element de volledige breedte zou moeten hebben.

Hier kun je een voorlopig voorbeeld zien:
http://www.roosendaler.nl/inqoop_test/

Heeft iemand misschien een creatieve oplossing ?

[disjfa]

Je weet dat jouw localhost niet onze localhost is hé

Kan je mischien de juiste url geven

[lawnmower]

Inderdaad, even goede linkje plaatsen of een screenshot van het geheel maken.

Verder, zonder het ontwerp gezien te hebben, het huidige menu is in DIV's gemaakt, waarom stap je daar vanaf? Ik weet niet of je gebruik maakt van een template engine, maar je zou op basis van de huidige menu ID's een bepaalde subset DIV's kunnen parsen.

[Verwijderd]

Haha dit is inderdaad een blunder, foutje!

Ik heb het even aangepast

[BtM909]

Ik mis nog even wat precies je probleem is:?

[Verwijderd]

Dat ik een oplossing zoek om de background afbeelding helemaal links te krijgen, onafhankelijk van de niveau diepte. De bullets ga ik met links doen.

lawnmower schreef op dinsdag 18 december 2007 @ 13:02:
Inderdaad, even goede linkje plaatsen of een screenshot van het geheel maken.

Verder, zonder het ontwerp gezien te hebben, het huidige menu is in DIV's gemaakt, waarom stap je daar vanaf? Ik weet niet of je gebruik maakt van een template engine, maar je zou op basis van de huidige menu ID's een bepaalde subset DIV's kunnen parsen.

Maar het netste zou zijn (ongeacht of het mogelijk is of niet) dat het in een UL/LI structuur zou zitten toch? Het immers een "lijst" die meerdere niveaus diep moet kunnen zijn.

[ Voor 68% gewijzigd door Verwijderd op 18-12-2007 13:40 ]

[lawnmower]

Dit werkt in ieder geval: (of het nou netjes is of niet)

code:

<li style="margin-left: -10px; border: 1px solid black; background-position: 0px;">Submenu 1</li>

Margin-left: -10

[Verwijderd]

Je hebt inderdaad gelijk. Als ik alle li's / ul's achter elkaar zet werkt het ook in IE. Het enige probleem is dat hij de tekst dus niet meer opschuift wat dus wel logisch is.

Ik denk dat ik dit probleem moet oplossen in PHP, door aan de hand van de diepte een padding van links mee te geven. Dan is technisch gezien het UL/LI idee ook overbodig, tenzij iemand nog suggesties heeft ?

[MoietyMe]

De oplossing is (alleen getest in FF):

Cascading Stylesheet:

#container div.left ul li ul li {
background-position:0px 50%;
margin-left:-12px;
padding-left:22px;
}

[Verwijderd]

Bedankt! Dat was inderdaad de oplossing.

Voordat ik het wou posten heb ik eerst even verder gewerkt en het is bijna klaar:

resultaat

Iedereen bedankt!