login  Naam:   Wachtwoord: 
Registreer je!
 Forum

[HTML/CSS] 3 divs naast elkaar + fit screen (Opgelost)

Offline KFredje - 21/04/2009 22:00
Avatar van KFredjeNieuw lid even uitleggen ik wil dus dit:

-----------div over hele breedte----------
---div #px---div rest breedte---div #px---

hopelijk verstaat iedereen dit? 

dus, div over hele breedte is niet moeilijk want dat kan ik make 
de 2 divs (links en rechts) met een aantal px als breedte lukt ook.
maar nu wil ik een middelste div die de rest van de breedte vult en wanneer het een andere resolutie is dat het mee beweegt. Is dit mogelijk?

Ook zou ik graag een ifrme in de middelste div plaatsen die helemaal hetzelfde doet als de div (maar iframe staat in de div)

graag snel hulp aub

4 antwoorden

Gesponsorde links
Offline svghosting - 21/04/2009 22:03
Avatar van svghosting Lid Iframes zou ik al helemaal niet gebruiken in een div is teveel laad tijd wat in beslag genomen wordt. Ik zou dan zelf als ik jou was met een get functie starten.
Offline KFredje - 22/04/2009 12:42 (laatste wijziging 22/04/2009 12:44)
Avatar van KFredje Nieuw lid k, dan geen iframe, geeft niet maar weet niets van get functie :S

zou je me erbij kunnen helpen?

maar ik heb nu dit als pagina:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2.   <head>
  3.     <title>WorldWide</title>
  4.     <LINK href="css/style.css" rel="stylesheet" type="text/css">
  5.     <script type="text/javascript" src="js/nav1.js"></script>
  6.   </head>
  7.   <body bgcolor="#000000">
  8.     <div id="topbanner"><div id="topleftbanner"></div><div id="toprightbanner"></div></div>
  9.     <div id="middlebanner"><div id="middleleftbanner"></div><div id="middlerightbanner"></div></div>
  10.     <div id="bottombanner"><div id="bottomleftbanner"></div><div id="bottomrightbanner"></div></div>
  11.     <div id="left">
  12.       <img src="images/nav1.png" usemap="#nav" border="0" name="nav1">
  13.       <map name="nav">
  14.         <area shape="rect" coords="40,89,196,116" href="index.html" alt="Home" target="_top" onMouseOver="imageChange('nav1','alt1')" onMouseOut="imageChange('nav1','alt0')" />
  15.         <area shape="rect" coords="40,129,196,156" href="download.html" alt="Download" target="_top" onMouseOver="imageChange('nav1','alt2')" onMouseOut="imageChange('nav1','alt0')" />
  16.         <area shape="rect" coords="40,169,196,196" href="register.html" alt="Register" target="_top" onMouseOver="imageChange('nav1','alt3')" onMouseOut="imageChange('nav1','alt0')" />
  17.         <area shape="rect" coords="40,209,196,236" href="changepw.html" alt="Change PW" target="_top" onMouseOver="imageChange('nav1','alt4')" onMouseOut="imageChange('nav1','alt0')" />
  18.         <area shape="rect" coords="40,249,196,276" href="ranking.html" alt="Ranking" target="_top" onMouseOver="imageChange('nav1','alt5')" onMouseOut="imageChange('nav1','alt0')" />
  19.         <area shape="rect" coords="40,290,196,317" href="donate.html" alt="Donate" target="_top" onMouseOver="imageChange('nav1','alt6')" onMouseOut="imageChange('nav1','alt0')" />
  20.         <area shape="rect" coords="40,330,196,357" href="team.html" alt="Team" target="_top" onMouseOver="imageChange('nav1','alt7')" onMouseOut="imageChange('nav1','alt0')" />
  21.       </map>
  22.     </div>
  23.     <div id="right">
  24.       <div id="topborder3"><div id="topleft3"></div><div id="topright3"></div></div>
  25.       <div id="middleborder3" style="clear:both;"><div id="middleleft3"></div><div id="middlemiddle3"><iframe src="News/Status.php" frameborder="0" height="78" width="100%" scrolling="no"></iframe></div><div id="middleright3"></div></div>
  26.       <div id="bottomborder3" style="clear:both;"><div id="bottomleft3"></div><div id="bottomright3"></div></div>
  27.     </div>
  28.   </body>
  29. </html>


