login  Naam:   Wachtwoord: 
Registreer je!
 Forum

text komt uit div (Opgelost)

Offline clubfilth - 25/06/2012 15:27
Avatar van clubfilthLid Goedenmiddag iedereen!

ik heb het volgende probleem:
ik heb een pagina met daarop 3 boxes in de div "boxes" geanimeerd met jquery
werkt allemaal prima alleen als ik nu tekst of iets anders onder die div wil zetten zet ie het ernaast als ik die tekst in een div met position relative zet dan ziet hij het uit de container half over de boxes div.

zit al een paar uurtjes te ploeteren maar kom er niet uit!

kan iemand mij verder helpen?

html:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.01 Transitional//EN">
  2.  
  5. <link rel="stylesheet" type="text/css" href="style.css">
  6. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  7. <title>businesssclub || Welkom bij businesssclub.</title>
  8. </head>
  9.  
  11. <div id ="topblack"> </div>
  12.  
  13. <div id ="container">
  14.  
  15. <img src ="img/logo.gif">
  16. <div id ="social">
  17. <a href ="#"><img class ="social" src ="img/facebook.png"></a><a href ="http://twitter.com/#!/businesssclub" target="_Blank"><img class ="social" src ="img/twitter.png"></a><a href ="#"><img class ="social" src ="img/linkedin.png"></a><a href ="#"><img class ="social" src ="img/youtube.png"></a>
  18. </div>
  19.  
  20. <div id ="menu">
  21.  
  22. <ul class ="menu"><a class ="menu" href ="#">Home</a><li class ="menu">&nbsp;</li></ul>
  23. <ul class ="menu"><a  class ="menu"href ="#">Businesssclub</a><li class ="menu"> </li></ul>
  24. <ul class ="menu"><a  class ="menu"href ="#">Nieuws</a><li class ="menu"> </li></ul>
  25. <ul class ="menu"><a  class ="menu"href ="#">Agenda</a><li class ="menu"> </li></ul>
  26. <ul class ="menu"><a  class ="menu"href ="#">Fotoalbum</a><li class ="menu"> </li></ul> 
  27. <ul class ="menu"><a  class ="menu"href ="#">Leden</a> <li class ="menu"> </li></ul>
  28. <ul class ="menu"><a  class ="menu"href ="#">Contact</a><li class ="menu"> </li></ul> 
  29. </div>
  30.  
  31. <br /><p>
  32.  
  33. <div id ="welkom">
  34. <h2 class ="welkom">Welkom bij de businesssclub</h2><hr class ="welkom">
  35. De BusineSSSclub maakt onderdeel uit van de Stichting Topvolleybal Barneveld (STB). De organisatie rondom het A League volleybalteam BMC/SSS. Om dit volleybalteam structureel op het hoogste niveau te kunnen laten spelen is een goede organisatie en een goed financieel beleid noodzakelijk. Binnen STB is het beleid er op gericht dat er sprake moet zijn van een brede financiële basis. De BusineSSSclub maakt daar een belangrijk onderdeel van uit.
  36. <p>
  37. De BusineSSSclub is een club van ondernemers die elkaar inmiddels goed heeft leren kennen. Dat kennen wordt gunnen en dus BusineSSS, dat is de gedachtegang. Bijeenkomsten met interessante onderwerpen voor ondernemers, een dagje uit, een activiteit voor de partners of een bijeenkomst rondom een wedstrijd van BMC/SSS en dit alles in een ongedwongen sfeer.
  38. <p>
  39. Naast deze contactmomenten kunnen de leden van de BusineSSSclub elkaar uiteraard vinden binnen dit platform BusineSSSclub.nl. Nieuwe media zoals Twitter en LinkedIn zorgen ervoor dat je als onderneming gezien en gevonden wordt. Bedrijven kunnen elkaar zo beter leren kennen en daar draagt dit platform eveneens aan bij met informatie over de leden en de activiteiten van de BusineSSSclub.
  40. <p>
  41. <b>Ondernemen en Topvolleybal een groeiende combinatie met volop kansen!</b>
  42. <hr class ="welkom">
  43. </div>
  44. <br /><p>
  45. <div id ="boxes">
  46.  
  47. <div id="capslide_img_cont" class="ic_container">
  48. <img src="img/box1.jpg" width="240" height="180" alt=""/>
  49. <div class="overlay" style="display:none;"></div>
  50. <div class="ic_caption">
  51. <h3>Activiteiten</h3>
  52. <p class="ic_text">
  53. <b><a class ="box" href ="#">Bekijk hier wat de eerstvolgende activiteiten van de businesssclub zijn.</a> </b>
  54. </p>
  55. </div>
  56. </div>
  57. </div>
  58.  
  59. <div id="capslide_img_cont2" class="ic_container">
  60. <img src="img/box2.jpg" width="240" height="180" alt=""/>
  61. <div class="overlay" style="display:none;"></div>
  62. <div class="ic_caption">
  63. <h3>Foto's</h3>
  64. <p class="ic_text">
  65. <b><a class ="box" href ="#">Bekijk de leukste foto's in ons fotoalbum.</a> </b>
  66. </p>
  67. </div>
  68. </div>
  69. </div>
  70.  
  71.  
  72. <div id="capslide_img_cont3" class="ic_container">
  73. <img src="img/box3.jpg" width="240" height="180" alt=""/>
  74. <div class="overlay" style="display:none;"></div>
  75. <div class="ic_caption">
  76. <h3>Leden</h3>
  77. <p class="ic_text">
  78. <b><a class ="box" href ="#">Bekijk wie er allemaal al lid zijn van de club.</a> </b>
  79. </p>
  80. </div>
  81. </div>
  82. </div>
  83.  
  84. </div>
  85.  
  86. <br />
  87.  
  88. Lorem ipsum
  89.  
  90. </div>
  91.  
  92. <script type="text/javascript" src="jquery-1.3.2.js"></script>
  93.         <script src="jquery.capSlide.js" type="text/javascript"></script>
  94.         <script type="text/javascript">
  95.             $(function() {
  96.                 $("#capslide_img_cont").capslide({
  97.                     caption_color	: 'white',
  98.                     caption_bgcolor	: 'black',
  99.                     overlay_bgcolor : '#8cc63f',
  100.                     border			: '',
  101.                     showcaption	    : true
  102.                 });
  103.  
  104.                   });
  105.          $(function() {
  106.                 $("#capslide_img_cont2").capslide({
  107.                     caption_color	: 'white',
  108.                     caption_bgcolor	: 'black',
  109.                     overlay_bgcolor : '#8cc63f',
  110.                     border			: '',
  111.                     showcaption	    : true
  112.                 });
  113.  
  114.                   });
  115.  
  116.  
  117.  $(function() {
  118.                 $("#capslide_img_cont3").capslide({
  119.                     caption_color	: 'white',
  120.                     caption_bgcolor	: 'black',
  121.                     overlay_bgcolor : '#8cc63f',
  122.                     border			: '',
  123.                     showcaption	    : true
  124.                 });
  125.  
  126.                   });
  127.  
  129.  
  130.  
  131.  
  132.  
  133. </body>
  134. </html>


