login  Naam:   Wachtwoord: 
Registreer je!
 Forum

foute DIV posities (Opgelost)

Offline dvdm - 12/08/2008 10:05 (laatste wijziging 12/08/2008 10:12)
Avatar van dvdmNieuw lid Hallo
ik probeer mij wat te verdiepen in het werken met DIV's doch het positioneren lijkt mij niet te lukken.

Ik heb een pagina gemaakt bestaande uit een container waar alles inkomt nl de header DIV, een content DIV en een footer DIV.
Tot hiet werkt alles prima maar nu komte het! Ik probeer tevergeefs 2 DIV's naast elkaar te krijgen in de content DIV.
via http://www.wtc-zonnebeke.be/test/data5.php kan jet het foute resultaat zien.

pagina;
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="container">
  2.   <div id="header"></div>
  3.   	<div id="content">
  4.  
  5.  
  6.       <div id="boxr">
  7.         <p>R tekstbox</p>
  8.         <p>R tekstbox</p>
  9.         <p>R tekstbox </p>
  10.       </div>
  11.       <div id="boxl">
  12.         <p>L tekstbox</p>
  13.         <p>L tekstbox </p>
  14.       </div>
  15.   </div>
  16.   <div class="Tekst" id="footer">Copyright .........bla bla ....</div>
  17. 	</div>


CSS
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #container
  2. {
  3.   margin: auto auto;
  4.   padding: 0px;
  5.   text-align: center;
  6.   width: 1000px;
  7. }
  8.  
  9. /* instellingen voor de pagina header */
  10. #header
  11. {
  12. 	width: 100%;
  13. 	height: 195px;
  14. 	margin: 0px;
  15. 	padding: 0px;
  16. 	background-image: url(Afbeeldingen/header.jpg);
  17. 	border: 0px;
  18. }
  19.  
  20. /* instellingen voor de pagina content  */
  21.  
  22. #content
  23. {
  24. 	text-align: left;
  25. 	width: 140px;
  26. 	background-image: url(Afbeeldingen/body.jpg);
  27. 	background-repeat: repeat-y;
  28. 	float:left;
  29. 	padding-left:31px
  30. }
  31.  
  32. #footer
  33. {
  34. 	width: 100%;
  35. 	height: 100px;
  36. 	margin: 0px;
  37. 	background-image: url(Afbeeldingen/footer.jpg);
  38. 	background-repeat: no-repeat;
  39. 	padding-top: 53px;
  40. 	clear:both;
  41. }
  42.  
  43.  
  44.  #boxl{
  45. width: 100px;
  46. height: 300px;
  47. border: 2px solid #666;
  48. background: orange;
  49. text-align: center;
  50. }
  51.  
  52. #boxr{
  53. 	margin-left:141px;
  54. 	width:auto;
  55. 	height: auto;
  56. 	border: #000066 solid thin;
  57. 	text-align: left;
  58. }



Kan iemand mij enige raad geven aub?
Dank bij voorbaat

3 antwoorden

Gesponsorde links
Offline marten - 12/08/2008 10:12
Avatar van marten Beheerder Graag code tags gebruiken
Offline Tuinstoel - 12/08/2008 11:14 (laatste wijziging 12/08/2008 11:20)
Avatar van Tuinstoel PHP expert Je moett werken met float.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. #boxl { 
  2. position: relative;
  3. float: left;
  4. width: 100px;
  5. }
  6.  
  7. #boxr {
  8. float: left;
  9. width: 500px;
  10. }

Niet getest, probeer het maar eens.

Edit:
Je kunt beter ook de 2 div containers omdraaien, die van L en R...!

Edit 2:
Oke in #content geef je een breedte aan van 140px.... Dat is het probleem lijkt me.
Offline dvdm - 12/08/2008 12:05 (laatste wijziging 12/08/2008 15:03)
Avatar van dvdm Nieuw lid Nee hoor, werkt nog niet... (zie online link )
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.173s