www.webdeveloper.com
Results 1 to 4 of 4

Thread: Problem with getting foot menu to appear inline (using css and html)

  1. #1
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125

    Smile Problem with getting foot menu to appear inline (using css and html)

    I am trying to update my website by breaking up some of the longer pages. Hopefully it will download a bit quicker!
    I am using the same design for all pages and am trying to link all html files to an index.css file. For some reason the footer menu doesn't work properly. I have tried to cut and past it from the current version of my site but that isn't working either.

    This is how the page footer should look like.
    This is how it looks at the moment

    You can see all the code by clicking on file source for the website page. I have C&P the main code below.

    This is the html code for the footer menu;

    Code:
    <div id="foot-menu">
    <nav>
     <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="Free-studies-to-download.html">Studies</a>
       <ul>
        <li><a href="Free-studies-to-download.html#study-1">What do Christians believe about God?</a></li>
        <li><a href="Free-studies-to-download.html#study-2">Accepted as you are</a></li>
        <li><a href="Free-studies-to-download.html#study-3">Reconciliation</a></li>
        <li><a href="Free-studies-to-download.html#study-4">What is Baptism?</a></li>
        <li><a href="Free-studies-to-download.html#study-5">Forgiveness</a></li>
        <li><a href="Free-studies-to-download.html#study-6">The Holy Spirit</a></li>
        <li><a href="Free-studies-to-download.html#study-7">Satan, the Devil</a></li>
        <li><a href="Free-studies-to-download.html#study-8">1 Kings and Elijah</a></li>
       </ul></li>
      <li><a href="Free-books-to-download.html">Books</a>
       <ul>
        <li><a href="Free-books-to-download.html#study-1">What do Christians believe about God, Jesus and the Holy Spirit?</a></li>
        <li><a href="Free-books-to-download.html#study-2">All 8 Bible Studies</a></li>
        <li><a href="Free-books-to-download.html#study-3">Both Books Combined</a></li>
       </ul></li>
      <li><a href="author.html">Author</a><li>
      <li><a href="http://what-do-christians-believe.co.uk/wp">Food For Thought Blog</a></li>
      <li><a href="contact-what-do-christians-believe.html">Contact Us</a>
       <ul>
        <li><a href="contact-what-do-christians-believe.html">Simple Form - preferred method</a><li>
        <li><a href="MAILTO:info@what-do-christians-believe.co.uk">By email</a><li>
       </ul></li>
      <li><a href="sitemap.html">Site Map</a></li>
     </ul>
    </nav>
     </div>
    <div id="drop-down">
    <a href="#guides">To Menu</a>
     </div>
    This is the css code for the above menu;

    Code:
    #foot-menu {
        position: relative; width:660px;
        margin: 5px auto;
        padding: 5px 5px 40px;
        font-family: Arial,Verdana;
        font-size: 1.00em;
        list-style: none;
    }
    #foot-menu ul li {
        display: inline;
        float: left;
        position: relative;
    }
    #foot-menu li ul {
        display: none;width:auto;
    }
    #foot-menu ul li a {
        display: inline;
        float:left;
        padding: 0 10px 0 10px;
        border-right-color: #fff;
        border-right-style: solid;
        border-right-width: 1px;
        border-left-color: #fff;
        border-left-style: solid;
        border-left-width: 1px;
        text-decoration: none;
        color: blue;
        white-space: nowrap;
        background: silver;
    }
    #foot-menu ul li a:hover {
        background: #ff7f50;
    }
    #foot-menu li:hover ul {
        display: inline;
        position: absolute;
        top:18px;
        left:-1px; 
        margin:0;
        padding:1px 0;
        border-right-color: #fff;
        border-right-style: solid;
        border-right-width: 1px;
        border-left-color: #fff;
        border-left-style: solid;
        border-left-width: 1px;
        background: #fffff0;
    }
    #foot-menu li:hover li {
        z-index: 200;
        float: none;
        font-size: 0.90em;
    }
    #foot-menu li:hover a {
        background: #fffff0;
    }
    #foot-menu li:hover li a:hover {
        background: #ff7f50;
    }
    a {
        text-decoration: none; 
     }
    #drop-down {display: none;}
    What do I need to do to resolve this problem?

    Thanks for your help.

  2. #2
    Join Date
    Mar 2011
    Location
    The Pleiades
    Posts
    31
    Change this:
    Code:
    #foot-menu {
        position: relative; width:660px;
        margin: 5px auto;
        padding: 5px 5px 40px;
        font-family: Arial,Verdana;
        font-size: 1.00em;
        list-style: none;
    }
    To this:
    Code:
    #foot-menu ul {
        position: relative; width:660px;
        margin: 5px auto;
        padding: 5px 5px 40px;
        font-family: Arial,Verdana;
        font-size: 1.00em;
        list-style: none;
    }
    You are setting your <ul> styles on your <div>.

    Kind regards,

    LC.

  3. #3
    Join Date
    Aug 2012
    Posts
    155
    You are missing a closing > on the div before your foot-menu div:
    Code:
    </div
    
    <div id="foot-menu">
    Add it in and your menu should work as expected
    Code:
    </div>
    
    <div id="foot-menu">

  4. #4
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125
    Thanks for your reply. Having read your reply I went back and looked at the current version. I hadn't named the division as you have shown in the test version.

    I had to add 3 more </div> to get it to work exactly the same way!

    But at least it works as it should now, which it couldn't have done without your help.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles