Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2009
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can anyone tell me why my links won't line up

    Hi there,My vaigation links don't seem to line up. Heres the code.

    <div id="NavigationLinks">
    <ul id="NavigationLinks">
    <li><a href="test1.HTML" class="active" >HOME</a></li>
    <li><a href="Facts.HTML" class="active" >KNOW YOUR FACTS</a></li>
    <li><a href="Activity.html" class="active" >ACTIVITIES</a></li>
    <li><a href="Contact.HTML" class="active" >FORUM</a></li>
    <li><a href="UsefulLinks.html" class="active" >USEFUL LINKS</a></li>
    </ul>
    </div><!-- end of NavigationLinks -->

    -----------------------------------------------------------------------------

    <style type="text/css">
    html,body{
    margin:0;
    padding:0;
    background-color:#000;
    }

    body{
    color:#FFF;
    font: 76% arial,sans-serif;
    text-align:center;
    background: #565656 url(Background2.jpg) center fixed;
    background-repeat: no-repeat;
    }
    p{
    margin:0 10px 10px
    }
    a{
    display:block;
    color: #981793;
    padding:10px
    }

    div#header h1{
    height:80px;
    line-height:80px;
    margin:0;
    padding-left:10px;
    background: #EEE;
    color: #79B30B
    }

    div#container{
    width:900px;
    margin:0 auto;
    text-align:left

    }

    div#content p{
    line-height:1.4
    }

    div#footer p{
    margin:0;
    padding:5px 10px
    }



    div#left{
    background:#B9CAFF;
    float:left;
    width:150px
    }

    div#right{
    background:#FF8539;
    float:right;
    width:750px
    }

    div#footer{
    background: #333;
    color: #FFF;
    clear:both;
    width:100%
    }

    #NavigationLinks {
    margin: 0;
    padding: 0 0 20px 10px;
    }

    #NavigationLinks li {
    margin: 0;
    padding: 0;
    display: inline;
    list-style: none;
    }

    NavigationLinks a {
    float: left;
    line-height: 14px;
    font-weight:bold;
    margin: 0 10px 4px 10px;
    text-decoration: none;
    color: #ffffff;
    }

    #NavigationLinks a.active, #NavigationLinks a:hover {
    border-bottom: 4px solid #000000;
    padding-bottom: 2px;
    color: grey;

    }

    #NavigationLinks a:hover {
    color:#333333;
    }


    </style>

    Any help please would be much apreciated

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,859
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    NavigationLinks a {
    float: left;
    line-height: 14px;
    font-weight:bold;
    margin: 0 10px 4px 10px;
    text-decoration: none;
    color: #ffffff;
    }
    should be
    Code:
    #NavigationLinks a {
    float: left;
    line-height: 14px;
    font-weight:bold;
    margin: 0 10px 4px 10px;
    text-decoration: none;
    color: #ffffff;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello GBizzle99,
    You want them lined up to the left or horizontal?

    Either way, there are some errors there that the validator can help you find. have a look at the links about validating in my sig below.

    Here is an example of a horizontal menu that you might be able to copy - http://nopeople.com/CSS/anotherNavBar/index.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Apr 2009
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ahh cheers guys, there working now. Soo next question......

    I want the links to appear on top of an image underneath. So i tried putting background image on in the css but it only shows underneath each link, and I want to go all the way across, like a Nav Bar. How do I go about this, I've heard about absolute postioning, but will this still follow my template if I start messing around with this ?

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,859
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I want the links to appear on top of an image underneath. So i tried putting background image on in the css but it only shows underneath each link, and I want to go all the way across, like a Nav Bar.
    <div id="NavigationLinks">
    <ul id="NavigationLinks">
    First of all your markup is invalid. You can't have multiple elements with same id attribute value in a document. Just remove that <div>, or remove that id from <div>, and then apply the background on your <ul>

    Have a look at http://matthewjamestaylor.com/blog/b...rowser-support, to see how to make a horizontally centered menu. There, you may apply the background on the container div, having id="centeredmenu"
    Last edited by abduraooft; 05-03-2009 at 09:46 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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