login  Naam:   Wachtwoord: 
Registreer je!
 Forum

[CSS] Div's lopen door elkaar

Offline Rmy - 22/11/2006 19:40 (laatste wijziging 22/11/2006 20:33)
Avatar van RmyNieuw lid Goedenavond, ik heb een site. Ik heb daar 1 container en daarin 3 div's zitten. Links is het algemene menu, midden de content en rechts staat wat extra informatie. Maar nu lopen mijn div's op een pagina zoals deze. Dit wil ik natuurlijk niet. Ik kan het wel oplossen door een hele dunne lijn telkens onder de content te plaatsen zodat de content nooit kleiner kan worden als de 2 div's aan de zijkanten. Maar dit is lelijk onpraktisch en niet netjes. Wie kan mij helpen? Mijn style sheet ziet er zo uit:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. body
  2.  {
  3.   background-color:#909090;
  4.   font-family:Verdana;
  5.   font-size: 11px;
  6.   color:#D4D4D4;
  7.   scrollbar-arrow-color:#FFC600;
  8.   scrollbar-face-color:#979797;
  9.   scrollbar-highlight-color:#D4D4D4;
  10.   scrollbar-3dlight-color:#C0C0C0;
  11.   scrollbar-shadow-color:#808080;
  12.   scrollbar-darshadow-color:#1C1C1C;
  13.   scrollbar-track-color:#4C4C4C;
  14.  }
  15.  
  16. a:link { color: #ffc403; text-decoration: none }
  17. a:visited { color: #ffc403; text-decoration: none }
  18. a:hover { color: #ffc403; text-decoration: underline }
  19. a:active { color: #ffc403; text-decoration: none }
  20.  
  21.  
  22.  
  23. hr 
  24.  { 
  25.   color: #979797; 
  26.   border: 2px solid #00000;
  27.  }
  28.  
  29. h5
  30.  {
  31.   font-size: 17px;
  32.   color: #ffbd06;
  33.  }
  34.  
  35.  
  36. div.container {
  37.    margin-left:auto;
  38.    margin-right:auto;
  39.    position: relative;
  40.    border: 10px solid #d4d4d4;  
  41.    width: 930px; 
  42.    padding: 4px;
  43.    margin-top: 0px;
  44.    background-color: #4c4c4c;
  45.  }
  46.  
  47. .linksmenu {
  48.   position: absolute;
  49.   border: 0px;
  50.   left: 10px;
  51.   padding: 0px;
  52.   top: 10px;
  53.   width: 172px;
  54. }
  55.  
  56. .links {
  57.   position: absolute;
  58.   border: 2px solid #d4d4d4;
  59.   left: 10px;
  60.   padding: 4px;
  61.   top: 46px; 
  62.   width: 160px;
  63.   text-align: left;
  64. }
  65.  
  66. .midden {
  67.  
  68.   margin-left: 180px;
  69.   padding: 3px;
  70.   margin-right: 150px;
  71.   top: 230px;
  72.   width: 560px;
  73.   text-align: left;
  74. }
  75.  
  76. .rechtsmenu {
  77.    position: absolute;
  78.    border: 0px;
  79.    right: 10px;
  80.    padding: 0px;
  81.    top: 10px;
  82.    width: 172px;
  83. }
  84.  
  85. .rechts {
  86.   border: 2px solid #d4d4d4;
  87.   position: absolute;
  88.   right: 10px;
  89.   padding: 4px;
  90.   top: 46px;
  91.   width: 160px;
  92.   text-align: left;
  93. }
  94.  
  95.  
  96. div.spacer {
  97.   clear: both; 
  98. }


Alvast bedankt!

-Remy

3 antwoorden

Gesponsorde links
Offline remy - 22/11/2006 21:13
Avatar van remy PHP ver gevorderde ha remy

kun je niet je margin-top wat groter maken? Volgens mij staan ze dan wel goed. tenminste, menu en info gaat het over toch?
Offline BladiN - 22/11/2006 22:31
Avatar van BladiN Gouden medailleGouden medaille

Grafische gevorderde		 Dit zul je met javascript moeten doen.

De elementen die je nodig hebt
Hier een voorbeeldje van mij:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. function fixH()
  2. {
  3.         var lh=document.getElementById('content_left').offsetHeight;
  4.         var rh=document.getElementById('content_right').offsetHeight;
  5.         document.getElementById('content_right').style.height=(lh>rh)? lh+"px" : rh+"px";
  6.         document.getElementById('content_left').style.height=(rh>lh)? rh+"px" : lh+"px";
  7.         if(rh>lh) {
  8.                 document.getElementById('content_info').style.height=((rh-172)+"px");
  9.         }
  10.         if(lh>rh) {
  11.                 document.getElementById('project_txt').style.height=((lh-104)+"px");
  12.         }
  13. }


De html die erbij hoort
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3.         <head>
  4.                 <title>AYCE Webdesign</title>
  5.                 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.                 <link rel="stylesheet" href="style.css" type="text/css" />
  7.                 <script type="text/javascript" src="javascript.js"></script>
  8.         </head>
  9.         <body onload="fixH()">
  10.  
  11.                 <div class="backbar"><!-- No Content --></div>
  12.                 <div class="content">
  13.                         <div class="box">
  14.                         <div class="bar_left"><!-- No Content --></div>
  15.                         <div class="bar_right"><!-- No Content --></div>
  16.                                 <div class="header"><!-- No Content --></div>
  17.                                 <div class="header_sep"><!-- No Content --></div>
  18.                                 <div class="menu">
  19.                                         <div class="menuitem"><a href="index.html">Home</a></div>
  20.  
  21.                                         <div class="menusep"><!-- No Content --></div>
  22.                                         <div class="menuitem"><a href="diensten.html">Diensten</a></div>
  23.                                         <div class="menusep"><!-- No Content --></div>
  24.                                         <div class="menuitem"><a href="ayce.html">AYCE</a></div>
  25.                                         <div class="menusep"><!-- No Content --></div>
  26.                                         <div class="menuitem"><a href="portfolio.html">Portfolio</a></div>
  27.                                         <div class="menusep"><!-- No Content --></div>
  28.  
  29.                                         <div class="rmenuitem"><a href="contact.html">Contact</a></div>
  30.                                         <div class="rmenusep"><!-- No Content --></div>
  31.                                         <div class="rmenuitem"><a href="sitemap.html">Sitemap</a></div>
  32.                                         <div class="rmenusep"><!-- No Content --></div>
  33.                                 </div>
  34.                                 <div class="container">
  35.                                         <div id="content_left">
  36.                                                 <div class="subheader_home"><!-- No Content --></div>
  37.  
  38.                                                 <div class="balk">
  39.                                                         <img src="images/nav.png" alt="" />&nbsp;&nbsp;Welkom bij AYCE Webdesign
  40.                                                 </div>
  41.                                                 <div id="content_info">
  42.                                                         Welkom op de site van All You Can Eat (AYCE) Webdesign. AYCE Webdesign
  43.                                                         is onderdeel van de AYCE-groep, waartoe ook AYCE Comics en AYCE Studio behoren.
  44.                                                         AYCE ontwikkelt, ontwerpt en produceert verschillende grafische producten.
  45.                                                         AYCE Webdesign specificeert zich hierbij tot de (web)design en development. Meer
  46.                                                         informatie over AYCE vindt u onder de tab "AYCE".
  47.                                                         <br />
  48.                                                         Zo kan voor u een gehele website gerealiseerd worden. Van een hele website tot
  49.                                                         enkel losse grafische digitale werkzaamheden. Meer informatie over onze mogelijke
  50.                                                         producten vindt u onder de tab "Diensten".
  51.                                                         <br /><br /><img src="images/mainimg.png" alt="" /><br /><br />
  52.                                                         Bij het ontwikkelen en ontwerpen van producten, maken we gebruik van de nieuwste
  53.                                                         technieken met betrekking tot design, programmering en flash. Hierdoor is het mogelijk
  54.                                                         om onze werkzaamheden dynamisch en interactief te maken. Doordat wij gebruik maken
  55.                                                         van een Content Management System (CMS) is uw site snel en makkelijk te onderhouden
  56.                                                         door uzelf! Indien u het wenst, kunnen wij ook de hosting voor u realiseren.
  57.                                                 </div>
  58.                                                 <div class="bottom"><!-- No Content --></div>
  59.  
  60.                                         </div>
  61.                                         <div id="content_right">
  62.                                                 <div class="project_img"><!-- No Content --></div>
  63.                                                 <div class="balk">
  64.                                                         <img src="images/nav.png" alt="" />&nbsp;&nbsp;Sitenaam
  65.                                                 </div>
  66.                                                 <div id="project_txt">
  67.                                                         <div class="project_txt">
  68.                                                                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent dolor magna, luctus nec, luctus quis, faucibus vel, wisi. Vestibulum mollis, urna at luctus ullamcorper, diam quam fringilla odio, quis porttitor turpis sem ultrices turpis. Cras et eros. Pellentesque magna. Ut quam dolor, ultrices in, pulvinar vel, facilisis eu, tellus. Pellentesque.
  69.                                                         </div>
  70.  
  71.                                                         <div class="more">
  72.                                                                 <a href="#"><img src="images/more.png" alt="Portfolio" /></a>
  73.                                                         </div>
  74.                                                 </div>
  75.                                         </div>
  76.                                 <br style="clear: both" />
  77.                                 </div>
  78.                         </div>
  79.                 </div>
  80.  
  81.         </body>
  82. </html>
Offline Rmy - 23/11/2006 21:00
Avatar van Rmy Nieuw lid Oké ik begrijp dus geen reet van Javascript, dus mijn vraag is of jij de functie kan herschrijven maar dan voor mijn div'jes? Ik heb daarbij mijn kleur potloden gepakt en aan de gang gegaan:

Tekening.

Mijn dank is alvast mega groot. 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.303s