Need Help With CSS and HTML Centering My NavBar

Discussion in 'HTML & Website Design' started by bigj43454, Jul 16, 2013.

  1. #1
    Okay,

    I'm Rather new to CSS and I cannot for the life of me get My navbar to center. Aby help is much appreciated.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
    <head>
     
     
     
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
     
    HTML
     
     
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>css3menu.com</title>
            <!-- Start css3menu.com HEAD section -->
        <link rel="stylesheet" href="CSS3 Menu_files/css3menu1/style.css" type="text/css" /><style type="text/css">
        ._css3m{display:none}body {
        background-color: #B1D7E9;
    }
        </style>
        <!-- End css3menu.com HEAD section -->
     
       
    </head>
    <body style="background-color:#EBEBEB">
    <!-- Start css3menu.com BODY section -->
    <ul class="topmenu" id="css3menu1" name="css3menu1">
        <li class="topmenu">
          <a href="#" style="width:70px;height:20px;line-height:20px;">Home</a>      </li>
        <li class="topmenu">
          <a href="#" style="width:70px;height:20px;line-height:20px;">About</a>      </li>
        <li class="topmenu">
          <a href="#" style="width:71px;height:20px;line-height:20px;">Policy</a>      </li>
        <li class="topmenu">
          <a href="#" style="width:68px;height:20px;line-height:20px;">Store</a>      </li>
        <li class="topmenu">
          <a href="#" style="height:20px;line-height:20px;">Contact Us</a>      </li>
    </ul><p class="_css3m"><a href="http://css3menu.com/">CSS Menu Vertical Css3Menu.com</a></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p align="center"><!-- End css3menu.com BODY section --></p>
    </body>
    </html>
    
    Code (markup):




    CSS


    ul#css3menu1{
        margin:0;list-style:none;padding:6px 6px 6px 0;background-color:#000000;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16));  background-image:linear-gradient(180deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:28px;-webkit-border-radius:28px;border-radius:28px;font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;
        *display:inline;}
    ul#css3menu1 li{
        display:block;white-space:nowrap;font-size:0;float:left;}
    * html ul#css3menu1 li a{
        display:inline-block;}
    ul#css3menu1>li{
        margin:0 0 0 6px;}
    ul#css3menu1 a:active, ul#css3menu1 a:focus{
        outline-style:none;}
    ul#css3menu1 a{
        display:block;vertical-align:middle;text-align:center;text-decoration:none;font:12px Arial;color:#E7E5E5;cursor:pointer;padding:8px 20px;background-color:;background-repeat:repeat;border-width:0;border-style:solid;border-color:transparent;}
    ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
        background-color:#7ACF27;border-color:#F8F8F8;border-style:solid;color:#333;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));  background-image:linear-gradient(180deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));text-decoration:none;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
    ul#css3menu1 li.topmenu>a{
        background-color:;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:16px;-moz-border-radius:16px;-webkit-border-radius:16px;font:bold 16px Arial;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;}
    ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{
        background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7));  background-image:linear-gradient(180deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7));border-style:solid;color:#444444;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#C6FFFFFF,endColorstr=#B355AA00)}
    
    Code (markup):
     
    bigj43454, Jul 16, 2013 IP
  2. homer7

    homer7 Well-Known Member

    Messages:
    268
    Likes Received:
    25
    Best Answers:
    4
    Trophy Points:
    125
    #2
    wrap your ul list in div tag and give it this margin:

    margin: 0 auto;

    0 is for the top and bottom margin and auto is for the left and right.
    btw your html/css is really a mess, a lots of unnecessary tags.
     
    homer7, Jul 16, 2013 IP
  3. Doug

    Doug Member

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #3
    You need to add <> around HTML. Its showing on the left side of the page for me. How do you want it to center?
     
    Doug, Jul 16, 2013 IP
  4. bigj43454

    bigj43454 Greenhorn

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #4

    no that wasn't supposed to be in HTML tag that was just noting that that was HTML but I messed up lol
     
    bigj43454, Jul 16, 2013 IP
  5. bigj43454

    bigj43454 Greenhorn

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #5

    I just want it to be justified in the center as for left and right
     
    bigj43454, Jul 16, 2013 IP
  6. tvre1ease

    tvre1ease Greenhorn

    Messages:
    70
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    10
    #6
    change your float lefts to inline
     
    tvre1ease, Jul 26, 2013 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #7
    First, if you are "new" to this, why are you writing code that -- as the doctype proudly proclaims -- is in 'transiton' from 1997 to 1998 coding practices?

    Second, your markup IS gibberish... line breaks (BR) and CDATA (you have the word 'HTML' just slapped in there for **** knows what reason) cannot go inside HEAD. Using the STYLE attribute (or even the tag) in the markup is broken methodology that shouldn't even be allowed in the first place, much less the non-breaking spaces in paragraphs for nothing, use of the align and bgcolor attributes like it's still 1997, using the style attribute for redundant values, and pointless classes on just about everything.

    Whatever source you are learning from, find another one... of course looking at the steaming pile of inaccessible *** this "CSS3Menu.com" idiocy is... go somewhere else. SERIOUSLY. The ineptitude shown in their code is truly terrifying.
     
    deathshadow, Jul 26, 2013 IP
    ryan_uk likes this.
  8. Mike Carroll

    Mike Carroll Greenhorn

    Messages:
    89
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    8
    #8
    Could you do:

    <div align="center"> before the navbar

    </div> after the navbar?
     
    Mike Carroll, Jul 28, 2013 IP
  9. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #9
    You are aware, are you not, that the align attribute has been deprecated since 1998?
     
    kk5st, Jul 29, 2013 IP
    deathshadow likes this.
  10. Mike Carroll

    Mike Carroll Greenhorn

    Messages:
    89
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    8
    #10
    Yes I am aware of it. I didn't say it was the best way to handle it, just thought I would present it.
     
    Mike Carroll, Jul 29, 2013 IP