login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Overlappende divs (Opgelost)

Offline MoPe - 22/02/2009 12:16 (laatste wijziging 22/02/2009 12:18)
Avatar van MoPeNieuw lid Hallo,

Ik heb de volgende opbouw van een website:
  1. <div id="wrapper">
  2. <div id="container">
  3. <div id="header"><a href="test.html" class="testlink" >a</a></div>
  4. <div class="contentwrapper">
  5. <div id="sidebar-left">bla</div>
  6. <div id="content">bla</div>
  7. <div id="sidebar-right">blka</div>
  8. </div>
  9. </div>
  10. </div>

Met deze css:
  1. body, html {
  2. height:100%;
  3. width:100%;
  4. }
  5.  
  6. #wrapper {
  7. background:transparent url(../images/body-bg.png) repeat-x scroll 0 0;
  8. height:100%;
  9. padding-bottom:100px;
  10. width:100%;
  11. }
  12.  
  13. #container {
  14. margin:auto;
  15. width:1037px;
  16. }
  17.  
  18. #header {
  19. background-color:#F00;
  20. height:239px;
  21. width: 1036px;
  22. height: 200px;
  23. margin: 0;
  24. padding: 0;
  25. }
  26. .contentwrapper {
  27. position:absolute;
  28. z-index:1;
  29. }
  30. #sidebar-left {
  31. float:left;
  32. margin:0 0 100px 37px;
  33. width:241px;
  34. background-color:#0F0;
  35. }
  36. #content {
  37. float:left;
  38. margin:0 0 0 9px;
  39. width:500px;
  40. background-color:#00F;
  41. }
  42. #sidebar-right {
  43. float:left;
  44. margin:18px 0 0 10px;
  45. width:203px;
  46. background-color:#FF0
  47. }
  48. .testlink {
  49. background:transparent url(link.gif) no-repeat scroll 0 0;
  50. display:block;
  51. float:right;
  52. height:20px;
  53. margin-right:35px;
  54. margin-top:200px;
  55. width:90px;
  56. }


Nu is het probleem dat de link (testlink) onder de margin van de sidebar-left valt en er dus niet op geklikt kan worden. Ik heb al vanalles geprobeerd met z-index maar dat lijkt niets te helpen.
De reden dat de link niet in de sidebar-left zelf kan staan is omdat ik werk met templates en ik de link op deze manier maar één keer hoef te maken namelijk in de header. Anders zou ik hem in ieder template in de sidebar-left moeten plaatsen.
Ik heb echt geen idee of dit op te lossen is...

Alvast bedankt!
Peter

2 antwoorden

Gesponsorde links
Offline Koen - 22/02/2009 13:08
Avatar van Koen PHP expert Heb je die website misschien ergens online staan?
Op die manier kunnen we zelf wat experimenteren en zo sneller een correct antwoord geven.
Offline MoPe - 23/02/2009 14:02
Avatar van MoPe Nieuw lid Laat maar, het is opgelost door een div om de link heen te zetten en deze relative positiong te geven en vervolgens met z-index de overlap eruit te halen.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.192s