login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Div rekt niet mee (Opgelost)

Offline jvangelder - 22/03/2013 21:07
Avatar van jvangelderNieuw lid Goedenavond,
Onderstaand is mijn css code en html.

Nu zit ik met een probleem, het rechter vlak wilt niet meerekken met het linkse. zie: http://i47.tinypic.com/f0t4sy.png

Ik hoop dat jullie snappen wat mijn probleem is en dit jullie mij kunnen helpen..


Groetjes en alvast bedankt,
Joey
css code - Bekijk de code zonder highlighting - Klap code in 
  1. body {
  2. 	background-color:#C9C9C9;
  3. 	margin:0px;
  4. 	padding:0px; 
  5. 	font-family: verdana;
  6. 	font-size: 14px;
  7. 	}
  8.  
  9.  
  10. /* container */
  11. div.container {
  12. 	width:850px;
  13. 	margin:0px auto;
  14. 	margin-top: 30px;
  15. 	}	
  16.  
  17. /* maincontent */
  18. div.maincontent {
  19. 	width:868px;
  20. 	background-color:#FFFFFF;
  21. 	border-right: 1px solid #ABABAB;
  22. 	border-left: 1px solid #ABABAB;
  23. 	height:auto;
  24. 	}
  25.  
  26.  
  27. /* LINKS */
  28. div.links {
  29. 	width:663px;
  30. 	background-color:#FFFFFF;
  31. 	float:left;
  32. 	height:auto;
  33. 	}
  34.  
  35. div.linkslogo {
  36. width:663px;
  37. padding-right: 10px;
  38. background-repeat: no-repeat;
  39. float:left;
  40. height:208px;
  41. border-bottom: 1px solid #ABABAB;
  42. border-top:1px solid #ABABAB;
  43. }
  44.  
  45. div.linkstekst {
  46. width:643px;
  47. padding: 10px;
  48. float:left;
  49. background: #FFF;
  50. height:auto;
  51. overflow:hidden;
  52. font-size:13px;
  53. position:relative;
  54. }
  55.  
  56. div.linksboven {
  57. width:643px;
  58. height:auto;
  59. }
  60.  
  61. div.linksonder {
  62. width: 643px;
  63. height:123px;
  64. }
  65.  
  66. /* RECHTS */
  67. div.rechts {
  68. 	width:195px;
  69. 	padding-right:10px;
  70. 	background-color:#FFFFFF;
  71. 	float:right;
  72. 	height: 100%;
  73. 	overflow:hidden;
  74. 	}
  75.  
  76. div.logorechts {
  77. width:195px;
  78. background: #FFF;
  79. height:209px;
  80. border-left:1px solid #ABABAB;
  81. border-bottom:1px solid #ABABAB;
  82. padding-left:10px;
  83. font-size:13px;
  84. }
  85.  
  86. div.tekstrechts {
  87. width:195px;
  88. background: #FFF;
  89. height:100%;
  90. border-left:1px solid #ABABAB;
  91. font-size:13px;
  92. float:right;
  93. }
  94.  
  95. .tekstrechts:after{
  96.  content: ".";
  97.  display: block;
  98.  height: 0px;
  99.  clear: both;
  100.  overflow: hidden;
  101.  padding-bottom: 10px;
  102.  
  103. }
  104. /* MENU */
  105. div.menu {
  106. float:left;
  107. width: 868px;
  108. height:24px;
  109. background-color:#FFF;
  110. border-top: 1px solid #B8B8B8;
  111. border-right: 1px solid #B8B8B8;
  112. border-left: 1px solid #B8B8B8;
  113. }
  114.  
  115. div.menutijd {
  116. float:right;
  117. width: 220px;
  118. height:20px;
  119. font-size: 12px;
  120. padding-top:3px;
  121. padding-bottom:3px;
  122. }
  123.  
  124. div.menutekst {
  125. float:left;
  126. width:638px;
  127. height:20px;
  128. background-color: #FFF;;
  129. font-size: 13px;
  130. padding-top:3px;
  131. padding-bottom:3px;
  132. padding-left:5px;
  133. padding-right:3px;
  134. }
  135.  
  136. /* FOOTER */
  137. div.footer {
  138. width:858px;
  139. height:148px;
  140. background-color:#FFF;
  141. padding:5px;
  142. overflow:hidden;
  143. border: 1px solid #ABABAB;
  144. font-size: 13px;
  145. }
  146.  
  147. div.footerlinks {
  148. float:left;
  149. width:276px;
  150. height:142px;
  151. overflow:hidden;
  152. background-color:#FFF;
  153. padding:3px;
  154. }
  155.  
  156. div.footerlinkslinks {
  157. 	float:left;
  158. 	width:142px;
  159. 	height:142px;
  160. 	overflow:hidden;
  161. }
  162.  
  163. div.footerlinksrechts {
  164. 	float:right;
  165. 	width:133px;
  166. 	height:142px;
  167. 	overflow:hidden;
  168. }
  169.  
  170. div.footermidden {
  171. width:276px;
  172. height:142px;
  173. background-color: #FFF;
  174. float:left;
  175. overflow:hidden;
  176. border-left:1px solid #ABABAB;
  177. padding:3px;
  178. }
  179.  
  180. div.footermiddenlinks {
  181. 	float:left;
  182. 	width:142px;
  183. 	height:142px;
  184. 	overflow:hidden;
  185. }
  186.  
  187. div.footermiddenrechts {
  188. 	float:right;
  189. 	width:133px;
  190. 	height:142px;
  191. 	overflow:hidden;
  192. }
  193.  
  194. div.footerrechtslinks {
  195. float:left;
  196. width:127px;
  197. height:142px;
  198. background: #FFF;
  199. border-left: 1px solid #B8B8B8;
  200. overflow:hidden;
  201. padding:3px;
  202. }
  203.  
  204. div.footerrechts {
  205. float:left;
  206. width:144px;
  207. height:142px;
  208. overflow:hidden;
  209. background-color:#FFF;
  210. border-left:1px solid #ABABAB;
  211. padding:3px;
  212. }


