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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Location
    Auburn, WA
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thumbs up Nav bar not centering over container Div.

    For the life of me I cannot get my Navigation bar to center on top of my container div. I would like to keep the edges lined up evenly if possible.I am a first quarter student so any tips and pointers or resources would be helpful as well! Any-who, here is the link - CLICKY .

    The Code is as follows
    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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <title>Let Them Paws Run</title>
    </head>
    <body>
        <div class="menu">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="pitbulls.html">Pitbulls</a></li>
            <li><a href="bsl.html">BSL</a></li>
            <li><a href="media.html">Media</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>
    <div id="container">
    
    <div><h1 id="header"><span><img src="images/doglogo.jpg" width="960" height="125" alt="Let Them Paws Run Logo"></span></h1></div>
    
    <hr />
    <h1>Pitbulls...</h1>
    <p style="text-align:center">Pitbulls (and other dogs) are wrongly misjudged. My first real awakening to this was when I watched
    the video "The Pitbull Problem" by <a href="http://www.youtube.com/user/freakhyena/feed">Z</a>(below). I have been
    around and owned Pitbulls for the last 13+ years of my life and have not been around any bad ones that were raised
    properly. Even the few that did have bad owners were able to overcome their fears and insucurities and become
    perfectly acceptable family pets. I would never trust another dog around my 2 year old daughter as I do a Pitty.
    Slighty in doubt? Knowledge is key. Please view the video below, and browse around the sight for more information
    and arguements on why I feel you should "Ban the Deed, Not the Breed."</p>
    
    <table style="margin:auto; border-style:solid; border-color: rgb(101, 197, 246); border-width:5px;">
        <tr>
        <td><iframe width="480" height="360" src="http://www.youtube.com/embed/xeuy_PBlqz8" frameborder="0" allowfullscreen></iframe><td>
        <tr>
    </table>
    
    
    
    </div>
    </body>
    </html>
    css
    Code:
    a {
        color: rgb(101, 197, 246)
    }
    a:visited {
        color: rgb(69, 136, 171)
    }
    a:active {
        color: rgb(74, 79, 82)
    }
    body {
        background-color: rgb(101, 197, 246)
    }
    h1 {
        color: rgb(101, 197, 246)
    }
    p {
        color: rgb(95, 94, 94)
    }
    #container {
        width: 980px;
        height: 900px;
        margin: 0 auto;
        background-color: white;
        float: none;
        overflow: scroll;
        clear: both;
    }
    #header {
        text-align:center;
        padding: 0;
        margin: 0;
    }
    
    .menu {
        margin:auto;
        width: 960px;
    }
    .menu ul{
        font-family: "Arial";
        font-weight: bold;
        font-size: 13px;
        margin: 0;
        padding: 0;
        height: 20px;
        list-style-type: none;
        text-align: center;
    }
    
    .menu ul li {
        list-style:none;
        display: inline;
    }
    
    .menu ul li a{
        padding: 0.5em;
        text-decoration: none;
        float: left;
        color: white;
        background-color: rgb(101, 197, 246);
        border-color: rgb(101, 197, 246);
        border-style: none
    }
    .menu ul li a:hover {
        background-color: white;
        color: rgb(101, 197, 246);
    }
    .menu ul li a:active {
        background-color: rgb(69, 136, 171);
    }
    Again, thank you for the help! Hopefully I didn't mess it up to terribly. Haha.

    Kam
    Last edited by kamandskye; 03-02-2012 at 04:40 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Remove the float from .menu ul li a.

  • Users who have thanked SB65 for this post:

    kamandskye (03-02-2012)

  • #3
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    Do what SB65 said.

    Now that you don't have it floated you can also remove clear: both; in #container

    Also, removing the float now has your top links padding overflowing into the main container below.
    Add position: relative; to #container to resolve this.

  • Users who have thanked dan-dan for this post:

    kamandskye (03-02-2012)

  • #4
    New to the CF scene
    Join Date
    Mar 2012
    Location
    Auburn, WA
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks much guys! Tried fixing it for hours. You guys saved me major headache =] <3!


  •  

    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
    •