SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Threaded View

  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


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
  •