CSS - Joomla Suckerfish Menu, Site / Centering

I've messed with this for a couple days now. I can't seem to get it to do what I need it to. Any help would be much appreciated

I need to add a 3rd column to the menu

My code between the body and /body tags

I marked the place I need the 3rd column with: *** ( Need to add a 3rd column for the filters ) ***

Code:

<ul id="nav">

	<li><a href="#">Home</a>
</li>
	<li><a href="#">Maps</a>
	</li>
	<li><a href="history.php">History</a>
	</li>
	<li><a href="#">Contractors We Recommend</a>
	</li>
	<li><a href="#">Products We Recommend</a>
		<ul>
			<li><a href="#">Pool Accessories</a>
			<ul>

				<li><a href="#">Pool Accessories</a></li>
				<li><a href="#">Pool Accessories</a></li>
				<li><a href="#">Pool Accessories</a></li>
				<li><a href="#">Pool Accessories</a></li>
				<li><a href="#">Pool Accessories</a></li>
			</ul>
				
			</li>
			<li><a href="#">Pool Chemicals</a>
			<ul>

			<li><a href="#">Pool Chemicals</a></li>					<li><a href="#">Pool Chemicals</a></li>
			<li><a href="#">Pool Chemicals</a></li>
			<li><a href="#">Pool Chemicals</a></li>
			<li><a href="#">Pool Chemicals</a></li>
			</ul>
				
			</li>

			<li><a href="#">Pool Filters</a>
			<ul>

			<li><a href="#">Pool Filters</a></li>					<li><a href="#">Pool Filters</a></li>
			<li><a href="#">Pool Filters</a></li>
			<li><a href="#">Pool Filters</a></li>
			<li><a href="#">Pool Filters</a></li>
			</ul>
				
			</li>

***  ( Need to add a 3rd column for the filters ) ***



			<li><a href="#">Pool Heaters</a>
			<ul>
			<li><a href="#">Hayward</a></li>
			<li><a href="#">Pentair</a></li>
			<li><a href="#">Sta-Rite</a></li>

			</ul>
			</li>
			<li><a href="#">Pool Motors</a>
			<ul>
			<li><a href="#">Pool Motors</a></li>


			</ul>
				
			</li>
			<li><a href="#">Pool Sweeps</a>
			<ul>
			<li><a href="#">Hayward</a></li>
			<li><a href="#">Pentair</a></li>
			<li><a href="#">Sta-Rite</a></li>
			</ul>
	
</li>






<div id="content">
	
</div>

Thanks for any help!

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>

So I tried this popular drop-down menu technique and is all good except that the second-level menu links line up beside the top-level headers in IE6 instead of, well, dropping down (which thankfully does happen in FF). This would be very confusing for visitors trying to navigate!

I have seen this problem described on forums and blogs but not found a solution. The example page at HTML Dog displays properly in IE6, which offers no insights . . .

See the page in question: hire.karenjeane.com/web/site2.php

Thanks for any help!

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

Hi,

Ive got a joomla worksite and it has a menu on footer. The menu uses the following css code :


#footmenu ul {
margin: auto;
padding: 0;
list-style:none;
margin-top:7px;
}

#footmenu li {
float:left;
border-right: 2px solid #fff;
background: none;
padding: 0;
display: inline;
padding: 10 10px;
}
}


#footmenu a {
font-family: Tahoma, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
float:left;
display:block;
height: 25px;
line-height: 25px;
padding: 0 15px;
color: #666;
}

#footmenu a:hover {
/*background: #e1e1e1;
*/ color:#98aa65;
}

I have read some posts and articles on the web but i didnt have any luck with it. I could make it align in left or right but not in the middle. From what i read, i have to align the whole div as one part, dunno

Any help appreciated,

Thanks

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"

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

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

For IE, I have used text-align:center; to define the body tag, which allows the entire website to be centered no matter the browser window size.

That method doesn't seem to be working for Firefox, yet I have seen it done before.

A few of my divs are using absolute positioning (NOT absolute to the document, mind you, but to a parent div). Could this affect anything?


Again, it works fine in IE, but not in Firefox or Safari


If body {text-align:center;} is not a good centering tool, I would love any other suggestions.

Thanks!

Hi

I'm having some problems with CSS and was hoping that somebody on here could help me.

Firstly despite having a container (wrap) div set to a padding of : 0px auto; the site is not centering.

Second none of my images are showing, I've attempted to add a background and header image but neither are showing.

I'm a little confused because the same methods work fine on my wordpress site.

Here is a link to the dev site;

C:\Users\Keith\Documents\Site\index.html

And below is the CSS code;

Code:

/* ------------------------------
HTML Redefine Tags
------------------------------ */
body {
	width: 100%;
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px;
	background: url (img/background.jpg) no-repeat bottom;
}

input, form, textarea

h1, h2, h3, h4, h5, h6 {
	margin: 0; 
	padding: 0;
}

h1 {
	font-size: 18px;
}

h2 {
	font-size: 14px; 
	color: #999999;
}

h3 {
	font-size: 13px; 
	border-bottom: solid 1px #DEDEDE; 
	padding: 4px 0; 
	margin-bottom: 10px;
}

a:link, a:visited {
	color: #0033CC;
}

a:hover {
	text-decoration: none;
}


/* ------------------------------
PAGE STRUCTURE
------------------------------ */

/* #container has an absolute width (780 pixel) */

#container {
	width: 1024px;
	background: #ececec; 
	margin: 0px auto;
}

#topbar {
	width: 1000px;
	height: 118px; 
	display: block; 
	background: url(img/header.png);
	float: left;
	position: relative
}

#navbar {
	width: auto; 
	display: block; 
	height: 28px;
}

#navbar a {
	heigth: 28px; 
	line-height: 28px; 
	padding: 0 8px; 
	display: inline;
}

#main {
	width: auto; 
	display: block; 
	padding: 10px 0;}

#column_left {
	width: 332px; 
	height: 387px;
	margin-right: 1px;
	margin-left: 13px; 
	background: #000;
	float: left;
}

#column_right {
	width: 332px;
	height: 387px; 
	margin-right: 1px;
	background: #000; 
	float: left;
}

#column_right_adsense {
	width: 332px;
	height: 387px;
	background: #000; 
	float: left;
}

div.spacer {
	clear: both; 
	height: 10px; 
	display: block;
}

#footer {
	width: 1000px;
	height: 150px; 
	display: block;
	margin: 0 13px; 
	padding: 10px 13px; 
	font-size: 11px;
	color: fff; 
	background: #737373;
}

Ok, I know there must be a simple solution to this that I'm blanking on.

The website has a background image:
Code:

#background {background-image: url(x.jpg);
        margin-left: auto;
        margin-right: auto;
        width: 1024;
        height: 760;
        z-index: 1;}

So it's centered and the margins auto resize. Now, I want to add a text content area over the background so that it moves with it upon resizing. What's the best way to do so?

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