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;
>

Similar Messages

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

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;

Using a background image for the buttons in spry menu

Hi All,
Going nuts here.
I'm using the vertical spry menu widget w DW CS3 and trying
to alter the css style sheet, so that I can use a li class for each
of the 14 links on this page, with an upstate and a hover state
only. (the focus, and hover while down will be the same as the
others, to keep it simple and not too distracting)
The page is here that I will be replacing the entire
background image in sidebar1 and sidebar2 with a custom spry menu
with the 14 li classes for 2 seperate menus:
http://audibleimagesav.com/blank_doc.html
Has anyone used a background image in place of just using
bkgrd colors and borders for the spry menu ?
I am aware of the attributes that the help docs suggest that
need to be altered as listed here :
http://livedocs.adobe.com/en_US/Spry/1.4/help.html?content=WS0BB04E11-1BE3-4a67-BC94-BE7DA 93A0159.html
I have been working on just an experimental page, that is now
hacked up, however if you want to see that it is here with only the
first list item coded:
http://audibleimagesav.com/site%20theme%20ideas/sprymenu_exp.html
The spry css menu widget for that page is here:
http://audibleimagesav.com/SpryAssets/SpryMenuBarVertical.css
So in short, has anyone done a bkgrd image for the main menu
(not submenu) in a spry widget?
Thanks in advance.
Art
Art Hansen
Web Design & Marketing
http://www.innova-techsolutions.com
321.750.3852 - Cocoa Beach, Florida, USA

http://meyerweb.com/eric/css/edge/popups/demo2.html
Maybe

How to display smartforms table lines useing different background colour

Hi all:
How to display smartforms table lines useing different background colour .
for example:
line1:green
line2:red
line3:green
line4:red
line5:green
line6:red
line7:green
line8:red
Any help is highly appreciated!!
启明星

Hi,
Create a two lines one for header and second for data in the table.
1)In table painter we can find the pencil mark.
2)select the pencil mark
3)now select the line which you need to shade
4) now select the shading colour in the table painter and the provide the resolution up to 100% and select table pattrn for that line.
5) Now you can use this for the header now only the header gets shaded and the remaining gets unshaded.
reward points if useful
Thanks and Regards,
Nishant

Can I design a web page to use the background image from the user's installed persona?

I build web applications, and I would like to have an application use the background image from whatever persona the visitor has installed, if any. Is this possible, using css/js/html?

No that is not possible with code on web pages (userContent.css could probably do this).<br />
The persona is only used as the background for the user interface (toolbar) area and not for websites.<br />
The dimensions of the persona with the height of 200px is also not enough to cover a page.

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>


