login  Naam:   Wachtwoord: 
Registreer je!
 Forum

tweede UL neemt opmaak over

Offline GroundZero - 08/11/2011 14:51
Avatar van GroundZeroLid Beste,

ik ben bezig met een mega drop down menu. Het werkt perfect alleen wanneer ik nu een lijst in mijn DIV wil zetten, neemt hij de opmaak over van de vorige UL (de hoofdcategorieën dus) en dat wil ik niet. Ze moeten de normale lijst opmaak hebben. Ik heb geprobeerd de opmaak weg te halen maar dit blijft toch nog vrij lastig.

Kan iemand mij adviseren hoe ik dit moet aanpakken? ik wil dus dat de UL en LI in mijn DIV (mega products) niet de opmaak van de vorig gedeclareerde CSS krijgt.

Mijn css code:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. /* navigatie */
  2. #navigatie {
  3.         width:1024px;
  4.         height:35px;
  5.         position:relative;
  6. }
  7.  
  8. #navigatie ul {
  9.         list-style:none;        
  10. }
  11.  
  12. #navigatie li {
  13.         display:inline-block;
  14. 		height:40px;
  15.         float:left;
  16.         padding-left:12px;
  17. 		padding-right:12px;
  18. 		padding-top:8px;
  19. 		text-align:center;
  20. 		margin-left:1px;
  21. 		border-left:1px solid #d80282;
  22. 		border-right:1px solid #d80282;
  23. 		border-top:1px solid #fc43b2;
  24. 		margin-top:25px;
  25. 		border-top-left-radius:6px;
  26. 		border-top-right-radius:6px;
  27. 		-moz-border-radius-topleft:6px;
  28. 		-moz-border-radius-topright:6px;
  29. 		-webkit-border-top-left-radius:6px;
  30. 		-webkit-border-top-right-radius:6px;
  31. }
  32.  
  33. #navigatie li em {
  34. 	color:#FFF;
  35. 	font-size:10px;	
  36. }
  37.  
  38. #navigatie li a {
  39. 	color:#fff;
  40. 	text-decoration:none;	
  41. }
  42.  
  43. #navigatie .mega-diensten {
  44. 	height:220px;
  45. 	width:1004px;
  46. 	position:absolute;
  47. 	left:-9999px;
  48. 	top:77px;
  49. 	margin-top:5px;
  50. 	min-height:100px;
  51. 	padding:10px;
  52. 	background:#d80282;
  53. }
  54.  
  55. #navigatie li:hover .mega-diensten {
  56. 	left:0px;	
  57. }
  58.  
  59. /* mega products */
  60. #navigatie li:hover .mega-diensten #md-left {
  61. 	width:250px;
  62. 	height:220px;
  63. 	float:left;
  64. 	margin-right:15px;
  65. 	background:#03F;
  66. }
  67.  
  68. #navigatie li:hover .mega-diensten #md-right {
  69. 	width:250px;
  70. 	height:220px;
  71. 	float:left;
  72. 	margin-right:15px;
  73. 	background:#99CC00;
  74. }
  75.  
  76. #navigatie li:hover .mega-diensten #md-samples {
  77. 	width:450px;
  78. 	height:220px;
  79. 	float:right;
  80. }
  81.  
  82. #text-container {
  83.         width:1024px;
  84.         height:35px;
  85.         margin:50px auto;
  86. }

5 antwoorden

Gesponsorde links
Offline vinTage - 08/11/2011 14:54 (laatste wijziging 08/11/2011 14:55)
Avatar van vinTage Nieuw lid Je kan gewoon nieuwe opmaak geven, bv:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <ul>
  2.   <li>
  3.     <ul>
  4.       <li>lala</li>
  5.     </ul>
  6.   </li>
  7. </ul>


Dan kan je de voorgaande css overschrijven dmv
css code - Bekijk de code zonder highlighting - Klap code in 
  1. ul li ul{/* de ul die jij bedoeld als ik het goed begrijp*/}}
  2. ul li ul li{/*dit beinvloed de li met lala als content*/}
Bedankt door: Ontani
Offline GroundZero - 08/11/2011 15:03
Avatar van GroundZero Lid Klopt, maar waarom neemt hij de opmaak van de vorige mee?
want nu moet ik (bij wijzen van spreken) 100 opmaak regels weer gaan tegenspreken om alles ongedaan te maken.

Zo word mijn code wel heel erg lang, terwijl ik maar 3 regels nodig heb eigenlijk 
Offline vinTage - 08/11/2011 15:08 (laatste wijziging 08/11/2011 15:09)
Avatar van vinTage Nieuw lid je kunt je parent dan ook een class geven ipv een general rule

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2. .classname{border:solid 1px red}
  4. <ul>
  5.   <li class="classname">
  6.     <ul>
  7.       <li>lala</li>
  8.     </ul>
  9.   </li>
  10. </ul>
Offline Ontani - 08/11/2011 15:09 (laatste wijziging 08/11/2011 15:14)
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 Met classes werken voor elk niveau een klasse.

xhtml code - Bekijk de code zonder highlighting - Klap code in 
  1. <ul class="niv1">

  2.  <li>

  3.   <ul class="niv2">

  4.    <li>...</li>

  5.   </ul>

  6.  </li>

  7. </ul>


css code - Bekijk de code zonder highlighting - Klap code in 
  1. .niv1 li {
  2. }
  3.  
  4. .niv2 li {
  5. }
Bedankt door: vinTage
Offline GroundZero - 08/11/2011 16:21
Avatar van GroundZero Lid dankjewel gaan we proberen!
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.232s