SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css dropdown menu hiding behind content

    I have a css dropdown menu that is hiding behind content, specifically the header and header image. Can you assist please?

    I’ve copied the code to the body of the email below.

    Thanks, Jeff

    Code CSS:
    Style.css
     
    body {
                    margin: 0;
                    padding: 0;
                    text-align: left;
                    font-family:Arial, Helvetica, sans-serif;
                    font-size: 13px;
                    color: #061C37;
                    background: #014D5D url(../images/background.png);
                    background-repeat:repeat-x;
    }
     
    *   {
       margin: 0 auto 0 auto;
       text-align:left;
     
     }
     
    h3  {
       color: #19448f;
       font-size: 14px;
       font-weight: bold;
       margin: 5px 0px;
    }
     
    #page {
       display: block; 
       height:auto;
       position: relative; 
       overflow: hidden; 
       width: 670px;
    }
     
    #login {
                    margin: 0px 5px 0px 0px;              
                    width: 72px;
                    height:35px;
                    float: right;
    }
     
    div {
    display: block;
    }
     
    .topnav {
       text-align:center;
       position:relative;
       margin-top:30px;
       font-size:16px;
       margin-left:-10px;
       width:121px;
       height: 35px;
       line-height: 35px;
       float:left;
       color:#CEEAEE;
       font-family:Arial, Helvetica, sans-serif;
       display: block;
    }
     
     
    .topnav a {
       text-decoration:none;
       color:#CDE2FC;
    }
     
    .topnav a:hover {
       text-align:center;
       border-bottom:none;
       color: #05EDFF;
       width:121px;
       height: 35px;
       line-height: 35px;
    /* background-image:url(../images/nav.png); */
    }
     
    #headerimage {
       width:670px;
       height:345px;
       background-color:#FFFFFF;
      }
     
     
    #headerimage .picture {
       position:relative;
       width:650px;
       height:325px;
       top:10px;
       background-image:url(../images/mainheader.jpg);
       background-repeat:no-repeat;
       margin-left:10px;
      }
     
    #headerTitle {
       position:relative;
       top:32px;
       left:105px;
       font-size:30px;
       color:#FFFFFF;
       font-family:Arial, Helvetica, sans-serif;
    }
     
    #headerTitleLogo {
       position:relative;
       top:-35px;
       left:-1px;
       font-size:14px;
       color:#A9C8FA;
       font-family:Arial, Helvetica, sans-serif;
    }
     
    .contentBox {
       width:670px;
       height:auto;
       background-color:#FFFFFF;
       margin-top:10px;
    }
     
    .contentBox .innerBox {
       position:relative;  
       top:10px;
       margin-left:10px;
       width:650px;
       height:auto;
       padding-bottom:20px;
       background-image:url(../images/content_back.png);
       background-repeat:repeat-x;
     
    }
     
    .contentTitle {
       font-size:19px;
       margin-bottom:0px;
       padding-top:18px;
       padding-bottom:13px;
       margin-left:3px;
       margin-top:15px;
    }
     
    #contentText {
       font-size:12px;
       line-height:normal;
       margin-left:13px;
       margin-right:13px;
     
    }
     
    /* #rightbox {
       font-size:12px;
       line-height:normal;
       float:left;
       width:320px;
       padding-right:5px;
       padding-bottom:25px;
    }
     
    #leftbox {
       font-size:12px;
       line-height:normal;
       text-align:justify;
       float:left;
       width:320px;
       padding-left:5px;
       padding-bottom:25px;
    }
    */
     
    #footer {
       width: 670px;
       height: auto;
    /* background: url(../images/footer.png) no-repeat; 
       clear:both;
    */
       background:white;
       text-align:center;
       font-size:10px;
       font-family:sans-serif;
       padding-top:10px;
    }
     
    #footer a {
       text-decoration:none;
       font-size:10px;
       color:#0C61C9;
    }
     
    html, body {
       text-align: center;
    }
     
    p {  
       text-align: left;
       }

    Code CSS:
    Cssmenu.css
     
    .cssmenu{
                    border:none;
                    border:0px;
                    margin:0px;
                    padding:0px;
                    font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
                    font-size:13px;
                    font-weight:bold;
                    }
    .cssmenu ul{
                    background:#333333;
                    height:30px;
                    list-style:none;
                    margin:0;
                    padding:0;
                    }
    .cssmenu li{
                    float:left;
                    padding:0px;
                    }
    .cssmenu li a{
                    background:#333333 url('../images/seperator.gif') bottom right no-repeat;
                    color:#cccccc;
                    display:block;
                    font-weight:normal;
                    line-height:30px;
                    margin:0px;
                    padding:0px 25px;
                    text-align:center;
                    text-decoration:none;
                    }
    .cssmenu li a:hover, .cssmenu ul li:hover a{
                    background: #2580a2 url('../images/hover.gif') bottom center no-repeat;
                    color:#FFFFFF;
                    text-decoration:none;
                    }
    .cssmenu li ul{
                    background:#333333;
                    display:none;
                    height:auto;
                    padding:0px;
                    margin:0px;
                    border:0px;
                    position:absolute;
                    width:225px;
                    z-index:200;
                    /*top:1em;
                    /*left:0;*/
                    }
    .cssmenu li:hover ul{
                    display:block;
     
                    }
    .cssmenu li li {
                    background:url('../images/sub_sep.gif') bottom left no-repeat;
                    display:block;
                    float:none;
                    margin:0px;
                    padding:0px;
                    width:225px;
                    }
    .cssmenu li:hover li a{
                    background:none;
     
                    }
    .cssmenu li ul a{
                    display:block;
                    height:30px;
                    font-size:11px;
                    font-style:normal;
                    margin:0px;
                    padding:0px 10px 0px 15px;
                    text-align:left;
                    }
    .cssmenu li ul a:hover, .cssmenu li ul li:hover a{
                    background:#2580a2 url('../images/hover_sub.gif') center left no-repeat;
                    border:0px;
                    color:#ffffff;
                    text-decoration:none;
                    }
    .cssmenu p{
                    clear:left;
                    }

    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" />
    <link rel="stylesheet" type="text/css" href="styles/style.css" />
    <link rel="stylesheet" type="text/css" href="styles/cssmenu.css" />
    <title>Linn Group Asset Management</title>
    
    <!--pop up box script for services page with session cookie-->
    <script>
    
    //Alert message once script- By JavaScript Kit
    //Credit notice must stay intact for use
    //Visit [url]http://javascriptkit.com[/url] for this script
    
    //specify message to alert
    var alertmessage="hello”
    
    ///No editing required beyond here/////
    
    //Alert only once per browser session (0=no, 1=yes)
    var once_per_session=1
    
    function get_cookie(Name) {
      var search = Name + "="
      var returnvalue = "";
      if (document.cookie.length > 0) {
        offset = document.cookie.indexOf(search)
        if (offset != -1) { // if cookie exists
          offset += search.length
          // set index of beginning of value
          end = document.cookie.indexOf(";", offset);
          // set index of end of cookie value
          if (end == -1)
             end = document.cookie.length;
          returnvalue=unescape(document.cookie.substring(offset, end))
          }
       }
      return returnvalue;
    }
    
    function alertornot(){
    if (get_cookie('alerted')==''){
    loadalert()
    document.cookie="alerted=yes"
    }
    }
    
    function loadalert(){
    alert(alertmessage)
    }
    
    if (once_per_session==0)
    loadalert()
    else
    alertornot()
    
    </script>
    </head>
    
    <body>
        <div id="page">
                    <div id="login">
                    <a href="/login.php"><img src="/images/login.jpg"></a>
                    </div>
                    <?php include("nav.php");
                    ?>
          
                    </div>
        <div id="headerimage">
                    <div class="picture">
                    <div id="headerTitle">Management</div>
                <div id="headerTitleLogo"><img src="/images/lglogo.jpg"></div>
            </div>
        </div>
           <div class="contentBox">
                    <div class="innerBox">
                    <div class="contentTitle">Welcome to </div>
              <div id="contentText">
    <p>Welcome to </p>  
         </div>
    
           </div>
                      </div>
       <div id="footer">
                      <?php include("footer.html"); 
                       ?>
    
       </div>
    </body>
    </html>
    Last edited by Stevie D; Jun 22, 2012 at 15:23. Reason: CSS and HTML code tags added

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi jpearl123. Welcome to the forums.

    Preferably post a live link, or put the code into a single file (CSS in the head) that has PHP removed, so we can actually test it in our own browser. At the moment we don't have a working version of the page to debug.

    Also, what browser is it failing in?

  3. #3
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hi jpearl123. Welcome to the forums.

    Preferably post a live link, or put the code into a single file (CSS in the head) that has PHP removed, so we can actually test it in our own browser. At the moment we don't have a working version of the page to debug.

    Also, what browser is it failing in?
    the nav.php is a dropdown css menu......that is what is being hidden behind the header....

  4. #4
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the php is nav.php which simply the html of the html dropdown menu which is being hidden behind the header and header image, all browsers.....

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Well, I can only guess by looking through your code. The first thing I'd suggest is to remove overflow: hidden from the #page styles, because that will most likely prevent any dropdown items from being visible:

    Code:
    #page {
       display: block; 
       height:auto;
       position: relative; 
       overflow: hidden; 
       width: 670px;
    }

  6. #6
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Well, I can only guess by looking through your code. The first thing I'd suggest is to remove overflow: hidden from the #page styles, because that will most likely prevent any dropdown items from being visible:

    Code:
    #page {
       display: block; 
       height:auto;
       position: relative; 
       overflow: hidden; 
       width: 670px;
    }
    that fixed it, thank you!

  7. #7
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jpearl123 View Post
    that fixed it, thank you!
    do you have any ideas to make the footer look better?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jpearl123 View Post
    do you have any ideas to make the footer look better?
    Heh heh, at this stage I have no idea what it looks like.

  9. #9
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Well, I can only guess by looking through your code. The first thing I'd suggest is to remove overflow: hidden from the #page styles, because that will most likely prevent any dropdown items from being visible:

    Code:
    #page {
       display: block; 
       height:auto;
       position: relative; 
       overflow: hidden; 
       width: 670px;
    }
    Ralph.m I know this post is old but i have been dealing with this problem for along time . I have had so called coding "Pros" and even spent alittle money trying to fix this. I was told and tried so many other things , z-index: 1 , removing any and everything flash and nothing. Thanks alot for sharing your skills and replying

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by steelcitychaos View Post
    Ralph.m I know this post is old but i have been dealing with this problem for along time . I have had so called coding "Pros" and even spent alittle money trying to fix this. I was told and tried so many other things , z-index: 1 , removing any and everything flash and nothing. Thanks alot for sharing your skills and replying
    No probs. So this fixed your problem too? If so, that's great.

    Welcome to the forums.

  11. #11
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thank you

    this is resolved....


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •