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 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Nav Bar isnt aligning properly to other elements that are

    I am using CSS and HTML on a site I am creating for a friend. You can see it here: http://krystlekleen.batcave.net/testpages

    This is what my style sheet looks like, and it has done everything correctly except for centering that nav bar over top of the logo image.
    Code:
    body  {  background:#CCFFFF url(bkgdimg2.png) repeat-y;
             background-attachment:fixed;
             background-position:center;  }
          
    #foreground {
                 text-align: center; }
    and here is my html code:
    Code:
    <link type="text/css" rel="stylesheet" href="stylet.css">
    <style type="text/css">
       ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}
       li{float:left;}a:link,a:visited{display:block;width:200px;font-weight:bold;
           color:#9966FF;background-color:#6600CC;text-align:center;
           padding:4px;text-decoration:none;text-transform:uppercase;}
           a:hover,a:active{background-color:#6600CC;} </style> 
    </head>
          <body>
          <div id="foreground">
          <ul><li><a href="#catalogue">Catalogue</a></li><li><a href="#contact">Contact Me</a></li></ul>
          <img src="logo.png">
    I'm not understanding what is going wrong, I used this same method on this page:http://krystlekleen.batcave.net for the nav bar and it works great. Any help is greatly appreciated. Thank you for reading

  • #2
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    I dont know if this is the fix you want but this will align your navigation center.

    Code:
    #foreground {
        text-align: center;
    }
    change too

    Code:
    #foreground {
        text-align: center;
        margin:0 auto;
        width:864px;
    }

  • Users who have thanked SeattleMicah for this post:

    DazednConfused (06-12-2012)

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the help, I did change the css code and that did left align the nav bars with the logo. So then I went into my html code and changed the width of the buttons to 415px, and that evened it out nicely. I appreciate the help


  •  

    Posting Permissions

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