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
    Jul 2014
    Location
    NH
    Posts
    14
    Thanks
    4
    Thanked 1 Time in 1 Post

    Need help centering my navigation menu.

    Hi guys,

    I'm creating a website and I'm working on the navigation bar. When I open it up the links are stuck on the left side of the page. I want them to appear in the center of the header. I googled the issue and everyone seems to say use display:inline-block but it's not working for me. I attached

    Here is my HTML:
    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<title>Common Finance Questions</title>
    		<meta name="description" content="<!--Page description will go here-->" />
    		<meta name="keywords" content="<!--SEO/keywords will go here-->" />
    		<link href="cfq.css" rel="stylesheet" type="text/css">
    	</head>
    	<body>
    		<div id="header">
    			<div class="wrapper">
    				<div class="container">
    					<ul class="menu">
    						<li><a href="#">Home</a></li>
    						<li><a href="#">The Basics</a></li>
    						<li><a href="#">F.A.Q.</a></li>
    						<li><a href="#">Contact</a></li>
    					</ul>
    			</div>
    </div>
    
    		</div>
    		
    		<div id="content">
    			<!-- content will goes here-->
    		</div>
    		
    		<div id="footer">
    			<!--footer will go here-->
    		</div>
    		
    	</body>
    </html>
    And my CSS:
    Code:
    #header {
    	display:inline-block;
    }
    	
    .wrapper {
        width: 100%;
        height: 80px;
        background : #464646;
        background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
        background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
        border-top: 2px solid #939393;
        position: relative;
        margin-bottom: 30px;
    }
    
    ul {
        margin: 0;
        padding: 0;
    }
     
    ul.menu {
        height: 80px;
        border-left: 1px solid rgba(0,0,0,0.3);
        border-right: 1px solid rgba(255,255,255,0.3);
        
    }
     
    ul.menu li {
        list-style: none;
        float:left;
        height: 79px;
        text-align: center;
        background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
        background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
        }
     
    ul li a {
        display: block;
    	text-decoration:none;
    	color:white;
    	font-weight:bolder;
        padding: 0 20px;
        border-left: 1px solid rgba(255,255,255,0.1);
        border-right: 1px solid rgba(0,0,0,0.1);
        text-align: center;
        line-height: 79px;
        background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
        background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
        -webkit-transition-property: background;
        -webkit-transition-duration: 700ms;
        -moz-transition-property: background;
        -moz-transition-duration: 700ms;
        }
     
    ul li a:hover {
        background: transparent none;
    }
     
    ul li.active a{
        background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
        background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
    }
    Any help is greatly appreciated!
    Attached Thumbnails Attached Thumbnails Need help centering my navigation menu.-untitled.jpg  

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    instead of
    Code:
    #header {
        display:inline-block;
    }
    use
    Code:
    .container {
        display:inline-block;
    }
    and add
    Code:
    text-align:center;
    to #wrapper{}

  • Users who have thanked Lerura for this post:

    BaXTeR403 (07-29-2014)

  • #3
    New Coder
    Join Date
    Jul 2014
    Location
    NH
    Posts
    14
    Thanks
    4
    Thanked 1 Time in 1 Post
    That worked. Thank you so much!


  •  

    Posting Permissions

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