login  Naam:   Wachtwoord: 
Registreer je!
 Forum

CSS krijgt me klein

Offline Sporti69 - 03/02/2007 15:27 (laatste wijziging 03/02/2007 15:28)
Avatar van Sporti69Nieuw lid Dag allemaal. Allereerst een goede zaterdagnamiddag.

Ik ben een website aan het maken met Div structuur. Door middel van CSS wil ik dus een website van 750 op 600 px mooi gecentreerd in mijn browsers krijgen.

Dit is de structuur van mijn divs
php code - Bekijk de code zonder highlighting - Klap code in 
  1. Houder
  2.    containerBG (met swf achtergrond)
  3.    container
  5.         midden
  6.             navigatie
  7.             centrum
  8.             spacerRechts (in div midden alles op te vullen qua width)
  9.         footer

Alles wordt mooi afgesloten, geen fouten in de tags


De CSS file ziet er als volgt uit:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. *{
  2. 	padding:0;
  3. 	margin:0;
  4. }
  5.  
  6. body{
  7. 	overflow:hidden;
  8. 	background-color:#000033;
  9. 	color:#CCCCCC;
  10. 	font-family:Tahoma;
  11. 	font-size:12pt;
  12. }
  13.  
  14. h1{
  15. 	color:#000033;
  16. 	padding:0px;
  17. 	margin-bottom:4px;
  18. 	font-size:16pt;
  19. }
  20.  
  21. hr.ruimte{
  22. 	display:none;
  23. 	clear:both;
  24. }
  25.  
  26. #houder{
  27. 	margin-right:auto;
  28. 	margin-left:auto;
  29. }
  30. #containerBG{
  31. 	width:750px;
  32. 	height:600px;
  33. 	position:relative;
  34. }
  35. #container{
  36. 	text-align:left;
  37. 	position:relative;
  38. 	width:750px;
  39. 	height:600px;
  40. }
  41.  
  42.  
  43. #header{
  44. 	top:0px;
  45. 	width:750px;
  46. 	height:150px;
  47. 	overflow:hidden;
  48. 	position:absolute;
  49. }
  50.  
  51. #midden{
  52. 	top:150px;
  53. 	width:750px;
  54. 	height:350px;
  55. 	position:absolute;
  56. }
  57.  
  58. #navigatie{
  59. 	width:105px;
  60. 	height:350px;
  61. 	float:left;
  62. 	overflow:hidden;
  63. }
  64.  
  65.  
  66. #centrum{
  67. 	top:0px;
  68. 	width:560px;
  69. 	height:350px;
  70. 	float:left;
  71. 	overflow:auto;
  72. }
  73.  
  74. #spacerRechts{
  75. 	height:350px;
  76. 	width:85px;
  77. 	float:right;
  78. 	overflow:hidden;
  79. }
  80.  
  81. #footer{
  82. 	width:750px;
  83. 	height:100px;
  84. 	overflow:hidden;
  85. }


De hr.ruimte is er om een nieuwe regel te nemen na spacerRechts want die staat met een rechtse float.

----
Als ik dit alles run, dan krijg ik mijn div containerBG te zien in explorer, daaronder staat container met de echte site en data in. Ze staan dus onder elkaar! En mijn footer staat over mijn header  

kan iemand mij aub helpen mijn hoofd begint echt zeer te doen.

7 antwoorden

Gesponsorde links
Offline CHIR - 03/02/2007 17:30
Avatar van CHIR Nieuw lid om div's over elkaar te krijgen moet je gebruik maken van de "z-index" en/of "position:absolute" mee geven aan je div's.
Verder moet je je footer uiteraard een waarde meegeven dat ie onderaan staat; zoiets als "bottom:0px;"
Offline Sporti69 - 03/02/2007 17:58 (laatste wijziging 04/02/2007 11:52)
Avatar van Sporti69 Nieuw lid jaja dat weet ik maar kan je even naar mijn probleem kijken. Die z-index is toch niet noodzakelijk.

Ik wil dus een swf in containerBG als achtergrond (wmode=transparent)
in de div container wil ik dus mijn eigenlijke site, en die moet helemaal over containerBG komen.

dit is de url met
-css
-swf
-htm
bestanden

http://users.telenet.be/Sporti69/cssprobleem/
Offline Ultimatum - 04/02/2007 12:16
Avatar van Ultimatum PHP expert @sportie, dat weet je niet en z-index is wel noodzakelijk voor jou

Als je overlappende stukken hebt kan je door z-index bepalen welk stuk bovenop beland. Bekijk de tutorial hier op sitemasters maar eens..
Offline vinTage - 04/02/2007 12:23
Avatar van vinTage Nieuw lid Flash wil altijd bovenop.
En waarom zet je die flash als transparent, hij zit toch als onderste laag?
Offline Sporti69 - 04/02/2007 12:32 (laatste wijziging 04/02/2007 13:22)
Avatar van Sporti69 Nieuw lid ----------
Flash wil altijd bovenop.
En waarom zet je die flash als transparent, hij zit toch als onderste laag?
-----------
Inderdaad, bij mozilla wil flash altijd bovenaan komen...
Ik heb al verschillende div's verschillende positions gegeven
Ook met de z-indexen heb ik al gewerkt. Dan gaat het ook, maar zoals ik zei, in mozilla niet. 

-----
Bekijk de tutorial hier op sitemasters maar eens..
-----
Heb ik gedaan, heel goed uitgelegd, maar er is nooit een overkoepelende container, laat staan twee
Offline Grayen - 04/02/2007 14:06
Avatar van Grayen PHP ver gevorderde Ik heb totaal geen verstand van flash, maar is het niet een idee, om het flash bestand in twee delen te maken, en het middenstuk (waarbij je geen flash nodig hebt) een afbeelding van maakt, dan kan je wel daar data in douwen. Een idee???
Offline Sporti69 - 04/02/2007 14:37 (laatste wijziging 04/02/2007 14:38)
Avatar van Sporti69 Nieuw lid ja, ik heb daar ook al aan gedacht, en ik ga zowel het bovenste als onderste deel moeten herwerken. Maar het basisprincipe moet me eerst wel lukken van die layers te stacken.

Zou er iemand eens naar mijn code willen kijken op de toegevoegde url hier ietsje boven.

Je moet niet naar die swf flash file kijken, ik wil het gewwon het principe van divs op elkaar stacken door position en/of z-index en/of float combinatie.

2x een 750 op 600px container de onderste heeft die swf transparent en de bovenste heeft de sitecontent en structuur.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.193s