homepage Welcome to WebmasterWorld Guest from 54.242.126.9
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
How to center this drop down css menu
Flicker style but aligns to left
silverbytes

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3869953 posted 8:18 pm on Mar 13, 2009 (gmt 0)

May someone tell me if it's possible to use this menu centred on page? It's nice but algins to left. (Sticky me for a live sample)

HTML CODE


<body>
<!-- #BeginLibraryItem "/Library/menu.lbi" -->
<p><img src="bla.gif" width="448" height="64" /> </p>
<ul id="nav" class="dropdown dropdown-horizontal">
<li><a href="index.htm">Home</a></li>
<li><span class="dir">Bla1</span> <ul> <li><a href="dropdown/.">History</a></li> <li><a href="dropdown/.">Our Vision</a></li> <li><span class="dir">The Team</span><ul><li><a href="dropdown/." class="dir">Movies</a> <ul> <li><a href="dropdown/.">Enquiry Form</a></li> <li><a href="dropdown/.">Map &amp; Driving Directions</a></li> <li><a href="dropdown/.">Your Feedback</a></li> <li class="divider"><a href="dropdown/.">More...</a></li></ul></li></ul><!-- #EndLibraryItem --></body>

CSS CODE:


* {
margin: 0;
padding: 0;
outline: none;
}

body {
padding: 50px;
background: #fff url(pattern3.png) 0 0 repeat-x;
font: 14px/normal Tahoma, Arial, Helvetica, sans-serif;
}

p { margin-bottom: 1em; }

ul.classic {
list-style: disc;
margin-bottom: 1em;
padding-left: 2em;
}

h1,h2,h3 {
margin-bottom: .5em;
font-family: Arial, Helvetica, sans-serif;
}

h1 {
border-bottom: solid 1px #d9d9d9;
font-weight: normal;
font-size: 180%;
text-indent: 5px;
letter-spacing: -1px;
}

.dropdown-upward {
margin-top: 400px !important;
}

ul.dropdown {
padding-bottom: 1px;
background: url(pattern1.png) 0 100% repeat-x;
font: bold 13px/normal Arial, Helvetica, sans-serif;
}

ul.dropdown li {
padding: 4px 6px;
color: #0063dc;
}

ul.dropdown li.divider {
border-top: solid 1px #e5e5e5;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
color: #0063dc;
}

