z-index, kleine vraag

steenbok1988 · 6 april 2010

Dag allemaal,

Op dit forum ben ik nieuw.Ik hoop dat ik hier een antwoord kan vinden op mijn vraag. Na het een en ander gesurf op internet kan ik mijn z-index maar niet oplossen. Hoge getallen gebruiken, divjes op andere volgorde in de html zetten, position gebruiken. Alles heb ik geprobeerd.

Mijn vraag: Ik wil graag dat "hoeken_rechtsboven" helemaal boven alles komt te staan. Nu wordt dit wel getoond in alle browsers, behalve IE6. Ik denk dit te kunnen oplossen door deze helemaal bovenaan te plaatsen.

Dan hebben we nog "plakkaat". Deze wordt in FF goed getoond: boven content-container en onder de tekst. In IE (het welbekende probleem) wordt deze bovenaan geplaatst. Graag wil ik deze 1 stap naar achteren hebben.

Diverse dingen heb ik geprobeerd en het werkt niet. Ik hoop dat iemand mij kan helpen, hier zit een belangrijke deadline aan.

Bedankt alvast.

HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title></title>
<link href="opmaak.css" type="text/css" rel="stylesheet"/> 
   <script src="scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="scripts/javascript.js"></script>
</head>
<body >
<div id="bgr_foto"></div>
<!-- start maincontainer -->  
<div id="container_main">
 <!--  Header -->
 <div id="container_header">

           <div class="logo">
           <a href="#"><img src="images/basic/logo.jpg" alt="Domaine de la Tour" class="img" /></a>
           </div>

           <div id="hoofdmenu">
            <ul class="hoofdmenu">
                   <li class="hoofdmenu1"><a href="#">Accueil</a></li>
                   <li class="hoofdmenu1"><a href="#">Les environs</a></li>
                   <li class="hoofdmenu1"><a href="#">Nouvelles</a></li>
                   <li class="hoofdmenu1"><a href="#">L’environment</a></li>
                   <li class="hoofdmenu1"><a href="#">Réservation</a></li>
                   <li class="hoofdmenu1"><a href="#">Accès</a></li>
                   <li class="hoofdmenu1"><a href="#">Contact</a></li>
                   <li class="hoofdmenu1"><a href="#"><img src="images/basic/vlag_fr.jpg" alt="Frans" class="img" /></a></li>
                   <li class="hoofdmenu1"><a href="#"><img src="images/basic/vlag_en.jpg" alt="Engels" class="img" /></a></li>
                   <li class="hoofdmenu1"><a href="#"><img src="images/basic/vlag_nl.jpg" alt="Nederlands" class="img" /></a></li>
   </ul>
           </div>
   </div>
<!--  Content container start-->
   <div id="container_content">
  <!--  Content: kolom rechts -->
     <div class="hoeken_rechtsboven"></div>
           <div id="kolomrechts">
                   <h3>Domaine de la Tour</h3>
                   <p class="rechtertekst"> 
                   Le Domaine de la Tour est une magnifique propriété du 18ème siècle, en pleine campagne au sud du Calvados, en Normandie. Le tout est entièrement restauré     
                   dans le style de l’époque et vous offre tout le confort contemporain. Grâce aux sept hectares de notre propriété, vous trouvez le calme, la nature et l’espace. 
                   </p>

                   <p class="rechtertekst"> Lors d’une promenade dans la propriété, vous pouvez profiter de l’environnement pittoresque avec des bois et des champs autour de notre domaine. 
                   </p>

               <div class="scheidingslijn"></div>

                   <h3>Nouvelles</h3>

                   <p class="rechtertekst"> 
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tristique justo sed nulla lacinia sollicitudin. Sed pulvinar adipiscing 
                   dapibus. Morbi porta, leo quis consectetur malesuada, mauris augue ultrices massa, pulvinar auctor nunc lorem vel dui. 
                   </p>

               <div class="scheidingslijn"></div>

                   <p class="rechtertekst"> Domaine de la Tour<br />
                   14700  Saint-Pierre-Canivet<br />
                   France<br />
                   T  +33 (0) 2 31 20 53 07<br />
                   F  +33 (0) 2 31 20 56 63<br />
                   E <a href="mailto:info@domaindelatour.fr">info@domainedelatour.fr</a> 
                   </p>
           </div>

          <!-- Content: foto-slider-->   
          <div id="foto-slider"> 
           <div id="hoekjes_grotefoto"></div>
  </div> 
    <!--Content: contenttekst -->
  <div id="content">
    <div class="blokken">
                           <div class="top">
                               <h1>Location de salles</h1>
                           </div>

                           <div class="blok">
                               <p class="contenttekst_home"> 
                               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus viverra, leo eu eleif end pulvinar, lorem justo commodo tellus, eu psit, eu posuere. Lorem ipsum dolor. 
                               </p>
                           </div>

                           <div class="bottom">
                               <img src="images/home/foto_salles.jpg" alt="Frans" />
                           </div>
    </div>

    <div class="blokken">
      <div class="top">
       <h1>Les gîtes</h1>
      </div>
      <div class="blok">
       <p class="contenttekst_home"> 
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus viverra, leo eu eleif end pulvinar, lorem justo commodo tellus, eu psit, eu posuere. Lorem ipsum dolor. 
                        </p>
      </div>

      <div class="bottom">
                      <img src="images/home/foto_gites.jpg" alt="Frans" />
                     </div>
    </div>

    <div class="blokken">
      <div class="top">
       <h1>Nos chambres d'hôtes</h1>
      </div>

                           <div class="blok">
       <p class="contenttekst_home"> 
                               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus viverra, leo eu eleif end pulvinar, lorem justo commodo tellus, eu psit, eu posuere. Lorem ipsum dolor. 
                               </p>
      </div>
      <div class="bottom">
                      <img src="images/home/foto_chambres.jpg" alt="Frans" />
                           </div>
    </div>

     </div>
           <!-- einde content: contenttekst -->


   </div>
   <!--  Content container eind -->

   <div id="footer_boven"></div>
   <div id="plakkaat"></div> 

</div>
<!--einde maincontainer-->


<!-- Footer container-->
<div id="container_footer">
 <!--Container footer: sitemap -->
 <div id="container_sitemap">

           <div id="keurmerken">
               <a href="http://www.gites-de-france.com" target="_blank"> <img src="images/basic/logo_charmance.gif" alt="logo Charmance" class="img" />    </a>
               <a href="http://www.gites-de-france.com" target="_blank"> <img src="images/basic/logo_gitesdefrance.gif" alt="logo Gites de France" class="img" /> </a>
               <a href="http://www.ancv.com" target="_blank">    <img src="images/basic/logo_ancv.gif" alt="logo ANCV" class="img" />      </a>
                                <img src="images/basic/logo_michelin.gif" alt="logo Michelin" class="img" />
               <a href="http://www.touring.be" target="_blank">   <img src="images/basic/logo_touring.gif" alt="logo Touring" class="img" />     </a>
           </div>


  <!--  Horizontale footerbalk -->
  <ul class="footerbalk">       
   <li class="footerbalk_horizontaal"> <a href="#">          Dislaimer    </a></li>        
   <li class="footerbalk_horizontaal"> <a href="http://www.intrige.nl">     ©Intrige    </a></li>  
   <li class="footerbalk_horizontaal"> 02/04/2010 </li>
   <li class="footerbalk_horizontaal"> <a href="http://www.linkedin.com">     LinkedIn    </a></li>  
   <li class="footerbalk_horizontaal"> <a href="http://www.facebook.com">     Facebook    </a></li>
   <li class="footerbalk_horizontaal"> <a href="http://www.tripadvisor.com">    Tripadvisor    </a></li>  
   <li class="footerbalk_horizontaal"> <a href="http://www.babyfriendlyboltholes.co.uk"> Babyfriendlyboltholes </a></li>
   <li class="footerbalk_horizontaal"> <a href="#"> Addthis     </a> </li>  
   <li class="footerbalk_horizontaal"> <a href="#"> Addthis     </a> </li>
  </ul>
      <!--  Verticale sitemap -->
  <ul class="kolommen">       
   <li class="kopjes">Menu principal</li>        
   <li><a href="#"> Domaine de la Tour </a></li>  
   <li><a href="#"> Les environs  </a></li>
   <li><a href="#"> Nouvellles   </a></li>  
   <li><a href="#"> L'environnement  </a></li>
   <li><a href="#"> Réservation </a></li>  
   <li><a href="#"> Accès  </a></li>
   <li><a href="#"> Contact    </a></li>  
  </ul>

  <ul class="kolommen">       
   <li class="kopjes">Location de salles</li>       
   <li><a href="#"> Nos salles        </a></li>  
   <li><a href="#"> Séminaires      </a></li>
   <li><a href="#"> Les prix et les disponibilités </a></li>  
   <li><a href="#"> Demande d'informations     </a> </li>
   <li><a href="#"> Offre spéciale     </a></li>  
   <li><a href="#"> Liens         </a></li>
   <li><a href="#"> Notre livre d'or      </a></li>  
   <li><a href="#"> Contact         </a></li>
  </ul>

  <ul class="kolommen">       
   <li class="kopjes">Les gîtes</li> 
   <li><a href="#"> Les gîtes       </a></li>  
   <li><a href="#"> Les prix et les disponibilités </a></li>
   <li><a href="#"> Offres spéciales     </a> </li>  
   <li><a href="#"> Réservation      </a></li>
   <li><a href="#"> Les environs       </a></li>  
   <li><a href="#"> Notre livre d’or      </a></li>
   <li><a href="#"> Contact         </a></li>  
  </ul>

  <ul class="kolommen">       
   <li class="kopjes">Nos chambres d'hôtes</li>      
   <li><a href="#"> Nos chambres       </a></li>  
   <li><a href="#"> Les prix et les disponibilités </a></li>
   <li><a href="#"> Offres spéciales     </a></li>  
   <li><a href="#"> Réserver en ligne    </a></li>
   <li><a href="#"> Les environs       </a></li>  
   <li><a href="#"> Notre livre d'or      </a></li>
   <li><a href="#"> Contact         </a></li>  
  </ul>
 </div> 
