CSS Centering Menu in DW CS3

I'm relatively new to CSS and need some help with centering the sidebar menus in the website I'm developing. What I'd like to see is the button background edges touching the main content edges so when scrolling over buttons the active state inherit the maincontent background colour and both the sidebar1 and sidebar2 columns look uniform and balanced.
I've also uploaded the mockup http://www.auctionontario.ca/hso/HSOMockUpLiquid.html
Any suggestions will be appreciated.
Thanks..

It's a National Holiday (Thanksgiving) here in the States. There's much less participation on these forums today. So don't be too impatient.
Sorry, I misread your question about centering menus.
Change width on #sidebar1 to 23% instead of 22%
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com
Message was edited by: Nancy O. misread question.

Similar Messages

Hiding built-in Menu items in CS3 (JS)

Hi all,
Is there any option through javascript to hide ie. disable built-in menu items in CS3. Here our requirement is to hide the menu items like Hide Attributes, Hide Comments, Hide Processing Instruction in the XML palette. Have to disable in all the places.
Thanks
Vaasu

Thanks,
This helps a bit.
What do I use for "SomeScriptMenuItem".
I have tried...
var myScriptMenuItem3 = myFileMenu.menuItems.add(myScriptAction3, LocationOptions.AFTER, "User...");
var myScriptMenuItem3 = myFileMenu.menuItems.add(myScriptAction3, LocationOptions.AFTER, User);
var myScriptMenuItem3 = myFileMenu.menuItems.add(myScriptAction3, LocationOptions.AFTER, 24);
I want my menu item to appear after "User..." in the file menu.
Thanks

CSS Popup menu export problems

I have followed all the instructions to export css popup
menus from Fireworks CS3. I can see them when I preview in browser
from the launch button top right. But when I export the CSS etc.
and view the files in Dreamweaver it simply doesn't make any sense.
Nothing seems to export properly, images missing, no
behaviours nothing, what is the exact process, can someone help?!!

Don't use a code produced by a graphics program
Murray (*ACE*) usually has the answer, so I'm copying from
him. He once linked to this blog post, from the guy who worked on
the menus:
The
sordid tale of mm_menufw_menu.js
See also his post in this thread:
Good
advice from Murray

CSS Matrix Menu

Hi all,
I have been trying to get a css matrix menu to work, but for
one reason or the other it only works in Apple Safari. In Firefox
and all other browsers only the active tab is showing up and in IE
there is nothing at all.
The test-site can be found at:
http://boothuren.squawkdesign.com/html/#
The css code for the menu is attached at the bottom...
Thanks, dl33

"MikeMedia2" <[email protected]> wrote in message
news:e2o2d1$na1$[email protected]..
>I have cobbled together a CSS/JavaScript menu, based on
the Vertical
>Expanding
> Menu by ?alsacreations.com?
>
http://tutorials.alsacreations.com/deroulant/menu-vertical.htm
>
> I was foolishly distracted in simply constructing a
pretty menu
> without
> considering the fundamental necessity of being able to
edit just ONE
> menu for
> the entire site rather than all the pages in the site.
>
> How do I establish this menu to operate as an
independent file? Are
> there
> instructional sites available?
Hi Mike,
The following tutorial from our PMM user guide was designed
for our menu
system, but the techniques are similar enough that it should
also work
for your menu.
http://www.projectseven.com/products/menusystems/pmm/user_guide/site_wide/includes/index.h tm
Al Sparber
PVII
http://www.projectseven.com
"Designing with CSS is sometimes like barreling down a
crumbling
mountain road at 90 miles per hour secure in the knowledge
that repairs
are scheduled for next Tuesday".

WAD - Possible to embed RRI commands in CSS style menu?

I'm not content with the standard web item options in WAD and was hoping I could create my own menu using CSS style commands and then embed the BI:ACTIONs within the list links. Is this possible? I've got the list created within WAD, but can't find anything out there on how and what BI commands to embed. Any help or alternative suggestions appreciated. Thanks.
Ivano

