|
CSS - Centering Suckerfish Pulldown Menus
Was referred to Suckerfish and find it very useful but I cannot figure out how to center the menu line on the screen (inside a table or not). Oddly, it automatically centers in IE but not Chrome or Firefox. Any suggestions? Thanks in advance!!
I can post an example of what I mean but don't want to violate the new users guidelines. Similar TutorialsI am not sure how to centre all items on the suckerfish menus: I thought this would work, but it doesn't and even if it did it won't validate: <ul id="nav"> <div style="text-align:center;margin-left:auto;margin-right:auto;"> NAV ELEMENTS HERE... </div> </ul> Surely someone has had to centre there suckerfish menu to a fixed width box..or any box for that matter. I've been trying to make a "pop-up" window with CSS which works great for the most part, except in IE when there is a form pull-down menu behind it. For some reason in IE it just sticks right through the top z-indexed layer: Hello, I currently have a site (left aligned) that has its own Javascript pulldown menu. Its is pretty standard with the sub-menu's being in their own layer and are shown on mouseover. My problem is that these sub-menus are currently set at an absolute left position (CSS) but, if centered, will appear in different places at different resolutions. Does anyone know if its possible to anchor a layer to a point from something on a different z-index? I did a search on the forums here and found a similar question but no responses. Thanks guys! Suckerfish came into my life recently and has not only offered a great deal of freedom with dynamic menus at lower overheads than most (totally) Javascript alternatives, but has also had me tearing hairs out more frequently than most other things I know. The problem I currently face is when viewing my menus in IE6. At first this suggests that the issues lie within the Javascript of the Suckerfish menus... The pages in questions are located at the following addresses (please excuse the mid-construction state of each): www.cheapboilers.com/sandbox/index.html www.cheapboilers.com/sandbox/baxi_105.html Take the grey vertical menu on the left hand side. The first level appears fine, but the problem is with the second level. In index.html all appears well. However in baxi_105.html when moving down the list in the second level menu the menu disappears when moving from the first to the second item. At first I thought the problem was to do with the margins surrounding the elements - I thought the li element had detected the mouse as having left the element as it passed over the border. If this were true then the same would happen with the index.html page (which uses the same code/html/css). It does not. My current theory is that the other elements on the page are somehow interfering with the Suckerfish menus. Index.html has nothing but text in the content of the page. baxi_105.html has images, links etc in it. This theory is backed up by going to the bottom list item in index.html (Worcester) and viewing the second level menu for it. The menu vanishes as with all the menus on baxi_105.html. It is as if the footer of the page is interfering with the operation of the menus. This disappearing menu issue is driving me up the wall. Please can someone offer a solution? Thanks in advance. Andy http://www.sdtars.com/development/ I can't figure out why I can't get them to popup over the other menus. Can anyone see what I am doing wrong? Thanks! Hello my helpful comrades, I'm having some problems with the ol' Suckerfish in IE. It seems the second list is floating left, insead of appearing beneath the first list, and "clear:" won't fix it. I've been looking over the CSS all morning, but can't seem to locate the problem. The menus display perfectly in Fx. I have a feeling a lack of sleep is making me mildly stupid, but the slow progress thus far has driven me to seek help I've put the menu in a seperate .css file from the main layout to make it easier to read: CSS HTML Cheers! I want to make the drop downs on suckerfish menus appear horizontally rather than vertically. Any ideas how to? PHP Code: <style type="text/css"> #nav, #nav ul { padding: 0; margin: 0; list-style: none; background-color: red; color: #000; } #nav a { display: block; width: 10em; color: #FFF; } #nav li { float: left; width: 10em; background-color: green; } #nav li ul { position: absolute; width: 10em; left: -999em; } #nav li:hover ul { left: auto; } #nav li:hover ul, #nav li.sfhover ul { left: auto; } </style> <ul id="nav"> <li><a href="#">Percoidei</a> <ul> <li><a href="#">Remoras</a></li> <li><a href="#">Tilefishes</a></li> <li><a href="#">Bluefishes</a></li> <li><a href="#">Tigerfishes</a></li> </ul> </li> <li><a href="#">Anabantoidei</a> <ul> <li><a href="#">Climbing perches</a></li> <li><a href="#">Labyrinthfishes</a></li> <li><a href="#">Kissing gouramis</a></li> <li><a href="#">Pike-heads</a></li> <li><a href="#">Giant gouramis</a></li> </ul> </li> <!-- etc. --> </ul> I thought I could change the BLOCK display of the #nav a to INLINE but that doesn't work. We want the dropdowns to appear as 1 2 3 4 5 rather than 1 2 3 4 5 Thanks Hi fowks, Normally I'm able to solve CSS issues relatively easily, well with some experimentation at least. However, this one has really got me stumped. Basically, I'm developing a menu for a weblication which is based on the famous Suckerfish menus. Everything works ok in IE and Mozilla when in an Left-to-Right (LTR) environment, but it doesn't work quite so well when the direction is flipped to RTL. IE copes fine, but FF doesn't. The menu works itself, but the viewport doubles in size and scrolls off to the right, even though there are no elements there. Anyone got an idea as to what could be doing this? I've included the relevant files for you to trial. Thanks for having a look. Hope you can help. It's driving me nuts. Cheers, John I'm trying to use suckerfish style drop downs, based on CSS with javascript only for an Internet Explorer hack. It's working fine for a single horizontal row of menus, however I wanted to setup a few rows of other menus underneath the first row. The problem is that the dropdown goes underneath the menus under it and I can't figure out how to fix it. This is an example of the problem. Any suggestions? I have been developing some dropdown menus loosely based on Patrick Griffiths "Suckerfish" example (see http://www.alistapart.com/articles/dropdowns/) and I have a prototype mostly working. The code is simple and is included in full below. However I see two problems with this that I can't sort out. First, in IE (6.0.2800) the dropdown is offset significantly from the left edge of the upper menu cell. In Mozilla (1.7.5) it's fine. I can't figure out why -- any ideas? I want it right underneath, not offset. Also, in Mozilla the dropdowns have a 1-pixel space at the right edge between the background and the border. Also a mystery ... Thanks for any comments / thoughts. Tom ======================================================== Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
font-family: arial, helvetica, serif;
background: white url(images/ddbg3.gif) no-repeat 6000px 6000px;
margin-left: 1em;
}
.mainlist {
list-style: none;
padding: 0;
margin: 0;
}
.mainitem {
float: left;
position: relative;
width: 120px;
text-align: center;
cursor: hand;
padding: 0;
border-top: 1px solid green;
border-left: 1px solid green;
border-bottom: 1px solid green;
}
.mainitem a {
font-weight: bold;
color: green;
text-decoration: none;
}
.mainitemlast {
border-right: 1px solid green;
}
.mainlist li:hover ul {
display: block;
left: 0;
}
li.over ul {
display: block;
left: 0;
}
.sublist {
display: none;
position: absolute;
float: left;
top: auto;
font-weight: normal;
background-color: #CCCCFF;
width: 150px;
padding: 0;
}
.subitem {
display: block;
float: left;
position: relative;
left: 0;
width: 100%;
border-top: 1px solid blue;
border-left: 1px solid blue;
border-right: 1px solid blue;
}
.subitemlast {
border-bottom: 1px solid blue;
}
.subitem a {
display: block;
font-weight: normal;
color: #060;
padding: 5px;
}
.subitem a:hover {
background-color: #EEEEFF;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script>
</head>
<body>
<div id="content">
<br>
<ul class="mainlist" id="nav">
<li class="mainitem">
<div><a href="">Option 1</a></div>
<ul class="sublist">
<li class="subitem"><a href="">Subitem 1</a></li>
<li class="subitem"><a href="">Subitem 2</a></li>
<li class="subitem"><a href="">Subitem 3 is longer</a></li>
<li class="subitem subitemlast"><a href="">Subitem 4</a></li>
</ul>
</li>
<li class="mainitem">
<div><a href="">Option 2</a></div>
<ul class="sublist">
<li class="subitem"><a href="">Subitem 1</a></li>
<li class="subitem"><a href="">Subitem 2</a></li>
<li class="subitem"><a href="">Subitem 3 is longer</a></li>
<li class="subitem subitemlast"><a href="">Subitem 4</a></li>
</ul>
</li>
<li class="mainitem mainitemlast">
<div><a href="">Option 3</a></div>
<ul class="sublist">
<li class="subitem"><a href="">Subitem 1</a></li>
<li class="subitem"><a href="">Subitem 2</a></li>
<li class="subitem"><a href="">Subitem 3 is longer</a></li>
<li class="subitem subitemlast"><a href="">Subitem 4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
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 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 ... Good morning I can't seem to get the footer menu on my site (philipus.com) appear like I want it (it's Stu Nicholl's Skeleton Up menu). These are the problems. 1. The menu items (Start, Galleries etc) are all pushed to the left. I tried text-align: center in the #nav, li and ul but it doesn't work. How can I center them? 2. A border is defined in #nav ul which makes it appear also around the Galleries and Wallpapers pop-up menus. How can I ensure that it only appears around the pop-up menus? 3. The pop-up menu above the Galleries link isn't centered, but the pop-up above the Wallpapers links seems to be. Why is this and how can I ensure both are centered? 4. In IE, the pop-up menu items move to the left when the cursor hovers over them. How do I prevent this? 5. How can I make the pop-up menus a little bit "sticky", such that they allow you to slowly move the cursor up to them? Currently one has to move the cursor quickly to the pop-up menu otherwise it disappears. Does this have to do with the pop-up menus not overlapping a few pixels with the main menu? 6. I noticed when placing the menu in the middle of the page that the copyright text below the menu moved to the right. How can I ensure that the copyright text isn't affected by the menu? Thanks immensely for your help. The menu's stylesheet is below. /p Code: #nav,
#nav ul {padding:0 0 5px 0; margin:0; list-style:none; font: 10px verdana, sans-serif; border:1px solid #000; border-color:#ace #79b #68a #bde; border-width:1px 2px 2px 1px; background:#fff; position:relative; z-index:200;}
#nav {height:25px; padding:0;}
#nav li {float:left;}
#nav li li {float:none; background:#fff;}
/* a hack for IE5.x and IE6 */
* html #nav li li {float:left;}
#nav li a {display:block; float:left; color:#888; margin:0 25px 0 10px; height:25px; line-height:25px; text-decoration:none; white-space:nowrap;}
#nav li li a {height:20px; line-height:20px; float:none;}
#nav li:hover {position:relative; z-index:300;}
#nav li:hover ul {left:0; bottom:21px; top:auto;}
/* another hack for IE5.5 and IE6 */
* html #nav li:hover ul {left:10px;}
#nav ul {position:absolute; left:-9999px; top:-9999px;}
/* yet another hack for IE5.x and IE6 */
* html #nav ul {width:1px;}
/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left:-15px; margin-left:100%; bottom:-7px; top:auto;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover > a {text-decoration:underline; color:#57b;}
/* but IE5.x and IE6 need this lot to style the flyouts and path followed */
/* show next level */
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:-15px; margin-left:100%; bottom:-7px; top:auto;}
/* keep further levels hidden */
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}
/* show path followed */
#nav li:hover a,
#nav li:hover li:hover a,
#nav li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover li:hover a
{text-decoration:underline; color:#57b;}
/* hide futher possible paths */
#nav li:hover li a,
#nav li:hover li:hover li a,
#nav li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li:hover li a
{text-decoration:none; color:#888;}
Hey Guys, I'm switching over from a completely javascripted and clunky menu system to htmldog/alistapart's Son of Suckerfish CSS pulldown menu. (ref: http://www.htmldog.com/articles/suckerfish/dropdowns/ ) Now, I'm having trouble with the new menu sitting behind other properties on my pages; namely other form-pulldowns. Can you suggest anything that might correct this - I've tried z-indexing the pulldowns but that doesn't seem to do the trick!? Check this out at : http://www.pps.org/gps/ - pass your cursor over Placemaking Tools. Note - this seems to be a problem I'm noticing with IE6; in Mozilla/Firefox everything works alright. Cheers, Qasim Virjee pps.org qasim.ca (personal) Hey I'm having some trouble with the website I'm trying to make. I got a css style pulldown menu, but the pulldown part can't be seen because its on the top frame of a frameset. Is there a way to make the pulldown extend over the edge of the frame? Hello. My site works fine in Firefox 3 of course not sure about IE 7 but in IE 6 the menus bar links are not dropping down ie About Us, Services ect. What did I miss? Site Link Matt Hi, Can anyone help me. I am using a son of suckerfish dropdown menu on a joomla 1.5 site I am working on. laminatefabricators.com The menu is dropping down fine on all of my browsers (apple mac: safari, camino, firefox). & are fine on firefox for pc. The menus aren't displaying at all on Internet explorer. Please help... I have wasted so much time trying to fix it/find a fix. I'm working on my first suckerfish dropdown for a site. I'm encountering two problems. 1) There is no background color on the subitems when i select the main item, making them hard to read 2) Internet Explorer displays the dropdown to the right of the main list item, rather than below. Netscape displays it correctly. Is this due to something I altered? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Markey Home Remodeling</title>
<link href="main.css" rel="stylesheet" type="text/css">
<style title="text/css">
#container {
width: 562px;
background: #F4ECD9;
text-align: left;
margin: 0 auto;
}
#nav, #nav ul {
float: left;
width: 562px;
list-style: none;
line-height: 1;
background: EAE3A3;
font-weight: bold;
padding: 0;
margin: 0 0 1em 0;
}
#nav a {
display: inline;
width: 10em;
w\idth: 6em;
color: #7C6240;
text-decoration: none;
padding: 0.25em 2em;
}
#nav a.daddy {
background: url(rightarrow2.gif) center right no-repeat;
}
#nav li {
float: right;
padding: 0;
width: 10em;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 13.9em;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}
#nav li li {
padding-right: 1em;
width: 13em
}
#nav li ul a {
width: 13em;
w\idth: 9em;
}
#nav li ul ul {
margin: -1.75em 0 0 14em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
background: white;
}
</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>
</head>
<body>
<table width="800" border="0" cellspacing="0" cellpadding="0" class="tableborder" align="center">
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td height="20" width="562" class="leftnav">
<div id="container">
<ul id="nav">
<li><a href="#">SIDING</a></li>
<li><a href="#">GUTTERS</a></li>
<li><a href="#">BASEMENTS</a></li>
<li><a href="#">WINDOWS</a>
<ul>
<li><a href="#">300 Series</a></li>
<li><a href="#">900 Series</a></li>
<li><a href="#">Sliding</a></li>
<li><a href="#">Bay and Bow</a></li>
</ul>
</li>
<li><a href="#">DOORS</a>
<ul>
<li><a href="#">Entry</a></li>
<li><a href="#">Patio</a></li>
<li><a href="#">Garage</a></li>
</ul>
</li>
</ul>
</div></td>
<td class="rightnav">
<div id=linkstyles> <a href="#">HOME</a> <a href="#">CONTACT US</a>
</div></td></tr>
<tr>
<td>
<table width="562" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/mainimage.jpg"></td>
</tr>
<tr>
<td><div align="center"><img src="images/whychoose.jpg"></div></td>
</tr>
<tr><td>
<table width="98%" border="0" cellspacing="0" cellpadding="0" align="center" class="maincontenttable">
<tr>
<td width="50%">REPUTATION: A proven track record with thousands of
delighted customers.
<br><br>
QUALITY: The highest quality products, the best trained
window installers
*all A.W.D.I. (American Window and Door Installed) Certified.
<br><br>
PRICE: The lowest prices on the highest quality
brand-name products. Period.
<br><br>
Factory Authorized Distribution, Factory Trained
Employees.
<br><br>
Qualified, Courteous Salespeople treat you with
professionalism and respect.
</td>
<td width="355"> </td>
</tr>
</table>
</td></tr>
</table>
</td>
<td valign="top" width="100%" class="mainrighttable">
<table width="230" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td><img src="images/pledge.jpg" hspace="5" vspace="5"></td>
</tr>
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="right" class="rightcontenttable">
<tr>
<td>Our business has always been family owned
and operated. For more than 27 years, we
have served our community with pride and
integrity. Years ago, the best craftsmen always
put their names on their work.
<br><br>
We still do.</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<span class="style1"></span></td>
</tr>
</table>
</body>
</html>
Thanks for your 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>
|
|||||||