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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Building a successful navbar

    Hi all-
    As you may know from my previous posts I'm building my first website by hand coding. Here's a screen shot of what I have so far:



    As you can see, my navbar is a bit wonky. So, I have two questions

    1) How can I elegantly center both my the logo and <li>s?

    I thought I could simply add a 20% left margin to my <li>s and I'd be good to go but that made my last two <li>s skip to the next line. How I solve this problem may be effect by question #2

    2) How can I get the background color to "hug" my <ul> in the navbar?

    I thought margins were outside of the background color, but obviously I was wrong. How can I create the appropriate white space on the left and right I'm so accustomed to seeing navbars?

    Thanks for your help! I do not know where I would be without this forum.

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Inner Truth Productions</title>
    <link href="styles.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    	<div class="wrapper">
        	<header>
            	<div class="topbar">
            		<img id="logo" src="images/whitelogo.png" width="600" height="350">
              	</div>
           		<nav class="navbar">
               	<ul>
                		<li>Home</li>
                     	<li>Paris in New York</li>
                     	<li>Statement of Purpose</li>
                     	<li>About Me</li>
                 	</ul>
       			</nav>
    		</header>
           	<article class="mainarticle">
            	Content for  class "mainarticle" goes here
          	</article>
    		<footer class="mainfooter">
        		Content for class "footer" goes here
        	</footer>
    	</div>
    </body>
    </html>

    Code:
    @charset "UTF-8";
    body {
    	display: inline-block;
    	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
    }
    .wrapper {
    	width: 900px;
    	padding-top: 0px;
    	padding-right: 0px;
    	padding-bottom: 0px;
    	padding-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    	background-color: #FFFFFF;
    	display: inherit;
    }
    #logo {
    	margin-left: 150px;
    	padding-left: 0px;
    	padding-top: 0px;
    	padding-right: 0px;
    	padding-bottom: 0px;
    	border: medium double #FFCC00;
    	float: none;
    	margin-bottom: 2.5%;
    	margin-right: 0%;
    	margin-top: 5%;
    }
    header {
    	background-color: #FFFFFF;
    	display: inherit;
    	z-index: 1;
    	opacity: 1;
    	width: 900px;
    }
    
    li {
    	list-style-type: none;
    	display: inline-block;
    }
    nav {
    	display: inline-block;
    	background-color: #99FFFF;
    	width: 900px;
    	border-radius: 12px;
    	color: #191919;
    	font-style: normal;
    	font-variant: small-caps;
    	font-weight: 500;
    }
    ul {
    	display: inline-block;
    }
    .wrapper header .navbar ul li {
    	display: inline-block;
    	margin-left: 65px;
    	position: relative;
    	padding-left: 10px;
    	background-color: #FFFFFF;
    	padding-right: 10px;
    	border-radius: 10px;
    	border: thin solid #FFFF66;
    	}

  • #2
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    I think the spam filter threw out your link.

    I generally do my nav bars something like this

    Code:
            <header>
                <h1>site title</h1>
                
                <nav>
                    <ul>
                        <li><a href="#">link one</li>
                        <li><a href="#">link two</li>
                        <li><a href="#">link three</li>
                    </ul>
                </nav>
            </header>
    Code:
    header { 
        width: 100%;
        overflow: hidden;
    }
    
    /* alot of people find it pointless to float and use inline */
    nav {
        float: right;
        display: inline-block;
    }
    
    nav ul {
        
    }
    
    /* this will keep the items on the same line */
    nav ul li {
        display: inline-block;
    }
    
    nav ul li a {
    
    }
    This is clearly overly simplified, and just meant to give you a few ideas. If you want space between your links simply give them a padding or a margin. A padding will be treated as part of the link when hovering where as the margin will only be treated as empty space when hovering.

    Make sure to Google css resets to see which ones you might want to implement, and check our normalize. To use my code above you'd probably want to do something like

    Code:
    body {
      margin: 0;
    }
    
    ul, li {
      list-style: none;
    }
    Last edited by stevenmw; 08-08-2013 at 04:05 PM. Reason: added more info
    Thanks!


  •  

    Posting Permissions

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