|
HTML - Spry Tab Linking Problem
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 Similar TutorialsHi, 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 I am very new to HTML coding, so please be patient. My problem is this: I made a relative link via an Anchor tag to a .zip file, intending it (the .zip file) to be a download. When I access the link, instead getting a File Download alert box ( [run][save][cancel] ,which is what I wanted) the contents of the .zip file are displayed in the IE7 window. Is this normal? When I make the same link to an .exe file, I get the (desired) File Download alert box. Here is the snippet of my relative Link: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <span class="button2" title="Download Utility Launcher"> <a class="style3" href="stuff/Utility Launcher.zip">Download Now</a></span> Again, I'm new to this stuff, so the Link setup could be all wrong, for all I know. But I would appreciate some help and/or comment. Thanks, JFB Hi! Please help! I created a small website for a friend and I am having issues with the navigation links and I cant resolve it myself.. So i do have 6 links (home, services,menu,gallery,contact and testimonials and I linked the pages and it works. The Problem is ,she wants have this website in her native language too. I created two flag icons and copied all the files . Unfortunately when I linked those pages it doesnt work. so i linked the flag icon to index.html in the other language and this only works but when i linked index to services etc..it doesnt... Does anyone knows what might be the issue?? thanks in advance ps..sorry for my explanationi know its a little bit confusing...english is not my first language Please help. Last week I decided to build my first site to get a better idea of how it is done. I found the code for a scrolling list in an old design I had from years ago. I cut the code out and placed it into a new template I am editing. It'll work, but there's two problems. I've spent about 6 hours searching for solutions or whole new code to use but it seems like there isn't much use for a scrolling list any more. Problem One: There doesn't seem to be any way to "execute" the selection on the list. I've placed the code below. I can scroll down the list - click on, say, Game 2, but it doesn't link anywhere. How would I either add a button that says "Go" and sends the user to the desired game url or have them simply click the title and link there? Problem Two: For some reason it displays completely differently in Firefox, Safari and IE. Not just a subtle difference: http://www.myimgs.net/images/zgds.jpg (Firefox) http://www.myimgs.net/images/aymd.jpg (IE) http://www.myimgs.net/images/dcqk.jpg (Safari) How would I make it display a little more uniformly across all browsers? I tried changing the values below but I don't see any difference at all. I'd rather it looked like the Safari version. --- <td valign="top" width="300" align="right"> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top" rowspan="2"><form> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <select name="highlight" multiple class="inputs3"> <option><game.html="#">Game 1</a></option> <option><game.html="#">Game 2</a></option> <option><game.html="#">Game 3</a></option> </select></td> </tr> </table> </form></td> </tr> </table> </td> </tr> </table> </td> <td width="1" height="80%" bgcolor="#CBCBCB"><img src="images/dot.gif" width="1" height="1" alt="" border="0"></td> </tr> I'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. 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? I moved this thread to CSS. It is in the wrong place. http://www.htmlforums.com/css/t-spry...ie-117172.html 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 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 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 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 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? hi again, i think that i know the answer to this question...but i needed reassuring. basically my website's hierarchy is pretty confusing but it seems to link fine on my computer and everything, then it didn't link on the school computers but i solved that problem because all that was wrong was the file pathways were different. Now however when my teacher tries to open my files, all she gets is that file that cant be found stuff. Do you think maybe the problem could be that my files are too complicated and that maybe i should put all my pages in one place and then all my other files in folders underneath those... please tell me your advice, with many thx Sam hello i am wondering if it's possible to load content into a div by clicking a link in div 1 and changing what is shown in div 2 and clicking a link in div 3 would change what is shown in div 4 i have attached a generic png of how i would want the page to look....and to give a better idea of what i am wanting...any idea's as to how to do this would be appreciated...but be prepared depending on your suggestion i may need some help with how to get it accomplished. Below are two notepad docs. I want to add a link from one to the other. Whenever I add the <a href="..... "></a> nothing shows up when I view the webpage. What am I doing wrong? Thanks. FIRST DOC <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Departments</TITLE> <META http-equiv=Content-Type content="text/html; charset=windows-1252"> <META content="MSHTML 6.00.6000.16544" name=GENERATOR></HEAD> <BODY style="text-align:center; font-family:verdana,helvetica,san-serif ;background-color:#c0c0c0"><!-- 2D departments Lastname Firstname --> <H1>Business and Information Technology</H1> <H1>Health</H1> <H1>Law Enforcement</H1> <H1>Communications and English</H1> <H1>Math and Science</H1></BODY></HTML> SECOND DOC <!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" xml:lang="en" lang="en"> <head> <title>Culinary Arts Recipe</title> </head> <body> <!-- 1G Recipes Lastname Firstname --> Hawaiian Chicken <hr size="2" width="100%" /> This dish can be seved quickly and easily. Boil and debone chicken. Add 1 can of your favorite cream of chicken soup to the chicken. Make 2 cups of cooked rice. Prepare plates immediately before serving. Lay chow mein noodles, rice, chicken, crushed pineapple, green onions, shredded cheese, sour cream, tomatoes, and coconut. </body> </html> Greetings to all. I have been trying to sort this problem for a very long time. I have 2 frames on my web page, one is the contents. Can I link to a specific part of another frame? I don't think HTML allows this - or does it? Help please. Hey guys, Ive been trying to google this but i just cant seem to find a tutorial, im hoping you guys can help me out. I want to link to a set of links on my website. More specifically, I have a horizontal navigation bar on my site and I want the link "required reads" to make a row of links appear under the navigation bar of the various readings when you click on it. I've seen this done before but I cant pull up an example at the moment, hopefully that makes sense... Please help! Thank you. Okay... I just got my website set up with Iframes, and the links all work fine, and everything. The problem is that when I scroll down the page and click a link, the link opens, but in the middle of the next page. Is there something I need to add to make it link to the top of the next page? like, a target, or something? |
|||||||