login  Naam:   Wachtwoord: 
Registreer je!
 Forum

3 divs naast elkaar in div

Offline lau - 05/05/2006 18:00 (laatste wijziging 05/05/2006 18:00)
Avatar van lauHTML interesse Ik krijg het niet voor elkaar om 3 divs naast elkaar te plaatsen dat in een div zit.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="pro_oneven">
  2.   <div class="pro_naam">asdf</div>
  3.   <div class="pro_artnr">B170-577M</div>
  4.   <div class="pro_prijs">&euro; 1503,00</div>
  5. </div>


CSS:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. div.pro_oneven {
  2. 	margin: 0;
  3. 	padding: 5px;
  4. 	background-color: #F4F6F7;
  5. 	border-bottom: 1px #558EBF solid;
  6. }
  7. div.pro_naam {
  8. 	padding: 0 10px;
  9. 	text-align: left;
  10. 	width: 250px;
  11. 	float: left;
  12. }
  13. div.pro_artnr {
  14. 	padding: 0 10px;
  15. 	text-align: left;
  16. 	float: left;
  17. }
  18. div.pro_prijs {
  19. 	padding: 0;
  20. 	text-align: right;
  21. 	float: right;
  22. }


Het probleem is dat de hoogte van pro_oneven afkapt en niet meegaat met de divs binnenin. Dat komt door float merk ik, maar float hoort bij die 3 om naast elkaar te plaatsen. Iemand een oplossing?

8 antwoorden

Gesponsorde links
Offline Pieter - 05/05/2006 18:15
Avatar van Pieter Gouden medaille

SEO guru		 Heb je soms al een voorbeeldje online staan?
Of een snelle schets hoe het is en hoe je het wilt?
Offline lau - 05/05/2006 18:18 (laatste wijziging 05/05/2006 18:19)
Avatar van lau HTML interesse http://as.4dimension.nl/SITE2/product.php
en dan zie je dit

php code - Bekijk de code zonder highlighting - Klap code in 
  1. asdf             B170-577M                   € 1503,00


dat hoort mooi op een grijzige achtergrond te zitten (bovenste div laag) tussen 2 lijntjes, nu zie je dat die haast op een andere rij/achtergrond zit
Offline Tuinstoel - 05/05/2006 18:27 (laatste wijziging 05/05/2006 18:31)
Avatar van Tuinstoel PHP expert Hoogte opgeven misschien?

Edit:
Ik heb een mogelijk oplossing; namelijk de onderste laag position: absolute; meegeven. Ik ben wat aan het prutsen gegaan;
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <style>
  2.  
  3. .geheel {
  4. 	position: absolute;
  5. 	background-color: #F4F6F7;
  6.   border-bottom: 1px #558EBF solid;
  7. }
  8. .links {
  9. 	position: relative;
  10. 	float: left;
  11. 	width: 250px;
  12. }
  13. .midden {
  14. 	position: relative;
  15. 	float: left;
  16. 	text-align: left;
  17. }
  18. .rechts {
  19. 	position: relative;
  20. 	float: right;
  21. }
  22. </style>
  23. <div class="geheel">
  24. 	<div class="links">Test</div>
  25. 	<div class="midden">Blaa</div>
  26. 	<div class="rechts">Auto</div>
  27. </div>
Offline lau - 05/05/2006 18:39
Avatar van lau HTML interesse Hoogte opgeven is volgens mij geen goed oplossing, omdat de hoogte kan veranderen van die kleine divjes

Werkt ook niet helemaal goed, zie site:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. div.pro_container {
  2. 	border-top: 1px #558EBF solid;
  3. 	margin: 20px 0;
  4. }
  5. div.pro_oneven {
  6. 	margin: 0;
  7. 	padding: 5px;
  8. 	background-color: #F4F6F7;
  9. 	border-bottom: 1px #558EBF solid;
  10. 	position: absolute;
  11. }
  12. div.pro_naam {
  13. 	padding: 0 10px;
  14. 	text-align: left;
  15. 	width: 250px;
  16. 	float: left;
  17. 	position: relative;
  18. }
  19. div.pro_artnr {
  20. 	padding: 0 10px;
  21. 	text-align: left;
  22. 	float: left;
  23. 	position: relative;
  24. }
  25. div.pro_prijs {
  26. 	padding: 0;
  27. 	text-align: right;
  28. 	float: right;
  29. 	position: relative;
  30. }


met

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="pro_container">
  2. 	<div class="pro_oneven">
  3. 		<div class="pro_naam">asdf</div>
  4. 		<div class="pro_artnr">B170-577M</div>
  5. 		<div class="pro_prijs">&euro; 1503,00</div>
  6. 	</div>
  7. 	<div class="pro_oneven">
  8. 		<div class="pro_naam">asdf</div>
  9. 		<div class="pro_artnr">B170-577M</div>
  10. 		<div class="pro_prijs">&euro; 1503,00</div>
  11. 	</div>
  12. </div>
Offline smoos - 05/05/2006 22:11
Avatar van smoos PHP gevorderde Dit moet lukken lijkt me. niet getest overgens.
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="pro_oneven">
  2.   <div class="pro_naam">asdf</div>
  3.   <div class="pro_artnr">B170-577M</div>
  4.   <div class="pro_prijs">&euro; 1503,00</div>
  5.   <br clear="all" />
  6. </div>


'clear' is overgens niet xhtml strict.
Offline nemesiskoen - 05/05/2006 22:44
Avatar van nemesiskoen Gouden medaille

PHP expert		 Waarvoor dienen divs?
Layout en plaatsing van willekeurige gegevens.

Waarvoor dienen tabellen?
Ordenen en weergeven van gestructureerde gegevens.

Wat wil je hier doen?
Het ordenen (en het weergeven) van gestructureerde gegevens, dit kan je best met tabellen doen:)
Offline Pieter - 05/05/2006 22:56
Avatar van Pieter Gouden medaille

SEO guru		 Ik zal het gebruik van tabellen niet snel aanmoedigen, maar hier moet het inderdaad. Het zou zonde zijn moest je het anders doen, kijk maar welke lappen code je zou gebruiken om een simpele semi-tabel te bekomen!
Offline lau - 05/05/2006 23:44
Avatar van lau HTML interesse Je hebt wel gelijk... dus ik kap met dit onzin en ga verder met tabellen..
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.218s