FYI, I found one simple way to do this. You can use the web item "Link", define the RRI or other set of BI actions you want to perform within that in the Layout side of WAD. Then, within the XHTML portion you can cut this relevant snippet of BI command code and place it under the CSS-style menu you're trying to create. In my exmaple, I styled a drop-down list and was able to have this as action as a link within the sub-menus. For example, here's the list portion:
<ul >
                        <li >
                            <bi:LINK_ITEM name="DISTRIBUTIONMETRIC" designheight="23" designwidth="200" >
                                <bi:TEXT_CONTENT value="Distribution Metric" />
                                <bi:ACTION type="CHOICE" value="INSTRUCTION" >
                                    <bi:INSTRUCTION >
                                        <bi:RRI >
                                            <bi:TARGET_DATA_PROVIDER_REF value="%NM%" />
                                        </bi:RRI>
                                    </bi:INSTRUCTION>
                                </bi:ACTION>
                            </bi:LINK_ITEM>
                        </li>
                        <li >
                            <a href="#" >Volume Metric</a>
                        </li>
                        <li >
                            <a href="#" >Marketshare</a>
                        </li>
                        <li >
                            <a href="#" >Standard Operating Reports</a>
                        </li>
                        <li >
                            <a href="#" >MPS Reports</a>
                        </li>
                    </ul>
Edited by: ivanoharris2 on May 12, 2010 10:20 PMd

EncoreCS3 can't edit menu in photoshop CS3!

EncoreCS3 can't edit menu in photoshop CS3 because it things it is not installed even though it was running and I can edit pictures from bridge CS3 without problems. Any one have an idea???

Please have a look at:
Edit In Photoshop Doesn't Work

Css tab menu (don't work in firefox)

Ok i have a css tabbed menu that we use at this site take a
look.
WebSite .
It works perfect in IE but firefox is different.
Any idea on how i can get the same effect in firefox.

Is it Groundhog day?
"Pablo" <[email protected]> wrote in message
news:eviqmt$ntd$[email protected]..
> Often often :)
>
> --
>
> "Murray *ACE*" <[email protected]>
wrote in message
> news:evipb1$m3j$[email protected]..
>> Often.... 8)
>>
>> --
>> Murray --- ICQ 71997575
>> Adobe Community Expert
>> (If you *MUST* email me, don't LAUGH when you do
so!)
>> ==================
>>
http://www.dreamweavermx-templates.com
- Template Triage!
>>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>>
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
>> ==================
>>
>>
>> "@ndyB" <[email protected]> wrote in message
>> news:eviol2$la2$[email protected]..
>>> Is there an echo in here :o)
>>> Lol
>>>
>>>
>>> "Murray *ACE*"
<[email protected]> wrote in message
>>> news:evinum$kfa$[email protected]..
>>>> The stylesheet has an error in it, as
pointed out by Andy....
>>>>
>>>> --
>>>> Murray --- ICQ 71997575
>>>> Adobe Community Expert
>>>> (If you *MUST* email me, don't LAUGH when
you do so!)
>>>> ==================
>>>>
http://www.dreamweavermx-templates.com
- Template Triage!
>>>>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>>>>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>>>>
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
>>>> ==================
>>>>
>>>>
>>>> "dayv2005"
<[email protected]> wrote in message
>>>> news:evinrr$kbu$[email protected]..
>>>>> its weird if i embed the stylesheet into
the page then it works fine
>>>>> but im referencing a style sheet and it
wont work fine.
>>>>
>>>>
>>>
>>
>>
>
>

Dependent Drop-Down Menu in Dreamweaver CS3 and ADDT

Hi All,
I have been trying to create a dependent drop--down menu so that when I select an item the corresponding information would populate the other field or fields. So far I have tried to use the tutorial posted on the link below by Waleed Barakat but I have had no sucess.
http://www.tutorials-expert.com/tutorial/20354/-How-To-Create-Dependent-Dropdown -ListMenu-Forms.html
I wanted to know if anyone has something else that I can review to help me in this process.
Thanks