(hier is efbeelding ervan: http://i114.pho...oos1-3.jpg)

men javascript en css file werken perfect.

dus nu zou ik graag tussen <div id="left"> en <div id="right"> een div willen die dus de ovirige ruimte tussen left en right inneemt (naar gelang de schermresolutie) en dat het vanzelf aanpast aan de inhoud. (ook de inhoud de breedte van de div)

die middelste div had ik ook graag hetzelfde opgebouwd als mijn rechtse maar kan nooit laten meebewegen met scherm en als ik er iets in zet trekt het op niets.

dit is trouwens mijn css

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #topbanner {
  2. background-image: url("../images/banner-top.png");
  3. background-repeat: x-repeat;
  4. width: 100%;
  5. height: 52px;
  6. position: relative;
  7. float: left;
  8. }
  9.  
  10. #topleftbanner {
  11. background-image: url("../images/banner-top-left.png");
  12. background-repeat: no-repeat;
  13. width: 23px;
  14. height: 52px;
  15. position: relative;
  16. float: left;
  17. }
  18.  
  19. #toprightbanner {
  20. background-image: url("../images/banner-top-right.png");
  21. background-repeat: no-repeat;
  22. width: 23px;
  23. height: 52px;
  24. position: relative;
  25. float: right;
  26. }
  27.  
  28. #middlebanner {
  29. background-image: url("../images/header.jpg");
  30. background-repeat: no-repeat;
  31. background-position: center;
  32. width: 100%;
  33. height: 91px;
  34. position: relative;
  35. float: left;
  36. }
  37.  
  38. #middleleftbanner {
  39. background-image: url("../images/banner-left.png");
  40. background-repeat: y-repeat;
  41. width: 18px;
  42. height: 100%;
  43. position: relative;
  44. float: left;
  45. }
  46.  
  47. #middlerightbanner {
  48. background-image: url("../images/banner-right.png");
  49. background-repeat: y-repeat;
  50. width: 18px;
  51. height: 100%;
  52. position: relative;
  53. float: right;
  54. }
  55.  
  56. #bottombanner {
  57. background-image: url("../images/banner-bottom.png");
  58. background-repeat: x-repeat;
  59. width: 100%;
  60. height: 52px;
  61. position: relative;
  62. float: left;
  63. }
  64.  
  65. #bottomleftbanner {
  66. background-image: url("../images/banner-bottom-left.png");
  67. background-repeat: no-repeat;
  68. width: 23px;
  69. height: 52px;
  70. position: relative;
  71. float: left;
  72. }
  73.  
  74. #bottomrightbanner {
  75. background-image: url("../images/banner-bottom-right.png");
  76. background-repeat: no-repeat;
  77. width: 23px;
  78. height: 52px;
  79. position: relative;
  80. float: right;
  81. }
  82.  
  83. #left {
  84. width: 235px;
  85. height: 446px;
  86. float: left;
  87. }
  88.  
  89. #right {
  90. width: 222px;
  91. position: relative;
  92. float: right;
  93. }
  94.  
  95. #topborder3 {
  96. background-image: url("../images/top1server.png");
  97. background-repeat: x-repeat;
  98. background-position: 74px;
  99. height: 84px;
  100. position: relative;
  101. width: 222px;
  102. float: left;
  103. }
  104.  
  105. #topleft3 {
  106. background-image: url("../images/top-left3S.png");
  107. background-repeat: no-repeat;
  108. width: 74px;
  109. height: 84px;
  110. position: relative;
  111. float: left;
  112. }
  113.  
  114. #topright3 {
  115. background-image: url("../images/top-right1.png");
  116. background-repeat: no-repeat;
  117. width: 49px;
  118. height: 84px;
  119. position: relative;
  120. float: right;
  121. }
  122.  
  123. #middleborder3 {
  124. width: 222px;
  125. height: 15px;
  126. position: relative;
  127. float: left;
  128. }
  129.  
  130. #middleleft3 {
  131. background-image: url("../images/middle-left1.png");
  132. background-repeat: y-repeat;
  133. width: 31px;
  134. height: 50px;
  135. position: relative;
  136. float: left;
  137. }
  138.  
  139. #middlemiddle3 {
  140. width: 162px;
  141. position: relative;
  142. float: left;
  143. height: 15px;
  144. color: #000000;
  145. text-align: left;
  146. margin-top: -30px;
  147. margin-left: -2px;
  148. }
  149.  
  150. #middleright3 {
  151. background-image: url("../images/middle-right1.png");
  152. background-repeat: y-repeat;
  153. width: 29px;
  154. height: 50px;
  155. position: relative;
  156. float: right;
  157. }
  158.  
  159. #bottomborder3 {
  160. background-image: url("../images/bottom1.png");
  161. background-repeat: x-repeat;
  162. height: 77px;
  163. width: 222px;
  164. }
  165.  
  166. #bottomleft3 {
  167. background-image: url("../images/bottom-left1.png");
  168. background-repeat: no-repeat;
  169. width: 31px;
  170. height: 77px;
  171. position: relative;
  172. float: left;
  173. }
  174.  
  175. #bottomright3 {
  176. background-image: url("../images/bottom-right1.png");
  177. background-repeat: no-repeat;
  178. width: 102px;
  179. height: 77px;
  180. position: relative;
  181. float: right;
  182. }
Offline Martijn - 22/04/2009 13:03
Avatar van Martijn Crew PHP je maakt 1 div die die totale grote is, zet daarin je linker en rechter div, en dan moet je even spelen met de display style. Kan zijn inline, of inline-block ofzo.
Offline KFredje - 22/04/2009 14:04
Avatar van KFredje Nieuw lid @DeviourSoul
Zal ik eens proberen 

Hier nog even wat ik wil: http://i114.pho...oos2-3.jpg mss is dit beter te verstaan
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.379s