login  Naam:   Wachtwoord: 
Registreer je!
 Forum

ul opmaak (Opgelost)

Offline qubus - 13/10/2014 09:46 (laatste wijziging 13/10/2014 09:47)
Avatar van qubusLid Hallo allemaal,

Ik heb een css code voor een menu van het net gehaald, en die werkt al jaren perfect. Nu kom ik echter in de knoei omdat deze css ook de opmaak van andere unsorted lists beinvloed. Ik wil dit oplossen door er een class aan te geven, maar kom er niet uit.

de css:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #verticaal_menu{margin-left:0px; font-size:0.8em;}
  2. 	.verticaal_menu	ul{
  3. 		font-weight:bold;color:#e2e2e2;
  4. 		margin:0;
  5. 		padding:0;
  6. 		list-style:none}
  7. 	.verticaal_menu	ul li{
  8. 		display:block;
  9. 		position:relative;
  10. 		float:left}
  11. 	.verticaal_menu	li ul{display:none}
  12. 	.verticaal_menu	ul li a{
  13. 		display:block;
  14. 		margin-left:1px;
  15. 		margin-bottom:1px;
  16. 		text-decoration:none;
  17. 		color:#e2e2e2;
  18. 		/*border-top:1px solid #B75963;*/
  19. 		padding: 5px 15px 5px 15px;
  20. 		background:#df002e;
  21. 		white-space:nowrap}
  22. 	.verticaal_menu	ul li a:hover{background:#e2e2e2;color:#df002e}
  23. 	.verticaal_menu	ul li span{
  24. 		display:block;
  25. 		margin-left:1px;
  26. 		margin-bottom:1px;
  27. 		text-decoration:none;
  28. 		color:#e2e2e2;
  29. 		/*border-top:1px solid #B75963;*/
  30. 		padding: 5px 15px 5px 15px;
  31. 		background:#df002e;
  32. 		white-space:nowrap}
  33. 	.verticaal_menu ul li span:hover{background:#e2e2e2;color:#df002e}
  34. 	.verticaal_menu li:hover ul{ 
  35. 		display:block; 
  36. 		position:absolute;
  37. 		z-index:9999;}
  38. 	.verticaal_menu li:hover li{ 
  39. 		font-size:80%;
  40. 		clear:left; 
  41. 		width:12em}
  42. 	.verticaal_menu li:hover a{ background:#df002e;color:#000}
  43. 	.verticaal_menu li:hover li a:hover{background:#e2e2e2;color:#df002e}
  44. 	.clear_all{clear:both;height:0.5em;}


alle .verticaal_menu heb ik zelf toegevoegd, de originele code is dus zonder!

De code die het menu weergeeft is dan als volgt (ook hier heb ik de class zelf toegevoegd):

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <ul id="horizontaal_menu">
  2. <li class="verticaal_menu">menu item 1</li>
  3. <li class="verticaal_menu">menu item 2</li>
  5. <ul>
  6. <li class="verticaal_menu">menu sub item 1</li>
  7. <li class="verticaal_menu">menu sub item 2</li>
  8. </ul>
  9. </span>
  10. </ul>

Kan iemand me op weg helpen?

5 antwoorden

Gesponsorde links
Offline Alexjeee - 13/10/2014 09:47 (laatste wijziging 13/10/2014 09:48)
Avatar van Alexjeee Lid Zou je het niet eerst in een Div verwerken voordat je de li class ophaalt?

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="jeclass">
  2. <li class="jeclass">Menu</li>
  3. </div>
Offline Thomas - 13/10/2014 10:38
Avatar van Thomas Moderator Wat Alexjeee voorstelt is een optie: maak een "wrapper" voor je ul die de verdere opmaak van deze list bepaalt.

Een alternatief is om de ul zelf gewoon een class te geven? Je hoeft niet alle list-items een class te geven, het geven van een class aan de ul volstaat.

Daarnaast: waarom gebruik je een id voor je ul? Is dit om JavaScript aan dit menu te koppelen? Persoonlijk zou ik opmaak lostrekken van dit soort functionaliteit. Gebruik id's bij voorkeur (en indien mogelijk uitsluitend) voor koppelingen met JavaScript, en classes bij voorkeur (en indien mogelijk uitsluitend) voor opmaak. Indien die id dus bestemd is voor een koppeling met JavaScript, geef deze ul dan tevens een class en verplaats alle opmaak hier naartoe.

Als je id's (of classes) voor beide doeleinden gebruikt kan het soms nogal wat uitzoekwerk vergen om uit te zoeken of je deze namen vrij kunt aanpassen, of dat je daarmee potentieel je JavaScript breekt. Wanneer je deze twee smaken zoveel mogelijk een eigen doel geeft, wordt daartoe de kans kleiner.

Tevens zijn id's uniek - in dynamische webpagina's zitten vaak blokken HTML die meerdere keren herhaald worden. Je komt in de knoei als je voor de opmaak van dit soort elementen id's gebruikt, ze zijn immers niet herbruikbaar.
Offline qubus - 13/10/2014 11:23 (laatste wijziging 13/10/2014 11:24)
Avatar van qubus Lid FangorN en Alexjee, dank voor de antwoorden.

Ik heb de ul class "verticaal_menu" gegeven. (ook in de css de id naar class veranderd)
Als ik echter in de css bij 'ul li' een background image toevoeg, krijgen ook andere ul's dit plaatje als achtergrond. Ik wordt er gek van...
Offline Thomas - 13/10/2014 11:38 (laatste wijziging 13/10/2014 11:46)
Avatar van Thomas Moderator Gebruik een aparte stijl voor de achtergrond-afbeelding met ul > li.
ul > li wil zeggen: "de direct ondergelegen li's".

Even een voorbeeldje maken. Het is wel nodig om een default in te stellen denk ik.

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html>
  4. <meta charset="UTF-8">
  5. <title>layout test</title>
  6. <style type="text/css">
  7. ul.test         { }
  8. ul.test li      { font-weight: normal; }
  9. ul.test > li    { font-weight: bold; }
  11. </head>
  12.  
  14. <ul class="test">
  15.     <li>Deze tekst is dikgedrukt...</li>
  16.     <li>
  17.         <ul>
  18.             <li>... maar deze niet.</li>
  19.         </ul>
  20.     </li>
  21. </ul>
  22. </body>
  23. </html>
Offline qubus - 13/10/2014 12:08 (laatste wijziging 13/10/2014 12:10)
Avatar van qubus Lid Heren, dank, dank, dank,
ik ben er bijna. alleen met de 'ul.verticaal_menu li' krijgen zowel de li als de ul zelf het achtergrondplaatje. De ul zou die niet moeten krijgen.
Wat doe ik nog fout?

OPGELOST!!
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.276s