login  Naam:   Wachtwoord: 
Registreer je!
 Forum

3de DIV centreren voor de rest. (Opgelost)

Offline Prutserke - 15/03/2011 20:32 (laatste wijziging 15/03/2011 20:33)
Avatar van PrutserkeNieuw lid Hey allen,

ik maak gebruik van volgende CSS code:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #container {
  2. 	position: absolute;
  3. 	text-align: center;
  4. 	margin: 0px;
  5. 	width: 100%;
  6. 	height: 100%;
  7. 	background-color: #000;
  8. }
  9. #left {
  10. 	float: left;
  11. 	width: 50%;
  12. 	height: 100%;
  13. 	margin: 0px;
  14. 	background-image: url(images/home/bg_left.jpg);
  15. 	background-repeat: repeat-x;
  16. }
  17. #center {
  18. 	z-index: 5;
  19. 	position: relative;
  20. 	width: 960px;
  21. 	height: 100%;
  22. 	background-image: url(images/home/space_left_y.jpg);
  23. 	background-repeat: repeat-y;	
  24. }
  25. #right {
  26. 	float: left;
  27. 	width: 50%;
  28. 	height: 100%;
  29. 	margin: 0px;
  30. 	background-image: url(images/home/bg_right.jpg);
  31. 	background-repeat: repeat-x;
  32. }


Dit geef precies weer wat ik wil bereiken wanneer ik enkel dit als code in de body gebruik (de div center niet gebruiken):

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="container">
  2. 	<div id="left">
  3. 	</div>
  4.  
  5. 	<div id="right">
  6. 	</div>
  7. </div>


Meer bepaald: De div left komt telkens tot mooi in het midden van het scherm, en de div right komt er mooi tegen te staan om de overige 50% te vullen met een background image.

Echter, nu had ik graag een div center gehad dewelke voor al deze div's verschijnt (ook met een hoogte van 100%).
Ik weet dat dit mogelijk is met een z-index, alleen slaag ik er maar niet in om het gewenste resultaat te bekomen...

Meer bepaald dat de body code er als volgt zou uitzien:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="container">
  2. 	<div id="left">
  3. 	</div>
  4. 	<div id="center">
  5.            Deze tekst staat telkens centraal in een div van 100%
  6. 	</div>
  7. 	<div id="right">
  8. 	</div>
  9. </div>


Weet iemand hier raad mee hoe ik dit kan oplossen?

Alvast héél erg bedankt!!

12 antwoorden

Gesponsorde links
Offline GJ2086 - 15/03/2011 21:28
Avatar van GJ2086 Nieuw lid #center ook een float: left; meegeven.
Offline Prutserke - 15/03/2011 21:54
Avatar van Prutserke Nieuw lid Neen... Jammer genoeg niet de oplossing...
Offline icemar - 15/03/2011 23:03
Avatar van icemar Lid Je linker 50% en rechter 50% div hebben samen een width van 100%
dus de center div is geen ruimte voor.
Dus je moet wel zorgen dat er ruimte is voor deze div.
dan werkt flaot left wel.
Offline WouterJ - 16/03/2011 16:21
Avatar van WouterJ HTML gevorderde Maar als je de div#container een position: relative; i.p.v. absolute meegeeft en je div#center position: absolute; meegeeft i.p.v. relative. En dan div#center nog top: 0; meegeeft lukt het wel.
Offline Prutserke - 16/03/2011 18:07
Avatar van Prutserke Nieuw lid Ik heb ze allen geprobeerd, maar zonder succes..
De oplossing van icemar werkt in zeker zin wel, maar wat wanneer ik voor center de vaste breedte van 960px wil behouden?

Hoeveel percent moeten left en right dan zijn?

Thanks
Offline icemar - 16/03/2011 22:16
Avatar van icemar Lid Tja dat ligt aan de manier hoe je meet.
Aangezien niet elke gebruiker het zelfde schermformaat heeft is de ruimte die links en rechts in procenten wordt berekend telkens anders.
een scherm van 17 inch heeft minder procent dan een scherm van 19 of 22 inch.
Offline WouterJ - 16/03/2011 23:40
Avatar van WouterJ HTML gevorderde Ik snap niet precies wat je wilt, maar bedoel je zoiets:
http://waldio.110mb.com/css/prutserke.htm
Offline Prutserke - 23/03/2011 13:31
Avatar van Prutserke Nieuw lid Sorry voor de late reactie, Waldio.
De pagina is inmiddels offline...

Mvg,

Prutserke
Offline WouterJ - 23/03/2011 15:51
Avatar van WouterJ HTML gevorderde De url werkt bij mij nog steeds.
Offline valles10 - 23/03/2011 16:40
Avatar van valles10 HTML interesse
Waldio schreef:
De url werkt bij mij nog steeds.

bij mij ook hr...
Offline Prutserke - 28/03/2011 14:46
Avatar van Prutserke Nieuw lid Bij mij werkt de URL ook, en ik heb het ongeveer kunnen klaarspelen.
Echter, wat wanneer mijn "center" een vaste waarde van 960px moet hebben?

Dan krijg ik het niet meer klaargespeeld met percentages, correct?
Offline WouterJ - 28/03/2011 14:59
Avatar van WouterJ HTML gevorderde Dan zou je eens kunnen kijken naar faux colums, dan kan je het wel maken.
Bedankt door: Prutserke
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.25s