Jump to content

Centering a CSS navigation menu with the page

ibda12u

By ibda12u
in CSS Help

 Share

Recommended Posts

ibda12u Newbie

ibda12u

Posted
Posted

I'm having a real problem getting my CSS navigation menu centered on my page.

 

I think my code is a real mess, but I'm wondering if anyone can see the problem. I'm actually using DNN and a new menu module to get it to display on the page, but I'm still sure the problem is in my css code.

 

Any idea's?

Here is the code that calls the CSS. The actual CSS is below.  I don't think the problem is here, but figured I'd submit it could be helpful.

<head>
    <link rel="stylesheet" type="text/css" href="silver.css" />
    <script type="text/javascript">
        function NavMouseover(li) {
            var agent  = navigator.userAgent.toLowerCase();
            var regex = /msie/i;
   	        if (regex.test(agent))
               li.className+=' hover ';
            if (li.id.match('^navParent')) {
                var navChild=document.getElementById('navChild');
                if (navChild) {
                    var childContainers = navChild.getElementsByTagName('ul');
                    if (childContainers) {
                        for (var i = 0; i < childContainers.length; i++)
                        {  
                            if (childContainers[i].id.match('^navChild')) {
                                if (childContainers[i].id.match('^navChild-'+li.id.substring(li.id.indexOf('-')+1))) {
                                    childContainers[i].style.display='inline';
                                } else {
                                    childContainers[i].style.display='none';
                                }
                            }
                        }
                    }
                }
            }
        }
        function NavMouseout(li) { 
            var agent  = navigator.userAgent.toLowerCase();
            var regex = /msie/i;
    	    if (regex.test(agent))
                li.className=li.className.replace(' hover ', '');
         }
    </script>
</head>

[NavMenu-Container[ <div id="{NavMenu.Id}" class="TabList"> <ul class="Level1">  ]]
        [Level0-Item[ <li id="{NavMenu.Id}-{Tab.Id}"  iif({Tab.IsActive}='True', class="SelectedItem")
                        onmouseover="NavMouseover(this);" onmouseout="NavMouseout(this);" > ]]
            [Level0-Anchor[ <a href="{Tab.Url}" title="{Tab.Title}">{Tab.Name}</a> ]]
        [/Level0-Item[ </li> ]]
[/NavMenu-Container[ </ul></div> ]]

 

 

Here is the CSS Code


UL LI {list-style-type:square ; text-align: center;}
UL LI LI{list-style-type:disc; text-align: center;}
UL LI LI LI {list-style-type:circle; text-align: center;}

OL LI {list-style-type:decimal;}
OL OL LI{list-style-type:lower-alpha;}
OL OL OL LI {list-style-type:lower-roman;}

.TabList {
    width: 800px;
    horizontal-align:center;
    vertical-align:middle;
    text-align: center;

}
.TabList ul {
    margin:0; 
    list-style:none;
    display: inline;
    vertical-align:middle;
    text-align: center;
}

.TabList li {
    float:left;
    margin:0; 
    display: inline;
    padding:0 0 0 10px;
    vertical-align:middle;
}

.TabList li a {
   font-family:Tahoma,San-Serif;
   font-size:12px;
   voice-family: "\"}\""; voice-family:inherit;
   line-height:normal;
   vertical-align:middle;
}

select.TabList {
    border-left: #003366 1px solid;
    border-right: #003366 1px solid;
    border-top:  #003366 1px solid;
  /*  border-bottom: #003366 1px solid; */ 
    background-color: #F3F3F4;
    color:#FFFFFF;
    font-weight:bold;
    font-size:80%;
}

#navParent a {
    font-weight:bold;    
    float:left;
    display:block;
    text-align:center;
    white-space: nowrap;
    text-align: left;
    padding: 5px 5px 5px 5px; 
    text-decoration:none;
    color:#3B3B3B;
    background-color: #F3F3F4;
    border-left: #BCBDC0 1px solid;
    border-right: #BCBDC0 1px solid;
    border-top:  #BCBDC0 1px solid;
    border-bottom:  #BCBDC0 0px solid;
}

#navParent a:hover,
#navParent li.hover a
{
    text-decoration:none;
    background-position:100% -125px;
    color:#004E82;
    background-color: #FFFFFF;
    border-left: #BCBDC0 1px solid;
    border-right: #BCBDC0 1px solid;
    border-top:  #BCBDC0 1px solid;
    border-bottom:  #FFFFFF 1px solid;

}

#navParent li {
    background:url() no-repeat left top;
    border-bottom: #999999 1px solid;
    background-color: #F3F3F4;
} 

#navParent li:hover,
#navParent li.hover
{
    /* background-position:0 -125px; */
    border-bottom: #FFFFFF 1px solid;
}

#navParent .SelectedItem {
    /* background-position:0 -125px; */
    border-bottom: #FFFFFF 1px solid;

}
#navParent .SelectedItem a {
    /* background-position:100% -125px; */
    color:#004E82;
    border-bottom: #FFFFFF 1px solid;

}

#navChild ul {
    padding:2px 0 2px 3px;
    margin:0;
    display:none;
    list-style:none;
    float:left;
}
#navChild ul ul {
    display:inline;
}
#navChild li {
  position: relative;
  padding:4px 8px 6px 0;
  background:url() no-repeat right 8px;
}

#navChild li ul { /* second-level lists */
position : absolute;
z-index:5;
left: -999em;
border:1px solid #333333;
    background-color:#f1f1f1;
}

#navChild a {
display:block;
    text-decoration:none;
    padding:2px;
    color:#000;
    text-align:left;
    border:1px solid #f1f1f1;
}
#navChild li li a {
    width:125px;
}

#navChild li a:hover {
   background-color: #ffffff;
   border:1px solid #3b3b3b;
}

#navChild a.SelectedItem {
    background-color: #ffffff;
    border:1px solid #3b3b3b;
}
#navChild .DisabledItem {
    color:#cccccc;
}
/* no need to change these hover classes 
unless you need more than 4 levels */
#navChild li:hover ul ul,
#navChild li:hover ul ul ul,
#navChild li:hover ul ul ul ul,
#navChild li.hover ul ul,
#navChild li.hover ul ul ul,
#navChild li.hover ul ul ul ul{
  left: -999em;
}

#navChild li:hover ul, 
#navChild li.hover ul {
top: 26px;
left:0;
}
#navChild li li:hover ul,
#navChild li li li:hover ul,
#navChild li li.hover ul,  
#navChild li li li.hover ul {
top: 0;
left:130px;
}

 

Link to comment
Share on other sites
ibda12u Newbie

ibda12u

Posted
  • Author
Posted

lol dude. this is a site for free php/html/mysql help. If you want someone to go through all that code and diagnose the problem, you're gonna have to pay someone. Unless someone has alotta free time

 

I'm sorry, I placed all my code on their for reference. I was assuming that someone who's seen something before would just see something I'm missing. I know that the code works, and works well. I'm just missing something in my code what will let me center the menu.

 

I apologize if my posting was taken as "doing my work for me" I just wanted a second set of eyes that may spot my error.

 

 

Link to comment
Share on other sites
ibda12u Newbie

ibda12u

Posted
  • Author
Posted

This is code that works with the menu system, I didn't write it, but it does work well.

 

I'm pretty certain the javascript isn't the issue, I only listed it in case someone wanted to see how it was being called. The actually CSS file is below it.

 

Thanks for your time dannyb785. Again I was just looking for a second set of eyes to look over it too see if there was something easy I was missing. I don't want to take any of your time.

 

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.