Quick Nav:  Online Store   |   Login | Register

Center the entire menu - Silver Menu

Rate this topic:

Please Register to post a reply. Another benefit of registration is the ability to subscribe to and recieve notifications of new posts.
AuthorMessages
Marrell Sanders
<20 Posts
Posts:1


06/25/2008 3:49 PM  

'm having a real problem getting my CSS navigation menu centered on my page, I modified the Silver Menu.

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.


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;
}

 

 

Please Register to post a reply. Another benefit of registration is the ability to subscribe to and recieve notifications of new posts.
Forums >Snapsis Product Support >CSS NavMenu > Center the entire menu - Silver Menu



ActiveForums 3.7
Powered by: Snapsis Software