</div>
<!--einde Container Footer-->

</body>
</html>

CSS:

*{
 margin: 0;
 padding: 0;
 outline: 0;
}
body {
background-color:#fffce8;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
color:#5c2c00;
line-height:16px;
overflow-x: hidden;
}
/* Basisindeling grote vlakken */ 
#container_main{
 margin: 0 auto;
 width:960px;
 height:auto;
 position:relative;
}
/* Top */
#container_header{
  width:960px;
  height:145px;
}
 .logo{
   width:208px;
   height:112px;
   margin-top:20px;
   float:left;
   position:relative;
 }

   #container_header .logo .img{
    border:0;
   }

 #hoofdmenu{
   width:740px; 
   float:right;
   margin-top:120px;
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size:13px;
 }

  #hoofdmenu ul.hoofdmenu{
   float:right;
  }

  #hoofdmenu ul li.hoofdmenu1{
      list-style:none;
      display:inline;
      margin-left:10px;
      height:22px;
  }

     #hoofdmenu ul li.hoofdmenu1 .img{
      border:none;
  }
/* Content */
#container_content{
  width:960px;
  height:auto;
  background:url(images/basic/bg-faux-content.gif) repeat-y right;
  position:relative;
  overflow: hidden;
  margin-top:20px;
}

#bgr_foto{
  background-image:url(images/basic/bgr_foto.jpg);
  background-repeat:repeat-x;
  width:100%;
  height:293px;
  position:absolute;
  margin-top:145px;
  top:0;
  left:0;
}

 /* Left */   
   #container_content #hoekjes_grotefoto{
    background-image:url(images/basic/hoekjes_grotefoto.png);
    background-repeat:no-repeat;
    width:681px;
    height:20px;
    top:0;
    position:absolute;
   }

   #container_content #foto-slider{
     width:680px;
     height:265px; 
     float:left;
     background-color:#0F9;
     top:0;
     }

   #container_content #kopjesbalk{
     width:694px;
     height:30px;
     float:left;
     margin-top:30px;
     background-color:#993;
     position:absolute;
   }

   #container_content #content{
     width:693px;           
     min-height:427px;      
     height:auto  !important;
     height:427px;
     float:left;
     position:relative;
   }

     #container_content .blokken{
      width:218px;
      height:316px;
      margin-top:30px;
      margin-right:8px;
      margin-left:0px;
      float:left;
      position:relative;
     }

       #container_content  .top{
         background-image:url(images/home/top.jpg);
         width:220px;
         height:31px;
         top:0;
       }

       #container_content  .blok{
         width:197px;
         height:285px;
         top:0;
         margin-left:10px;
         border:solid 1px #b1bc20;
       }

       #container_content  .bottom{
         width:197px;
         height:150px;
         bottom:0;
         position:absolute;
         margin-left:11px;
       }


 /* Right */ 
   #kolomrechts{
     width:267px;
     min-height:580px;
     height:auto !important;
     height:580px; 
     position:relative;
     float:right;
     padding-bottom:50px;
     margin-top:10px;
   }

     .hoeken_rechtsboven{
      background-image:url(images/basic/hoekjes_rechtermenu.jpg);
      background-repeat:no-repeat;
      width:267px;
      height:20px;
      top:0;
      left:0;
      margin-left:693px;
      position:absolute;
      z-index:350;
     }

     .scheidingslijn{
      width:220px;
      height:1px;    
      background-image:url(images/basic/scheidinglijn.jpg);
      background-repeat:no-repeat;
      position:relative;
      margin:15px auto;
     }

     #plakkaat{
      width:300px;
      height:149px;
      background-image:url(images/basic/footer_boven_rechts.jpg);
      position:absolute;
      margin-left:693px;
      bottom:0;
      z-index:1;
     }
