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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Sep 2008
    Posts
    697
    Thanks
    8
    Thanked 17 Times in 16 Posts

    Centering horizontal <ul> inside <div>

    Hey guys, Im having a bit of a confusing problem at the moment, im trying to center my navigation menu inside my fixed width.


    This is how it currently looks like:



    Im trying to center it so it doesnt matter how many <li>'s there are it will still be centered.

    Here is my HTML:

    PHP Code:
    <center>
    <
    div class="main_menu">
        <
    ul>
        <
    li> <a href="#">Home</a></li>
        <
    li><a href="#">About Us</a></li>
        <
    li><a href="#">Services</a></li>
        <
    li> <a href="#">Portfolio</a></li>
        <
    li> <a href="#">Portfolio</a></li>
        <
    li> <a href="#">Portfolio</a></li>
        </
    ul>
    </
    div>
    </
    center
    And here is my CSS:
    Code:
    .main_menu
    {
    	border:1px solid;
    	width:898px;
    	margin-bottom:5px;
    	background-color:#333333;
    	height:30px;
    	line-height:30px;
    	color:#000000;
    	position:relative;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:13px;
            text-align: center;	
    }
    .main_menu ul
    {
            position:relative;
            text-align: center;
            margin: 0 auto;
    	list-style:none;
    	cursor:pointer;
    }
    .main_menu ul li
    {
            list-style-position:inside;
            cursor:pointer;
            text-align: center;
    	padding:0;
    	margin:0;
    	float:left;
    	background:#333333;
    }
    .main_menu ul li a
    {
            cursor:pointer;
            text-align: center;
    	color:#FFF;
    	display:block;
    	text-decoration:none;
    	padding:0 25px;
    }
    .main_menu ul li a:hover
    {
            cursor:pointer;
            text-align: center;
    	background:#3ea5ea;
    	color:#000;
    }
    MY MSN: Sith717@Hotmail.com
    PHP, HTML, and CSS Coding, Logo and Web Design - Professionally done.
    PM me anytime for HTML, PHP or web design help. I will be glad to help you out.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The <center> tag isn't going to work. It is also deprecated. Why you are even using it in the first place beats me. This should help

    http://www.cssplay.co.uk/menus/centered.html
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Maybe use this demo as a guide
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #linksContainer {
                    width: 900px;
                    margin: 0px auto 0px auto;
                    overflow: hidden;
                    border: 1px solid red}
                #linksList {
                    list-style-type: none;
                    margin: 0px 0px 0px 0px;
                    padding: 0px 0px 0px 0px;
                    float: left;
                    position: relative;
                    left: 50%}
                #linksList li {
                    float: left;
                    margin: 0px 20px 0px 20px;
                    position: relative;
                    right: 50%}
            </style>
            <script type="text/javascript"></script>
        </head>
        <body>
            <div id="linksContainer">
                <ul id="linksList">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Portfolio</a></li>
                </ul>
            </div>
        </body>
    </html>

  • Users who have thanked bullant for this post:

    bucket (04-16-2011)

  • #4
    Regular Coder
    Join Date
    Sep 2008
    Posts
    697
    Thanks
    8
    Thanked 17 Times in 16 Posts
    Bullant, thank you so much my mate, you have helped me out alot!

    Works perfectly.

    Also one more thing, how would I do it so i can add images on both ends of the navbar?
    MY MSN: Sith717@Hotmail.com
    PHP, HTML, and CSS Coding, Logo and Web Design - Professionally done.
    PM me anytime for HTML, PHP or web design help. I will be glad to help you out.

  • #5
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    you're welcome

    Quote Originally Posted by bucket View Post
    Also one more thing, how would I do it so i can add images on both ends of the navbar?
    something like this.

    Code:
            
    <div id="linksContainer">
                <ul id="linksList">
                    <li><img src="yourPic.jpg" alt="" /></li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><img src="yourPic.jpg" alt="" /></li>
                </ul>
    </div>
    Depending on the width of your images, you might have to increase the width of linksContainer in the css.

  • #6
    Regular Coder
    Join Date
    Sep 2008
    Posts
    697
    Thanks
    8
    Thanked 17 Times in 16 Posts
    yeah like lets say i want to add like rounded corners at the end, would I make it a bg end image or a img src?
    MY MSN: Sith717@Hotmail.com
    PHP, HTML, and CSS Coding, Logo and Web Design - Professionally done.
    PM me anytime for HTML, PHP or web design help. I will be glad to help you out.

  • #7
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by bucket View Post
    yeah like lets say i want to add like rounded corners at the end, would I make it a bg end image or a img src?
    I'm not sure what is going on here.

    Your signature says

    PHP, HTML, and CSS Coding, Logo and Web Design - Professionally done
    So if it is referring to you, then you already know the answer to your basic question.


  •  

    Posting Permissions

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