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> </p> <p> </p> <p> </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):
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.
You need to add <> around HTML. Its showing on the left side of the page for me. How do you want it to center?
no that wasn't supposed to be in HTML tag that was just noting that that was HTML but I messed up lol
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.
Yes I am aware of it. I didn't say it was the best way to handle it, just thought I would present it.