CHILD PAGE CODE:
<head>
<style type="text/css">
.mainbackground {
background-image:url(page2-BG.jpg)
</style>
</head>
Give it a try.
Nancy O.

Spry Menu Bar using CSS background image without losing submenu ( V) indicators

Spry menu bar sets the down and side submenu indicators using
a positioned background image. I have a requirement to use a
specific background image yet must retain the > and v submenu
indicators. Without having to generate full width custom background
images for each of the menu item types to include the side and down
menu indicators, is there anyway to use a generic background image
and show the indicators using just CSS?

Don't use reserved words in JS
var event = new Spry.Data.XMLDataSet("events.xml", "catalog/event", {sortOnLoad: "date", sortOrderOnLoad: "descending"});
event is such a reserved word. If you change this to event1 then all is well.
I hope this helps.
Ben

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!
david

See Letterhead and follower sets:
http://www.freeforum101.com/iworktipsntrick/viewtopic.php?t=182&mforum=iworktips ntrick
Peter

Fraiming container using a background image in body

I am very new to this. I am trying to frame the <container> using sunflower images in <body>. When you zoom in or out. The image in body does not float with the container. I have tried several tihngs but nothing works. What am I doing wrong? see nancylgrant.businesscatalyst.com/store.html

Add the highlighted line
body {
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 100%;
    line-height: 1.4;
    font-size-adjust: none;
    font-stretch: normal;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    color: #000000;
    background-color: rgba(135, 151, 210, 0.5);
    background-image: url("http://nancylgrant.businesscatalyst.com/images/weatherboardbackgrnd4.png");
    background-repeat: no-repeat;
    background-position: center top;
    height: 100%;
    width: 100%;

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

Help Me!! Re: Using A background image In my DWT Header

Hello,
I have tried posting several messages regarding this issue but not sure if I am explaining my dilemma properly. So here we go, here is the link to my Generic Template page which I converted to an html to enable you to view it. (http://bridgestoprosperity.org/Templates/General.htm). Now what I am trying to do is use the image that is currently in the header as a background image , BUT i cannot figure out how to insert it as a div background image. Then once I fugure that out I am hoping there is a script that will be able to dynamically insert the page title for each page as it's opened. The title needs to be placed on the right hand side of header ABOVE the words Bridges to Prosperity USA over the background image.
Because this is the main template for our entire site i am hoping that once I figure this out, I can just save all the new changes to the template and be done with it and from then on when I create a new page from template because it will hopefully have some code in it where it calls the Title of the page from some script that I will no longer have to create headers with embedded (non searchable) Page titles for EACH AND EVERY ONE OF OUR OVER 750 PAGES.......
YIKES, PLEASE HELP, AND I WOULD BE FOREVER IN YOUR DEBT IF YOU COULD ACTUALLY INCLUDE CODE IN YOUR RESPONSE AND EXPLAIN EXACTLY WHERE TO PUT IT OR WHAT TO REMOVE AND WHAT TO PASTE. THE MORE DETAILED THE BETTER CAUSE I AM VERY NEW TO ALL OF THIS.
I really appreciate it,
Allan

Your mistake is to drawImage and then call super.paintComponent, which paints over the image you have drawn. That's not what I said, re-read my earlier response.protected void paintComponent (Graphics g) {
   super.paintComponent(g);
   g.drawImage(icon.getImage(), 0, 0, null);
   //super.paintComponent(g);
}I would also advise against calling icon.getImage inside the paintComponent, make a Image instance field and call the method once to store a reference to the Image.
paintComponent is called many times during resize / move operations, and should be as lean as possible.
db
edit To post code, use the code tags -- [code]Your Code[/code]will display asYour CodeOr use the code button above the editing area and paste your code between the tags it generates.
Edited by: Darryl.Burke

Unable to use edited background image

I am using Captivate 3 on Windows XP Pro. After I edit a
background image in an external image editor, the image is saved in
a temporary folder, and I can't work out how to incorporate it back
into Captivate so it will replace the original image. There doesn't
seem to be anyway of identifying the "Library" folder through
Windows Explorer to replace it.
I'd be grateful for any guidance on this,
David

Hi David and welcome to our community
How are you kicking off the edit process? Right-clicking the
image in the library? If so, the Library should auto update. But
you may also need to right-click and choose update to force it.
If you just copied into an image editor, you should be able
to simply select and copy inside the image editor and paste into
the background to update.
Cheers... Rick

When I save images from Firefox, they can't be used as background images!

Hi! I have a small problem with Firefox that bothers me. I run on a Mac OS X Snow Leopard. When I see an image that I like, I right click and choose "Save Image". I store it in my Pictures folder. When I go to the manager that helps me choose a background, the picture isn't available to use! But when I save a picture in Safari, it is there for me to choose. Why does this happen? Thank you!
== This happened ==
Every time Firefox opened

Does that image has the correct file extension (.jpg) ?
Can you open the image in a picture viewer?

Can we resize and change the background image in a 2 page layout?

I am a two page layout report in RTF. Can I use different background image on page 1 and page 2? The first page background will not be repeated but the second page will. Also, it seems when we insert a background image by going "Format -> Background -> Fill effect -> Picture", after we finished the whole process we can't get the background image to fit with the page, can we resize it to be fit with the page? Thanks for your help!

Yes. Select the image and go to the Inspector/Hyperlink/Link pane and use the Link to One of my Pages option.
Remember: the photo must be added to the page by dragging it onto the page and then be selected. It can't be added as a background image with the Inspector/Page/Layout pane.
OT

Accordion using different background images on panels

Similar Messages

Maybe you are looking for