Please refer to this article (http://forums.adobe.com/message/1069624#1069624) for information on how your tables should be set up.
Date: Wed, 10 Jun 2009 00:49:28 -0600
From: [email protected]
To: [email protected]
Subject: Re: Dependent Drop-Down Menu in Dreamweaver CS3 and ADDT
Hi Georgev63,
I followed the instructions to the link you sent me and it did not produce the results I had hope for.
The directions are pretty straight forward and I attempted the steps several times with the same results.
Basically the field that supposed to be the detail field is blank rather than having the ID of the master field.
Any further suggestions would be much appreciated.
Thanks
E.
>

Drop Down Menu in Dreamweaver CS3

Is it possible to add a Drop Down Menu in Dreamweaver CS3 in an already existing navigation bar?

Ok, I made one a link. See below...
<div id="nav">
    <ul>
      <li class="style1"><a href="index.html">Home</a></li>
      <li class="style1"><a href="Vinyard/vinyard.html">Vineyard</a></li>
      <li class="style1"><a href="http://millnerheritage.com/Wines/winesTest.html">Winery</a><a href="Winery/winery.html"></a></li>
      <li class="style1"><a href="Wines/winesTest.html">Wines</a></li>
      <li class="style1"><a href="Wines/winesTest.html">Events</a></li>
      <li class="style1"><a href="Heritage/heritage.html">Heritage</a></li>
      <li class="style1"><a href="Classes/classes.html">Classes</a></li>
      <li class="style1"><a href="photos.html">Gallery</a></li>
      <li class="style1"><a href="Links/links.html">Links</a></li>
      <li class="style1"><a href="Order Online/order.html">Order Online</a></li>
      <li class="style1"><a href="Contact/contact.php">Contact<br />
      </a>        </li>
    </ul>

Wanting to make a Drop Down Menu in Flash CS3

I'd like to build a drop down menu in Flash CS3. The web is awash in terrible tutorials. Would anyone have a decent tutorial they could refer me to?
Thank you-

I'd like to build a drop down menu in Flash CS3. The web is awash in terrible tutorials. Would anyone have a decent tutorial they could refer me to?
Thank you-

CSS Rollover Menu with Images and Current Page Indicator

Hello.
I have found a very interesting video here: http://www.youtube.com/watch?v=vv8cRYGCvIY about creating a CSS Rollover Menu with Images and Current Page Indicator (I tested it and it is working fine).
I have a web site with 15 pages based on a template and I want to use that video sample to do the same thing on my web site.
Please tell me if I can use the sample from the link above to do that.
What should I change in the css file (what new class should I make) to make this work on a web site based on a template ?
Thank You !

I don't know about that video tutorial but a sitewide persistent menu indicator ('you are here' highlighting) is very simple to do with CSS classes.
Details and code examples below:
http://alt-web.com/Articles/Persistent-Page-Indicator.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

CSS/JavaScript Menu

I have cobbled together a CSS/JavaScript menu, based on the
Vertical Expanding Menu by “alsacreations.com”
http://tutorials.alsacreations.com/deroulant/menu-vertical.htm
I was foolishly distracted in simply constructing a pretty
menu without considering the fundamental necessity of being able to
edit just ONE menu for the entire site rather than all the pages in
the site.
How do I establish this menu to operate as an independent
file? Are there instructional sites available?
Currently, my html is structured as follows:
1) <SCRIPT type=text/javascript>
JavaScript function declaration
2) <STYLE type=text/css>
Detailing design features of the menu
3) <BODY>
The actual menu with links
The menu that currently exists on the site is a Xara Menu
with a .js file that I have edited when needed.

"MikeMedia2" <[email protected]> wrote in message
news:e2o2d1$na1$[email protected]..
>I have cobbled together a CSS/JavaScript menu, based on
the Vertical
>Expanding
> Menu by ?alsacreations.com?
>
http://tutorials.alsacreations.com/deroulant/menu-vertical.htm
>
> I was foolishly distracted in simply constructing a
pretty menu
> without
> considering the fundamental necessity of being able to
edit just ONE
> menu for
> the entire site rather than all the pages in the site.
>
> How do I establish this menu to operate as an
independent file? Are
> there
> instructional sites available?
Hi Mike,
The following tutorial from our PMM user guide was designed
for our menu
system, but the techniques are similar enough that it should
also work
for your menu.
http://www.projectseven.com/products/menusystems/pmm/user_guide/site_wide/includes/index.h tm
Al Sparber
PVII
http://www.projectseven.com
"Designing with CSS is sometimes like barreling down a
crumbling
mountain road at 90 miles per hour secure in the knowledge
that repairs
are scheduled for next Tuesday".

How do you retain the mouseover state in a pop-up menu using Fireworks CS3?

