CSS - Centering Suckerfish Menu

Hi,



q1)I can't move the menu to the right without problems as i set a margin on #headlinks2 and the links get cluttered?

Code:

#headlinks2 {
height:25px;
}

#headlinks2 a {
color:green;

display: block;
text-decoration:none;
width: 100px;
font-size:13pt;
padding-right:5px;
//margin-left:205px;
}

#headlinks2 a:hover {
color: white;


}

#headlinks2, #headlinks2 ul {
padding: 0;
margin: 0;
list-style: none;
}

#headlinks2 li {
float: left;
width: 100px;
}

#headlinks2 li ul {
position: absolute;
width: 100px;
left: -999em;
}

#headlinks2 li:hover ul {
left: auto;

}

#headlinks2 li:hover ul, #headlinks2 li.sfhover ul {
left: auto;

}
</style>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>

//html

<div id="headlinks2">


<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>
<li><a href="#">Bluefishes</a></li>

</ul>
</li>

<li><a href="#">Anabant</a>
<ul>
<li><a href="#">Climbing perches</a></li>
<li><a href="#">Labyrinthfishes</a></li>
<li><a href="#">mex</a></li>

</ul>
</li>

<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>
<li><a href="#">Bluefishes</a></li>

</ul>
</li>
<li><a href="#">Anabant</a>
<ul>
<li><a href="#">Climbing perches</a></li>
<li><a href="#">Labyrinthfishes</a></li>
<li><a href="#">mex</a></li>

</ul>
</li>

<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>
<li><a href="#">Bluefishes</a></li>

</ul>
</li>
<!-- etc. -->



</div>

I was working on a menu following the suckerfish tutorial at Alist Apart and I've got it working in FF but not IE6. Big surprise. There's 2 issues with IE 6:

1. The menu is sitting lower in IE than in FF.

2. The dropdowns aren't working in IE at all. I've applied the js hack and it's still not working. I can't find what I'm missing but I know it's there somewhere.

Here's the url: menu

Please help. Thanks.

Brad

Dear clever CSSers

I am currently changing my flyout menu from something rather complex, to the Suckerfish version.

I have one problem: I have been using some mouseover tooltip-like information boxes giving extra details of the contents of a link, by having a div within the text of the hyperlink, to come visible when hovered. It has worked very well in my old version. Here's my test page

In the new version, there are two lines of CSS allowing the popup to open, which is also enclosed in a balloon-style info graphic, actually in two halves so that it can open like a clamshell if there is extra text in there, or a user has a larger than normal font setting:

Code:

#nav a span {visibility:hidden;position:absolute;top:-120px;left:175px;background: url(http://www.internetevangelismday.com/images/balloontop.png) no-repeat transparent top left;width:196px;height:105px;line-height:1.2em;text-align:left;word-wrap:break-word;text-wrap:normal;white-space:normal;padding:0px;} #nav a:hover span {visibility:visible;z-index:9999;min-height:130px;} 

This CSS does allow the popup to appear, but unfortunately it positions each popup at the same position on the page. I would prefer it that they appeared with the 'point' of the balloon pointing at the relavent link. You can see that if you hover '2nd level here', and then 'page 1', or 'page 2' or 'another page', the info balloon appears in exactly the same place on the page.

Changing the positioning from position absolute to position relative causes the popup to appear in about the correct position, but it also expands the link area on the menu itself to a huge blank area and misses off the balloontop.png graphic from the popup, which I presume is staying inserted, hidden, within the menu item and causing it to expand.

Thanks for any ideas on this. BTW, the javascript is a neat one that repositions submenus where necessary so they can't vanish below the bottom of the page.

Best wishes

Tony

Hi there,

I'm playing around with a menu that is based on the 'suckerfish' method and basically, I am trying to change the background colour of one of the menu options.


The problem is, I can't seem to do this in isolation - i.e. without messing up the other items in the menu. I've tried applying a background image to the <li> item, with no joy and I've also tried creating a separate div layer for this one option - again with no joy.


**EDIT** Just worked out how to do this.... All I did was add [CODE]id="selected"

So I'm a student working on my first real project. I've done Suckerfish drop-downs before, but I'm having trouble doing them with graphic text instead of system text. The image replacement works fine on the first level, but the nested li's just repeat the image of the main li.

For example, the main nav item with the drop-down is "Our Coffee". In the drop-down menu instead of having the different images for the corresponding links, "Our Coffee" is repeated.

Here's a selection of my code where I think the problem is happening:

Code:

<div id="nav">
   	<ul id="dd">
       	<li id="hm"><a href="menu.html">Menu</a></li>
        <li id="au"><a href="about_us.html">About Us</a></li>
        <li id="oc"><a href="#">Our Coffee</a>
        	<ul>
            	<li id="oc_dd_ko"><a href="oc_kona.html">Kona</a></li>
            	<li id="oc_dd_ma"><a href="oc_maui.html">Maui</a></li>
            	<li id="oc_dd_ka"><a href="oc_kauai.html">Kauai</a></li>
            </ul>
        </li>
        <li id="os"><a href="os_hy.html">Our Stores</a></li>
        <li id="ols"><a href="online_store.html">Online Store</a></li>
        <li id="oct"><a href="our_culture.html">Our Culture</a></li>
    </ul>
</div>  

Code:

#nav ul li ul li a {
	display: block;
	height: 0px;
	overflow: hidden;
}

#dd li#oc a {
	display: block;
	width: 95px;
}

#dd li#oc {
	float: left;
	width: 95px;
}

#dd li#oc ul {
	position: absolute;
	width: 95px;
	left: -9999px;
}

#dd li#oc:hover ul {
	left: auto;
}


#dd li#oc:hover ul, #dd li.sfhover ul {
	left: auto;
}

li#oc ul li a {
	height: 0px;
	display: block;
	overflow: hidden;
}

#oc_dd_ko a {
	background: url(../images/oc_ddnav-01_lo.gif) no-repeat;
	padding-top: 13px;
	width: 58px;
}

#oc_dd_ko a:hover {
	background: url(../images/oc_ddnav-01_hi.gif) no-repeat;
	padding-top: 13px;
	width: 58px;
}

#oc_dd_ma a {
	background: url(../images/oc_ddnav-02_lo.gif) no-repeat;
	padding-top: 15px;
	width: 58px;
}

#oc_dd_ma a:hover {
	background: url(../images/oc_ddnav-02_hi.gif) no-repeat;
	padding-top: 15px;
	width: 58px;
}

#oc_dd_ka a {
	background: url(../images/oc_ddnav-03_lo.gif) no-repeat;
	padding-top: 16px;
	width: 58px;
}

#oc_dd_ka a:hover {
	background: url(../images/oc_ddnav-03_hi.gif) no-repeat;
	padding-top: 16px;
	width: 58px;
}

#dd, #dd ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

Any suggestions would be appreciated.

hey guys,

im not the greatest with css and html but i do it for fun to try and teach myself.

Anyways I have a css drop menu set up on my site and I am having a problem with the width sizes in the actual drop down.

The text length is of various sizes in the drop down. (some are long single words, some are 2 words etc)

and I am using a width size of 11em which in all browsers using a standard screen res shows up fine. but if somebody uses a smaller screen res the text starts wrapping. Where you get the 2 word lines split into 2 lines. and then If i increase the size sometimes I get separate <li>'s on the same line. Its pretty frustrating.

What I want to do is be able to increase the width size of the drop menu and even have all kinds of extra padding on the right if I want but without <li>'s spilling onto the next line or without <li>'s sitting on the same line cause its too big.

Here is my CSS for the drop.

Code:

#nav li ul {
	background: #FCDFFF;
	background-image: url('images/background.png');
	border-style: ridge;
	border-width: 5px;
	border-color: #000000;
        margin-top: 0px;
	position: absolute;
	font-size: 95%;
	width: 11em;
	left: -999em;
	line-height: 2;
	z-index: 999;
}

anybody know how I can do what Im looking for?

Thanks in advance!

Hi

