user2135867
Reputation:
cannot centre css navigation bar
I have some CSS code and HTML for a navigation menu but i need to be centered in the page but it just seems to be going to the left all the time no matter what i do.
CSS Code:
ul#css3menu_top,ul#css3menu_top ul {
margin:0 auto 0 auto;
list-style:none;
padding:0;
}
ul#css3menu_top,ul#css3menu_top .submenu {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
ul#css3menu_top .submenu {
visibility:hidden;
position:absolute;
left:0;
top:100%;
opacity:0;
-moz-transition:all 0.5s;
-webkit-transition:opacity 0.5s;
-o-transition:opacity 0.5s;
-moz-box-shadow:3.5px 3.5px 5px #000000;
-webkit-box-shadow:3.5px 3.5px 5px #000000;
box-shadow:3.5px 3.5px 5px #000000;
float:left;
background-color:#EEEEEE;
border-width:2px;
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-color:#FFF;
padding:0 10px 10px;
}
ul#css3menu_top li:hover>.submenu {
visibility:visible;
opacity:1;
}
ul#css3menu_top li {
position:relative;
display:block;
white-space:nowrap;
font-size:0;
float:left;
}
ul#css3menu_top li:hover {
z-index:1;
}
ul#css3menu_top ul .submenu {
z-index:2;
position:absolute;
left:100%;
top:0;
}
ul#css3menu_top {
font-size:0;
width:100%;
z-index:999;
position:relative;
display:inline-block;
zoom:1;
padding:0 0%;
margin:0 0%;
*display:inline;
}
ul#css3menu_top .column {
float:left;
}
* html ul#css3menu_top li a{
display:inline-block;
}
ul#css3menu_top>li {
margin:0;
width:14%;
}
ul#css3menu_top li.toplast{
width:15%;
}
ul#css3menu_top a:active, ul#css3menu_top a:focus {
outline-style:none;
}
ul#css3menu_top a{
display:block;
text-align:center;
text-decoration:none;
font:bold 16px Calibri;
color:#EEEEEE;
text-shadow:#FFF 0 0 1px;
cursor:pointer;
padding:10px 15px 6px 3px;
background-color:#666666;
background-repeat:repeat;
background-position:0 0;
height:20px;
}
ul#css3menu_top ul li {
float:none;
margin:10px 0 0;
}
ul#css3menu_top ul a {
text-align:left;
padding:4px;
background-color:#EEEEEE;
background-image:none;
border-width:0;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
font:16px Calibri;
color:#666666;
text-decoration:none;
}
ul#css3menu_top li:hover>a,ul#css3menu_top li a.pressed {
background-color:#EEEEEE;
color:#666666;
background-position:0 100px;
text-decoration:none;
}
ul#css3menu_top img {
border:none;
vertical-align:middle;
margin-right:6px;
}
ul#css3menu_top span {
display:block;
overflow:visible;
background-position:right center;
background-repeat:no-repeat;
padding-right:0px;
}
ul#css3menu_top ul span {
padding-right:8px;
}
ul#css3menu_top ul li:hover>a,ul#css3menu_top ul li a.pressed {
background-color:#EEEEEE;
background-image:none;
color:#666666;
text-decoration:none;
}
ul#css3menu_top li.topfirst>a {
padding-left: 7px;
border-width:0;
border-radius:4px 0 0 4px;
-moz-border-radius:4px 0 0 4px;
-webkit-border-radius:4px;
-webkit-border-top-right-radius:0;
-webkit-border-bottom-right-radius:0;
}
ul#css3menu_top li.toplast>a {
padding-right: 7px;
border-radius:0 4px 4px 0;
-moz-border-radius:0 4px 4px 0;
-webkit-border-radius:0;
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
}
ul#css3menu_top ul li a:hover {
color:#F36F25;
}
@media only screen and (max-width:900px),only screen and (max-device-width:900px){
ul#css3menu_top>li{width:33%;}ul#css3menu_top>li:nth-child(3){width:34%}ul#css3menu_top>li:nth-child(n+4){width:33%;}ul#css3menu_top>li:nth-child(6){width:34%}}
@media only screen and (max-width:600px),only screen and (max-device-width:600px){
ul#css3menu_top>li{width:50%;}ul#css3menu_top>li:nth-child(n+3){width:50%;}ul#css3menu_top>li:nth-child(n+5){width:50%;}}
@media only screen and (max-width:450px),only screen and (max-device-width:450px){
ul#css3menu_top>li{width:100%;}ul#css3menu_top>li:nth-child(n+2){width:100%;}ul#css3menu_top>li:nth-child(n+3){width:100%;}ul#css3menu_top>li:nth-child(n+4){width:100%;}ul#css3menu_top>li:nth-child(n+6){width:100%;}}
/*opera hack*/
@media only screen and (min-width:900px){
html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top{
display:table;
}
html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top>li{
width:auto;
float:none;
display:table-cell;
}
html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top li.toplast{
width:auto;
display:table-cell;
}
}
HTML Code:
<?php $item_limit=4; ?>
<ul id="css3menu_top" class="topmenu">
<li class="topmenu"><a href="#"><span>Homepage</span></a></li>
<li class="topmenu"><a href="#"><span>About Us</span></a>
<div class="submenu" style="width:338px;">
<div class="column" style="width:50%">
<ul>
<li><a href="/login">Login</a></li>
<li><a href="/contact">Contact Us</a></li>
<?php
$menu1="SELECT * from websitepages where pagetype = 'About' order by pagedesc ASC ";
$menu2=mysql_query($menu1,$conn) or die(mysql_error());
$counter=0;
while($menu3=mysql_fetch_array($menu2))
{
$counter++;
echo '<li><a href="/index.php?p='.$menu3["pagename"].'">'.$menu3["pagedesc"].'</a></li>';
if ($counter==$item_limit) { echo '</ul></div> <div class="column" style="width:50%"><ul>'; $counter=0; }
}
?>
</ul>
</div>
</div>
</li>
<li class="topmenu"><a href="#"><span>Telecoms</span></a>
<div class="submenu" style="width:338px;">
<div class="column" style="width:50%">
<ul>
<?php
$menu1="SELECT * from websitepages where pagetype = 'Telecoms' order by pagedesc ASC ";
$menu2=mysql_query($menu1,$conn) or die(mysql_error());
$counter=0;
while($menu3=mysql_fetch_array($menu2))
{
$counter++;
echo '<li><a href="/index.php?p='.$menu3["pagename"].'">'.$menu3["pagedesc"].'</a></li>';
if ($counter==$item_limit) { echo '</ul></div> <div class="column" style="width:50%"><ul>'; $counter=0; }
}
?>
</ul>
</div>
</div>
</li>
<li class="topmenu"><a href="#"><span>I.T. Support</span></a>
<div class="submenu" style="width:338px;">
<div class="column" style="width:50%">
<ul>
<?php
$menu1="SELECT * from websitepages where pagetype = 'I.T. Support' order by pagedesc ASC ";
$menu2=mysql_query($menu1,$conn) or die(mysql_error());
$counter=0;
while($menu3=mysql_fetch_array($menu2))
{
$counter++;
echo '<li><a href="/index.php?p='.$menu3["pagename"].'">'.$menu3["pagedesc"].'</a></li>';
if ($counter==$item_limit) { echo '</ul></div> <div class="column" style="width:50%"><ul>'; $counter=0; }
}
?>
</ul>
</div>
</div>
</li>
<li class="topmenu"><a href="#"><span>Security</span></a>
<div class="submenu" style="width:338px;">
<div class="column" style="width:50%">
<ul>
<?php
$menu1="SELECT * from websitepages where pagetype = 'Security' order by pagedesc ASC ";
$menu2=mysql_query($menu1,$conn) or die(mysql_error());
$counter=0;
while($menu3=mysql_fetch_array($menu2))
{
$counter++;
echo '<li><a href="/index.php?p='.$menu3["pagename"].'">'.$menu3["pagedesc"].'</a></li>';
if ($counter==$item_limit) { echo '</ul></div> <div class="column" style="width:50%"><ul>'; $counter=0; }
}
?>
</ul>
</div>
</div>
</li>
<li class="topmenu"><a href="#"><span>Networking</span></a>
<div class="submenu" style="width:338px;">
<div class="column" style="width:50%">
<ul>
<?php
$menu1="SELECT * from websitepages where pagetype = 'Networking' order by pagedesc ASC ";
$menu2=mysql_query($menu1,$conn) or die(mysql_error());
$counter=0;
while($menu3=mysql_fetch_array($menu2))
{
$counter++;
echo '<li><a href="/index.php?p='.$menu3["pagename"].'">'.$menu3["pagedesc"].'</a></li>';
if ($counter==$item_limit) { echo '</ul></div> <div class="column" style="width:50%"><ul>'; $counter=0; }
}
?>
</ul>
</div>
</div>
</li>
<li class="topmenu"><a href="#"><span>Online Shop</span></a>
<div class="submenu" style="width:338px;">
<div class="column" style="width:50%">
<ul>
<li><a href="/shop/index.php?mod=cart">Shopping Cart</a></li>
<?php
$menu1="SELECT * from websitepages where pagetype = 'Shop' order by pagedesc ASC ";
$menu2=mysql_query($menu1,$conn) or die(mysql_error());
$counter=0;
while($menu3=mysql_fetch_array($menu2))
{
$counter++;
echo '<li><a href="/index.php?p='.$menu3["pagename"].'">'.$menu3["pagedesc"].'</a></li>';
if ($counter==$item_limit) { echo '</ul></div> <div class="column" style="width:50%"><ul>'; $counter=0; }
}
?>
</ul>
</div>
</div>
</li>
</ul>
See this fiddle: http://jsfiddle.net/charliejsford/WxJcz/
there is a white background behind the menu which i need to change the colour of too.
any ideas what i can do?
Upvotes: 0
Views: 143
Answers (2)
GeekyCoder
Reputation: 428
You need to wrap that whole code into a div and then center that.
actually to center a div you need to specify a width to it so you need to specify the width of the navigation menu and then code this menu with respect to that...
for example you decide your menu's to be width:500px
then wrap that whole menu inside a div and mark the css in this way
<div class="centermenu">
//whole menu code(html) goes here
</div>
css
.centermenu{
position:relative;
width:500px;
margin-left:auto;
margin-right:auto;
}
Hope it helps.
Upvotes: 0
Rajender Joshi
Reputation: 4205
Here's the fix, display: inline-block; was pushing it to left and margin: 0 0%; wasn't aligning it to center.
ul#css3menu_top {
font-size:0;
width:100%;
z-index:999;
position:relative;
display: block;
zoom:1;
padding:0 0%;
margin:0 auto;
*display:inline;
}
Upvotes: 1
Related Questions
- Why can't I center my navigation bar in CSS?
- Can't get navigation bar to center
- Centering NavigationBar
- Center navigation bar with CSS
- Navigation bar not centering
- How do i center my navigation bar?
- Can't Center My Navigation
- Centering a navigation bar with CSS
- Why is this navigation bar not centering?
- Center a Navigation Bar