Spry Menu Bar - Different Background Image Wanted for menu items
Hi, I've looked everywhere for help with this and just haven't found any answers yet ...
I want my Dreamweaver CS5.5 menu to look like this design I've done in PhotoShop ...
It's a simple one level list with no sub-levels.
Everything is good, except I can only set one background image for all the menu items at this level.
I want the first, last, and all the middle, menu items to use different background images.
I have no idea where or how to insert the code to set a different background image for each individual menu item ...
I know I could use images set one on top another in a column with rollover image swop, but the spry menu opens the door for dynamic content so I'm keen to get it working.
Manchester city council has a great example of this style of menu design working at - http://www.manchester.gov.uk/
They've got funky indenting of the text as well.
~~~~~~
This is the code for my menu list ...
<div class="sidebar1">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Groups</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
This is how I set the background image (but I can only define one image) ...
I set the image background to "Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg" through ...
CSS Styles
SpryMenuBarVertical.css
ul.MenuBarVertical a
I then select the background category
and browse to the image file.
doing this changes my CSS code as follows ...
ul.MenuBarVertical li
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 170px;
margin-top: 4px;
margin-bottom: 4px;
background: url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
ul.MenuBarVertical ul
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 170px;
left: -1000em;
top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 95%;
background: url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
ul.MenuBarVertical a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #0000;
text-decoration: none;
font: normal 12px Verdana, Geneva, sans-serif;
background: #EEE url(/Images/Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg);
~~~~~~
These are the three images I want to apply to the top middle and bottom menu items :
Top menu item background image - "Menu-Nav-Bar-Pic-Top-v1-w170px-h32px.jpg"
Middle menu items background image - "Menu-Nav-Bar-Pic-Mid-v1-w170px-h32px.jpg"
Bottom menu item background image - "Menu-Nav-Bar-Pic-Bot-v1-w170px-h32px.jpg"
~~~~~~
As I am unable to set the menu items individually, this is how the menu looks like on my website at the moment ...
~~~~~~
So near yet so far ! I'm hapy with the verdana font, the image size and spacing, but the background images I just can't set them right.
I'd really appreciate any help on this as I'm out of ideas.
Thank you.
The easiest way is to use pseudo elements.
To style the first and last menu items ifferently to the rest, merely add :first-child and :last-child respectivly as follows
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
<style>
ul.MenuBarVertical li:first-child a {
background-color: red;
color: white;
ul.MenuBarVertical li:last-child a {
background-color: green;
color: yellow;
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
In your case, in liue of the background colour, you would have an image.
Gramps
Similar Messages
-
How to add different background image for submenu items???
Hi all,
I'm pretty new to web design and CSS in particular. Here's my problem...
I've got a Spry horizontal menu bar (untouched as yet), and I want to have a different background image for my submenu items than that of my menu items. From searching the internet I think that I need to apply a class to the submenu item (please correct me if I am wrong).
How would I go about doing this and how would I assign the class to just the submenu items?
Also ideally I want to have my first and last menu items to have rounded corners on one side (therefore making a rounded edge menu bar), is it possible to have a different background image for individual menu items? If so, how?
Really appreciate any help!Thanks for the link! I've managed to sort the background issue, and it seems to be working fine!
Just one little issue left to tackle...
I want my text to be centered in my top menu items BUT aligned left in my drop down menu items. I have managed this but the text hugs the left hand side. I've tried adding a little margin to the left but that doesn't seem to affect anything???
Here's my CSS... Any ideas which class I should be targeting or why adding the margin isn't working would save my tearing the rest of my hair out! thanks! (screenshot attached).
@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: 0;
padding: 0;
list-style-type: none;
cursor: default;
width: auto;
/* 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: 0;
list-style-type: none;
position: relative;
text-align: left;
cursor: pointer;
width: 120px;
float: left;
height: 24px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
background-repeat: repeat-x;
background-color: #333333;
background-image: url(../images/navbar_bg.jpg);
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #666666;
ul.MenuBarHorizontal li li
list-style-type: none;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
height: 24px;
background-color: #333333;
background-image: none;
padding: 0;
margin: 0;
left: -1px;
ul.MenuBarHorizontal li li a
list-style-type: none;
position: relative;
text-align: left;
cursor: pointer;
float: left;
height: 24px;
background-image: none;
font-size: 12px;
font-weight: normal;
border: 0px 0 0;
width: 120px;
font-family: Geneva, Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
/* 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;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 120px;
position: absolute;
left: -1000em;
height: 24px;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
/* 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: auto;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
height: 24px;
width: 120px;
margin-top: -5%;
margin-right: 0;
margin-bottom: 0;
margin-left: 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;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal li a
display: block;
cursor: pointer;
text-decoration: none;
font-style: normal;
text-transform: capitalize;
text-align: center;
white-space: normal;
padding: 0px;
height: 24px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
line-height: 20px;
margin: 0px;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal li a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #000000;
background-image: url(../images/navbar_bg_hover.jpg);
background-repeat: repeat-x;
line-height: 22px;
ul.MenuBarHorizontal li li a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #000000;
background-image: none;
background-repeat: repeat-x;
width: 120px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
/* 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-repeat: repeat-x;
background-position: 95% 50%;
background-color: #333333;
background-image: url(../images/navbar_bg.jpg);
/* 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-repeat: repeat-x;
background-position: 95% 50%;
background-color: #000000;
background-image: url(../images/navbar_bg_hover.jpg);
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; -
Accordion using different background images on panels
Hi,
I'm creating an accordion in Dreamweaver cs3 which has seven
panels. I would like to use a different background image for each
panel. I have only managed to use a single image, that ends up on
all the panels. Any ideas on this?It worked!!! a BIG hug to U..
quote:
Originally posted by:
Newsgroup User
I haven't done this, but I would think it would be pretty
easy by copying
the .AccordionPanelTab style code and pasting it over and
over and then
changing the class names to .AccordionPanelTab1,
.AccordionPanelTab2, etc.
Of course, you would also change the div references in your
pages.
Nancy Gill
Adobe Community Expert
Author: Dreamweaver 8 e-book for the DMX Zone
Co-Author: Dreamweaver MX: Instant Troubleshooter (August,
2003)
Technical Editor: Dreamweaver CS3: The Missing Manual,
DMX 2004: The Complete Reference, DMX 2004: A Beginner's
Guide
Mastering Macromedia Contribute
Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP
Web Development
"Kimson76" <[email protected]> wrote in
message
news:fkudd1$1hp$[email protected]..
> Hi,
>
> I'm creating an accordion in Dreamweaver cs3 which has
seven panels. I
> would
> like to use a different background image for each panel.
I have only
> managed to
> use a single image, that ends up on all the panels. Any
ideas on this?
>
> .AccordionPanelTab {
> height: 30px;
> background-image:
>
url(file:///Macintosh%20HD/Users/kimson.ekman/Desktop/web%20development/challeng
> er_purple/images/7.jpg);
> background-repeat: repeat-x;
> background-color: #122541;
> border-top: solid 0px #1C3B5A;
> border-bottom: solid 0px #1C3B5A;
> margin: 0px;
> padding: 0px;
> cursor: pointer;
> -moz-user-select: none;
> -khtml-user-select: none;
> -
Menu Background Images - distorted for some reason...??
Hi again,
posted this problem a while ago, thought i had discovered a fix, but haven't had time to work on it in a few weeks. i have a high quality .tif image file 720x576 in size to use for my background image on a menu, but when it is placed in, the diagonal lines become jagged as if DVDSP was stretching the image in some way. i have tried a number of different dimensions (going by what i found in the help files) and nothing seems to work. the 720x576 .tif seems to be the closest so far...
any ideas why this is happening? the aspect ratio is set to 16:9 anamorphic and the image is the exact size of the canvas, so i don't understand why it is distorting.
any help much appreciated.
thanks
HarryGlad you got it sorted...
But that actually makes no sense based on the information you gave.
If you are creating PAL menus then you can either use the latest versions of Photoshop which use Pixel ration Compensation (or something like that) to show you in Photoshop what a 16x9 menu would look like at 1024x576 when the actual file is really 720x576. If it's a 4x3 menu it will appear as 768x576 when it's actually 720x576
The other alternative is to create your menu at 1024x576 (as you said you had it as 16x9) then save out the menu from Photoshop as a 720x576 file and bring it into DVD-SP and flag it as 16x9 - which is what you said you had done...
So I am intrigued how you have now fixed it... when you started with a 720x576 file -
Importing A Combo Banner/Menu Bar And Background Image
Hi,
In one Photoshop file, I've created a banner/menu bar, as well as what I would like to use as the background image for what appears on the remainder of the page. The menu items are not in a box of any sort. And everything is on a separate layer. The image that appears below is one I made up as an example of what I'm talking about. Can I import it into Dreamweaver as one file? Or should I make one file for the banner/menu bar, and one for the rest of the page?
Thank you.Hi,
I believe it is best to import everything individually in most/all circumstances. When you are talking about banner images or background images think about the size of the file you are exporting from Photoshop. A 'Save for Web' image will be a lot bigger if it includes everything on the page, compared to the individual size of your banner, and therefore will increase the page load times etc.
So, you can create a photoshop file with your whole layout on there, but then crop each of the elements on its own before saving for web. Even each individual menu item. -
Different background images for 1st / all other pages
Hello
I'm trying to set up my templates. Basically not a problem, except for the graphics-part:
Page 1 of my letters should have a specific background image, while all following pages need a different one.
Is this possible?
thanks much in advance!
davidSee Letterhead and follower sets:
http://www.freeforum101.com/iworktipsntrick/viewtopic.php?t=182&mforum=iworktips ntrick
Peter -
Background Image repeating for table cells
I am trying to put different images as the background to all
the cells in a table, so I can put text over the top of them, but I
cant have an image without it repeating. Ive tried going into the
code and adding background-image: "no-repeat" but that hasn't
worked. I know nothing of CSS and it seems really confusing - so if
this is the answer please give me CSS for dummies instructions.
Layers drive me bonkers as no 2 browsers display them in the same
place.
URL is:
http://www.visionsportsmedia.com/BillyTestSite/test
At the moment only cell one is a background image, the rest
are images inserted normally.
Hope you can help.
Thanks.Your question reflects the confusing mess your life will be
if you persist
with web authoring without taking the time to learn some HTML
and CSS.
You have -
<th height="351" colspan="6" "scope="col">
Note the extra doublequote just before 'scope'.
Also note that your preloads (look at the body tag) as well
as your image
swaps (look elsewhere - everywhere you see 'file:///') are
all broken -
pointing to files on your hard drive. Finally, you might want
to just think
about making a page where there is no readable content
(everything here is
in images). It will get a zero search engine ranking....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"little bob" <[email protected]> wrote in
message
news:gqo8jh$ejo$[email protected]..
>I am trying to put different images as the background to
all the cells in a
> table, so I can put text over the top of them, but I
cant have an image
> without
> it repeating. Ive tried going into the code and adding
background-image:
> "no-repeat" but that hasn't worked. I know nothing of
CSS and it seems
> really
> confusing - so if this is the answer please give me CSS
for dummies
> instructions. Layers drive me bonkers as no 2 browsers
display them in the
> same
> place.
>
> URL is:
http://www.visionsportsmedia.com/BillyTestSite/test
>
> At the moment only cell one is a background image, the
rest are images
> inserted normally.
>
> Hope you can help.
>
> Thanks.
> -
Different background image (div) on each page of site complicated by template
Hope I can explain this: Below are specifics
- Using Dreamweaver cs5.5
- Making the pages from a template.
- Each page will have a different backround image; but the image is contained in a div tag (div name is .mainbackground) which runs behind the main core of the site, the image is not in the <body>
- The div .mainbackground is EDITABLE
- I have already made a specific css class to assign to that div on each page so that the image is different on each page.
- On the template page the div .mainbackground has no image class assigned to it (thus no background image)
- Since that div is editable I can then go into each page and assign the desired image class to it - works great. EXCEPT...... & here's my main question:
- In the code all of the other regions are contained IN that above mentioned div of .mainbackground SO that means that:
- if I need to update the structure of the pages I will have to remove the Editable region that controls the background image which would be - removing the .mainbackround editable region. Then go back to my template, make changes and save everything - thus all the changes will carry through to my other pages. This is good and bad because I would get all the structural changes but I would also loose all of the text specific to those pages.
-Then when I'm finished I would have to go back and first add an editable region back to the .mainbackground class and then re-apply the background classes back to the .mainbackground to fix the images on the pages again...
The site is very small site so I can deal with it but am I going about this all wrong?
Is there some template feature I'm not getting? I would like to keep using the template feature, and i do want a different pic on each page.....
I have attached a picture showing one page so you can see the background image - which will be different on each page.If your Template has embedded CSS within the <head> tags, and the <head> has an editable region defined, you should be able to change styles in child pages.
TEMPLATE CODE:
<head>
<style type="text/css">
.mainbackground { }
</style>
</head>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
CHILD PAGE CODE:
<head>
<style type="text/css">
.mainbackground {
background-image:url(page2-BG.jpg)
</style>
</head>
Give it a try.
Nancy O. -
Background image sizing for all screen sizes
How do I make my background image conform to different size screens? I had it set for my 27" monitor but it looked horrible on my laptop so I made it smaller and its still not fitting my laptop scree and it looks so small on my 27' now its horrible there. Please help???
Hello,
I would suggest you to use this image as the browser fill.
You can check the links about browser fill:
Add an image to the background of the page or browser | Adobe Muse CC tutorials Check from 2:00
https://helpx.adobe.com/muse/using/using-fill-browser-fill-options.html
Regards
Vivek -
How to add two different background images - left and right
I want to get something like this
The way I have done that is to create the right image as a full width image and then place the left hand image over top and stretch the image to the left hand side of the page.
Use background images on boxes instead of page background. I have done something similiar in the header of this site:
http://www.signalpointdining.ca -
Background Image file for 7975
What are the file specifications for a custom background image on the Cisco 7975 Ip phone? I mean, the size, resolution, color depth and so on
Thank you in advanceThe PNG files for background images must meet the following requirements for proper display on the Cisco Unified IP Phone:
â¢Full size image-320 pixels (width) X 212 pixels (height).
â¢Thumbnail image-80 pixels (width) X 53 pixels (height).
â¢Color palette-Includes up to 16-bit color (65535 colors). You can use more than 16-bit color, but the phone will reduce the color palette to 16-bit before displaying the image. For best results, reduce the color palette of an image to 16-bit when you create a PNG file.
http://www.cisco.com/en/US/docs/voice_ip_comm/cuipph/7975g/7_0/english/administration/guide/7975cst.html#wp1088046 -
Where does apple put the background image fills for each theme on the HD?
Any help with answering this question would be greatly appreciated!
Welcome to the discussions, tk_mac.
They appear to be inside the Keynote application. At this point, I always say make a backup copy of your application before going inside the package (in case something goes wrong).
Now, right click (or control-click) on the Keynote application, and choose "Show Package Contents". Then, double-click on
Contents,
Resources,
Themes, and finally
Shared.
The images you find in that folder are all the ones used by all the Keynote themes (including images used for placeholders). You can copy those out of that folder into another folder so that they're easier to get to, OR you can import all of them into iPhoto (name the album "Keynote Assets") so that they're available from the media browser whenever you need them. -
IE reversing order of spry menu items
I've created a horizontal spry menu bar, and it works great except for one problem. When I open my page in Internet Explorer, the order of menu items from left to right is reversed. For example, "Home", which is my first item in the menu, is supposed to appear on the left, but instead it appears on the right. The menu bar itself is in the correct position, it's just the menu items that are reversed. When I open the page in Firefox or Safari, the order is correct - it's just an IE problem. Any suggestions would be much appreciated. Thanks!
Thanks Ben, here's the code. I was doing some experimenting, and I changed the float property under ul.MenuBarHorizontal li.MenuBarItemIE to "right" instead of "left" as it is shown below. This caused the menu items to appear in the correct order, but it also caused the sub-menu items to appear in a horizontal line below the menu, when in fact they should be hidden until you hover over the corresponding item in the main menu. So I traded one problem for another! Any help would be much appreciated.
To see how it`s rendering, visit http://www.leagueheadquarters.com/RAB. If you look at it in Firefox, you`ll see how it`s supposed to look, and in IE you`ll see the menu items reversed.
CODE:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* 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: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
font-family: Verdana, Geneva, sans-serif;
font-variant: normal;
text-transform: none;
color: #1f3d73;
float: right;
/* 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: 0;
padding: 0;
list-style-type: none;
font-size: 12px;
position: relative;
text-align: center;
cursor: pointer;
width: auto;
float: right;
line-height: 13px;
height: 16px;
font-family: Verdana, Geneva, sans-serif;
font-variant: normal;
font-style: normal;
color: #1f3d73;
/* 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: auto;
position: absolute;
left: -1000em;
/* 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: auto;
width: 8.7em;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 7em;
text-align: left;
height: 25px;
background-color: #1f3d73;
border-color: #FFF;
border-right-style: solid;
border-right-width: thin;
border-left-style: solid;
border-left-width: thin;
border-bottom-style: solid;
border-bottom-width: thin;
/* 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
/* 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;
color: #fff;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #1f3d73;
color: #1f3d73;
/* 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: #1f3d73;
color: #96B0E2;
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-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-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-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-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;
filter:alpha(opacity:0.1);
/* 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
background: #1f3d73;
float: left; -
WAD: Background-Image when dropping Web-Item
Hi specialists,
I've got the following issue:
As soon as I drop an WebItem into (let's say) a div-element, the WAD adds the following items to the XHTML-Code of the div-Element:
oheight="423" owidth="714" height="423" width="714" iwidth="714px" iheight="423px" src="file://C:/my documents/myname/local settings/Temp/bw/tmp_mime/gen_prevgenbmp377.png"
and the following into the div's style-attribute:
BACKGROUND-IMAG E: url(file://C:/my documents/myname/local settings/Temp/bw/tmp_mime/gen_prevgenbmp377.png);
Can anybody explain this behaviour ? What are this background-Image (which seems to be a dummy-image) and the non-standard attributes used for ?
So far I always needed to remove this attributes/style-element manually after inserting a new web-item - which is quite inconvenient... - Is there a way to disabble thisYou don't convert code from Spry. You eliminate Spry and start over with a better Menu.
If you have a budget to work with, Project Seven's Pop-Menu Magic3 is a good investment and it's mobile & touch screen friendly.
http://www.projectseven.com/products/menusystems/pmm3/index.htm
jQuery Superfish (free)
http://users.tpg.com.au/j_birch/plugins/superfish/
jQuery MegaMenu 2 (free)
http://www.geektantra.com/2010/05/jquery-megamenu-2/
To answer your first question, you want a persistent indicator.
Making a persistent page indicator on site wide CSS Menus
Nancy O. -
IE 7 Displays Spry Menu items from last to first.
I have a spry photo gallery that works fine in all browsers
but IE 7. I have read where IE7 displays the last item of a list
first unless an item is selected as the default. My code is listed
below for my drop down menu, how would you select a dynamic element
as the default for IE 7?
<div id="gallerySelect" spry:region="dsGalleries">
<label for="chooseGallery">Select Gallery:
</label><select
name="chooseGallery"spry:repeatchildren="dsGalleries"
class="dropDownMenu" id="chooseGallery"
onchange="dsGalleries.setCurrentRow(this.value)" >
<option value="{ds_RowID}"
spry:selected="{ds_RowID}">{name}</option>
</select>
</div>Thanks, I think I've pretty much tried all the float settings
I know of, and still get the same problem. I should have been more
specific I think. The list is a dynamic list and usually you can
select one item as the default. I just cannot figure out to that in
Spry with the code I posted. Thanks for your help
Maybe you are looking for
-
When I click on an email link on a webpage, my computer goes crazy. (Please note that links to other websites are fine.) My computer seems to want to link me to Internet Explorer, which I don't use often. The computer starts running very fast and hot
-
Dear readers, I have been trying to work out how to get labview to detect the event when a 'string' control has been modified, where the user has finished editing the string either by 1) pressing the enter key on the keyboard, or by 2) taking the foc
-
I am a new apple/ipad user and trying to transfer photos to my new ipad2 from my windows pc using itunes. The pictures all transfered to my ipad in one very large folder (My Pictures) on the ipad2 instead of the multipule folders that were on my pc.
-
Gidday, I have only been using FCP6 and FCS2 for a few months after converting to Macs. It is only through the use of forums and online tutorials that I feel confident that I know the basics..... When it comes to FX it seems that FCP is limitless. I
-
For a long time I've been syncing notes between my iPhone 3G and my MacBook with no problem. Today I find that the past few syncs have not really worked; a handful of new notes created on the iPhone do not appear in Mail notes on the MacBook. Convers