html4strict 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.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  4. 	<head>
  5.  
  6.         <title>WEBSHOP</title>
  7.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  8.  
  9. 		<meta name="description" content="" />
  10. 		<meta name="keywords" content="keywords" />
  11.  
  12. 		<link href="css/styles.css" rel="stylesheet" type="text/css" />
  13.  
  14. 		</head>
  15. 	<body>
  16.  
  17.         <div class="container">
  18. 			<div class="menu">
  19. 			<div class="menutekst"><?php include"header/menu.php" ?></div>
  20. 			<div class="menutijd"><?php include"header/menutijd.php" ?></div>
  21. 			</div>
  22. 			<div class="maincontent">
  23. 			<div class="links">
  24. 			<div class="linkslogo"><?php include"header/logo.php" ?></div>
  25. 			<div class="linkstekst"><br />
  26. 		<div class="linksboven"><br />
  27. <?php
  28. if (isset($_GET['page'])) 
  29. { 
  30.     if (file_exists($_GET['page'].".php")) 
  31.     { 
  32.         include($_GET['page'].".php"); 
  33.     } 
  34.     else 
  35.     { 
  36.         echo "Pagina bestaat niet!"; 
  37.     } 
  38. } 
  39. else 
  40. { 
  41.     include("pagina/home.php"); 
  42. } 
  43. ?> 
  44.  </div>
  45. 		<div class="linksonder">
  46. 			<?php include"pagina/linksonder.php" ?>
  47. 				</div>
  48. 			</div>
  49. 			<div class="rechts">
  50. 			<div class="logorechts">
  51. 			<?php include"header/headermenu.php" ?>
  52. 			</div>
  53. 			<div class="tekstrechts">
  54.  
  55. 				</div>
  56. 			</div>
  57. 			</div> 
  58. 			<div class="footer">
  59. <div class="footerlinks">
  60.   <div class="footerlinkslinks">
  61.   <?php include"footer/footerlinkslinks.php" ?>
  62. </div>
  63. <div class="footerlinksrechts"><br />
  64. <?php include"footer/footerlinksrechts.php" ?>
  65. </div>
  66. </div>
  67. <div class="footermidden">
  68. <div class="footermiddenlinks">
  69. <?php include"footer/footermiddenlinks.php" ?>
  70. </div>
  71. <div class="footermiddenrechts">
  72. <?php include"footer/footermiddenrechts.php" ?>
  73. </div>
  74. </div>
  75. <div class="footerrechtslinks">
  76. <?Php include"footer/footerrechtslinks.php" ?>
  77. </div>
  78. <div class="footerrechts">
  79.   <?php include"footer/footerrechts.php" ?>
  80. </div> 
  81.  
  82. </body>    
  83. </html>

3 antwoorden

Gesponsorde links
Offline vinTage - 22/03/2013 23:36
Avatar van vinTage Nieuw lid 23897982357982758965430868576816518521954976785928053602821056205862081756208175219648125525
Hierboven staat 'ergens' mijn 4 cijferige pincode, als je hem vind, kijk ik serieus naar jouw code..
Offline UpLink - 23/03/2013 11:41 (laatste wijziging 23/03/2013 11:49)
Avatar van UpLink ... Ik heb gewoon de width van je div.links aangepast en volgens mij is je probleem hiermee opgelost...

css code - Bekijk de code zonder highlighting - Klap code in 
  1. div.links {
  2.     width:100%;
  3.     background-color:#FFFFFF;
  4.     float:left;
  5.     height:auto;
  6.     }
  7. }




// EDIT:

Als je met een programma je lay-out maakt, dan vind ik dat je daarmee toch zeker je probleem had kunnen oplossen. Anders vind ik grootes als 663pixels en 868pixels vrij ongewoon in gebruik als je deze zelf zo heb geplaatst...
exacte grootes opgeven aan je div's is net het probleem van het niet mee rekken als je andere div's groter of kleiner maakt.
Ik denk dat het beter is als je met percent zou werken in gevallen als dit.
Dat doe je trouwens met hoogtes wel...
Bedankt door: jvangelder
Offline jvangelder - 23/03/2013 12:20
Avatar van jvangelder Nieuw lid Ik geloof dat ik er wel uit ben!
Vriendelijk bedankt uplink!;)
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.186s