login  Naam:   Wachtwoord: 
Registreer je!
 Forum

z-index geeft geen effect (Opgelost)

Offline Inge - 20/07/2009 12:03
Avatar van IngeNieuw lid Hallo,

Ik wil een website maken met een afbeelding die deels binnen de website te zien is en een deel buiten het kader van de website. Nu heb ik een div aangemaakt (achtergrond) met daarin de container. De container is kleiner in breedte dan de achtergrond div. In de achtergrond div heb ik mijn afbeelding geplaatst en deze div z-index 1 gegeven. Mijn bedoeling was dat achtergrond div waarin de afbeelding zit over de container gaat, zodat ik mijn gewenste effect krijg. Alleen valt de achtergrond div niet over de container. Ik hoop dat ik het wat duidelijk uitleg.
Hoe bereik ik mijn doel?

code css: http://www.plaatscode.be/137190/

6 antwoorden

Gesponsorde links
Offline vinTage - 20/07/2009 12:08
Avatar van vinTage Nieuw lid Heb je je site eventueel online staan, daarmee kunnen we meer.
Eventueel ook een img van hoe het eruit moet komen te zien.
Offline Inge - 20/07/2009 12:29
Avatar van Inge Nieuw lid Ik heb de website niet online staan.

Dit is een voorbeeld wat wat mijn bedoeling is met de afbeelding.

http://images.tresoar.nl/download/vbwebsite.jpg

Ik heb de html code ook geplaatst.

http://www.plaatscode.be/137192/
Offline vinTage - 20/07/2009 12:51
Avatar van vinTage Nieuw lid Een opzetje getest in FF en ie8

html4strict 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 xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6.  
  7. <style type="text/css">
  8. #container 
  9. {
  10.   width: 950px;
  11.   margin-left:auto;
  12.   margin-right:auto;
  13.   border: solid 1px red;
  14. }
  15.  
  16. #header 
  17. {
  18.   height:149px;
  19.   border: solid 1px blue;
  20. }
  21.  
  22.  
  23. #menu 
  24. {
  25.   width:160px;
  26.   float:left;
  27.   border: solid 1px grey;
  28. }
  29.  
  30. #content
  31. {
  32.   width:785px; /* 950 - 160 (+borders) */
  33.   float:left;
  34.   border:solid 1px green;
  35. }
  36.  
  37. #naarLinks
  38. {
  39.   margin-left: -100px;
  40.   border: solid 1px black;
  41. }
  42.  
  43. #footer
  44. {
  45.   background-color: #ffffff;
  46. }
  48. </head>
  49.  
  51. <div id="container">
  52.   <div id="header">header</div>
  53.   <div id="menu">menu item<br />menu item<br />etc..</div>
  54.   <div id="content">content</div>
  55.   <br style="clear:both" />
  56.   <div id="naarLinks">links</div>
  57.   <div id="footer">footer</div>
  58. </div>
  59. </body>
  60. </html>
Offline Inge - 20/07/2009 14:25
Avatar van Inge Nieuw lid Dat is inderdaad wat ik graag wil! Alleen zou het mooi zijn als de afbeelding een vaste positie krijgt (iets onder het menu) en de content er langs gaat, zodat de afbeelding niet met de tekst mee naar beneden gaat.
Ik heb het geprobeerd met position:absolute; maar dat werkt niet. Kan dit?
Offline vinTage - 20/07/2009 15:11
Avatar van vinTage Nieuw lid als het onder het menu moet, moet je naarLinks in je menu div zetten.
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="menu">
  2.   menu item<br />
  3.   menu item<br />
  4.   etc..
  5.   <div id="naarLinks">links</div>
  6. </div>
Offline Inge - 20/07/2009 15:47
Avatar van Inge Nieuw lid Ja, dat is ook zo. Begin al te moeilijk te denken. 
Super bedankt, tis nu helemaal zoals ik het hebben wil! Was me zelf niet gelukt.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.28s