|
HTML - Spry Menu Help Needed!
Hi,
My website is www.bcsticketsnow.com. My spry menu at the top works perfectly in firefox, not so perfectly in IE. In IE the menu shows up in the top left corner when you mouseover. In firefox it correctly drops down below the parent item. I made it in dreamweaver. Any idea why it does that? My styles are at bcsticketsnow.com/styles.css my .js file is bcsticketsnow.com/SpryMenuBar.js the rest you can view the source on any page. Any help is much appreciated, thanks! Joel Similar TutorialsI'm a little stuck with my spry menu. I have been editing it and trying to find the best way to position it and also how to add a border to encompass and seperate all elements. Basically I was wondering if this was the beat way to code the menu or if I was way off Right now my code looks like this: On the page- Code: <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.MenuBarHorizontal{ position:absolute; left: 50%; top: 215px; min-width:690px; max-width:690px; margin-left:-345px }
.style1 {
color: #000000
}
</style>
</head>
<body id="page6">
<ul class="MenuBarHorizontal" id="MenuBar1" name="MenuBar1">
<li><a href="#" class="style1">xxxxxxx</a> </li>
<li><a href="#" class="MenuBarItemSubmenu style1">xxxxxx</a>
<ul>
<li><a href="#" class="style1">xxxxx</a></li>
<li><a href="#" class="style1">xxxxx</a></li>
<li><a href="#" class="style1">xxxxx</a></li>
<li><a href="#" class="style1">xxxxx</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu style1">xxxxxx</a>
<ul>
<li><a class="style1" href="#">xxxxxx</a>
<ul>
<li><a href="#" class="style1">xxxxxx</a></li>
<li><a href="#" class="style1">xxxxxx</a></li>
</ul>
</li>
<li><a href="#" class="style1">xxxxxx</a></li>
<li><a href="#" class="style1">xxxxxx</a></li>
</ul>
</li>
<li><a href="#" class="style1">xxxxxx</a></li>
<li><a href="#" class="style1">xxxxxx</a></li>
<li><a href="#" class="style1">xxxxxx</a></li>
<li><a href="#" class="style1">xxxxxx</a></li>
</ul>
In the Menu Bar CSS File - Code: @charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/*******************************************************************************
LAYOUT INFORMATION: describes box model, positioning, z-order
*******************************************************************************/
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 100;
padding: 100;
list-style-type: none;
font-size: 100%;
cursor: default;
width: inherit;
background-image: url(../images/spry.png);
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 100;
padding: 100;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
background-image: url(images/spry.png);
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
top: 33px;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: 1px;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 8.2em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}
/*******************************************************************************
DESIGN INFORMATION: describes color scheme, borders, fonts
*******************************************************************************/
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 2px solid #000000;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
text-decoration: none;
background-image: none;
background-color: #a9bebc;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #789492;
color: #000000;
}
/*******************************************************************************
SUBMENU INDICATION: styles if there is a submenu under a given menu item
*******************************************************************************/
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/*******************************************************************************
BROWSER HACKS: the hacks below should not be changed unless you are an expert
*******************************************************************************/
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #789492;
}
}
Thanks in advance for any and all help. I moved this thread to CSS. It is in the wrong place. http://www.htmlforums.com/css/t-spry...ie-117172.html Good afternoon, I'm currently designing a site for a large exterior decorating company. I've had trouble, but nothing I couldn't work around. My graphic design skills are great, but my web coding is amateur at best. I've compiled a fixed-width site, it looks great in every browser, and in different resoultions. here's the kicker. (and I would have included code if the site were local on this computer, but it's on my laptop) My navigation is giving me major issues. Its set up to link to the site directory folder on my pc, the preview is real-time - what i'm trying to say is you can navigate the site from my pc, although it's not online. and the links work. I have one main-navigation, with drop-downs to a maximum of 2 sublevels (ie: spry vertical menu bar). I can navigate the main level to any of the sub-levels without issue. Code: /../index.html ---- to ---- /../products/siding/wood.html BUT when navigating back to any menu (or to a different sub-level in the same category, ie: siding/aluminum.html) for lack of a better explanation - the url won't drop the current directory. What I mean by this is Code: /../products/siding/wood.html ---- to ----- products/siding/aluminum.html redirects to products/siding/siding/aluminum.html So what i'm asking is if someone can assist me in fixing my page so it doesn't do this. I feel after writing this that my issue lies in the fact that I haven't specified index.html as my root directory. You would assume it would come intuitively for the page to drop the current directory, especially when you're specifying a page in a different level.. But apparently not. Also, i've explored it before but never found a decent answer: Is there any code that will allow me to embed the navigation to each page from a single file. Allowing easy changes to the navigation, simply by editing one file - the navigation? Hi, I have a problem with my spry menu and was wondering if there was a way of fixing it. Firstly it only occurs in IE Second, it fixes it self when I remove the IFRAME on the right (problems still there even if I use OBJECT instead of IFRAME) The problem is, the spry menu bar sub menus wont open out in IE whereas it does in FF. ANY help would be appreciated Hello, I'm working on website and I want to use spry drop down menu bar and I have trouble with it. This is how I want it to be like : When menu is active(rollover hover), it turns darker blue from light blue, and the submenu is same light blue when its not active, but it turns to pink when its active. By far, what I got is : When I roll over submenu, the color is not different from the menu unless the submenus has subsubmenu.... (its orange, but I'm gonna change to pink) like this: It is kinda hard to explain.. but I hope you understood. Thank you very much! --------- here is code : I didn't make any change for the upper part, and this is only part that I made changes. and I only changed colors. --------- } ul.MenuBarHorizontal a{ display: block; cursor: pointer; background-color: #33CCFF; padding: 0.5em 0.75em; color: #FFFFFF; text-decoration: none; } ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{ background-color: #336699; color: #FFF; } ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{ background-color: #336699; color: #FFF; } ul.MenuBarHorizontal a.MenuBarItemSubmenu{ background-image: url(SpryMenuBarDown.gif); background-repeat: no-repeat; background-position: 95% 50%; } ul.MenuBarHorizontal ul a.MenuBarItemSubmenu{ background-image: url(SpryMenuBarRight.gif); background-repeat: no-repeat; background-position: 95% 50%; } ul.MenuBarHorizontal a.MenuBarItemSubmenuHover{ background-image: url(SpryMenuBarDownHover.gif); background-repeat: no-repeat; background-position: 95% 50%; background-color: #336699; } ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover{ background-image: url(SpryMenuBarRightHover.gif); background-repeat: no-repeat; background-position: 95% 50%; background-color: #FF3366; Hi. i have a option menu that come behind the adobe pdf embed. after open this link http://thewebcodes.com/index.php?id=2 when we go to the first menu option, it goes behind (this only appens in Internet Explorer) How could i solve it? Thank's in advance Hi all, I created a very simple Spry menubar using dreamweaver. It copied all the necessary CSS and JS into a folder for me. I have one question. whenever i selected (clicked) on an item(link) on the submenu. the submenu stays open while the page load in the frame. Is there a way to configure it so when i click on an item in the submenu, the submenu will close and the page will still load in the frame? Please can someone help me? The little arrows at the top of the drop down menu's are covering the last few letters of the menu names - see http://www.marcoolasurfclub.com.au/M...ide/index.html Can anyone help me bring this down a bit so that you can still easily read the menu items? I've tried all sorts of things with no luck and I need to make these pages live urgently. Thanks! Hey guys Was hoping someone could help me with a little HTML problem. I have two pages - lets call them home and page1. On page1 i have a dropdown list with products in it and on the home page i have a list of "popular products" (which are included in the dropdown list). I am trying to make it so that when a customer clicks one of the "popular products" from the homepage, it links them to page1 and automatically selects the product from the dropdown. The name of the dropdown menu is "products" so i tried using the link "page1.html#products#product1" but this just links to page one and nothing else. Yet if the link is "page1.html#products" then it links to page1 and highlights the products dropdown menu - but does not select anything. I would really appreciate any help with this. thanks mckeegan375. Hello everyone. I have a spry accordion menu in a table and as you well now when it is clicked you get a highlight around the edge of the spry object, i'm on a mac so mine is grey and when I look at it on my friends PC it is blue. Is there any way to simply get rid of this highlighting effect? Thanks Thecaia23 This might belong in the CSS forum? I'm trying to link to the "Legislation" tab from the footer links. All of this content is on one page and i can't seem to link to it. I tried adding an anchor to Legislation but that didn't work. there must be a way. The page is built using Spry in Dreamweaver CS3. thanks for your help http://www.dynamitedave.com/rsc/index.shtml Hi I am doing a quick website on the cheap. So I decided to add a Spry Accordion for the menu set up. The issue I am finding is that when I click any of the menu items a boxed focus selection border appears around the whole menu, which looks bad in the design. Is there any way to get rid of this issue so when you use the menu this doesn't appear? Also, at present you have to have one of the menu items open as a selection. Is it possible to manipulate the code so that none of the menu elements are open to start? Thanks in advance i think this is an easy one..... i am using 2 identical spry cluster effects - but two links to two slides i have problem - the spry slide effect works fine for the first instance - but not for the second instance. what changes need to be made to the Cluster call to get it to work?!?! here is a snippet of my source code to reveal the problem.... ///////////////////////////////////////////////////////////////////////////////////////// <!-- WORDSFORMS --> <Div id="sec1" style="display: none;" class="sec1"><strong>Wordsforms</strong> <br> <a onClick="cluster.start();"> > <!-- open symbol --> </a> <div id="first_cluster" class="wordsforms" > <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vel sem nec massa cursus interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis euismod eros consequat nibh. Pellentesque non purus. Nam lectus magna, faucibus vel, aliquet id, commodo vitae, elit. Maecenas sollicitudin, nibh iaculis bibendum consequat, odio erat volutpat ipsum, sed dignissim ligula mi in justo. Nam placerat. Nullam fringilla tortor. Quisque lacinia, mi non iaculis adipiscing, turpis lacus eleifend velit, dictum facilisis pede diam sagittis nulla. Nunc vestibulum elementum enim. Etiam lorem felis, faucibus sit amet, vulputate sed, lobortis et, nunc. Morbi vitae lectus. </p> </div> </div> <!-- ACTIVATE WORDSFORMS SPRY GROW/HIDE --> <script type="text/javascript"> var my_cluster = function(element) { Spry.Effect.Cluster.call(this, {toggle: true}); this.name = 'my_cluster'; var resize_hor = new Spry.Effect.Size(element, {width:0, height: 0, units:'px'}, {width:350, height: 10, units:'px'}, {duration: 1, toggle: true}); this.addNextEffect(resize_hor); var resize_ver = new Spry.Effect.Size(element, {width:350, height: 10, units:'px'}, {width:350, height: 230, units:'px'}, {duration: 1, toggle: true}); this.addNextEffect(resize_ver); } my_cluster.prototype = new Spry.Effect.Cluster(); my_cluster.prototype.constructor = my_cluster; var cluster = new my_cluster("first_cluster"); </script> <!-- GIRLSBOYS --> <div id="sec2" style="display: none;" class="sec2"><strong>GirlBoys</strong> <br> <a onClick="cluster.start();"> > <!-- open symbol --></a> <div id="second_cluster" class="girlsboys" > <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vel sem nec massa cursus interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis euismod eros consequat nibh. Pellentesque non purus. Nam lectus magna, faucibus vel, aliquet id, commodo vitae, elit. Maecenas sollicitudin, nibh iaculis bibendum consequat, odio erat volutpat ipsum, sed dignissim ligula mi in justo. Nam placerat. Nullam fringilla tortor. Quisque lacinia, mi non iaculis adipiscing, turpis lacus eleifend velit, dictum facilisis pede diam sagittis nulla. Nunc vestibulum elementum enim. Etiam lorem felis, faucibus sit amet, vulputate sed, lobortis et, nunc. Morbi vitae lectus. </p> </div> </div> <!-- ACTIVATE WORDSFORMS SPRY GROW/HIDE --> <script type="text/javascript"> var my_cluster = function(element) { Spry.Effect.Cluster.call(this, {toggle: true}); this.name = 'my_cluster'; var resize_hor = new Spry.Effect.Size(element, {width:0, height: 0, units:'px'}, {width:350, height: 10, units:'px'}, {duration: 1, toggle: true}); this.addNextEffect(resize_hor); var resize_ver = new Spry.Effect.Size(element, {width:350, height: 10, units:'px'}, {width:350, height: 230, units:'px'}, {duration: 1, toggle: true}); this.addNextEffect(resize_ver); } my_cluster.prototype = new Spry.Effect.Cluster(); my_cluster.prototype.constructor = my_cluster; var cluster = new my_cluster("first_cluster"); </script> ///////////////////////////////////////////////////////////////////////////////////////// can somebody help????? ben www.d-e-p-i-c-t.com I am trying to get rid of the "You have to click to activate this function" mumbo jumbo for a site I am doing. I tried following these directions... http://www.adobe.com/devnet/activeco...devletter.html but am having a rough time getting it to work... here is my code. Code: <script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','900','height','140','src','GoodDock','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','GoodDock' ); //end AC code </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="900" height="140"> <param name="movie" value="images/GoodDock.swf" /> <param name="quality" value="high" /> <embed src="images/GoodDock.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="900" height="140"></embed> </object></noscript> Hello, I'm new to this forum, so first, hello! Actually, I'm new to web design in general but have taken on the role at the church I work at because our old site was a mess. I downloaded some nice looking templates and have been using them as a foundation. The site is www.miamibc.com. If you go there and look at the header menu (home, about us, etc), I want to consolidate that menu some and add a drop down menu with more choices. Is there a way I can do this while keeping it looking the way it does now? If you need any more info from me, let me know. Thanks for your help! Ben Hello! I've no idea, how to margin a html page like the attachment.. Can anyone help me, please??? Our web designer has encountered a problem while designing our website www.buzzprinting.co.uk. The problem seems to be when you scroll down the page you are greeted with a mass of blue background. Does anyone know how this problem can be seolved? Many thanks in advanced. Steve Hi. I am new to this forum, and new to html/website development, etc. I am trying to get help on how to fix a problem with my website. I run a website for a small non-profit dog and cat rescue. The site was set up by a friend who understands this stuff, and I basically copy and paste coded? templates where I fill in information about the animals, etc. I am trying to fix a problem with embeded youtube videos, but honestly don't really know what the problem is. The website is www.flarescue.org if that helps. On the site, we have embeded youtube videos, along with pictures of each animals. The videos work fine, and the picture thumbnails look fine as well. The problem occurs when you click on the pictures to enlarge them. For some reason, the youtube videos stay in the foreground, and block the pictures. This problem only happens when viewing the website on IE or Chrome. Everything looks fine when viewing on firefox or safari. Any ideas as to what the problem is, or if this forum is where I should be looking for answers? And if so, where should I post my question? Thanks. Dylan I want to write some HTML to display some details on a CV the same as the images I've attached. The code I've written doesn't produce this exactly for me. Can anyone suggest how to remedy it? Code: <table border=0> <tr> <td><b>Name</b></td> <td>John Smith</td> </tr> <tr> <td><b>Address</b></td> <td>5 Main Street<br>Ballinasloe<br>Co.Galway</td> </tr> <tr> <td><b>Date of Birth</b></td> <td>10-05-1985</td> </tr> <tr> <td><b>Telephone</b></td> <td>086 81828384</td> </tr> </table> Code: <h2><a name="work"><i>Work Experience</i></h2> <b>Dunnes Stores</b> <dd>My main Responsiblities inclued:</dd> <ul> <li>Packing</li> <li>Till work</li> <li>Mopping out toilets</li> </ul> Okay, you know those HTML pages on the side of your page on some websites? The frame thingys... I forget the name of it, but I would really like it if somebody could write me a little script to make one. Thanks. Frameset is what I think their correct name is... |
|||||||