login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Achtergrond met verschillende kleuren via CSS

Offline koenh - 15/02/2006 10:41 (laatste wijziging 15/02/2006 10:42)
Avatar van koenhNieuw lid Hey

Ik ben nieuw in de wereld van CSS. (html heb ik vroeger wel nog gebruikt...) Ik ben op zoek naar een manier om volgende achtergrond te creëren.
Bovenaan een band wit. Deze moet ongeveer 75% bedragen van de paginahoogte. Onderaan een band grijs. Deze moet ongeveer 25% bedragen van de paginahoogte. Hiertussen moet een groene band komen. (+/- 5px)

Ik dacht hiervoor volgende code te gebruiken, maar deze geeft niet steeds het gewenste resultaat...

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <head>
  2. <style type="text/css">
  3. .boven {
  4. background-color: #ffffff;
  5. height: 75%;}
  6. .lijn {
  7. background-color: #749f01;
  8. height: 1%;}
  9. .onder {
  10. background-color: #e3e3e3;
  11. height: 24%;}
  12. </style>
  13. </head>
  14. <body>
  15. <div class="boven">boven</div>
  16. <div class="lijn"></div>
  17. <div class="onder">onder</div>
  18. </body>


In FF en Opera geeft dit het gewenste resultaat, maar in IE is de groene boord veel te breed. Ook is hier een scrollbar zichtbaar...

Iemand een idee hoe ik dit kan verwezelijken? Het is niet nodig dat er met class gewerkt wordt... Het linkermenu zal volledig over de groene lijn moeten komen, de rechterkant moet hier wel rekening mee houden...

alvast bedankt.

grz

3 antwoorden

Gesponsorde links
Offline Ontani - 15/02/2006 10:51
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <style type="text/css">
  4.  
  5. html, body {
  6. 	width: 100%;
  7. 	height: 100%;
  8. 	margin: 0px;
  9. 	padding: 0px;
  10. 	background-color: #e3e3e3;
  11. }
  12.  
  13. .boven {
  14. 	background-color: #ffffff;
  15. 	height: 75%;
  16. }
  17.  
  18. .lijn {
  19. 	background-color: #749f01;
  20. 	height: 1%;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div class="boven">boven</div>
  26. <div class="lijn"></div>
  27. <div class="onder">onder</div>
  28. </body>
  29. </html>
Offline koenh - 15/02/2006 13:03 (laatste wijziging 15/02/2006 13:03)
Avatar van koenh Nieuw lid ok. tx.
Bedankt!
Dit geeft een mooier resultaat.
Ik heb wel nog de font-size veranderd, aangezien in IE het anders een brede band bleef... Hopelijk is dat geen probleem?

php code - Bekijk de code zonder highlighting - Klap code in 
  1. .lijn {
  2.   background-color: #749f01;
  3.   height: 5px;
  4.   font-size: 1;
  5.  
  6. }
Offline Ontani - 15/02/2006 13:28
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 dat is inderdaad de enige oplossing voor iets dergelijks voor elkaar te krijgen in Internet Explorer ik zou wel :

font-size: 1px; aanraden ipv gewoon 1
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.195s