• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

div class in den "hintergrund" stellen (hilfe bei meiner homepage)

kornspitz

Neues Mitglied
hi leute ich arbeite an einem projekt für eine bekannte.
es handelt um eine shiatsu_seite
ich habe selbst das layout entworfen und es funktioniert eig auch alles bis auf: mein menü mit einem submenü... ich habe es auf verschiedenste weise versucht, nun habe ich es mit div class versucht .. doch der hintergrund von class steht nun an vorderster stelle...
siehe anhang:homepage.png

wie bekomme ich das blaue menü in den hintergrund..?
hier mein code der homepage.
das grüne menü habe ich mit div id gemacht.

bitte um hilfe (:
danke schon mal im voraus.
lg kornspitz

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
      <meta charset="UTF-8" />
<html>

    <head>
   
   
        <title> (KISS)</title>
        <link rel="stylesheet" type="text/css" href="css.css">
       
        <style type="text/css">
#access {
    background:blue;
    display: block;
    float: left;
    margin-left:10px;
    width: 570px;
    margin-top:-240px;
   
}
#access .menu-header,
div.menu {
    font-size: 13px;
    margin-left: 12px;
    width: 928px;
   
}
#access .menu-header ul,
div.menu ul {
    list-style: none;
    margin: 0;
}
#access .menu-header li,
div.menu li {
    float: left;
    position: relative;
}
#access a {
    color: darksgrey;
    display: block;
    line-height: 38px;
    padding: 0 65px;
    text-decoration: none;
    font-weight:bolder;
    }
#access ul ul {
    box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    display: none;
    position: absolute;
    top: 38px;
    left: 0;
    float: left;
    width: 180px;
    z-index: 99999;
    padding-left:0;
}
#access ul ul li {
    min-width: 180px;
}
#access ul ul ul {
    left: 100%;
    top: 0;
}
#access ul ul a {
    background: #333;
    line-height: 1em;
    padding: 10px;
    width: 160px;
    height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
    background: #333;
    color: #fff;
}
#access ul li:hover > ul {
    display: block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
    color: #fff;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
    color: #fff;
}
</style>
       
       
       
    </head>
   
    <body>   
            <div id="all">
               
               
                    <div id="contenttop">
                        <div id="leftmenu"><br>
                        <a href="#"><img src="../images/rbgleft.png">
                     
                       
                        </div>
                       
                        <div id="rightmenu">
                        <a href="#"><img src="../images/rbgright.png"></div>
                        <div id="text">
                       
                        <!-- <div id="topmenu"> -->
                     
                      <div id="access" class="menu">
                  <ul id="Links" class="sf-js-enabled">
      <li class="nav-selected nav-path-selected">
      <li class=""><a class="" target="_self" href="#">Shiatsu</a>
      <ul>
        <li class=""><a class="" target="_self" href="#">Ziel der Arbeit
</a>
                  </li>
    <li class=""><a class="" target="_self" href="#">Wie wird gearbeitet?
</a>               
                 
                  </li>
                <li class=""><a class="" target="_self" href="#">Anwendungsgebiete
</a>       
                 
              </li>
                <li class=""><a class="" target="_self" href="#">Shiatsu in der Schwangerschaft
</a>       
              </ul>
     
   

    <li class=""><a class="" target="_self" href="#">Cranio</a>
        <ul>
        <li class=""><a class="" target="_self" href="#">Ziel der Arbeit
</a>
                  </li>
    <li class=""><a class="" target="_self" href="#">Wie wird gearbeitet?
</a>               
                 
                  </li>
                <li class=""><a class="" target="_self" href="#">Anwendungsgebiete
</a>       
                 
             
     
      </ul>
    </li>
    <li class=""><a class="" target="_self" href="#">Trager</a>
      <ul>
        <li class=""><a class="" target="_self" href="#">Ziel der Arbeit
</a>
                  </li>
    <li class=""><a class="" target="_self" href="#">Wie wird gearbeitet?
</a>               
                 
                  </li>
                <li class=""><a class="" target="_self" href="#">Anwendungsgebiete
</a>       
                 
              </li>
                  </ul>   
                       
                    <!-- </div> -->
                        </div>
                       
                        <div id="botmenu">
                        <ul>
                        <li><a href="../sites/uebermich.htm">Ueber mich</a></li>
                        <li><a href="../sites/kontakt.htm">Kontakt</a></li>
                        <li><a href="../sites/links.htm">Links</a></li>
                        <li><a href="../sites/fotos.htm">Fotos</a></li>
                        </ul>   
                     
                        </div>
                       
       
                       
                        </div>
                       
                       
                    </div>
                 
                    <div id="contentmid">
                  <p>  ALoha</p>
                   
   


                  <br>
                  <br>
                 
                    </div>
                    <div id="footer">
                        <center><p>bla </p></center>
                        </div>
            </div>
           
           
            <br>
    </body>
   
   
</html>
 

Anhänge

  • homepage.PNG
    homepage.PNG
    470,8 KB · Aufrufe: 8
Werbung:
Stichwort: z-index

Gebe den beiden „Grafiken“ links und rechts einen höheren z-index als deinem Sub-Menü.
 
Werbung:
hmm.. hab jetzt den beiden divs wo die fotos stehen einen z-index:5gegeben und das menü/submenü mit einem z-index:1 aber es passiert garnichts...

funktioniert das in jedem browser?
benutze firefox
 
Die Lösung ist garantiert die z-index-Eigenschaft. Nur kann man die keine genaue Lösung sagen da Du nicht den kompletten Quellcode deiner Seite oder besser einen Link zu deiner Seite gepostet hast. Ohne das kann man dir schwer helfen.

Moderation: Verschoben von HTML nach CSS, da es um Gestaltung geht.
 
Werbung:
Wie @threadi schon sagte, z-index funktioniert auf jeden Fall. Dazu musst du die Elemente allerdings zusätzlich mit z. B. position: relative; aus dem Dokumentfluss rausnehmen.
 
Klar, hast recht, Denkfehler. Sie lassen sich dann allerdings auf der Z-Achse bewegen.
 
Werbung:
Zurück
Oben