menu is behind image

Question

patuie 0 Newbie Poster

13 Years Ago

My fly out menu hides behind an image on the web page.

HTML

/*   menu  */
/* common styling */
.menu {font-family: arial; font-size: 14px; width:200px;  position:relative; margin: 5px;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; 
    width:170px; text-align:left; border:1px  solid #000; border-width:1px 1px 1px 1px; 
    background:#FF9933; line-height:30px; font-size:14px; font-weight: bold; padding:5px;}
.menu ul {padding:0; margin:0;list-style-type: none;}
.menu ul li {float:right; margin-right:25px; position:relative;}
.menu ul li ul {display: none;}


/* specific to non IE browsers */
.menu ul li:hover a {color:#000; background:#CC3333;}
.menu ul li:hover ul {display:block; position:absolute;  top:0; left:150px; width:150px; 
    z-index:1;}
.menu ul li:hover ul li a.hide {background:#33CC66 ; color:#000;}
.menu ul li:hover ul li a {display:block; background:#33CC66 ; color:#000; width:150px; 
    padding: 2px;}
.menu ul li:hover ul li:hover a.hide {width:150px; }
.menu ul li:hover ul li a:hover {background:#33CCCC; color:#000;}
.menu ul li:hover ul li ul {display:none; }
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:140px; top:0; color:#000;}
.menu ul li:hover ul li:hover ul li a {display:block; width:175px; background:#FF99CC; color:#000;}
</style>

CSS

#content { 
    width:1000px; 
    height:900px;
    float: right; /* switch this to left and below to right to change the column locations */

    border: thick  solid #663300; /* remove this line to remove the border */
    background-image: url(images/32a.jpg);
    padding: 0;
    font-size: 16px;
    font-family: arial;
    overflow:hidden;

}


.picture .large { 
    display:none; 
 } 

.picture:hover .large { 
 display:block; 
 top: 200px; 
 right:50px;
 border:none;
 position:absolute;
 z-index: 1; 
}

Thanks

web-design

Edited 11 Years Ago by mike_2000_17 because: Fixed formatting

3 Contributors
9 Replies
139 Views
4 Days Discussion Span
Latest Post 13 Years Ago Latest Post by patuie

floatingDivs 21 Junior Poster

13 Years Ago

Try placing a z-index on the inner UL.

.menu ul li:hover ul li:hover ul { z-index: 2; }

anderson1234 0 Newbie Poster

13 Years Ago

Thanks Dude!

I was facing the same problem. Now rectified. Thanks again!

floatingDivs 21 Junior Poster

13 Years Ago

Didn't work. I was wondering if it is because I don't have a code for the small images. I have it so when you hover over the image a larger one appears.

Could you post your entire page's code? Like, all the HTML and CSS? I'll take a look at it in 10-12 hours once I come home from work.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

patuie 0 Newbie Poster · Answer 1 · 2011-03-04T20:17:48+00:00

Try placing a z-index on the inner UL.
.menu ul li:hover ul li:hover ul { z-index: 2; }

Didn't work. I was wondering if it is because I don't have a code for the small images. I have it so when you hover over the image a larger one appears.

patuie 0 Newbie Poster · Answer 2 · 2011-03-05T05:12:04+00:00

Could you post your entire page's code? Like, all the HTML and CSS? I'll take a look at it in 10-12 hours once I come home from work.

Thank you I really appreciate you taking time to help me. This is my 1st web page. I don't plan on putting it on the web. I was going to make disks for all the family.

CSS

html, body { 
    width: 1000px;
    height: 125%;
    margin:  0;
    padding: 0; 
    position:relative;
}

#container { 
    width:1075px; 
    height:1200px;
    margin: 20px 0px 0px 30px; 
    padding: 10px 20px 0px 100px;
    background-image: url(images/wheat.jpg);
    border: thick solid #006666;
}

h1 {
    text-align: center; 
    font-family: arial; 
    font-size: 40px; 
}

#content { 
    width:1000px; 
    height:900px;
    float: right; /* switch this to left and below to right to change the column locations */

    border: thick  solid #663300; /* remove this line to remove the border */
    background-image: url(images/32a.jpg);
    padding: 0;
    font-size: 16px;
    font-family: arial;
    overflow:hidden;
}

.picture .large { 
    display:none; 
 } 

.picture:hover .large { 
 display:block; 
 top: 200px; 
 right:50px;
 border:none;
 position:absolute;
 z-index: 1; 
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Menu</title>
 <style type="text/css">

/*   menu  */
/* common styling */
.menu {font-family: arial; font-size: 14px; width:200px;  position:relative; margin: 5px;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; 
    width:170px; text-align:left; border:1px  solid #000; border-width:1px 1px 1px 1px; 
    background:#FF9933; line-height:30px; font-size:14px; font-weight: bold; padding:5px;}
.menu ul {padding:0; margin:0;list-style-type: none;}
.menu ul li {float:right; margin-right:25px; position:relative;}
.menu ul li ul {display: none;}


/* specific to non IE browsers */
.menu ul li:hover a {color:#000; background:#CC3333;}
.menu ul li:hover ul {display:block; position:absolute;  top:0; left:150px; width:150px; 
    z-index:1;}
.menu ul li:hover ul li a.hide {background:#33CC66 ; color:#000;}
.menu ul li:hover ul li a {display:block; background:#33CC66 ; color:#000; width:150px; 
    padding: 2px;}
.menu ul li:hover ul li:hover a.hide {width:150px; }
.menu ul li:hover ul li a:hover {background:#33CCCC; color:#000;}
.menu ul li:hover ul li ul {display:none; }
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:140px; top:0; color:#000;}
.menu ul li:hover ul li:hover ul li a {display:block; width:175px; background:#FF99CC; color:#000;}


</style>

</head>

<body>


<!-- Site navigation menu -->
<div class="menu">


<ul>
        <li><a class="hide" href="peart_family_tree.html"target="_top">Peart Family Tree
                      &nbsp; &nbsp; &nbsp; &nbsp; 1699 - 1815</a> 
    <ul>     

            <li> <a href="isaac_peart_1699.html"target="_top"> Isaac Peart 
                &nbsp;&nbsp; &nbsp;1699-1774</a></li>
            <li> <a href="john_peart_1727.html"target="_top"> John Peart
                 &nbsp;&nbsp; &nbsp;1727-1798</a></li>
            <li> <a href="emerson_peart_1777.html"target="_top"> Emerson Peart 1777-1832</a></li>
            <li><a href="thomas_peart.html"target="_top">Thomas Peart 1804-1878</a></li>
            <li><a href="oneida_pioneer.html"target="_top">Oneida Pioneer 1917  </a></li>

    </ul>
</li>    
</ul>


<ul>
        <li><a class="hide" href="peart_family_tree.html"target="_top">Peart Family Tree
                           &nbsp; &nbsp; &nbsp; &nbsp;1816 - 1947</a> 
       <ul>
            <li><a href="emerson_peart_1844.html"target="_top">Emerson Peart 1844-1917</a></li>

            <li> <a href="the_pearts_1832.html"target="_top">Peart's 1832  </a></li>
            <li><a href="e_coatsworth_peart_1881.html"target="_top"> Emerson C Peart 1881-1964 </a></li>
            <li><a href="hewitt_1887.html"target="_top">Hewitt 1887 </a></li> 
            <li><a href="margaret_peart_1913.html"target="_top">Margaret Peart
                 &nbsp; &nbsp; &nbsp;1913-1990  </a></li>
            <li><a href="annie_peart_1916.html"target="_top">Annie Peart 1916-1916  </a></li>
            <li><a href="laura_peart_1917.html"target="_top">Laura Peart 1917-1957 </a></li>
            <li><a href="walter_peart_1918.html"target="_top">Walter Peart 1918-1996  </a></li>
            <li><a href="katie_peart_1921.html"target="_top">Katie Peart 
                &nbsp; &nbsp;1921-29</a></li>
            <li><a href="k_peart_1930-39.html"target="_top"><b><u>Katie Peart 
                &nbsp; &nbsp;1930-39 </u></b></a></li>  
            <li><a href="katie_1940-42.html"target="_top">Katie Peart 
                &nbsp; &nbsp;1940-42</a></li>
            <li><a href="katie_1943-46.html"target="_top">Katie Peart 
                &nbsp; &nbsp;1943-46</a></li>
            <li><a href="marion_peart.html"target="_top">Marion Peart
                &nbsp; &nbsp; 1925-1997  </a></li>


      </ul> 
    </li>


</ul>  


</div>
</body>
</html>

floatingDivs 21 Junior Poster · Answer 3 · 2011-03-05T06:34:19+00:00

patuie,

You're almost there! :)

I realise this may be a private site, so if you don't feel comfortable sharing it with the entire forum, feel free to PM me. What I need is an EXACT copy of the site that you screen-printed and posted as an image. Without seeing the rest of the code, I can't really recognise where the problem is located.

patuie 0 Newbie Poster · Answer 4 · 2011-03-05T20:22:05+00:00

patuie,
You're almost there! :)
I realise this may be a private site, so if you don't feel comfortable sharing it with the entire forum, feel free to PM me. What I need is an EXACT copy of the site that you screen-printed and posted as an image. Without seeing the rest of the code, I can't really recognise where the problem is located.

Is this what you wanted?

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

<title>katie_peart_1930s</title>
</head>

Eileen & Katie
              
              
              
              
Katie<br />
<br />
              
       
Katie Peart in grade 9, 1936<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

              
              
              
              
              
              
              
              
Katie had a pen pal in Scotland,
Margaret Henderson<br />
<br /> <br /> <br />
             
             

Eileen 1930, Katies sister</p>

floatingDivs 21 Junior Poster · Answer 5 · 2011-03-05T22:01:01+00:00

Hey patuie,

I see you are online and I'm going to send you a private PM.

patuie 0 Newbie Poster · Answer 6 · 2011-03-08T05:21:37+00:00

Hey patuie,
I see you are online and I'm going to send you a private PM.

Every thing works great
Thanks again