login  Naam:   Wachtwoord: 
Registreer je!
 Forum

layout css/div's verwerken lukt niet

Offline robmoorman - 09/01/2007 15:59
Avatar van robmoormanPHP interesse ik heb geprobeerd met divs te floaten mijn layout te verwerken, alleen het werkt niet helemala zoals bedoeld. Volgens mij kan ik beter gaan poisitioneren want dit lukt niet echt, kan iemand mij hierbij helpen:

ik heb mijn volgende layout:
http://www.g0dlike.nl/files/image_1.jpg

mijn uitkomst is met divs dit, maar de grijze balk waar LEFT staat, moet dus onder de wolken komen aan de linkerkant.....
http://www.g0dlike.nl/files/image_2.jpg

css code:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. body {
  2. 	font-family: Verdana, Arial, Helvetica, sans-serif;
  3. 	font-size: 12px;
  4. 	color: #333333;
  5. 	background-color: #FFFFFF;
  6. 	background-image: url(images/bg_repeat.gif);
  7. 	background-repeat: repeat-x;
  8. 	margin: 0px;
  9. }
  10.  
  11. /* ----------------- MAIN DIVS ----------------- */
  12.  
  13. #main_container {
  14. 	width: 960px;
  15. 	background-color: #FFFFFF;
  16. 	margin: 0px;
  17. }
  18.  
  19. #container {
  20. 	width: 900px;
  21. 	background-color: #FFFFFF;
  22. 	margin: 0px;
  23. 	float: left;
  24. }
  25.  
  26. #bg_left {
  27. 	width: 30px;
  28. 	background-image: url(images/bg_left_repeat.gif);
  29. 	background-repeat: repeat-y;
  30. 	float: left;
  31. }
  32.  
  33. #bg_right {
  34. 	width: 30px;
  35. 	background-image: url(images/bg_right_repeat.gif);
  36. 	background-repeat: repeat-y;
  37. 	float: left;
  38. }
  39.  
  40. /* ------------------ IMGAGES ------------------ */
  41.  
  42. #design_logo {
  43. 	width: 300px;
  44. 	height: 370px;
  45. 	background-image: url(images/design_logo.gif);
  46. 	background-repeat: no-repeat;
  47. 	float: left;
  48. }
  49.  
  50. #design_menu {
  51. 	width: 600px;
  52. 	height: 200px;
  53. 	background-image: url(images/design_top.gif);
  54. 	background-repeat: repeat-y;
  55. 	float: left;
  56. }
  57.  
  58. /* ------------------ CONTENT ------------------ */
  59.  
  60. #content_left {
  61. 	width: 300px;
  62. 	background-color: #F5F5F5;
  63. 	float: left;
  64. }
  65.  
  66. #content_right {
  67. 	width: 600px;
  68. 	background-image: url(images/design_bottom.gif);
  69. 	background-repeat: repeat-y;
  70. 	float: left;
  71. }


html code:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>IJNTEMA.EU Familiewebsite</title>
  6. <link href="opmaak.css" rel="stylesheet" type="text/css" />
  7. </head>
  8.  
  9. <body>
  10.  
  11. <div id="main_container">
  12. 	<div id="bg_left"><img src="images/bg_left.gif" border="0" alt="" /></div>
  13. 	<div id="container">
  14. 		<div id="design_logo">logo</div>
  15. 		<div id="design_menu">menu</div>
  16. 		<div id="content_left">left</div>
  17. 		<div id="content_right">right</div>
  18. 	</div>
  19. 	<div id="bg_right"><img src="images/bg_right.gif" border="0" alt="" /></div>
  20. </div>
  21.  
  22. </body>
  23. </html>

4 antwoorden

Gesponsorde links
Offline Kr4nKz1n - 09/01/2007 16:04
Avatar van Kr4nKz1n Onbekend
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <? Kleur
  2.  
  3. #containerleft {
  4.   width: 300px;
  5.   background-color: #FFFFFF;
  6.   margin: 0;
  7.   float: left;
  8. }
  9. #containerright {
  10.   width: 600px;
  11.   background-color: #FFFFFF;
  12.   margin: 0;
  13.   float: left;
  14. }
  15.  
  16.  
  17.  
  18. <div id="main_container">
  19.   <div id="bg_left"><img src="images/bg_left.gif" border="0" alt="" /></div>
  20.   <div id="containerleft">
  21.     <div id="design_logo">logo</div>
  22.     <div id="content_left">left</div>
  23.   </div>
  24.   <div id="containerright">
  25.     <div id="design_menu">menu</div>
  26.     <div id="content_right">right</div>
  27.   </div>
  28.   <div id="bg_right"><img src="images/bg_right.gif" border="0" alt="" /></div>
  29. </div>


Waarde van 0 (margin) hoeven geen eenheid te hebben.
Offline robmoorman - 09/01/2007 16:04 (laatste wijziging 09/01/2007 16:27)
Avatar van robmoorman PHP interesse ahhh zoo ok ok, thnx dude heel simpele oplossing idd dank u


ik zit nu alleen met een ander probleempje, de bg's links en rechts van mijn "site" die moeten constant doorlopen als de inhoud ook langer is. kan ik dit meegeven aan de css code ????
Offline Xfader - 09/01/2007 18:15
Avatar van Xfader Lid Geen height invullen, hij wordt dan langer als de inhoud ook langer wordt, dat heb je toch al, of zie ik nu iets over het hoofd?
Offline Kr4nKz1n - 09/01/2007 18:24
Avatar van Kr4nKz1n Onbekend Anders moet je even of height: auto; er neer zetten.
Of onderaan de div <br style="clear: both;" />

Er zijn vast wel andere manieren, maar zo heb ik het geleerd.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.18s