login  Naam:   Wachtwoord: 
Registreer je!
 Forum

2 kolommen in submenu (Opgelost)

Offline Sanne89 - 13/05/2015 13:16 (laatste wijziging 13/05/2015 19:32)
Avatar van Sanne89Nieuw lid Hallo,

Ik ben bezig met een submenu. Ik wil hier meerdere items in zetten, maar de lijst wordt dan te lang en zou het dus graag in 2 kolommen willen hebben. Dit is de website: http://www.chesterdealz.nl. Het gaat om het submenu bij "Stijlinrichting".

Weet iemand hoe ik hier 2 kolommen van kan maken?
Ik ben namelijk niet zo'n ster met HTML, dus als iemand me kan helpen dan zou dat fijn zijn.  

Dit is de code:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="nav">
  2. <ul>
  3. <li><a href="http://www.chesterdealz.nl/">Home</a></li>
  4. <li><a href="#">Assortiment</a>
  5. <ul>
  6. <li><a href="http://www.chesterdealz.nl/nl/stijl">Inrichting in dezelfde stijl</a></li>
  7. <li><a href="http://chesterdealz.nl/woonkamer">Woonkamer</a>
  8. <ul>
  9. <li><a href="http://chesterdealz.nl/bankenenbankstellen">Banken &amp; bankstellen</a></li>
  10. <li><a href="http://chesterdealz.nl/fauteuilsenpoefen">Fauteuils &amp; poefen</a></li>
  11. <li><a href="http://chesterdealz.nl/kommodesenkasten">Kommodes &amp; kasten</a></li>
  12. <li><a href="http://chesterdealz.nl/salontafels">Salontafels</a></li>
  13. <li><a href="http://chesterdealz.nl/bijzettafels">Bijzettafels</a></li>
  14. <li><a href="http://chesterdealz.nl/woonkameraccessoires">Accessoires</a></li>
  15. </ul>
  16. </li>
  17. <li><a href="http://chesterdealz.nl/eetkamer">Eetkamer</a>
  18. <ul>
  19. <li><a href="http://chesterdealz.nl/eetkamerstoelen">Eetkamerstoelen</a></li>
  20. <li><a href="http://chesterdealz.nl/eetkamertafel">Eetkamertafel</a></li>
  21. <li><a href="http://chesterdealz.nl/kommodesenkasten">Kommodes &amp; kasten</a></li>
  22. <li><a href="http://chesterdealz.nl/eetkameraccessoires">Accessoires</a></li>
  23. </ul>
  24. </li>
  25. <li><a href="http://chesterdealz.nl/slaapkamer">Slaapkamer</a>
  26. <ul>
  27. <li><a href="http://chesterdealz.nl/boxspringbedden">Boxspring bedden</a></li>
  28. <li><a href="http://chesterdealz.nl/kastenenkommodes">Kasten &amp; kommodes</a></li>
  29. <li><a href="http://chesterdealz.nl/slaapkameraccessoires">Accessoires</a></li>
  30. </ul>
  31. </li>
  32. <li><a href="http://chesterdealz.nl/badkamer">Badkamer</a>
  33. <ul>
  34. <li><a href="http://chesterdealz.nl/programmacolore">Collectie Colore</a></li>
  35. <li><a href="http://chesterdealz.nl/badkamerriverboathout">Collectie Riverboat</a></li>
  36. <li><a href="http://chesterdealz.nl/frigo-badkamer">Collectie Frigo</a></li>
  37. <li><a href="http://chesterdealz.nl/toledo">Collectie Toledo</a></li>
  38. </ul>
  39. </li>
  40. <li><a href="http://chesterdealz.nl/kantoor">Kantoor</a>
  41. <ul>
  42. <li><a href="http://chesterdealz.nl/kasten">Kasten</a></li>
  43. <li><a href="http://chesterdealz.nl/bureaus">Bureau's</a></li>
  44. <li><a href="http://chesterdealz.nl/kantoorbanken">Banken</a></li>
  45. <li><a href="http://chesterdealz.nl/kantoorfauteuils">Fauteuils</a></li>
  46. <li><a href="http://chesterdealz.nl/kantooraccessoires">Accessoires</a></li>
  47. </ul>
  48. </li>
  49. <li><a href="http://www.chesterdealz.nl/nl/c-297047/hal--overloop">Hal/Overloop</a></li>
  50. <li><a href="http://www.chesterdealz.nl/nl/c-297221/keuken">Keuken</a></li>
  51. <li><a href="http://www.chesterdealz.nl/nl/accessoires">Accesoires This &amp; That</a></li>
  52. <li><a href="http://chesterdealz.nl/tuin">Tuin</a>
  53. <ul>
  54. <li><a href="http://www.chesterdealz.nl/nl/tuinstoelen">Tuinstoelen</a></li>
  55. <li><a href="http://www.chesterdealz.nl/nl/tuintafels">Tuintafels</a></li>
  56. </ul>
  57. </li>
  58. </ul>
  59. </li>
  60. <li><a href="#">Stijlinrichting</a>
  61. <ul>
  62. <li><a href="http://chesterdealz.nl/airmanserie">Airman serie</a></li>
  63. <li><a href="http://chesterdealz.nl/chinese">Chinese serie</a></li>
  64. <li><a href="http://chesterdealz.nl/denimmeubelen">Denim serie</a></li>
  65. <li><a href="http://chesterdealz.nl/fridge">Fridge serie</a></li>
  66. <li><a href="http://chesterdealz.nl/frigo">Frigo serie</a></li>
  67. <li><a href="http://chesterdealz.nl/odin">Odin serie</a></li>
  68. <li><a href="http://chesterdealz.nl/pompserie">Pomp serie</a></li>
  69. <li><a href="http://chesterdealz.nl/riverboatserie">Riverboat serie</a></li>
  70. <li><a href="http://chesterdealz.nl/roadies">Roadies serie</a></li>
  71. <li><a href="http://chesterdealz.nl/kopermeubelen">Sahara serie</a></li>
  72. <li><a href="http://chesterdealz.nl/wiking">Wiking serie</a></li>
  73. </ul>
  74. </li>
  75. <li><a href="http://chesterdealz.nl/inruil">Korting</a>
  76. <ul></ul>
  77. </li>
  78. <li><a href="#">Over ChesterDealz</a>
  79. <ul>
  80. <li><a href="http://chesterdealz.nl/kernwaarden">De kernwaarden</a></li>
  81. <li><a href="http://chesterdealz.nl/7antwoorden">Chesterdealz in 7 antwoorden</a></li>
  82. </ul>
  83. </li>
  84. <li><a href="#">Klantenservice</a>
  85. <ul>
  86. <li><a href="http://chesterdealz.nl/faq">Vraag &amp; Antwoord</a></li>
  87. <li><a href="http://chesterdealz.nl/betalen">Betalen</a></li>
  88. <li><a href="http://chesterdealz.nl/verzendenenbezorgen">Verzenden &amp; bezorgen</a></li>
  89. <li><a href="http://chesterdealz.nl/klachten">Klachtenprocedure</a></li>
  90. <li><a href="http://chesterdealz.nl/contact">Contact</a></li>
  91. <li><a href="http://chesterdealz.nl/registratie">Registratie</a></li>
  92. </ul>
  93. </li>
  94. </ul>
  95. </div>
  96. <style type="text/css"><!--
  97. #nav {
  98. width:800px;
  99. margin-top:-15px;
  100. }
  101.  
  102. #nav ul{ 
  103. margin:0; 
  104. padding:0; 
  105. list-style:none; 
  106. } 
  107. #nav ul li{ 
  108. cursor: pointer;
  109. margin:0; 
  110. padding:9px 20px; 
  111. position:relative; 
  112. height:20px; 
  113. line-height:20px; 
  114. background-color:#00b7ff 
  115. } 
  116. #nav > ul > li { 
  117. float: left; 
  118. height:30px; 
  119. line-height:30px; 
  120. background-color:#00b7ff 
  121. } 
  122. #nav li > ul{ 
  123. visibility:hidden; 
  124. width:230px; 
  125. position: absolute; 
  126. top:0px; 
  127. left:220px;  
  128. } 
  129. #nav > ul > li > ul{ 
  130. top:48px; 
  131. left:0; 
  132. } 
  133. #nav li:hover{ 
  134. background-color:#999; 
  135. } 
  136. #nav li:hover > ul{ 
  137. visibility:visible; 
  138. }
  139. --></style>


