login  Naam:   Wachtwoord: 
Registreer je!
 Forum

positie in css

Offline anton - 22/01/2010 19:02 (laatste wijziging 24/01/2010 11:45)
Avatar van antonLid hallo allemaal,

ik ben bezig met een template...
Opgebouwd uit divs...
Nu heb ik een header met de menuitems erin, en daaronder een blauw balkje...(dat in IE niet even dun word als in chrome trouwens) dan is er een div waar de inhoud moet komen, die zou de hele pagina lengte min de footer moeten innemen, en dan een groen balkje en de footer...

Nu heb ik een stylesheet voor IE en eentje voor chrome etc
In ie word mijn header veel te groot... terwijl ik als height 150 instel. Maar het komt omdat er binnen de header nog 3 divs zijn die relative gepositioneerd zijn. Mijn vragen zijn nu:

1.Hoe zorg ik dat het groene en blauwe balkje zoals in chrome maar 10 px dik zijn en niet 20px?

2.Hoe zorg ik dat ik de footer en het bijhorende groene strookje altijd mooi onderaan de pagina staan en dat de inhoudsdiv automatisch de leegte opvult(voor chrome EN IE)?

Mijn code:
1. html tamplate:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  3. <title>{$titel}</title>
  4. <link rel="stylesheet" href="styles/stylesheet.css">
  5. <!--[if IE]>
  6. <link rel="stylesheet" href="styles/stylesheet_ie.css">
  7. <![endif]-->
  8. </head>
  9.  
  10. <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
  11. <div height="100%" width="100%" align="center">
  12. 	<div width="100%" id="header">
  13.     	<p align="center">
  14.         	<div id="home" align="center">
  15.             	<img src="img/manneke_logo.png" border="0" height="200" width="100" onMouseOver="this.src='img/manneke_draai.gif'" onMouseOut="this.src='img/manneke_logo.png'" />
  16.             </div>
  17.             <div id="activiteiten" align="center">
  18.             	<img src="img/manneke_activiteiten.png" border="0" height="200" width="100" onMouseOver="this.src='img/manneke_draai-a.gif'" onMouseOut="this.src='img/manneke_activiteiten.png'" />
  19.             </div>
  20.             <div id="contact" align="center">
  21.             	<img src="img/manneke_contact.png" border="0" height="200" width="100" onMouseOver="this.src='img/manneke_draai-c.gif'" onMouseOut="this.src='img/manneke_contact.png'">
  22.             </div>
  23.         </p>
  24.     </div>
  25.     <div width="100%" id="strookblauw">
  26.  
  27.     </div>
  28.     <div width="100%" height="*" id="inhoud">
  29.     	&nbsp;
  30.     </div>
  31.     <div width="100%" id="strookgroen">
  32.  
  33.     </div>
  34.     <div width="100%" id="copy">
  35.     	<div id="bvba">
  36.         	<p align="left">
  37.         		Bvba Cartagena, Wilde Heide 1, 3150 Haacht Tel.: xxx/xx.xx.xx
  38.             </p>
  39.         </div>
  40.         <div id="fdp">
  41.         	<p align="right">
  42.             	Realisatie: <a href="http://www.fdproductions.be/" class="copy" target="_blank">FDproductions</a>
  43.             </p>
  44.         </div>
  45.     </div>
  46. </div>
  47. </body>
  48. </html>


2. Css stylesheet voor Chrome:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. @charset "utf-8";
  2. /* CSS Document */
  3. div#header{
  4. 	background-color:#ffc000;
  5. 	height: 200px;
  6. 	margin-top: 0px;
  7. }
  8. div#home{
  9. 	position: relative;
  10. 	left: -100px;
  11. 	background-color:#ffc000;
  12. 	height: 200px;
  13. 	margin-top: 0px;
  14. 	width: 100px;
  15. }
  16. div#activiteiten{
  17. 	position:relative;
  18. 	top: -200px;
  19. 	left: 0px;
  20. 	background-color:#ffc00;
  21. 	height: 200px;
  22. 	margin-top: 0px;
  23. 	width: 100px;
  24. }
  25. div#contact{
  26. 	position: relative;
  27. 	top: -400px;
  28. 	left: 100px;
  29. 	background-color:#ffc000;
  30. 	height: 200px;
  31. 	margin-top: 0px;
  32. 	width: 100px;
  33. }
  34. div#strookblauw{
  35. 	background-color:#0070c0;
  36. 	height: 10px;
  37. 	margin-top: 0px;
  38. }
  39. div#strookgroen{
  40. 	background-color:#00b050;
  41. 	height: 10px;
  42. 	margin-bottom: 0px;
  43. 	margin-top: 0px;
  44. }
  45. div#inhoud{
  46. 	background-color:#531e1d;
  47. 	margin-top: 0px;
  48. 	margin-bottom: 0px;
  49. }
  50. div#copy{
  51. 	background-color:7030a0;
  52. 	margin-top:0px;
  53. 	margin-bottom: 0px;
  54. 	vertical-align:bottom;
  55. 	height: 65px;
  56. }
  57. div#bvba{
  58. 	position: relative;
  59. 	top: 45px;
  60. 	color:#00b050;
  61. 	vertical-align:bottom;
  62. }
  63. div#fdp{
  64. 	position: relative;
  65. 	top: 10px;
  66. 	color:#00b050;
  67. 	vertical-align:bottom;
  68. }


