CSS - Positioning A Popup Within Suckerfish Menu

Hi
I hope this is going to be a simple question!!
I have used the suckerfish menu and all I would like to do is have the menu in the center of the page with a blue border extending from the sides of the menu to the edge of the page.

The page can be viewed on http://uk.geocities.com/g_foxon/example1.htm

cheers
Wistar

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 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"

Good Evening,

Am very glad to find this board. Am working on my first paid Joomla site - and the Suckerfish menu's do not seem to center, and I cannot find any directions on how to go about making them so.

Also, many sites I've visited will scale to the size of the window open (until too small) - am using the JNS Epic Pro Template and was wondering if there was any CSS feature to program the whole site to scale as best possible.

Hope this makes sense. Am not new to computers, but rather a newbie to Joomla and CSS (although I do know a little).

If any further info is required, please just advise.

Thanking you in advance ... going live on 7/1 ...

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!

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.

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

Hi, I'm still relatively new to CSS and liquid layouts, so please bear with me. I've made a new layout using only CSS over he

http://www.abhiram.astahost.com/trialcss/index.html

and the CSS file is:

http://www.abhiram.astahost.com/trialcss/mystyle.css

Now, when I move the mouse over one of the menu buttons, there should be a popup text that appears below the the button. The problem is, I don't want the button size to increase when you move the mouse over it. This is happening because I've had to use 'position:relative'. Also, I don't want the 'content' and 'rightbar' regions moving down when you mouse over it. I've designed this in 1024x768 res. Any ideas? One way of doing it would be to use absolute positioning, but I want the text to appear below each button.

Thanks a lot.

Hi all,

Thanks for the interest,

I want to set my menus like the categories in alibaba.com ( the menu of the left side), on mouse over the sub menus should come up in the same way as here.

How can I achieve this ?

Thank you guys

I've been fighting with CSS popup menus for a while now, and finally got everything looking ... close enough ... in every browser at my disposal (even IE). Now, I've started filling my page with content and all hell's breaking loose again. *sigh*

For some background info, this page has a menu at the top, and the content area directly below it. In the content area, I have two divs that generate what's supposed to look like a dialog window.

The titlebar div has class "title", the main window area div, class "window" and ID'd "dlg1". The idea being that the "title" div can be clicked to make the "window" div display: none and fold up in a window-shade fashion via a JavaScript function. The script works flawlessly, astonishingly enough, and can be used so that several "dialogs" can exist on the page, independently expandable just by giving them different IDs.

Now for the details:
The menu is a CSS UL -> LI:hover -> UL { display: block } sort (with a cheat script to make IE a little less retarded.) I've set the z-index of the submenu UL to 1000, hoping nothing in the Z-stack would have a higher display precedence than THAT.

Firefox displays everything perfectly. The menus stay on top, the scripts work, life is good.
Opera 7 works pretty much the same way. The rollover effects are kind of slow, at least in the Linux version, but no big deal.
KDE's Konqueror 3.3.1 has no problem with the title and window divs, but always hides the menu under the <textarea> form element inside the window div. This is not acceptable, but since I will be probably the only one who will use this page in KDE, I can even live with that.
MSIE... god bless it... it can't help itself. The menu will draw over the title div, but not the window div.

So:
1) Regarding Konqueror's problem, the CSS-over-Flash post below suggests that some elements are too specialized to expect reliable z-index support. Am I to understand that my <textarea> tag will probably never sit correctly in the Z-stack unless the user agent draws them from scratch (like Firefox and Opera seem to do)?

..and, most importantly...

2) Is there ANY reason anyone can see why my menu is weaving behind those divs in IE?