Alvast bedankt!
Gr. Sanne

mod edit: code in code blok gezet.

2 antwoorden

Gesponsorde links
Offline Thomas - 13/05/2015 20:22 (laatste wijziging 14/05/2015 11:11)
Avatar van Thomas Moderator 1 minuut googlen geeft al een redelijk elegante oplossing: maak de ul 2x zo breed en float de li's.

Voeg aan de stijlinrichting ul de klasse two-column toe:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <ul class="two-column">


En voeg aan het stylesheet de volgende twee regels toe:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #nav > ul > li > ul.two-column { width: 460px; background-color: #00b7ff; }
  2. #nav > ul > li > ul.two-column > li { display: block; float: left; width: 190px; }


Elke li heeft boven en onder 9px padding, en links en rechts 20px padding (middels de #nav ul li klasse). De breedte van de li's wordt overgeërf van #nav li > ul (230px). Elke gefloate li moet dus 230 - (2 * 20) = 190px breed zijn zodat er twee li's naast elkaar passen (2 * 230 = 460).

Je kunt deze li's nog wel wat minder breed maken als je wilt, maar dit wijst zichzelf.

Daarnaast wil je de volgorde van de linkjes mogelijk nog veranderen zodat de kolommen elk weer op alfabetische volgorde staan.
Bedankt door: Sanne89
Offline Sanne89 - 15/05/2015 10:50
Avatar van Sanne89 Nieuw lid Super! Bedankt. Het is gelukt.:D
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.307s