I am using suckerfish drop down menu without problem on my local server, however, on the remote server them menu won't work when jscript is turned off (when viewed on IE). Do you have any idea why this might be? has anyone had this problem before? (here is the url: (URL address blocked: See forum rules))

thanks a lot

I'm an idiot when it comes to CSS, so please bare with me as I pose this seemingly simple question...

Seems as if I've tried everything, playing with all of the properties in Firebug, but to no avail. I simply want this menu centered with some extra padding between the items. Please help!

The live site is at www.danazilber.com/content.

Code:

.screen-reader-text { position: absolute; left: -9000px; } #access { /*	display: block; float: left; margin: 0 auto; width: 940px; */	float: left; margin-top: 30px; } #access .menu-header, div.menu { font-size: 13px;	margin: 0 auto; } #access .menu-header ul, div.menu ul { list-style: none; margin: 0; } #access .menu-header li, div.menu li { float: left; position: relative; } #access a { color: #363636; font-size: 13px; text-transform:uppercase; display: block; /*line-height: 30px;*/ padding: 0 10px;	padding-bottom: 10px; text-decoration: none; font-weight: bold; } #access ul ul { box-shadow: 0px 3px 3px rgba(0,0,0,0.2);	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); display: none; position: absolute; 	/*top: 30px;*/ left: 0;	float: left; width: 180px; z-index: 99999; } #access ul ul li { min-width: 180px; } #access ul ul ul {	left: 100%;	top: 0;} #access ul ul a {	background: #FFF;	color: #6A6A6A;	line-height: 1em;	padding: 10px;	width: 160px;	height: auto; font-size:10px;} /* #access li:hover > a, #access ul ul :hover > a {	background: #333;	color: #fff;} */ #access li:hover > a {	color:#888; } #access ul ul :hover > a {	background: #ACCB50;	color: #FFF;} #access ul li:hover > ul {	display: block; } /* #access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a, #access ul li.current-menu-item > a, #access ul li.current-menu-parent > a { color: #6A6A6A; } */ * html #access ul li.current_page_item a, * html #access ul li.current-menu-ancestor a, * html #access ul li.current-menu-item a, * html #access ul li.current-menu-parent a, * html #access ul li a:hover { color: #fff; }

Hi,

I cannot get the main menu on this site to center correctly in Firefox:

Code is:

PHP Code:
#navcontainer {
    background: url(../../images/background_main_menu.jpg);
    height: 33px;
    width: 590px;
    font: 12px Verdana, sans-serif;
    
}

#navlist
{
    margin: 0;
    
}

#navlist ul, #navlist li
{
    margin: 0;
    display: inline;
    list-style-type: none;
    vertical-align: middle;
    padding-left: 5px;
    padding-right: 5px;
}

#navlist a:link, #navlist a:visited
{
    font-weight: bold;
    margin: 0 2px 4px 2px;
    text-decoration: none;
    color: #FFFFFF;
}

#navlist a:hover 
{ 
    color: #527D24; 
}



<div align="center">
        <div id="navcontainer">
            <ul id="navlist">
                <li style="padding-bottom: 14px;"><a href="index.php">home</a></li>
                <li><img src="images/main_menu_seperator.jpg" width="24" height="30" alt="" /></li>
                <li style="padding-bottom: 14px;"><a href="#">about</a></li>
                <li><img src="images/main_menu_seperator.jpg" width="24" height="30" alt="" /></li>
                <li style="padding-bottom: 14px;"><a href="#">services</a></li>
                <li><img src="images/main_menu_seperator.jpg" width="24" height="30" alt="" /></li>
                <li style="padding-bottom: 14px;"><a href="links.php">links</a></li>
                <li><img src="images/main_menu_seperator.jpg" width="24" height="30" alt="" /></li>
                <li style="padding-bottom: 14px;"><a href="#">gallery</a></li>
                <li><img src="images/main_menu_seperator.jpg" width="24" height="30" alt="" /></li>
                <li style="padding-bottom: 14px;"><a href="#">contact</a></li>
            </ul>
        </div>
    </div> 

Hi, I have a client that wanted me to develop a horizontal navigation menu bar along with a sub-menu that appears horizontal right under the original.