/* Footer */
 #footer_boven{
   background-image:url(images/basic/footer_boven_links.jpg);
   width:817px;
   height:134px;
   bottom:0;
   left:0;
   margin-left:-125px;
   position:absolute;
   z-index:-1;
 }

 #keurmerken{
  margin-top:25px;
  float:left;
  position:relative;
 }

  #keurmerken .img{
   border:0;
  }

#container_footer{   
 margin: 0 auto;
 width:100%;
 height:14px;
 position:absolute;
 background-image:url(images/basic/footer.jpg);
 background-repeat:repeat-x; 
 color:#8d785d;
 padding-bottom:50px;
}
 #container_sitemap{
   width:960px;
   height:auto;
   position:relative;
   margin-top:20px; 
   margin-left:auto;
   margin-right:auto;
 }

    #container_sitemap ul {
      float:left;
      margin-top:40px;
    } 

    #container_sitemap ul li{
      list-style:none;
      display:list-item;
    }

    #container_sitemap ul li.kopjes{
      list-style:none;
      font-size:11px;
      font-weight:bold;
    }

    #container_sitemap ul.footerbalk{
      width:960px;
      word-spacing:48px;
      margin-top:20px;
    }

    #container_sitemap ul.kolommen{
      width:240px;
      float:left;
      font-size:10px;
      list-style:inside;
    }

    #container_sitemap ul li.footerbalk_horizontaal{
      list-style:none;
      display:inline;
    }

       /* Opmaak linkjes footer*/
       #container_sitemap a:link { 
        color:#8d785d;
       }

       #container_sitemap a:visited { 
        text-decoration:none;
        color:#8d785d;
       }

       #container_sitemap a:hover{ 
        color:#3d1e02;
       }

       #container_sitemap a:active  {
        text-decoration:none;
        color:#3d1e02;
       }


/* Opmaak teksten */
h1{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
text-align:center;
padding-top:10px;
}
h3{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
font-weight:bold;
margin-top:20px;
margin-left:20px;
}
.contenttekst_home{
padding-top:15px;
padding-bottom:50px;
padding-left:10px;
padding-right:10px;
position:relative;
z-index:2;
}
.rechtertekst{
padding:0px 25px 10px 20px;
position:relative;
z-index:500;
}

/* Opmaak linkjes */
 a:link { 
  text-decoration:none;
  color:#5c2c00;
 }

 a:visited { 
  text-decoration:none;
  color:#5c2c00;
 }

 a:hover{ 
  color:#809323;
 }

 a:active  {
  text-decoration:none;
  color:#809323;
 }

Inloggen

z-index, kleine vraag

Aanbevolen berichten

steenbok1988

Link naar reactie

Delen op andere sites

Welkom op PC Helpforum

Leden statistieken

OVER ONS

SITEMAP

Home

Info

Handleidingen & Tips

Activiteit

Belangrijke informatie