Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien

CSS submenu dynamische breedte

Pagina: 1
Acties:

  • Ronnyrr
  • Registratie: Juni 2009
  • Laatst online: 16-02-2024
Hallo tweakers,

Ben bezig met het maken van een submenu waarin de breedte van de achtergrond dynamische moet zijn. Deze moet zich aanpassen naar de breedte van de li's die daarin staat.

Heb het op verschillende manieren geprobeerd maar krijg dit maar niet op de juiste manier werkend.

Heb er een JSFiddle van gemaakt, zie:
http://jsfiddle.net/ronnyrr/zDMjZ/

Echter krijg ik het dus maar niet voor elkaar om de .children telkens de goede breedte te krijgen..
Het eerst al geprobeerd google raad te plegen. Kwam op veel topics van stackoverflow uit maar die deden allemaal niet wat ik wilde. Toen vond ik iets met white-space:nowrap; echter bleek dit ook niet te werken..

Iemand die hier een oplossing voor weet of mij kan uitleggen wat ik fout doe?
Thanks!

[ Voor 14% gewijzigd door Ronnyrr op 27-04-2013 11:28 ]


  • NNF
  • Registratie: November 2003
  • Laatst online: 29-11-2024

NNF

Zoiets?

http://jsfiddle.net/SeFaV/

Het probleem zit 'm vooral hierin:

code:
1
2
3
4
5
.nav li {
    position:relative;
    float:left;
    padding:10px 20px;
}


Dit is dus óók van toepassing op de li's in je children. Ik weet niet of dat je bedoeling was of niet, maar position:relative en float:left zijn voor die li's helemaal niet nodig. Ik heb ze nu gewoon display:inline-block gegeven en width:100%, zodat ze net zo breed zijn als de ul waar ze in zitten.

[ Voor 85% gewijzigd door NNF op 27-04-2013 18:07 ]


  • incaz
  • Registratie: Augustus 2012
  • Laatst online: 15-11-2022
Vergeet ook de padding van de .nav li ul niet op 0 te zetten.
Display: inline-block voor de li's is niet nodig, dit zijn automatisch blocks met automatisch 100% breedte. Wel is display: block handig voor de links, en de padding dus ook op de <a> zodat het hele gebied clickable is. Tenzij je dat niet wilt natuurlijk.
http://jsfiddle.net/uRMEr/1/

Never explain with stupidity where malice is a better explanation


  • Ronnyrr
  • Registratie: Juni 2009
  • Laatst online: 16-02-2024
Sorry voor mijn late reactie, maar bedankt voor de antwoorden.
Inderdaad zoals Incaz het had gedaan was mijn bedoeling. Hier heb ik zelf nog even wat kleine aanpassingen op gedaan zodat het niet afwijkt van het design maar de oplossing is eruit gekomen en daar jou code is het mij duidelijker geworden en zal het de volgende keer ook weer lukken, thanks ;)