login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Overlappend divje wil maar niet werken (Opgelost)

Offline KevinWe - 28/03/2010 15:07 (laatste wijziging 28/03/2010 15:08)
Avatar van KevinWeNieuw lid Beste allemaal,

Ik ben een beetje aan het designen voor een website.
Jullie kunnen deze terug vinden onder http://www.dibad.be/beta

Momenteel zien jullie links onder een divje staan met een gele achtergrond. Deze zou echt gepositioneerd moeten worden zoals hier http://dibad.be/dibad_tryout.png om de sponsors rechts in weer te geven.

Voorlopig wil het mij maar niet lukken om deze op die plaats te krijgen.

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #wrapper{
  2. 	width: 980px;
  3. 	margin: 0 auto;
  4. }
  5.  
  6. /* CONTENT STUFF */
  7. #content{
  8.    position: relative;
  9.    background: transparent url(../gfx/background_content.png);
  10.    overflow: auto;
  11.    width: 100%;
  12.    z-index: 100;
  13.    padding: 0 0 20px 0;
  14. }
  15.  
  16. /* CONTENT LEFTCONTENT */
  17. #content #leftcontent{
  18.     position: relative;
  19.     border: 2px solid #ccc;
  20.     width: 200px;
  21.     float: left;
  22.     background: white;
  23.     z-index: 100;
  24. }
  25.  
  26. /* CONTENT MIDDLECONTENT */
  27. #content #middlecontent{
  28.     position: relative;
  29.     border: 2px solid #ccc;
  30.     width: 500px;
  31.     float: left;
  32.     background: white;
  33.     margin: 0 10px;
  34.     z-index: 100;
  35. }
  36. #wrapper_sponsor {
  37.     position: absolute;
  38.     background-color: yellow;
  39.     height: 200px;
  40.     width: 150px;
  41.     z-index: 999;
  42. }


In mijn ogen zou hij dus gewoon hier overeen moeten komen te staan vermits zijn z-index op 999 ligt en al de rest maar op 100. Maar toch werkt het niet.

Mensen die hier eens even naar willen kijken en een handje helpen, ik zou het ten zeerste apprecieren.

Met vriendelijke groet

8 antwoorden

Gesponsorde links
Offline Jelmerholland - 28/03/2010 15:09 (laatste wijziging 28/03/2010 15:13)
Avatar van Jelmerholland PHP beginner Dit is vast niet wat je wilt!
http://dibad.be/

Hm.. Al die onderdelen, staan in 1 grote wrapper neem ik aan eah?

Als je alles een float-left geeft.. dan zou het moeten kunnen. Maar er is misschien 1 probleem, dat al je margins, widths en paddings bij elkaar teveel zijn. Dat dat alles bij elkaar breder is dan je wrapper. Dan krijg je die bugs, reken alles nog even netjes na en kijk of je afmetingen in het totaal wel kloppen

Je moet het ook sws niet op position absolute zetten, dan gaat het sws fout 
Offline KevinWe - 28/03/2010 15:18 (laatste wijziging 28/03/2010 19:20)
Avatar van KevinWe Nieuw lid hmm er is inderdaad iets niet helemaal in orde op onze site ;)

Ik ga dit even nazien, bedankt om het te vermelden!

Alles past zowieso in de wrapper, daar ben ik helemaal zeker van. Het gaat dus echt over wrapper_sponsor die niet goed word gepositioneerd.

edit:
opbouw van de site is als volgt:
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. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <style media="screen" type="text/css">@import "css/main.css";</style>
  5. <title>Dibad</title>
  6. </head>
  7.  
  9.     <div id="wrapper">
  10.         <div id="header">
  11.             <div id="left_header"></div>
  12.             <div id="middle_header">
  13.                 <ul id="menu">
  14.                     <li><a href="#">clubinfo</a> </li>
  15.                     <li><a href="#">volwassenen</a> </li>
  16.                     <li><a href="#">jeugd</a> </li>
  17.                     <li><a href="#">foto's</a> </li>
  18.                     <li><a href="#">sponsors</a> </li>
  19.                     <li><a href="#">tips &amp; Trucs</a> </li>
  20.                 </ul>
  21.             </div>
  22.             <div id="right_header"></div>
  23.         </div>
  24.         <div id="content">
  25.             <div id="leftcontent">
  26.  
  27.                 Bokkerijder 1H - Dibad 3H
  28.                 test
  29.             </div>
  30.             <div id="middlecontent">
  31.                 middle <br/>
  32.                 middle <br/>
  33.                 middle <br/>
  34.                 middle <br/>
  35.                 middle <br/>
  36.                 middle <br/>
  37.                 middle <br/>
  38.                 middle <br/>
  39.                 middle <br/>
  40.             </div>
  41.         </div>
  42.         <div id="wrapper_sponsor"></div>
  43.         <div class="clear"></div>
  44.         <div id="footer"></div>
  45.     </div>
  46. </body>
  47. </html>


De sponsor wrapper zou helemaal rechts over de header en content divje heen moeten komen. Zoals hier te zien http://www.dibad.be/dibad_tryout.png



EDIT:
Momenteel lukt het wel als ik een negatieve margin-top gebruik van 415pixels.
Voorbeeld is nog steeds te vinden op http://www.dibad.be/beta
Ik hoop het nog op te kunnen lossen op een andere manier, negatieve marges lijkt mij niet zo mooi.

Alle tips zijn nog steeds welkom
Offline Jelmerholland - 28/03/2010 19:45
Avatar van Jelmerholland PHP beginner negatieve marges mogen gewoon hoor ;) Is niks op tegen
zie deze link maar

http://validato...mp;group=0
los die 2 probleempjes nog wel ff op

en wtf is dit? 
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <style media="screen" type="text/css">@import "css/main.css";</style>


waarom gebruik je daar niet gewoon dit?
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <link rel="stylesheet" href="css/main.css" type="text/css" title="Default style" />


Is veel beter 
Offline KevinWe - 28/03/2010 22:51
Avatar van KevinWe Nieuw lid http://www.hand...els02.html is gewoon een veel gebruikte methode om css of javascript files te importeren.

Mja ik weet niet of de negatieve margins de ideale manier is. Ik snap eigenlijk zelf niet goed waarom ik deze nodig heb. Normaal moet het toch perfect kunnen om met de z-indexen een div over de andere divs te leggen...
Offline Jelmerholland - 28/03/2010 22:59
Avatar van Jelmerholland PHP beginner Experimenteer wat je met position:absolute die je er hoogstwaarschijnlijk nog in hebt staan ;) Ook niet op relative oid zetten. gewoon eruit halen en dan een float:left meegeven, kijken wat er gebeurt 
Offline KevinWe - 28/03/2010 23:33
Avatar van KevinWe Nieuw lid Float left werkt inderdaad

maar zowel met relatief als absoluut heb ik aardig liggen spelen maar het gewenste resultaat niet bekomen. Nu staat hij met een float right, negatieve marge aan de top en relatief gepositioneerd...
Offline Jelmerholland - 29/03/2010 08:42
Avatar van Jelmerholland PHP beginner ... euh... ok.. Is het nou opgelost?
Offline KevinWe - 29/03/2010 11:56
Avatar van KevinWe Nieuw lid Jep deze lijkt opgelost te zijn hier kan ik weer mee verder klussen.

Alvast bedankt ...
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.19s