ul.dropdown a:link,
ul.dropdown a:visited{ color: #0063dc; text-decoration: none; }
ul.dropdown a:hover{ color: #0063dc; text-decoration: underline; }
ul.dropdown a:active{ color: #ff0084; }

/* -- level mark -- */

ul.dropdown ul {
width: 150px;
padding: 3px 6px;
border-style: solid;
border-width: 1px;
border-color: #f0f0f0 #666 #666 #f0f0f0;
background-color: #fff;
font-weight: normal;
font-size: 11px;
}

ul.dropdown ul li {
}

/*-------------------------------------------------/
* @sectionSupport Class `dir`
* @level sepul, .class
*/

ul.dropdown *.dir {
padding-right: 25px;
background-image: url(nav-arrow-down.png);
background-position: 95% 50%;
background-repeat: no-repeat;
}

/* -- Components override -- */

ul.dropdown-vertical ul {
top: 0;
left: 100%;
}

ul.dropdown-vertical-rtl ul {
right: 100%;
}

ul.dropdown-horizontal,
ul.dropdown-linear,
ul.dropdown-upward {
width: 100%;
}

ul.dropdown-horizontal ul *.dir {
padding-right: 25px;
background-image: url(nav-arrow-right.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}

ul.dropdown-upward *.dir {
background-image: url(nav-arrow-up.png);
}

ul.dropdown-vertical *.dir {
background-image: url(nav-arrow-right.png);
background-position: 180px 50%;
}

ul.dropdown-vertical ul *.dir,
ul.dropdown-upward ul *.dir {
background-image: url(nav-arrow-right.png);
background-position: 100% 50%;
}

ul.dropdown-vertical-rtl *.dir {
padding-right: 6px;
padding-left: 25px;
background-image: url(nav-arrow-left.png);
background-position: 5px 50%;
}

ul.dropdown-vertical-rtl ul *.dir {
padding-right: 0;
background-image: url(nav-arrow-left.png);
background-position: 0 50%;
}

ul.dropdown a,
ul.dropdown span {
display: block;
padding: 4px 6px;
}

ul.dropdown ul a,
ul.dropdown ul span {
padding: 4px 0;
}

/*-------------------------------------------------/
* @sectionBase Style Override
*/

ul.dropdown li {
padding: 0;
border: none;
}

/*-------------------------------------------------/
*@sectionCustom Styles
*/

ul.dropdown li a,
ul.dropdown *.dir {
border-style: solid;
border-width: 1px 1px 0;
border-color: #fff;
}

ul.dropdown ul li a,
ul.dropdown ul *.dir {
border: none;
}

ul.dropdown-vertical li a,
ul.dropdown-vertical *.dir {
border-width: 1px 0 1px 1px;
}

ul.dropdown-vertical-rtl li a,
ul.dropdown-vertical-rtl *.dir {
border-width: 1px 1px 1px 0;
}

ul.dropdown li.hover *.open {
position: relative;
z-index: 600;
margin: -1px 0;
padding-top: 5px;
padding-bottom: 5px;
border-color: #f0f0f0 #666 #666 #f0f0f0;
background-color: #fff;
background-image: url(nav-arrow-down-open.png);
color: #0063dc;
zoom: 1;
}

ul.dropdown-horizontal li.hover *.open,
ul.dropdown-upward li.hover *.open,
ul.dropdown-linear li.hover *.open {
float: left;
zoom: none;
}

ul.dropdown-vertical li.hover *.open {
margin: 0 -1px;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 7px;
}

ul.dropdown-vertical-rtl li.hover *.open {
padding-right: 7px;
}

ul.dropdown-vertical ul li.hover *.open {
padding-right: 0;
padding-left: 0;
}

ul.dropdown ul li.hover *.open {
position: static;
z-index: 0;
float: none;
margin: 0;
padding-top: 4px;
padding-bottom: 4px;
border: none;
}

ul.dropdown ul li.hover *.open,
ul.dropdown-vertical li.hover *.open {
background-image: url(nav-arrow-right-open.png);
}

ul.dropdown-vertical-rtl li.hover *.open,
ul.dropdown-vertical-rtl ul li.hover *.open {
background-image: url(nav-arrow-left-open.png);
}

ul.dropdown-upward li.hover *.open {
background-image: url(nav-arrow-up-open.png);
}

ul.dropdown-upward ul li.hover *.open {
background-image: url(nav-arrow-right-open.png);
}

ul.dropdown a.dir:hover {
background-image: url(nav-arrow-down-on.png) !important;
}

ul.dropdown-upward a.dir:hover {
background-image: url(nav-arrow-up-on.png) !important;
}

ul.dropdown ul a.dir:hover,
ul.dropdown-vertical a.dir:hover {
background-image: url(nav-arrow-right-on.png) !important;
}

ul.dropdown-vertical-rtl a.dir:hover,
ul.dropdown-vertical-rtl ul a.dir:hover {
background-image: url(nav-arrow-left-on.png) !important;
}

/* CSS2 clone */

ul.dropdown li:hover > *.dir {
position: relative;
z-index: 600;
margin: -1px 0;
padding-top: 5px;
padding-bottom: 5px;
border-color: #f0f0f0 #666 #666 #f0f0f0;
background-color: #fff;
background-image: url(nav-arrow-down-open.png);
color: #0063dc;
zoom: 1;
}

ul.dropdown-horizontal li:hover > *.dir,
ul.dropdown-upward li:hover > *.dir,
ul.dropdown-linear li:hover > *.dir {
float: left;
zoom: none;
}

ul.dropdown-vertical li:hover > *.dir {
margin: 0 -1px;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 7px;
}

ul.dropdown-vertical-rtl li:hover > *.dir {
padding-right: 7px;
}

ul.dropdown-vertical ul li:hover > *.dir {
padding-right: 0;
padding-left: 0;
}

ul.dropdown ul li:hover > *.dir {
position: static;
z-index: 0;
float: none;
margin: 0;
padding-top: 4px;
padding-bottom: 4px;
border: none;
}

ul.dropdown ul li:hover > *.dir,
ul.dropdown-vertical li:hover > *.dir {
background-image: url(nav-arrow-right-open.png);
}

ul.dropdown-vertical-rtl li:hover > *.dir,
ul.dropdown-vertical-rtl ul li:hover > *.dir {
background-image: url(nav-arrow-left-open.png);
}

ul.dropdown-upward li:hover > *.dir {
background-image: url(nav-arrow-up-open.png);
}

ul.dropdown-upward ul li:hover > *.dir {
background-image: url(nav-arrow-right-open.png);
}

 

simonuk

10+ Year Member



 
Msg#: 3869953 posted 10:57 am on Mar 16, 2009 (gmt 0)

Because you have other elements above the UL I would suggest adding a container with a user defined width and add margin:0 auto;
Place all your elements inside this container and it will centre them all.

silverbytes

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3869953 posted 7:20 pm on Mar 19, 2009 (gmt 0)

Do you mean like this?

<div style="margin: 0; padding: 0; outline: none; width:800 px">

<!-- #BeginLibraryItem "/Library/menu.lbi" -->
<p><img src="bla.gif" width="448" height="64" /> </p>
<ul id="nav" class="dropdown dropdown-horizontal">
<li><a href="index.htm">Home</a></li>
<li><span class="dir">Bla1</span> <ul> <li><a href="dropdown/.">History</a></li> <li><a href="dropdown/.">Our Vision</a></li> <li><span class="dir">The Team</span><ul><li><a href="dropdown/." class="dir">Movies</a> <ul> <li><a href="dropdown/.">Enquiry Form</a></li> <li><a href="dropdown/.">Map &amp; Driving Directions</a></li> <li><a href="dropdown/.">Your Feedback</a></li> <li class="divider"><a href="dropdown/.">More...</a></li></ul></li></ul><!-- #EndLibraryItem --></

</div>


Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved