The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Help centering a nav bar

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #287049
    Andy Temple

    I have only basic HTML knowledge and virtually no CSS knowledge. I have got a template for a simple nav bar to use on a website I manage but I cannot get the navbar to centre on the page. Any help please.

    This is what I have so far.

    ul {list-style: none;padding: 0px;margin: 0px;}
    ul li {display: block;position: relative;float: left;border:1px solid #000}
    li ul {display: none;}
    ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
    white-space: nowrap;color: #fff;}
    ul li a:hover {background: #f00;}
    li:hover ul {display: block; position: absolute;}
    li:hover li {float: none;}
    li:hover a {background: #f00;}
    li:hover li a:hover {background: #000;}
    #drop-nav li ul li {border-top: 0px;}


    Please provide a minimal demo in which demonstrates the issue rather than a randome piece of CSS.

    But the first thing to do is remove float: left from the li and perhaps add text-align:center to the ul.

    Andy Temple


    Not sure exactly what I need to do I have had a go link below – obviously it is not quite right but I just want to centre the image horizontally on the image below it.–/pen/bJJELV


    Frankly, the HTML is a mess of obsolete elements (font) and inline attributes (align) which need to be stripped out.

    In addition, it looks like the HTML is structured incorrecttly for a menu/submenu option.


    Removing the incorrect structure and adjusting a couple of other things can get you started

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.