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
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts

    CSS Nav Bar is wrong

    Hi,

    Coding a mockup website, working on a simple horizontal css bar. Was following a tutorial as a rough guideline but it doesn't look anywhere near the same!

    I have attached 2 images, one is how it is supposed to be and one is how it looks. Please see css code below:

    Code:
    /* Navigation Bar */
    #nav {
    	width:100%;
    	float:left;
    	margin:0 0 3em 0;
    	padding:0;
    	list-style:none;
    	background-color:#f2f2f2;
    	border-bottom:1px solid #ccc;
    	border-top:1px solid #ccc;
    }
    #nav li {
    	float:left;
    }
    #nav li a {
    	display:block;
    	padding:8px 15px;
    	text-decoration:none;
    	font-weight:bold;
    	color:#069
    	border-right: 1px solid #css;
    }
    #nav li a:hover {
    	color:#c00;
    	background-color:#fff
    }
    Thanks guys
    Attached Thumbnails Attached Thumbnails CSS Nav Bar is wrong-screen-shot-2012-09-13-11.39.20.png   CSS Nav Bar is wrong-screen-shot-2012-09-13-11.45.17.png  
    Don't Click Here!

  • #2
    New to the CF scene
    Join Date
    Jan 2012
    Location
    Ahmedabad, Gujarat, India
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i am not sure.. but you can do one thing....

    do fixed position on the page & try

    .class {
    position: fixed
    /* Any positioning that you want to do using top: ; bottom: ; etc.*/
    }

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 548 Times in 547 Posts
    @ Cole001, stay away from position: fixed/absolute/relative and use the natural flow of things unless absolutely necessary. And it isn't in a simple horizontal css menu.

    @aaronoafc I really think you stopped midway through the example because some easy stuff is missing. Like
    Code:
    #nav li {
    	float:left;
    	list-style: none;
    	padding: 5px;
    	border-left: 1px solid #ccc;
    }
    for starters. Go back and redo the tutorial.


  •  

    Posting Permissions

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