Here is a link to all of my content. (It's seperated into a few files to ensure efficient use of the cache, and to make changes easier.)

Main CSS file (holds common properties to all pages, regardless of content. Controls the menu, for example.)
http://www.mtaonline.net/~nwallette/test/ttmsmain.css

Secondary CSS file (holds properties common to all pages that use the window architecture described above.)
http://www.mtaonline.net/~nwallette/test/ttmsdlg.css

Main JavaScript file (holds code to activate the window-shade function, and some other stuff yet to come.)
http://www.mtaonline.net/~nwallette/test/ttmsmain.js

MSIE patch JavaScript file (called in an IE conditional statement to fix support for :hover over LI's.)
http://www.mtaonline.net/~nwallette/test/stupidie.js

...and finally, the HTML that illustrates the problems.
http://www.mtaonline.net/~nwallette/test/argh.html

To see what I mean, you'll need to make sure the two "dialogs" are expanded (click on the title bars) and then hover over the Admin menu. Make sure your window size is small enough so the Admin menu dropdown covers part of the dialogs below it.

To see the Konqueror problem, contract the first dialog and make sure the 2nd one is expanded, and the Admin menu covers part of the multi-line text box.

Any ideas, anyone? Please??

I'm having trouble for some reason with a Navigation Position. For some reason it defaults 40px from the left and I can't make it appear left. code as follows:

#nav {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#nav li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style: none;
font: bold 12px arial;
}
#nav li a {
display: block;
float: left;
margin: 0px 0px 5px 0px;
padding: 6px 0px;
width: 108px;
color: #FFFFFF;
text-align: center;
text-decoration: none;
}
#nav li a:hover {
background: #333333;
color: #FF0000;
}
#nav div {
visibility: hidden;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 100px;
border: 1px solid #5970B2;
text-align: center;
font: 12px arial;
font-weight: bold;
}
#nav div a {
position: relative;
display: block;
margin: 0;
padding: 7px 0;
width: 100px;
text-align: center;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: 11px arial;
font-weight: bold;
}
#nav div a:hover {
background: #49A3FF;
color: #FFF
}

Any help would be appreciated. Mike

I am making a horizontal menu with dropdown submenus. It is partly coded using Dreamweaver and partly by hand. The menu works fine under IE but in Firefox it is off by a few pixels. I searched the forums and found that the problem was with the way IE rendered <div> versus the way Firefox does, but I wasn't able to solve the problem.

Could somebody also tell me how to switch from Quirk mode to standard?

for complete code visit http://www.ithaca.edu/students/sgarg1/website

Any help is appreciated

****************************************
index.html
Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Sustainable Tompkins</title>
<script language="JavaScript" type="text/JavaScript">
<!--

function start()
{

document.getElementById('layer1').style.visibility="hidden";
document.getElementById('layer2').style.visibility="hidden";
document.getElementById('layer3').style.visibility="hidden";
document.getElementById('layer4').style.visibility="hidden";
document.getElementById('layer5').style.visibility="hidden";

}


function changeOver(theNode)
{

theNode.style.background="#ffffff";
theNode.style.color="#666666";
}


function changeOut(theNode)
{
theNode.style.background="#666666";
theNode.style.color="#ffffff";

}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0  
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v;}
}
//-->
</script>
<style type="text/css">
<!--
.style11 {font-family: "Times New Roman", Times, serif}

.bullet {list-style-type: disc;}
-->
</style>
<!-- InstanceEndEditable -->
<link rel="stylesheet" href="css/mainStyles.css" type="text/css">
</head>

