|
HTML - Spry Menu (from Dw) And Adobe File Problem
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 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; 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. 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 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 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? 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 This is a major project for an integrative media class. My current Major is Integrative Media which web design falls under but none of my professors know anything about coding. I've probaly wasted 10 hours alone on trying to center the page with the drop down menu's. I am searching for an experienced person in Adobe, HTML and a few other codes to help me(Small reward might be given out ^_^). I've spent like 50 hours on this and gotten nowhere. I've searched the internet indepth for answers but I've had 0 success. Here are the lists of problems I have. I made drop down menus in Fireworks. This has been effecting how I can center my whole webpage. <Div Takes aren't working> Ive trade Align="center" in the DIV tag. Styles Margin Left Auto and Margin Right Auto didn't work. Even if I could center the page it wouldn't help cause I don't know how to center the JSS file with the page. I'm trying to find an easy way to move around flash tables. I don't wanna use padding(for reasons I can explain). The only way I've seen is to cut your webpage up in photoshop and leave spaces for the Tables. I am wondering if there are any other ways. I'm also trying to make news bars that Call titles from my sites forum. 0 Idea how to do this. I have more questions but don't feel like ranting. If an experienced web designer could help me I would greatly appreciate it. Please be good with Adobe Products and HTML thanks What is the best or rather easiest way to learn how to use Photoshop? I have Photoshop 3.0 elements, which I think is different then CS3 correct? I am just not sure where to go for a beginner tutorial on this? Everything I have found so far is for people that already know mostly how to use it.....UGH! Thanks Jeff Hi all. I'm new here and relatively new to web design and am now looking to take my skills onto a new level. As a budding new web designer, I'm now considering which software is best. My assumption was that I'd have to go with Adobe. However, after reading a few comments on here, there are some who consider it to be too expensive given that there are other options out there which could also be better. I was hoping for advice from experienced people who could let me know if you think Adobe is the way to go or recommend any other software. Thank you and grateful in advance As you know, people use adobe dreamweaver to create their websites from scratch or editing. The problem is in my situation is that when I put in a code in the CODE and it comes out in the DESIGN, it's screwed up. But when I view it in IE or FF, it's how I want it. That being said, I have to deal with dreamweaver not looking what I'm looking for but when I view it in IE or FF, it's how I want it. Help? Hello there, I am wondering if there is a free alternative to Adobe InContext Editing out there. One that people have had experience with and believe to be credible. I would really appreciate it if you could point me in the right direction. Thanks for your time. How do I get rid of my automatic golive meta description and write my own? Here is my current source. <title>Watch It Mister! Funny Gay Videos, Gay Videos of Hot Emo Guys Kissing, and More Gay Videos!</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta content="Adobe GoLive 5" name="generator"> <meta content="Lavation Design" name="author"> <meta content="index, follow" name="robots"> <meta content="Free gay video sharing community." name="abstract"> <meta content="Watch It Mister is an online gay video sharing community. Lots of Gay Videos, anything from funny gay videos to gay emo guys kissing. This is the home of gay videos.=" name="keywords" href="style.css" type="text/css" <META rel="stylesheet" description?>>> <link type="text/css" rel="stylesheet" href="/css/anylink.css"> hello, can anyone here tell me why there is so little html software for linux users? I bought a linux pc and discovered that Adobe do not offer dreamweaver in linux. There is also no other html editors I can find of any worth in linux. does anyone know any? I've got a website under construction at www.banffridgeestates.com. On the design plans page (www.banffridgeestates.com/design_plans.htm), I've got 9 thumbs for the user to click on and a PDF file opens in Adobe Reader. But just in case the user doesn't have Adobe Reader or some other PDF viewing application, is there a way for me to program the link so that it detects whether the user has such an application, and to open a JPEG if he doesn't have one? I hope this is in the right spot. Well I'm really loosing it becasue I think I wasted 4 hours on a webpage that I'm going to have to do all over. The problem: I spread out a grid, then filled it with text boxes. Well it looks great until I upload it to the Internet, because all of a sudden I have huge gaps which spread it out, creating huge breaks within the document. I'm not sure what to do from he Here's what it looks like: http://www.wellnessandpreventionoffice.org/WPO_body/ Here's what it is suppose to look like (note, this is a capture in layout mode): http://www.wellnessandpreventionoffi...ody/sample.jpg Notice the big spaces that are coming in after the bottom bullet in each list. eventually every line will be a link similar to the word "Elementary" under Physical Education. I'm open to any suggestions. THANK YOU! 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 I am running the Google Translate widget from my local drive within my index.html. When the widget tries to initialize , I get this warning pop up. I am going to distribute this on a CD and would like to include Google Translate as a feature as its going internationally. Google dont seem to do a non-flash version of this widget(?) How can I get around this warning popping up when ran from a local drive ? |
|||||||