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

    Help with horizontal nav bar

    Hey there. im trying to create my own website and i have slight expierence with css however im really struggling with one element, the top nav bar.

    I have used this website to automatically generate a nav bar

    http://lab.mattvarone.com/navbar/index.php

    here is the code i am using

    CSS
    Code:
    /* HORIZONTAL NAVIGATION BAR
    /////////////////////////////////////*/
    
    ul#navigationbanner {	
    	width:391px;
    	list-style:none;
    	height:41px
    }
    
    ul#navigationbanner li {
    	display:inline
    }
    
    ul#navigationbanner li a {
    	height:41px;
    	float:left;
    	text-indent:-9999px;
    	text-decoration:none
    }
    
    ul#navigationbanner  li a span {
    	float:left;
    	display:block
    }
    
    ul#navigationbanner li#navigationbanner-1 a {
    	width:168px;
    	background:url(navigationbanner.jpg) no-repeat 0px 0
    }
    
    ul#navigationbanner li#navigationbanner-1 a:active,
    ul#navigationbanner li#navigationbanner-1 a:hover {
    	background-position:0px -41px
    }
    ul#navigationbanner li#navigationbanner-1 a.current {
    	background-position:0px 0px -41px
    }
    
    ul#navigationbanner li#navigationbanner-2 a {
    	width:118px;
    	background:url(navigationbanner.jpg) no-repeat -168px 0
    }
    
    ul#navigationbanner li#navigationbanner-2 a:active,
    ul#navigationbanner li#navigationbanner-2 a:hover {
    	background-position:-168px -41px
    }
    ul#navigationbanner li#navigationbanner-2 a.current {
    	background-position:-168px -168px -41px
    }
    
    ul#navigationbanner li#navigationbanner-3 a {
    	width:105px;
    	background:url(navigationbanner.jpg) no-repeat -286px 0
    }
    
    ul#navigationbanner li#navigationbanner-3 a:active,
    ul#navigationbanner li#navigationbanner-3 a:hover {
    	background-position:-286px -41px
    }
    ul#navigationbanner li#navigationbanner-3 a.current {
    	background-position:-286px -286px -41px
    }
    HTML
    Code:
    	<ul id="navigationbanner">
    		<li id="navigationbanner-1"><a href="projects.html" title="PROJECTS"><span>PROJECTS</span></a></li>
    		<li id="navigationbanner-2"><a href="about.html" title="ABOUT"><span>ABOUT</span></a></li>
    		<li id="navigationbanner-3"><a href="blog.html" title="BLOG"><span>BLOG</span></a></li>
    	</ul>
    So heres where the problem starts. When inserting the div into my website it causes all sorts of problems, the div just appears randomly and nothing fits in place, and im not good enough at understanding css to figure out what is going on here.

    heres an image to help me explain further whats going on here


    Any help anybody can give me would be great, really need to get this sorted out fairly soon. I can send any full page code on request and I will keep checking this thread often. thanks in advance

  • #2
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    Post a link to the site so we can get a better idea of what's going on then.

    I went to the site on the picture, but it seems like it's the wrong site (or page).
    My signature :)

  • #3
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    sorry for delayed replied i thought i wrote back a whilst ago.

    here is a link to the webpage

    http://iamjoshuabrooks.co.uk/testpage.html

  • #4
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    anybody know whats going on here? im struggling to fix it and would like the website to go live soon. cheers

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Your menu is being shifted downwards because of the default margin applied to the ul. Have a try adding:

    Code:
    ul#navigationbanner {
        height: 41px;
        list-style: none outside none;
        margin: 0;
        width: 391px;
    }
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    jbrooks (04-22-2013)

  • #6
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    that was unbelievable easy to fix. Thanks a bunch !


  •  

    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
    •