My question is, is with the code that I have, I cannot seem to center the menu elements so that either the links are centered on the navigation bar, or so that the width of the links spread out across the whole bar. I have tried numerous tasks such as switching paddings, margins, and width of certain elements, but if anyone can help me find a solution that would be great.

I have it hosted if you want to see what it looks like to get an idea. jelc.hostzi.com/Home

CSS:
Code:

.droplinebar{ 
overflow: hidden; 
}  

.droplinebar ul{ 
margin: 0; 
padding: 0; 
float: left; 
width: 800px; 
border-top-style: ridge; 
border-top-width: 2px; 
border-bottom-style: ridge; 
border-bottom-width: 2px; 
font: bold 13px Arial; 
background: #242c54 url('../Images/bluedefault.gif') center center repeat-x; /*default background of menu bar*/
}

.droplinebar ul li{ 
display: inline; 
} 
 
.droplinebar ul li a{ 
float: left; 
color: white; 
padding: 9px 11px; 
text-decoration: none; 
}  

.droplinebar ul li a:visited{ 
color: white; 
}  

.droplinebar ul li a:hover, .droplinebar ul li .current{ /*background of main menu bar links onMouseover*/ 
color: white; background: transparent url('../Images/blueactive.gif') center center repeat-x; 
}  

/* Sub level menus*/ 
.droplinebar ul li ul{ 
position: absolute; 
z-index: 100; 
left: 0; top: 0; 
background: #303c76; /*sub menu background color */ visibility: hidden; 
} 

 /* Sub level menu links style */ 
.droplinebar ul li ul li a{ 
font: normal 13px Verdana; 
padding: 6px; 
padding-right: 8px; 
margin: 0; 
border-bottom: 1px solid navy; 
} 

 .droplinebar ul li ul li a:hover{ 
/*sub menu links' background color onMouseover */ 
background: #242c54; }

Thanks for all of the help in advance!

I am having a lot of trouble with a menu I created. It works fine in firefox, but does not display properly in IE. I created a page with images and code to explain the problem he

chrisbanker.com/cb_com_new/help.html

If anyone could help me out, that would be great. This is the one thing that is holding me back from putting this new site up.

Please reply or email cbanker[at]gmail[dot]com if you have any advice.

Thanks,
Chris

Hi All:

Im having a difficult time trying to center a menu on my site. ANy help greatly appreciated.

Here is the temporary page margueritewedwardsartist. com / home1. htm

and here is the css code im using.
all i changed was thew text-align:center on the 2nd line. all other code was generated by the menu maker. Any help is greatly appreciated.

chris

-------------------

.bg {background: url(images/button4.gif);}
.menu {text-align:center; margin:0; list-style:none; height:40px; background:#fff url(images/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursorointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(images/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(images/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(images/button4a.gif) no-repeat right top;}

.menu li:hover > a.top_link {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(images/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(images/button4a.gif) no-repeat right top;}

.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}

.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #999999; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(images/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#999999; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index:200; height:auto;}

Hello,

I have a vertical menu on the left hand side of my page that I'm working on.

I'm trying to center the text vertically in each box as some menu names take up two lines and are skewing the alignment.

Here's the code I'm using for the menu:

Code:

#menu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}

#menu ul {	
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 10px;
}	

#menu li {
margin-bottom: 4px;  /* space between each menu item */
}

#menu li a {           /* text */

font-weight: bold;
height: 25px;  /* height of menu tabs */
text-decoration: none;
color: #505050;
display: block;
padding-left: 10px;
padding-top: 5px;
background: #f4f4f4;
border-left: 4px solid #cccccc;
}	
	
#menu li a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}

If anyone could help me out that'd be great. Thanks!

Well I have this code for my menu Code:

div.menu{
	align-text: center;
	float: left;
	background-color: #FFFFFF;
	color: #000000;
	border-top:0.1em solid #000000;
	border-right:0.1em solid #000000;
	border-bottom:0.1em solid #000000;
	height: 500px;
	width: 150px;
}

But It doesnt center the links. Here is the out put http://blacknine.dajoob.com/hhd/