<body onLoad="start();">
<center>
<table width="801" border="1" cellpadding="0" cellspacing="0" onMouseOut="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer  5','','hide')">
  <!--DWLayoutTable-->
  <tr>
    <td height="132" colspan="3" valign="middle"><div align="center"><span class="style3">SUSTAINABLE TOMPKINS</span>
      </div>
      <div align="center"></div></td>
    </tr>
  <tr>
    <td height="29" colspan="3" valign="top" class="above_menu"><!--DWLayoutEmptyCell-->&nbsp;</td>
    </tr>
  <tr>
    <td height="48" colspan="3" valign="top"><!-- InstanceBeginEditable name="Menu" -->
      <table width="800" border="1">
        <tr bgcolor="#FFFFFF">
		
          <td width="70" id="mi0" class="menu" onMouseOver="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer5','','hide','Layer3','','hide');chang  eOut(document.getElementById('mi0'));" onMouseOut="changeOver(document.getElementById('mi0'));">
		  Home  
		   
		  </td>
			
          <td id="mi1" class="menu" width="89" onMouseOver="MM_showHideLayers('Layer1','','show','Layer2','','hide','Layer5','','hide','Layer3','','hide');chang  eOut(document.getElementById('mi1'));" onMouseOut="changeOver(document.getElementById('mi1'));">About St 
		   <div id="Layer1" onMouseOut="MM_showHideLayers('Layer1','','hide')">
		      <table width="200" border="1" cellpadding="0" cellspacing="0" >
                <tr>
                 <td id="mi1_1" onMouseOver="changeOver(document.getElementById('mi1_1'));" onMouseOut="changeOut(document.getElementById('mi1_1'));">* Mission</td>
                </tr>
                <tr>
                 <td id="mi1_2" onMouseOver="changeOver(document.getElementById('mi1_2'));" onMouseOut="changeOut(document.getElementById('mi1_2'));">* Coordinators</td>
                </tr>
                <tr>
                 <td id="mi1_3" onMouseOver="changeOver(document.getElementById('mi1_3'));" onMouseOut="changeOut(document.getElementById('mi1_3'));">* Sponsors/Partners</td>
                </tr>
                <tr>
                 <td id="mi1_4" onMouseOver="changeOver(document.getElementById('mi1_4'));" onMouseOut="changeOut(document.getElementById('mi1_4'));">* History</td>
                </tr>
              </table>
		    </div>
		  </td>
		  
          <td id="mi2" class="menu" width="141" onMouseOver="MM_showHideLayers('Layer1','','hide','Layer2','','show','Layer5','','hide','Layer3','','hide','Layer  4','','hide');changeOut(document.getElementById('mi2'));" onMouseOut="changeOver(document.getElementById('mi2'));">
           ST Initiatives
		     <div id="Layer2" onMouseOut="MM_showHideLayers('Layer2','','hide')">
		       <table width="200" border="1" cellpadding="0" cellspacing="0">
                 <tr>
                   <td id="mi2_1" onMouseOver="changeOver(document.getElementById('mi2_1'));" onMouseOut="changeOut(document.getElementById('mi2_1'));">Salons</td>
                 </tr>
                 <tr>
                   <td id="mi2_2" onMouseOver="changeOver(document.getElementById('mi2_2'));" onMouseOut="changeOut(document.getElementById('mi2_2'));">Surveys</td>
                 </tr>
               </table>
		     </div>
            </td>
			
          <td id="mi3" class="menu" width="143" onMouseOver="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer5','','hide','Layer3','','show','Layer  4','','hide');changeOut(document.getElementById('mi3'));" onMouseOut="changeOver(document.getElementById('mi3'));">
           Helpful Links 
		     <div id="Layer3" onMouseOut="MM_showHideLayers('Layer3','','hide')">
		       <table width="200" border="1" cellpadding="0" cellspacing="0">
                 <tr>
                   <td id="mi3_1" onMouseOver="changeOver(document.getElementById('mi3_1'));" onMouseOut="changeOut(document.getElementById('mi3_1'));">Grouped</td>
                 </tr>
                 <tr>
                   <td id="mi3_2" onMouseOver="changeOver(document.getElementById('mi3_2'));" onMouseOut="changeOut(document.getElementById('mi3_2'));">Annotated</td>
                 </tr>
               </table>
		     </div>
         </td>

// Two More instances of the sub menus.
	
        </tr>
		
      </table>
   </tr>

</table>
</center>
</body>
</html>

css file
Code:

