login  Naam:   Wachtwoord: 
Registreer je!
 Forum

CSS Child

Offline Flippie - 30/09/2006 16:58
Avatar van FlippieNieuw lid Ik had in CSS graag een klasse gemaakt op basis van een andere klasse die reeds afgeleid is van een hoofdklasse div.
In volgend voorbeeld wil ik eerst een klasse maken voor de hoofdiv(vb. klasse hoofddiv). Daarnaast wil ik ook een hoofdklasse(moederdiv) maken waar ik de 3 andere DIV's van afleidt. Het is namelijk stom om 3x(en is in mijn voorbeeld meer dan 3x nodig) dezelfde code te zetten. Ik zou daarna klasses 1, 2 en 3 van moederdiv afleiden.
Ik probeerde al met:
div{padding: 10px;color: green; text-transform: uppercase;}
div.hoofddiv{width: 100%; height: 100%;}
div.moederdiv{border: 2px solid green; width: 100px; height: 100px;}
div.moderdiv.1{background-color: red;}

Probleem is dat hij 1 gewoon van div afleidt en niet van div.moederdiv. Iemand een idee hoe dit te fixen?

Vb:
<div> //HOOFD MET ALLE INHOUD
<div class="1">1</div> // ROOD, groene rand, 400px hoog, 200px lang
<div class="2">2</div> // BLAUW, groene rand, 400px hoog, 200px lang
<div class="3">3</div> // GEEL, groene rand, 400px hoog, 200px lang
</div>
</div>

4 antwoorden

Gesponsorde links
Offline lasdesigner - 30/09/2006 17:07
Avatar van lasdesigner PHP beginner div.moderdiv.1{background-color: red;}

Moet dit niet:
div.moederdiv.1{background-color: red;}
zijn?
Offline Flippie - 30/09/2006 17:41 (laatste wijziging 03/10/2006 23:47)
Avatar van Flippie Nieuw lid Probleem opgelost door met id's te werken.

Ander probleem dat ik heb:
De Div's latest en profile worden 100% van scherm weergegeven en niet 100% van de beschikbare ruimte waardoor je steeds een 100-tal pixels moet scrollen
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <head>
  3. 	<title>Titel</title>
  4. 	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. 	<style type="text/css">
  6. 	<!--
  7. 		body {
  8. 			margin: 0px;
  9. 			height: 100%;
  10. 		}
  11. 		div.website {
  12. 			margin: 0px auto;
  13. 			width: 770px;
  14. 			min-height: 100%;
  15. 			height: auto !important; /* voor moderne browsers */
  16. 			height: 100%;
  17. 			position: relative;
  18. 		}
  19. 		div.banner {
  20. 			padding-left:20px;
  21. 			margin: 0px;
  22. 			background: #0000FF;
  23. 			width: 100%;
  24. 			height: 85px;
  25. 		}
  26. 		div.navigation {
  27. 			padding-left:20px;
  28. 			margin: 0px;
  29. 			background: #00FF00;
  30. 			width: 100%;
  31. 			height: 20px;
  32. 		}
  33. 		div.contentWebsite {
  34. 			margin: 0px;
  35. 			background: #FFFFFF;
  36. 			width: 100%;
  37. 			height: 100%;
  38. 		}
  39. 		div.latest {
  40. 			margin: 0px;
  41. 			float: left;
  42. 			background: #FF0000;
  43. 			width: 175px;
  44. 		}
  45. 		div.profile {
  46. 			padding: 0px;
  47. 			margin: 0px;
  48. 			background: #FFFFFF;
  49. 			width: 100%;
  50. 		}
  51. 		.bottom {
  52. 			border: solid 0px #000000;
  53. 			bottom: 0;
  54. 			width: 100%;
  55. 			background: #446600;
  56. 		}
  57. 	-->
  58. 	</style>
  59. </head>
  60.  
  61. <body>
  62. <div class="website">
  63. 	<div class="banner">Banner</div>
  64. 	<div class="navigation">Navigation</div>
  65. 	<div class="contentWebsite">
  66. 		<div class="latest">Laatste nieuws</div>
  67. 		<div class="profile">Profiel</div>
  68. 	</div>	
  69. 	<div class="bottom">Balk onderaan</div>
  70. </div>
  71. </body>
  72. </html>
Offline bosgroen - 04/10/2006 00:16 (laatste wijziging 04/10/2006 00:19)
Avatar van bosgroen Gouden medaille

PHP interesse
Citaat:
Probleem opgelost door met id's te werken

je werkt nog steeds met klasses hoor

HTML: <div class="website"></div>
CSS: .website{color: red;}

HTML: <div id="website"></div>
CSS: #website{color: red;}

HTML:
<div class="website">is zwart<span>is rood</span></div>
<span>is default kleur</span>
CSS:
.website{color: black;}
.website SPAN{color: red;}

deze laatste regel selecteert enkel de span binnen de div met klassenaam website; kinderen (children) selecteren doe je dus gewoon door achter elkaar te typen.

Wil je gewoon meerdere elementen na elkaar selecteren, dan gebruik je een komma
.website, SPAN{color: green;}
Nu zal alles groen kleuren
Offline Flippie - 04/10/2006 12:56 (laatste wijziging 04/10/2006 12:56)
Avatar van Flippie Nieuw lid Het vorige probleem werd opgelost. Had nu een andere probleem, nl dat die DIV's te groot waren voor de pagina, maar dacht dat ik dat hier ook kon plaatsen. Ging tenslotte ook over CSS, maar goed. Ik maak ander topic aan.

Toch bedankt voor de TIP.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.189s