login  Naam:   Wachtwoord: 
Registreer je!
 Forum

3 divs naast elkaar (Opgelost)

Offline Rens - 01/04/2008 21:17
Avatar van RensGouden medaille

Crew algemeen		 Hoi,

Heb ongeveer uurtje geleden even een fotoboek gemaakt.
Hij laat de foto's zien d.m.v. divs.
HTML:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="content">
  2. 	<div class="contentHead">
  3. 		<div class="textHead">
  4. 		{FOTOBOEK_TITEL}
  5. 		</div>
  6. 	</div>
  7. <!-- START BLOCK : FOTOBOEK_RIJ -->
  8. 	<div class="fotoboekContainer">
  9. 	<!-- START BLOCK : FOTOBOEK_LINKS -->
  10. 		<div class="fotoboekLinks">
  11. 			<div class="fotoMargin">
  12. 			<a href="{FOTO_PATH}" rel="lightbox">{FOTO}</a>
  13. 			</div>
  14. 		</div>
  15. 	<!-- END BLOCK : FOTOBOEK_LINKS -->
  16. 	<!-- START BLOCK : FOTOBOEK_MIDDEN -->
  17. 		<div class="fotoboekMidden">
  18. 			<div class="fotoMargin">
  19. 			<a href="{FOTO_PATH}" rel="lightbox">{FOTO}</a>
  20. 			</div>
  21. 		</div>
  22. 	<!-- END BLOCK : FOTOBOEK_MIDDEN -->
  23. 	<!-- START BLOCK : FOTOBOEK_RECHTS -->
  24. 		<div class="fotoboekRechts">
  25. 			<div class="fotoMargin">
  26. 			<a href="{FOTO_PATH}" rel="lightbox">{FOTO}</a>
  27. 			</div>
  28. 		</div>
  29. 	<!-- END BLOCK : FOTOBOEK_RECHTS -->
  30. 	</div>
  31. <!-- END BLOCK : FOTOBOEK_RIJ -->
  32. </div>

(Zoals je ziet is het een template)
De css code:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. div.fotoboekContainer
  2. {
  3. 	border:						0px;
  4. 	width:						452px;
  5. 	margin-left:				12px;
  6. }
  7.  
  8. div.fotoboekLinks
  9. {
  10. 	float:						left;
  11. 	width:						150px;
  12. 	border-left:				1px solid #000000;
  13. 	border-right:				1px solid #000000;
  14. 	border-bottom:				1px solid #000000;
  15. 	height:						150px;
  16. }
  17.  
  18. div.fotoboekMidden
  19. {
  20. 	float:						left;
  21. 	width:						150px;
  22. 	border-right:				1px solid #000000;
  23. 	border-bottom:				1px solid #000000;
  24. 	height:						150px;
  25. }
  26.  
  27. div.fotoboekRechts
  28. {
  29. 	clear:						left;
  30. 	float:						right;
  31. 	width:						150px;
  32. 	border-right:				1px solid #000000;
  33. 	border-bottom:				1px solid #000000;
  34. 	height:						150px;
  35. }
  36.  
  37. div.fotoMargin
  38. {
  39. 	margin-top:					5px;
  40. 	margin-left:				5px;
  41. }

Dat is de css code die voor dat deel gebruikt word.
In Internet Explorer werkt het deze keer zoals het hoort (Ja, ik meen het).
In Firefox echter gaat het deze keer niet goed (Ja, ook dit meen ik).
http://www.team...eesch_2007
Kijk daar maar even als je me niet gelooft of een voorbeeld wilt zien.

Kan iemand mij vertellen hoe dit kan?
Ik heb de HTML gevalideerd en die is xHTML strict, en de CSS is ook correct.

Bedankt,
Rens

2 antwoorden

Gesponsorde links
Offline Ultimatum - 01/04/2008 21:50
Avatar van Ultimatum PHP expert Je moet de borders ook mee tellen bij je totale breedte, de breedte is dus totaal 456 (3*150 + 3*6). Dat zou het op moeten lossen.
Offline Rens - 01/04/2008 22:04 (laatste wijziging 01/04/2008 22:18)
Avatar van Rens Gouden medaille

Crew algemeen		 Nee, dat is het niet...
Toen je het zei dacht ik van 'Ojah, stom, dat is het'.
Meteen de breedte verzet, naar 470 om er zeker van te zijn dat hij genoeg ruimte krijgt, maar het werd niet opgelost.
Daarna de borders weggehaald, maar dat lostte het probleem ook niet op...

En ik verrek het nu om tabellen te gebruiken sinds ik daar van ben afgestapt 

edit; Heb het nu opgelost.
Heb voor Firefox en IE een apart .css bestand gebruikt.
In Firefox de margin-top op -151px gezet en in IE op 0px.
Nu werkt het zoals het hoort 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.192s