Drop down menu moving content

Discussion in 'Web Development & Web Hosting' started by twizzle, Nov 4, 2010.

  1. twizzle

    twizzle Gigabyte Poster

    1,842
    43
    104
    Nov 4, 2010 #1
    Remove Advertisement - Premium Membership
    I've been trying to work on a simple drop down menu using css and Javascript for a client. Problem i have is that while the menu works, any content below the menu moves down when the menu expands down. I'd liek the menu to overlay on any content below it when expanded. I've tried using z-index but that made no difference. SOOOOOOO as usual i'm asking for help!

    Heres the header code


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>website title here</title>

    <link rel="stylesheet" href="style.css" type="text/css">


    <script type='text/javascript' language="JavaScript">
    window.onload = function()
    {
    var lis = document.getElementById('cssdropdown').getElementsByTagName('li');
    for(i = 0; i < lis.length; i++)
    {
    var li = lis;
    if (li.className == 'headlink')
    {
    li.onmouseover = function() { this.getElementsByTagName('ul').item(0).style.display = 'block'; }
    li.onmouseout = function() { this.getElementsByTagName('ul').item(0).style.display = 'none'; }
    }
    }
    }
    /* or with jQuery:
    $(document).ready(function(){
    $('#cssdropdown li.headlink').hover(
    function() { $('ul', this).css('display', 'block'); },
    function() { $('ul', this).css('display', 'none'); });
    });
    */
    </script>
    </head>


    <body>
    <body oncontextmenu="return false">
    <div id="wrapper">
    <div id="fb">
    Follow us:<p>
    <a href="http://www.facebook.com"><img src="images/fblogo.png" border="0">&nbsp;Facebook</a>
    <p>
    <a href="http://www.twitter.com"><img src="images/twlogo.png" border="0">&nbsp;Twitter</a>
    </div>

    <div id="slogan"><br>
    <p>
    blah blah blah,<br>
    blah blah<br>
    blah balh
    </div>

    <div id="logo"><img src="images/logo.png"></div>

    <div id="menu">
    <ul id="cssdropdown">
    <li class="headlink">
    <a href="index.html">
    <img src="images/home-off.png" border="0"></a>
    </li>

    <li class="headlink">
    <img src="images/image2.png" >
    <ul>
    <li><a href="http://google.com/">DOMESTIC</a></li>
    <li><a href="http://yahoo.com/">COMMERCIAL</a></li>
    </ul>
    </li>

    <li class="headlink">
    <img src="images/image1.png" width="125" height="25" >
    <ul>
    <li><a href="http://amazon.com/">DOMESTIC</a></li>
    <li><a href="http://ebay.com/">COMMERCIAL</a></li>
    <li><a href="http://craigslist.com/">CCTV</a></li>
    </ul>
    </li>

    <li class="headlink">
    <img src="images/anotherimage.png" >

    </li>

    <li class="headlink">
    <img src="images/another1.png" >

    </li>

    <li class="headlink">
    <a href="index.html">
    <img src="images/about-us-off.png" border="0">
    </a>
    </li>
    </ul>
    </div>
    </div>



    then the index.php

    <?php
    include_once "header.php";

    ?>



    <div id="content">
    <div id="image">
    <img src="images/main1.png">
    </div>

    <div class="text">
    <br>
    Always ready to take that extra step to be the best...<br>
    <p>
    ...in the eyes of our customers.
    </div>


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



    and the css

    /* General */
    #cssdropdown, #cssdropdown ul { list-style: none; text-align:center;}
    #cssdropdown, #cssdropdown * { padding: 0; text-align:center; z-index:5;}

    /* Head links */
    #cssdropdown li.headlink { width: 125px; float: left; text-align: center; }
    #cssdropdown li.headlink a { display: block; z-index:5; }

    /* Child lists and links */
    #cssdropdown li.headlink ul { display: none; text-align: center; }
    #cssdropdown li.headlink:hover ul { display: block;}
    #cssdropdown li.headlink ul li a { background-color:#00acee; color:white; font-weight:bold;text-decoration:none;}
    #cssdropdown li.headlink ul li a:hover { background-image:url('images/button2.png'); width:125px; height:25px;color:#2566af; font-weight:bold;}

    #cssdropdown a { background-image:url('images/button1.png');height:25px; width:125px;}
    #cssdropdown ul li a:hover { text-decoration: none;}
    #cssdropdown li.headlink ul { background-position: bottom; padding-bottom: 3px;}

    body{
    font-size:0.85em;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    background-image:url('images/background.png');
    background-repeat: repeat;
    }

    #menu {
    text-align:center;
    margin: auto;
    width: 800px;
    }

    #wrapper {
    text-align: center;
    width: 1024px;
    margin: auto;
    }

    #logo{
    width:407px;
    margin: auto;
    }

    #fb {
    width: 100px;
    margin:auto;
    font-weight:bold;
    float: left;
    }

    #fb a{
    text-decoration:none;
    }

    #slogan{
    font-weight:bold;
    font-size:14px;
    float: right;
    margin:auto;
    width:200px;
    }

    #content{
    z-index:-2;
    margin: auto;
    text-align:center;
    width:1024px;
    }

    #image{
    width:375px;
    margin:auto;
    }

    .text {
    font-weight:bold;
    font-size:18px;
    color: #90cef4;
    text-align:center;
    }


    I hope someone understand what i mean. And thanks in advance
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,
  2. Notes_Bloke

    Notes_Bloke Terabyte Poster

    3,230
    54
    146
    Nov 4, 2010 #2
    Remove Advertisement - Premium Membership
    Hi mate,
    You need to add a position:absolute as below:-

    Code:
    #cssdropdown li.headlink ul { display: none; text-align: center;[B] position:absolute;[/B] }

    HTH

    NB
     
    Certifications: 70-210, 70-215, A+,N+, Security+
    WIP: MCSA
  3. LukeP

    LukeP Gigabyte Poster

    1,194
    41
    90
    Nov 4, 2010 #3
    is z-index something to look into too?
     
    WIP: Uhmm... not sure
  4. twizzle

    twizzle Gigabyte Poster

    1,842
    43
    104
    Nov 4, 2010 #4

    That didnt work, but i tried putting it as #cssdropdown li.headlink ul li a:hover { background-image:url('images/button2.png'); width:125px; height:25px;color:#2566af; font-weight:bold;position:absolute;} and this sort of works. The content now wont move down (as i want) but when i hover over a link then menu loses an option that then reappears when moving away from it. So thanks NB you helped get me closer.

    Luke, I'd tried a z-index but that didnt work either.
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,
  5. Notes_Bloke

    Notes_Bloke Terabyte Poster

    3,230
    54
    146
    Nov 4, 2010 #5
    Strange...on the test page I'd created, it worked fine with the position:absolute style addition, although the test page doesn't have the images or the include header on it (which may explain it).

    NB
     
    Last edited: Nov 4, 2010
    Certifications: 70-210, 70-215, A+,N+, Security+
    WIP: MCSA
  6. gosh1976

    gosh1976 Kilobyte Poster

    337
    18
    35
    Nov 4, 2010 #6
    You could try posting your question to the folks at the css-discuss list. There seems to be some knowledgeable people working in the industry that regularly help out with questions on that mail list. It's a pretty high volume mailing list so if you sign up you probably are going to want to create a folder and a filter/rule.

    Here's the link http://www.css-discuss.org/mailman/listinfo/css-d
     
    Certifications: A+, Net+, MCDST, CCENT, MCTS: Win 7 Configuring, CCNA
  7. twizzle

    twizzle Gigabyte Poster

    1,842
    43
    104
    Nov 5, 2010 #7
    NB, Your right. When i merge my 2 php files into one html and have the posistion:absolute as you suggested it works fine. SO that would suggest its the way the two php files work togther.
    The only reason i was doing it with 2 php files was to try to make loading the site faster and coding easier as the header (menu) needs to be on every page.
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,

Share This Page

Loading...
Remove Advertisement - Premium Membership
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Accept Learn More...