3.Css stylesheet voor IE:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. @charset "utf-8";
  2. /* CSS Document */
  3. div#header{
  4. 	background-color:#ffc000;
  5. 	height: 200px;
  6. 	margin-top: 0px;
  7. }
  8. div#home{
  9. 	position:relative;
  10. 	left: -100px
  11. 	background-color:#ffc000;
  12. 	height: 200px;
  13. 	margin-top: 0px;
  14. 	width: 100px;
  15. }
  16. div#activiteiten{
  17. 	position:relative;
  18. 	top: -204px;
  19. 	left: 0px;
  20. 	background-color:#ffc000;
  21. 	height: 200px;
  22. 	margin-top: 0px;
  23. 	width: 100px;
  24. }
  25. div#contact{
  26. 	position: relative;
  27. 	top: -408px;
  28. 	left: 100px;
  29. 	background-color:#ffc000;
  30. 	height: 200px;
  31. 	margin-top: 0px;
  32. 	width: 100px;
  33. }
  34. div#strookblauw{
  35. 	background-color:#0070c0;
  36. 	height: 5px;
  37. 	margin-top: 0px;
  38. }
  39. div#strookgroen{
  40. 	background-color:#00b050;
  41. 	height: 2px;
  42. 	margin-bottom: 0px;
  43. 	margin-top: 0px;
  44. }
  45. div#inhoud{
  46. 	background-color:#531e1d;
  47. 	margin-top: 0px;
  48. 	margin-bottom: 0px;
  49. }
  50. div#copy{
  51. 	background-color:7030a0;
  52. 	margin-top:0px;
  53. 	margin-bottom: 0px;
  54. 	height: 65px;
  55. }
  56. div#bvba{
  57. 	position: relative;
  58. 	top: 45px;
  59. 	color:#00b050;
  60. 	vertical-align:bottom;
  61. }
  62. div#fdp{
  63. 	position: relative;
  64. 	top: 10px;
  65. 	color:#00b050;
  66. 	vertical-align:bottom;
  67. }


even wat uitleg over de css bestanden:
div#header is dus de header die maar 150 px hoog mag zijn.
div#home,div#activiteiten en div#contact zijn de divs waar de menuitems instaan.
div#strookblauw en div#strookgroen zijn de twee balkjes tussen header en inhoud en inhoud en footer.
div#inhoud is de div die alle leegte moet opvullen en waar de inhoud in komt.
div#copy is de footer waarin de laatste 2 divs staan maar die werken goed.

Dus, div#copy en div#strookgroen moeten allebei mooi boven elkaar onderaan de pagina komen en de inhoud moet al de rest invullen...en in IE zouden dan de 2 strookjes dunner moeten, maar er is volgensmij een minimum dikte ofzo, want de strookjes blijven zelfs als ik 3px voor height ingeef nog steeds zo'n 15 à 20 px hoog...

Oh, en sorry dat ik geen voorbeelden kan voorzien, er zijn wat problemen met de host...

Alvast bedankt voor jullie tijd
MVG
Anton Vandeghinste

2 antwoorden

Gesponsorde links
Offline Jelmerholland - 25/01/2010 17:08 (laatste wijziging 25/01/2010 17:25)
Avatar van Jelmerholland PHP beginner Hmm, jij werkt met relative overal.

Ik werk altijd met margins en paddnigs. Ik snap je css wel, maar ik werk nooit met Relative, sorry ;)

Ps. je kan in principe de 'div' voor je css weghalen.
#header volstaat (ipv div#header)
# is gewoon een verwijzing naar een 'id' aangezien je een id maar 1x kan gebruiken, heb je die 'div' niet nodig.

Kan je verder niet helpen. 


En waarom zet je alles in <p align="center"> ?
Je kan beter een div gebruiken met een class, bijv 'main_container'
en die een margin:0 auto; geven, werkt makkelijker (naar mijn mening)
Offline anton - 25/01/2010 18:50
Avatar van anton Lid :p ik ben echt niet goed met css, dit is zowat alles wat ik weet op elkaar gehoopt:p

ik hoopte dat iemand me wel zou kunnen helpen...:s
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.223s