<!--
.style2 {font-size: x-small; color:#666666}
.above_menu{background-color:#0066CC}
.Common{background-color:#0099FF}
.Variable{background-color:#0099ff}
.background {background-color: #93AA39}
.footer {border-bottom-color:#000000}
.content {background-color:#E6FF80}
.style3 {font-size: 36px}
.style5 {color: #666666}
.style6 {color: #FFFFFF}
.style7 {font-size: 9px}
.style8 {font-size: 14px;color: #FFFFFF;}
.style9 {font-size: 14px}

#Layer1 {position:absolute; width:143px; height:74px; z-index:1; left: 180px; top: 207px;}
#Layer2 {position:absolute; width:143px; height:24px; z-index:2; left: 276px; top: 207px;}
#Layer3 {position:absolute; width:143px; height:36px; z-index:3; left: 423px; top: 207px;}
#Layer4 {position:absolute; width:200px; height:145px; z-index:4; left: 572px; top: 207px;}
#Layer5 {position:absolute; width:143px; height:36px; z-index:3; left:736px; top: 207px;}


#mi1_1  {background-color:#666666; text-align:left; color:#ffffff;margin:0}
#mi1_2  {background-color:#666666; text-align:left;color:#ffffff;margin:0}
#mi1_3	{background-color:#666666; text-align:left; color:#ffffff;margin:0}
#mi1_4  {background-color:#666666; text-align:left; color:#ffffff;margin:0}
#mi2_1  {background-color:#666666; text-align:left; color:#ffffff;margin:0}
#mi2_2  {background-color:#666666; text-align:left; color:#ffffff;margin:0}
#mi3_1	{background-color:#666666; text-align:left; color:#ffffff}
#mi3_2  {background-color:#666666; text-align:left; color:#ffffff}
#mi4_1  {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_2  {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_3	{background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_4  {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_5  {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_6  {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_7	{background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_8  {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi5_1  {background-color:#666666; text-align:left; color:#ffffff}
#mi5_2  {background-color:#666666; text-align:left; color:#ffffff}

a:hover {color: #666666;text-decoration:none;}
a{text-decoration:none; color:#FFFFFF}

td:hover{color: #666666}
.menu{text-align:center; color: #666666}

websitewebsite

Hello there,

I have been trying to get a web site up and running and am having problems getting a graphic to be positioned to the left and a menu right justified.

So far I have been able to make the CSS compatible with both firefox and IE.

So far I've got


Code:

<table width="100%" bgcolor="#666666">
	<tr>
		<td>	
			<img src="images/logo.gif">
		</td>
		<td>
			<div class="menu" style="text-align:center">
				<div class="outerFirst"><a href="index.php"><span>Home</span></a></div>
				<div class="outerFirst"><a href="index.php"><span>Services</span></a></div>
				<div class="outerFirst"><a href="index.php"><span>Senoir Centers</span></a></div>
				<div class="outerFirst"><a href="index.php"><span>Calendar / Menu</span></a></div>
				<div class="outerFirst"><a href="index.php"><span>Contact Us</span></a></div>
				<div class="outerFirst"><a href="index.php"><span>About</span></a></div>
			</div>
		</td>
	</tr>
</table>

and for the CSS

Code:

#menu {
	height: 54px;
	margin: 3em 0; padding:0 1em;
	border-bottom: 0px solid black;	
}

div.outerFirst {
	float: left;
	width: 100px; height: 130px;
	margin: 0 0px 0 0;
	background: url( '../images/greyFirst.gif' ) 0 -50px no-repeat;
	}
div.outerFirst a {
	cursor: pointer;
	display: block;
	margin: 0; padding:0;
	width:100px; height:54px;
	overflow:hidden;
	font-family: Arial;
	font-size:0.7em;
	font-weight:normal;
	color:#FFFFFF;
	text-decoration: none;
	background: url( '../images/greyFirst.gif' ) top left no-repeat;
	}
div.outerFirst span {
	height: 54px;
	display: block;
	margin:0; padding: 25px 0px 0px 0px;
	}

I know that I've got tables in there, but I don't know how the image and the menu be on the same level without it.

Any help with the CSS and html (if I've missed something) would be awesome.

Thanks!

- K

Hello,

I'm building a portfolio for a close friend of mine and I REALLY can't seem to figure out this navigation menu she wants me to make.

I have the menu in place but the drop down is both WAY too far to the right and UNDER the slideshow.

Could anyone kindly show me how to get that stupid thing to appear UNDER the 'Galleries' section and ABOVE the slideshow?

http://saranicolephotography.com/

Thanks!