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 to the CF scene
    Join Date
    Mar 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Why is my UL not centering properly?

    Hey guys!

    So I have started HTML for the first time yesterday, and CSS for the first time today, so please don't use advanced website dev lingo on me!

    The code is short. I have a header, body, and footer, all in a container div, and I have a CSS style sheet that the HTML links to.

    My issue?

    My only issue currently lies with my most recent addition to the code: My navbar, which is basically an unorganized list of hyperlinks (<UL> tag). My CSS code gives it the horizontal navbar formation.

    Onto the problem. Everything on my site centers perfectly, except for this navbar. Below is a picture of the website and the non-centered navbar.

    Please note that the body, the title, and all of the other text IS aligned. The navbar circle in green is a little bit to far to the right.

    This image has been resized. Click this bar to view the full image.




    HTML:
    Code:
    <HTML>
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <div id="container">
    <div id="header"><TITLE>DemonicMC - Stay Demonic!</TITLE>
    <img src="images/demonicmc_title.png"><BR>
    <P><B>Welcome to the DemonicMC community site!</B></P>
    <a href="http://www.demonicmc.com">DemonicMC</a>
    </div
    <div id="body">
    <div id="navbar">
    <ul>
    <li><a href="default.asp">Home</a></li>
    <li><a href="news.asp">News</a></li>
    <li><a href="contact.asp">Contact</a></li>
    <li><a href="about.asp">About</a></li>
    </ul> 
    </div>
    <div style="background-image: url(images/content_bg.png); height: 100%; width: 900px; padding-top: 0px; margin-top: 0px;">
    Body content!
    </div>
    <div id="footer">
    Footer!
    </div>
    </HTML>

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


    CSS:
    Code:
    html, #container, #body{
    width:100%; 
    height:100%;
    color:#FFFFFF; 
    }
    #footer{
    text-align:center;
    position:relative;
    bottom:0;
    }
    body
    {
    background-image:url('images/demonicmc_bg.png');
    position:absolute;
    background-repeat:repeat-y;
    text-align: center;
    font-family:"Carter One",Times New Roman,Georgia,Serif;
    }
    #header{
    text-align: center;
    }
    #navbar ul li { 
    a:link color:#FF0000;
    display: inline; 
    margin-left: auto;
    margin-right: auto;
    padding: 0em 0em;
    background-color: #000000;
    }

    Nothing seems out of line to me. I don't see any factors that could cause it to become offset like this. Any ideas?

    Thanks!

    -Baker


    [As a side note, if I made any unnecessary mistakes, or used the wrong terms for certain things, please let me know. I won't get defensive, I'd rather learn it now!]

  • #2
    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 AdamB,
    Look at this example of centering a ul.

    Also, check out the link in my signature line about validating. Both validators, one for markup and one for CSS, are excellent learning tools and a big help in correcting your code.
    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

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Location
    MA, USA
    Posts
    6
    Thanks
    0
    Thanked 1 Time in 1 Post
    browsers use a default left margin or padding on lists to indent them. You'll need to either zero them out, or equal them out.

    ul { margin: 0; padding: 0; } will fix things.

  • #4
    New to the CF scene
    Join Date
    Mar 2014
    Location
    Derby
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Its probaly better to add the { margin: 0; padding: 0; } at the very start of you css and not for a specific tag

  • #5
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think it because many ul in one place, if you just have one ul there, it should be centered perfectly.


  •  

    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
    •