I am working on a site right now using some javascript
pop-ups from FW. I would really prefer to use CSS but had many
headaches trying to get them working in IE6. Now the problem I have
with the FW pop-ups is that the original menu item does not retain
its mouse over state when moving to submenus and this is really the
effect I want. You can see the site I am working on here:
http://www.mackenziecauley.com/linda/profile.php
I noticed some articles in the adobe db related to this issue
with Fireworks MX but unfortunately it doesn't work in CS3. I am
also a complete newbie in javascript so any help would be great.
thanks!

Drat...I can only see three pages (and a bit) of posts
(why?!?!?!!!), so I can't go back and find an example. Murray
(*ACE*) has the answer, so I'm just trying to copy him from memory.
He once linked to this blog post, from the guy who worked on the
menus:
The
sordid tale of mm_menufw_menu.js
Also, check out his post in this thread:
Good
advice from Murray
Thanks, Google!
Fireworks is a graphics program. Don't let it write your code
for you.

CSS horizontal menu with vertical dropdowns

What I would like my menu to look like:
- solid border on top and bottom
- first-level menu items horizontal and centered
- first-level menu items equally spaced as opposed to same
widths
- second-level menu items vertical and on individual lines
What my menu actually looks like:
www.vicesbyproxy.com/staging/exp_menu_vert.html
What's wrong:
- border not on top & bottom
- second level wrapping within the width of the container
This CSS is much more complex than what I usually do. Any
help would be greatly appreciated.

The only way to go -
http://www.projectseven.com/products/menusystems/pmm/
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"anubia" <[email protected]> wrote in
message
news:e5o4gk$28t$[email protected]..
> What I would like my menu to look like:
> - solid border on top and bottom
> - first-level menu items horizontal and centered
> - first-level menu items equally spaced as opposed to
same widths
> - second-level menu items vertical and on individual
lines
>
> What my menu actually looks like:
> www.vicesbyproxy.com/staging/exp_menu_vert.html
>
> What's wrong:
> - border not on top & bottom
> - second level wrapping within the width of the
container
>
> This CSS is much more complex than what I usually do.
Any help would be
> greatly appreciated.
>

CSS - Spry Menu Problem

Hello everyone!
I am having a tricky question, I need your help with!
I want to insert a spry menu into my webpage. I want the colors of the menu and sub menu to change when I hover over them depending on how many sub menus exist.
All in all I have at most two submenus.
That means, I need to assign three colors. One for the menu without submenu, one for the menu with one submenu, and a third for the menu with 3 submenus.
So far it is working with two colors.
Who could help me?
Heartly regards!
This is what I got:
@charset "UTF-8";
/* SpryMenuBarVertical.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, a fixed width box with no margin or padding */
ul.MenuBarVertical
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 8em;
/* 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 same fixed width as parent */
ul.MenuBarVertical li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 8em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
    margin: -5% 0 0 95%;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    left: -1000em;
    top: 0;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
    left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
    width: 8.2em;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
    border: 0px solid #CCC;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
    border: 0px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
    display: block;
    cursor: pointer;
    background-color: ##FFFFFF;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
    background-color: #0FF;
    color: z;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
    background-color: #0FF;
    color: #FFF;
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.MenuBarVertical 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.MenuBarVertical a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    background-color: #F0F;
    color: #FFF;
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.MenuBarVertical a.MenuBarItemSUBSubmenu
    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.MenuBarVertical a.MenuBarItemSUBSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    background-color: #FF0;
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.MenuBarVertical 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.MenuBarVertical li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;

As is the case with any styling, all you need is an identifyer to apply style rules to it.
Hence, if you want to change the colour of a main menu item housing two sub-menu items, simply add a class name as in
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
<style>
ul.MenuBarVertical a.three-subs {
    background-color: yellow;
ul.MenuBarVertical a.two-subs {
    background-color: red;
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu three-subs" href="#">Item 1</a>
    <ul>
      <li><a href="#">Item 1.1</a></li>
      <li><a href="#">Item 1.2</a></li>
      <li><a href="#">Item 1.3</a></li>
    </ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu two-subs" href="#">Item 3.1</a>
    <ul>
      <li><a href="#">Item 3.1.1</a></li>
      <li><a href="#">Item 3.1.2</a></li>
    </ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

CSS Centering Menu in DW CS3

Similar Messages

Maybe you are looking for