|
CSS - Help Me With Spry Horizontal Menu Bar Positioning
Hi all,
I'm a newbie on spry coding and was hoping for some help. I tried to search the forum for a similar probem, but couldn't find one. Here's the basic problem: I have a spry horizontal menu bar and my main menu items are displaying just fine when the browser screen is maximized. However, when I make the browser screen smaller on the screen, the last menu item gets pushed down to a second line. Here's what I mean: With maximized browser screen: [Item 1][Item 2][Item 3][Item 4][Item 5] With smaller browser screen: [Item 1][Item 2][Item 3][Item 4] [Item 5] Is there any way that I can use CSS, or any other method you might know, to force the items to stay on the same line, regardless of the screen size? Thanks so much for any info! Similar TutorialsI 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--> </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 Hi all! I'm trying to make a horizontal menu with vertical drop downs.. However, the dropdowns don't go where they're supposed to. The menu is more or less at hybrid between a horizontal menu and a drop-down menu, so it's probably all more or less messed up You can check out the site at: cleopatra.gebodesign.no The files are at: gebodesign.no/cleopatra/menu.php gebodesign.no/cleopatra/stylesheet.css Thanks for any input Hi folks. I'm hoping someone can help me out. I have a template I've been working with (struggling with). It has a style sheet attached to it and I'm trying to replace the main, static menu with a drop down Spry Menu. I've managed to get most of it figured out but my dropdowns aren't colored correctly. The Spry Menu isn't centered on the page. The menu titles are spread out too far also (ie. it's suppose to be "About Me" but the "Me" is way below the "About"). I'm guessing it's probably an easy fix for you all but I've been playing with it all day without a lot of progress. Thank you. Let me know if I should post links. I am having the same problem as a few other posters regarding Spry menu bars. I was wondering if someone here could help us. The link is The problem link Thanks I've been working on this issue for nearly 20 hours ... about 10 hours ago I had things working only to realize I hadn't committed my code, and now I have no idea how to get back to where I was (as my process was just hitting and missing). I'm working on installing a vertical spry dropdown menu at: www.leonianj.gov using the drupal framework. You can see by visiting the site that the drop-down menus are positioned underneath the remaining content on the page (not flash). I've manipulated pretty much all z-index values (in as many combinations as I could figure). Of course the menu is fine in FF 2+ and Safari 2+ If anyone out there could point me in the right direction it would be GREATLY appreciated! Regards, Justin I've been working on a site and have a problem with the horiztonal positioning of a div. At http://www.alphaworks.co.uk/problems/nicewag1/ I would like the position of the div with the id "page_footer" to move to the leftmost position. Can someone point out the mistake I'm making? Thanks, Geoff Hi all, I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear. You can find the page he http://www.perceptes.com/topdog/ The CSS and JS (uses jQuery) can be found he http://www.perceptes.com/topdog/css/screen.css http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment) http://www.perceptes.com/topdog/js/tdps.js http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment) For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look. Thanks very much in advance! I am trying to position two buttons on a line. They should each sit in the middle of one half of the line. Here's my code: Code: <html>
<head>
<style type="text/css">
.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}
a.button {
background: transparent url('http://www.oscaralexander.com/tutorials/img/bg_button_a.gif') no-repeat scroll top right;
color: #33C;
display: block;
float: left;
font: bold 16px arial, sans-serif;
height: 24px;
margin:0 auto;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}
a.button span {
background: transparent url('http://www.oscaralexander.com/tutorials/img/bg_button_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
a.button:active {
background-position: bottom right;
color: #22B;
outline: none; /* hide dotted outline in Firefox */
}
a.button:active span {
background-position: bottom left;
padding: 6px 0 4px 18px; /* push text down 1px */
}
</style>
</head>
<body>
<div>
<div style="float:left; width:50%; background-color:#EEE">
<a class="button" href="#" onclick="this.blur();"><span>Learn More</span></a>
</div>
<div style="float:right; width:50%; background-color:#DDD">
<a class="button" href="#" onclick="this.blur();"><span>Buy Now!</span></a>
</div>
</div>
</body>
</html>
And here's a link to the test page: http://rentalocal.thad.com/test Does anyone know what I've done wrong? Thanks, Thad Thanks for taking the time to read my question. I am trying to make a new page layout. I have one main box on the left [float: left;], and 3 stacked smaller boxes on the right [float: right;] I would like 2 lines joining the box on the left to the center box on the right. I'm trying to do this with a container that only has top and bottom borders. I don't know how to get the horizontal lines centered vertically. Also, the page layout works great in FF but not in IE. Not really sure why. Any suggestions on how to do this? oh and the green and red colors are only for development so they stand out. Thanks, Brad HTML: Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content="piercedjunkmail@hotmail.com"> <meta name="generator" content="AceHTML 5 Freeware"> <link href="TestLayoutCSS.css" rel="stylesheet" type="text/css" /> <title>Test Layout 1</title> </head> <body> <div id="HeaderContainer">hi</div> <div id="RightTopContainer">hi</div> <div id="PageTitle">This is the title of the page</div> <div id="MajorLeftMainContainer"> <div id="LeftMainContainer">hi</div> <div id="HorizontalLines"></div></div> <div id="RightCenterContainer">hi</div> <div id="RightBottomContainer">hi</div> </body> </html> CSS: Code: @charset "iso-8859-1";
body {
font-family: Foo, times, serif;
margin: 0px;
background-color: #4F9FC5;
}
#HeaderContainer {
height: 50px;
width: 100%;
/*border-color: green;
border-style: solid;
border-width: 2px;*/
}
#MajorLeftMainContainer {
/*border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;*/
float: left;
margin-top: 90px;
margin-left: 10px;
width: 67%;
height: 310px;
background-color: green;
}
#LeftMainContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: left;
/*margin-top: 90px;
margin-left: 10px;*/
width: 80%;
height: 300px;
background-color: #EAEAEA;
}
#RightTopContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: right;
margin-top: 30px;
margin-right: 10px;
width: 30%;
height: 150px;
background-color: #EAEAEA;
}
#RightCenterContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: right;
margin-top: 50px;
margin-right: 10px;
width: 30%;
height: 150px;
background-color: #EAEAEA;
}
#RightBottomContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: right;
margin-top: 50px;
margin-right: 10px;
width: 30%;
height: 150px;
background-color: #EAEAEA;
}
#PageTitle {
font-size: 25px;
font-family: arial, times, serif;
/*border-color: green;
border-style: solid;
border-width: 2px;*/
width: 340px;
height: 35px;
margin-top: 40px;
margin-left: 25px;
color: black;
font-variant: small-caps;
}
#HorizontalLines {
border-top-size: 2px;
border-top-color: red;
border-top-style: solid;
border-bottom-size: 2px;
border-bottom-color: red;
border-bottom-style: solid;
float: left;
width: 124px;
height: 30px;
vertical-align: middle;
}
Ok, I know virtually nothing about css, but realized that that a css menu is better for SEO. Anyway I found this vertical menu that works the way I want it. But I also need a horizontal version of it with dropdown submenus. Can someone help with this? I have been trying a bunch of things but it just looks awful and doesn't work right. It has 3 basic componets; Html, Javascript, and css. Here they are below. drop_down.js: Code: // JavaScript Document
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;
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "style2.css";
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</body>
</html>
Style2.CSS: Code: body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
I've tried the tutorials on CSS menus but can't seem to get it to work right for my project. I want a spacer to seperate the buttons at 1 pixels wide but currently it's about 10 pixels wide. I've adjusted until i'm blue in the face can somebody help? The code is below: Code:
<tr>
<td width="766">
<div id="navcontainer">
<ul>
<li><a href="">Home</a></li>
<li><a href=""> Project Status</a></li>
<li><a href=""> Tasks</a></li>
<li><a href="">General Information</a></li>
<li><a href="">Completed Tasks</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
CSS Code:
body,html {
margin: 0;
}
#navcontainer ul {
list-style-type: none;
text-align: center;
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
margin: 0px;
padding: 0px;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: 0.2em 1em;
color: #fff;
background-image: url(images/back.gif);
height: 24px;
line-height: 23px;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #960033;
background-attachment: fixed;
background-repeat: repeat;
background-position: center;
background-image: url(images/backover.gif);
}
--- what i want as horizontal fly out menu BUT I want the list of items to appear horizontally in a line below. These menus have the items appear vertically from a horizontal menu i looked at these and could find one http://www.cssdrive.com/index.php/menudesigns/category/C20/ Hi, I have the following menu that is currently laid out with a table: http://www.ianarmstrong.com/menutest/ I want to switch this to be styled in CSS somehow. I've looked at using a styled unordered list to do this, but that doesn't seem like the best idea as each image in my menu is different. Thus I can't have 5 different <li> elements, each with a different bg image. I need a way to handle the 5 different images, and have a mouseover effect as well. Could someone offer some direction on this problem? I have a horizonatal menu on my webise and the list items that drop down, are all jumbled into a single block of text. How do I create a new line fore each list item? Has anyone created a CSS horizontal fly-out menu list? I have a 3 level navigation list. The level 1 has 5 items, the first item of which has no sub-list. How can I get the level 2 and 3 lists to fly-out at the same level as its parent item? I am trying to create a navigation menu for a page using images i have sliced in photoshop and I now need to put the images all on a 900px wide line and link them to the appropiate pages. When i put the images next to each other i end up with a gap. The only way I have found to solve the problem is to leave the img src all on the same line. I'm sure this isn't the best way to do it and it is throwing out the div below. Ideas anyone? Code: Code: Original - Code <div id="nav"> <img id="home" src="images/menu/home.gif" alt="" /><img id="about" src="images/menu/about.gif" alt="" /><img id="wedding" src="images/menu/wedding.gif" alt="" /><img id="corporate" src="images/menu/corporate.gif" alt="" /><img id="occasions" src="images/menu/occasions.gif" alt="" /><img id="contact" src="images/menu/contact.gif" alt="" /> </div> <div id="nav"> <img id="home" src="images/menu/home.gif" alt="" /><img id="about" src="images/menu/about.gif" alt="" /><img id="wedding" src="images/menu/wedding.gif" alt="" /><img id="corporate" src="images/menu/corporate.gif" alt="" /><img id="occasions" src="images/menu/occasions.gif" alt="" /><img id="contact" src="images/menu/contact.gif" alt="" /> </div> Jake |
|||||||