login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Meerdere DIVS (naast elkaar) automatisch breedte toe kennen

Offline SjaakTH - 17/02/2010 14:24
Avatar van SjaakTHNieuw lid Hallo,

Ik heb een 7-tal DIV's naast elkaar gezet waarvan DIV nr 2, 4 en 6 een plaatje bevatten en precies 260 pixels breed zijn. Het totaal van die 3 divs is dus 780px. Nu wil ik het zo hebben dat de overige 4 divs de ruimte opvullen zodat de 7 DIVS in totaal altijd/precies 100% van het scherm is.

Met tabellen heb ik dit zo voor elkaar. Maar ik wil me ook maar eens gaan voorbereiden op de 'toekomst' ipv het 'ouderwetse' tabellen gebruik.. Iemand een idee hoe je dit met div/css maakt?

5 antwoorden

Gesponsorde links
Offline WouterPSV - 17/02/2010 17:58
Avatar van WouterPSV Lid Een div er om heen maken

Als je een div container doet. die geef je 988 px breed.
en je stopt daar een header div in dan zal de header die breedte aan namen.

Als je dus dat met die 7-tal divjes doet moet het goed komen.
Bedankt door: SjaakTH
Offline SjaakTH - 18/02/2010 19:29 (laatste wijziging 18/02/2010 19:30)
Avatar van SjaakTH Nieuw lid Er zit een container omheen, en hij heet 'rainbow'. Hij is echter 100% breed omdat hij het hele scherm moet vullen en niet slechts 988px..

Hier is de CSS code:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #rainbow {
  2. 	padding: 40px 0 0 0;
  3. 	width: 100%;
  4. 	height: 2px;
  5. }
  6.  
  7. #orange {
  8. 	background-color: #ff9c00;
  9. 	float: left;
  10. }
  11.  
  12. #grass {
  13. 	background-color: #cdfd00;
  14. 	float: left;
  15. }
  16.  
  17. #sky {
  18. 	background-color: #00acff;
  19. 	float: left;
  20. }
  21.  
  22. #haze {
  23. 	background-color: #a800ff;
  24. 	float: left;
  25. }
  26.  
  27. #grad_one {
  28. 	background: url(img/grad_one.jpg) no-repeat 0 0;
  29. 	width: 260px;
  30. 	float: left;
  31. }
  32.  
  33. #grad_two {
  34. 	background: url(img/grad_two.jpg) no-repeat 0 0;
  35. 	width: 260px;
  36. 	float: left;
  37. }
  38.  
  39. #grad_three {
  40. 	background: url(img/grad_three.jpg) no-repeat 0 0;
  41. 	width: 260px;
  42. 	float: left;
  43. }


En de HTML:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="container">
  2.  
  3.             <div id="rainbow">
  4.                 <div id="orange"><img src="blank.gif" width="1" height="1" border="0" /></div>
  5.                 <div id="grad_one"><img src="blank.gif" width="1" height="1" border="0" /></div>
  6.                 <div id="grass"><img src="blank.gif" width="1" height="1" border="0" /></div>
  7.                 <div id="grad_two"><img src="blank.gif" width="1" height="1" border="0" /></div>
  8.                 <div id="sky"><img src="blank.gif" width="1" height="1" border="0" /></div>
  9.                 <div id="grad_three"><img src="blank.gif" width="1" height="1" border="0" /></div>
  10.                 <div id="haze"><img src="blank.gif" width="1" height="1" border="0" /></div>
  11.             </div>
  12.  
  13.         </div>
Offline Jelmerholland - 19/02/2010 08:25
Avatar van Jelmerholland PHP beginner Zou je niet wat meer css toevoegen?
zoals padding en margin? height, widht etc?

Experimenteer daar wat mee, dan kom je sws al een heel end 
Offline Martijn - 19/02/2010 13:56 (laatste wijziging 19/02/2010 13:58)
Avatar van Martijn Crew PHP padding en margin zijn completely useless voor dit. En height heeft niets te maken met width, en width was uberhaupt al t hele probleem.
Offline Wave6 - 21/02/2010 10:21
Avatar van Wave6 PHP beginner Ik zou gewoon een min-width plaatsen in alle 7 divs.
Je weet toch wel wat een minimale breedte moet zijn?

Of vat ik het nu verkeerd op?
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.183s