Css:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. body{
  2. background-color:#fff;
  3. padding: 0;
  4. margin: 0;
  5. }
  6.  
  7. /*Container*/
  8. #container{
  9. max-width: 780px;
  10. position:relative;
  11. margin-left:auto;
  12. margin-right:auto;
  13. padding: 0px;
  14. text-align:left;
  15. background:;
  16. }
  17.  
  18. /*welkomsttekst*/
  19. #welkom{
  20. width:750px;
  21. font-family:"Verdana";
  22. font-size:12px;
  23. position:relative;
  24. padding-top:15px;
  25. }
  26.  
  27. h2.welkom{
  28. color:#8cc63f;
  29. font-weight:Bold;
  30. font-size:24px;
  31. line-height:2px;
  32. }
  33.  
  34. hr.welkom{
  35. color:#8cc63f;
  36. border-style:dashed;
  37. }
  38.  
  39.  
  40. /*zwart randje*/
  41. #topblack{
  42. width:100%;
  43. height:4px;
  44. background-color:#000;
  45. margin-top:0px;
  46. position:relative;
  47. }
  48.  
  49.  
  50. /*Menu*/
  51.  
  52. ul.menu{
  53. padding-left:0px;
  54. padding-right:10px;
  55. font-family: "Verdana";
  56. font-size:16px;
  57. text-align:left;
  58. float:left;
  59. display:block;
  60. width:auto;
  61. height:5px;
  62.  
  63. list-style-type:none;
  64. }
  65.  
  66. li.menu{
  67. visibility:hidden;
  68. }
  69.  
  70. ul.menu:hover li.menu{
  71. visibility:visible;
  72. display:block;
  73. width:100%;
  74. height:2px;
  75. background-color:#8cc63f;
  76. }
  77.  
  78. a.menu{
  79. color: #000;
  80. text-decoration: none;
  81. }
  82. a.menu:hover{
  83. color:#959595;
  84. }
  85.  
  86. /*social*/
  87.  
  88. #social{
  89. width:auto;
  90. margin-right:0px;
  91. padding: 3px;
  92. float:right;
  93. }
  94.  
  95. img.social{
  96. opacity:0.4;
  97. }
  98.  
  99. img.social:hover{
  100. opacity:1.0;
  101. }
  102.  
  103.  
  104. /*boxes*/
  105.  
  106. #boxes{
  107. width:780px;
  108. max-width: 780px;
  109. margin-left:0px;
  110. padding-top:0px;
  111. height:auto;
  112. }
  113.  
  114. .ic_container{
  115. float:left;
  116. left:0px;    
  117. vertical-align:baseline;
  118.     margin-right:4px;
  119.     position:relative;
  120.     /*-moz-border-radius:10px;
  121.     -webkit-border-radius:10px;
  122.     -khtml-border-radius:10px;
  123.     -moz-box-shadow: 0 1px 8px #888;
  124.     -webkit-box-shadow: 0 1px 8px #888;*/
  125. border:8px solid #efefef;
  126. }
  127. .overlay{
  128.     opacity:0.6;
  129.     position:absolute;
  130.     top:0px;
  131.     bottom:0px;
  132.     left:0px;
  133.     right:0px;
  134.     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
  135. }
  136. .ic_caption{
  137.     position:absolute;    
  138.     opacity:0.9;   
  139.     overflow:hidden;
  140.     margin:0px;
  141.     padding:0px;
  142.     left:0px;
  143.     right:0px;
  144.     cursor:default;
  145.     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
  146. }
  147. .ic_category{
  148.     text-transform:uppercase;
  149.     font-size:11px;
  150.     letter-spacing:3px;
  151.     padding:5px;
  152.     margin:0px;
  153. }
  154. .ic_caption h3{
  155.     padding:0px 5px 5px 5px;
  156.     margin:0px;
  157.     font-size:12px;
  158. font-family:"Verdana";
  159. }
  160. .ic_text{
  161.     padding:5px;
  162.     margin:0px;
  163.     text-align:justify;
  164.     font-size:8px;
  165. font-family:"Verdana";
  166. }
  167. a.box{
  168. color: #fff;
  169. text-decoration: none;
  170. }
  171.  
  172. /*Nieuws ticker*/


screenshot:
klik hierrrrrrrr...

bij voorbaat dank!

2 antwoorden

Gesponsorde links
Offline Jointjeff - 25/06/2012 15:34
Avatar van Jointjeff HTML interesse Dan is er nog ruimte over naast die boxes.

Probeer je tekst eens in een div te zetten met CSS: width:100%; float:left;
Offline clubfilth - 25/06/2012 15:42 (laatste wijziging 25/06/2012 17:47)
Avatar van clubfilth Lid thnx!

Dan staat ie er onder maar nog steeds buiten de container div

merk nu trouwens dat de boxes div ook niet in de container div staat...zou volgens de html wel zo moeten zijn...

EDIT: OPGELOST! BLEEK DAT IK BIJ ELKE BOX EEN EIND DIV TE VEEL HAD STAAN WAARDOOR IK DE CONTAINER DIV HAD AFGESLOTEN!

BEDANKT VOOR DE HULP ANYWAY!
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.194s