CSS rules spry bar

Hi can any one tell me how the CSS should look for a vertical spry bar menu, that starts under the banner, left side and goes all the way down to the top of the footer tag how ever long the page may be

So a vertical Spry menu bar that appears to go from top to bottom of the page?
First look up "CSS faux column". Then think about how you can use that technique to make your Spry Menu bar appear to go from top to bottom. And I think that will get you there.

Similar Messages

Spry bar problem

I've imported the spry bar for from the David Powers Tutorial, the 2.0 widget for the Bayside Pulse website, I have styled it in my own design, done every thing he said everything fine, I added the fifth top level menu button to the menu bar Cafe Citrus, but in my case Inspections, I took out all the stuff I did not want and put in all the stuff I did want, everything still going great, Checked it in live view looked good, saved it, and then went back to live view and there was an extra button on the end with nothing in it, I have tried to get rid but I cant sort it, not a clue. Can any one help please?

@Jeffrey
I received your PM with the link to your site.
Because you are using SpryMenuBar v2.0 and have probably styled the bar within the Widget Browser, once applied to your document it becomes a nightmare for newbies to make any styling changes.
In your case, you have (or the Widget Browser) as constructed the menu bar to use the MenuBar and an overriding MenuBarRightShrink classes as per
<script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuBar
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
    widgetID: "MenuBar",
    widgetClass: "MenuBar MenuBarRightShrink",
    insertMenuBarBreak: true,
    mainMenuShowDelay: 100,
    mainMenuHideDelay: 200,
    subMenuShowDelay: 200,
    subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
</script>
The style rules for MenuBarRightShrink makes the menubar float right with a width of auto as per
.MenuBarRightShrink {
    float: right; /* shrink to content, as well as float the MenuBar */
    width: auto;
The above style rules are contained within a style sheet called consultant_cs5.css
When we now look to see how the stylesheets are loaded, we see the following
<link href="consultant_cs5.css" rel="stylesheet" type="text/css" />
<link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
This means that any rules targetting the same selectors in consultant_cs5.css will be overridden by those in SpryMenuBasic.css. Line 31 in SpryMenuBasic.css says
.MenuBar {
     float: left;
     width: 100%;
So now, instead of a right floating auto width menubar we have a left floating menubar covering the full width of the div.
If you swap the two stylesheets so that SpryMenuBasic.css loads before consultant_cs5.css, you will find that the situation is reversed and that the menubar will again be an auto width.
Gramps

Spry bar sub menus not working. Am at wit's end.

Hi all,
I am having trouble with getting my submenus on my spry bar to function. At first I was getting the error message of spry undefined. I looked for answers in forums, and tried a few things like making sure the .js file was there, looking for code mistakes, etc. Nothing worked, so I then deleted and reinstalled the spry bar and spry assets files, and of course, uploaded them to the server. Now I don't get any error messages, but the submenus just don't drop down.
Here is my code:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Natural Handmade Soaps</title>
<link href="../../styles/HealingHandsStyleSheet.css" rel="stylesheet" type="text/css" />
<script src="../../../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../../../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF">
<div id="container">
<div id="banner">
<img src="../../images/BitsAndPieces/HealingHandsNewBanner.jpg" width="960" height="99" />
</div>
<div id="healingmenu">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="../../index.html">home</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="../hair_serum.html">hair</a></li>
    <li><a class="MenuBarItemSubmenu" href="../face_products.html">face</a>
      <ul>
        <li><a class="MenuBarItemSubmenu" href="/soaps.html">complexion perfection face soap</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="../complexion_perfection_pages/complexion_perfection.html">complexion perfection face serum</a></li>
        <li><a href="../silk.html">SILK face serum</a></li>
      </ul>
    </li>
    <li><a href="../body_products.html">body</a></li>
    <li><a href="../Essential_Oil_Blends/essential_oil_blends.html">eo blends</a></li>
    <li><a href="../../Pages/ayreveda/ayurveda_page.html" class="MenuBarItemSubmenu">herbal info</a>
      <ul>
        <li><a href="../../Pages/ayreveda/ayurveda_page.html">what is ayurveda?</a></li>
        <li><a href="../../Pages/bach_flower_essences/bach_page.html">what are bach flower essences?</a></li>
      </ul>
    </li>
<li><a href="mailto:[email protected]">contact</a></li>
    <li><a href="/blog">blog</a></li>
</ul>
</div>
<div id="left_column">
<p align="left"><img src="images/cp_serum_soap_teapot.jpg" width="227" height="206" alt="Complexion Perfection Soap" /></p>
<p align="left"><span class="style47"><img src="images/cpsoap.JPG" alt="" width="227" height="206" /></span></p>
<p align="left"><span class="style47"><img src="../complexion_perfection_pages/images/three_bottles.jpg" alt="" width="240" height="200" /></span></p>
<p><span class="style1"><a href="../complexion_perfection_pages/complexion_perfection.html">Complexion Perfection Face Serum</a></span><span class="style2">, for use with Complexion Perfection soap.</span></p>
<p><br />
</p>
</div>
<div id="center_column">
<p align="center" class="style1">About the Soaps</p>
<p class="style2" >Healing Hands Apothecary soaps are handmade in small batches using rich, all-natural ingredients. The soaps are scented with pure, therapeutic essential oils obtained from plants, which also carry the beneficial properties of the plants. The soaps take 4-6 weeks to "cure" and are extremely mild and gentle for your skin. They will last
    significantly longer than the popular bars you get from the store because
    they are not fluffed up with air. Each 3.5" x 1" x 2.75" bar is approximately 5-5.5 oz of pure goodness!</p>
<p align="center" class="style1" >Complexion Perfection Face Bar</p>
<p class="style2">A rich face soap made with French
    green clay to tighten pores and extract impurities from the skin. The Complexion Perfection
    face bar is specifically made to complement the <a href="http://www.healinghandsapothecary.com/Product%20Pages/complexion_perfection_pages/complexi on_perfection.html">Complexion Perfection Face Serum for Problem Skin</a>. Complexion Perfection is suitable for deep cleansing of all skin types, though it is especially great for problem skin.</p>
<p class="style2"><strong>Ingredients:</strong> Olive oil, coconut oil, palm kernel oil, shea butter, lavender, bergamot, and eucalyptus essential oils, French green clay, green tea.</p>
<p align="center" class="style47">
    <input type="hidden" name="cmd" value="_s-xclick" />
    <input type="hidden" name="hosted_button_id" value="GHKAAN38MDEDU" />
</p>
<div align="center">
    <table>
      <tr>
        <td><input type="hidden" name="on0" value="Quantity" />
          Quantity</td>
      </tr>
      <tr>
        <td><select name="os0">
          <option value="One Bar">One Bar $6.50 USD</option>
          <option value="Five Bars">Five Bars $30.00 USD</option>
          <option value="Ten Bars">Ten Bars $55.00 USD</option>
        </select></td>
      </tr>
    </table>
    <input type="hidden" name="currency_code" value="USD" />
    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
    <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" />
</div>
<p align="center" class="style51"><img src="images/GBB_closeup.jpg" alt="" width="300" height="200" /></p>
<p align="center" class="style1">Gardener's Blessing Bar</p>
<p align="left"><span class="style2">A special soap made for gardeners! People who like a moisturizing soap that cleans well after a hard day's work in the yard will love the Gardener's Blessing Bar. Dried orange peel and poppy seed offer exfoliation, and tea tree oil soothes cuts, bites, and scratches. Sweet orange and eucalyptus oils add a delightful scent to this ultra rich and creamy soap.</span></p>
<p align="left" class="style2"> <strong>Ingredients:</strong> Olive oil, coconut oil, palm kernel oil, cocoa butter, shea butter, beeswax, sweet orange oil, eucalyptus oil,    tea tree oil, dried orange peel, poppy seed.</p>
<p align="center" class="style47">Gardener's
    Blessing Bar<br />
    One Bar: $6.50<br />
    Out Of Stock</p>
<p> </p>
</div>
<div id="right_column">
<p align="center"><a href="/Product Pages/soaps/purify.html"><font size="+2" class="style1">PuriFire<br />
        <span class="style53">The bar that kills MRSA, viruses, and bacteria!
Made with rhassoul clay and rooibos tea. Click here for more ingredients.</span></font></a></p>
<p align="center"><span class="style57"><img src="images/PuriFireBasket.JPG" alt="" width="300" height="200" /></span></p>
<p class="style2">PuriFire soap was developed for healthcare
    workers who work all day in an environment
    saturated with deadly bacteria and viruses. This
      soap contains essential oils with antiviral and antibacterial properties, and will effectively cleanse your body of all unwanted microorganisms
while leaving the beneficial ones behind for defense.</a></p>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <div align="center">
      <input type="hidden" name="cmd2" value="_s-xclick" />
      <input type="hidden" name="hosted_button_id2" value="SQY6LVCYW9LU2" />
      <table>
        <tr>
          <td><input type="hidden" name="on" value="Quantity" />
            Quantity</td>
        </tr>
        <tr>
          <td><select name="os">
            <option value="One Bar">One Bar $8.00 USD</option>
            <option value="Five Bars">Five Bars $37.50 USD</option>
            <option value="Ten Bars">Ten Bars $70.00 USD</option>
          </select></td>
        </tr>
      </table>
      <input type="hidden" name="currency_code2" value="USD" />
      <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit2" alt="PayPal - The safer, easier way to pay online!" />
      <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" />
    </div>
</form>
<p align="center"><img src="images/PuriFire stacked.JPG" alt="" width="309" height="219" /></p>
<p align="center"> </p>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../../../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../../../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Any ideas? Is it something to do with where my Spry Asset folder is, like maybe I shouldn't have ../../../?????
Thank you.

Hi,
Although you didn't get an answer here, I visited your web page and it looks like you found a way to solve the problem. I am having a similar problem and wonder if you (or somebody) can help me?
My problem is that while everything else works just fine, my sub-submenus do not. The first one drops down, but the second one does not (so it looks like I have one item when in fact I have two).
My css code is copied directly from Adobe's SpryMenuBarHorizontal.css. The only things I changed were some button widths, colors, and I tweaked the location the buttons appear in (but did not change original locations nor z-indexes, I don't think!). I am reprinting it below, just in case.
I am using the last version of Spry (1.6.1).
Here is a link to the page, and when you view it, keep in mind that only "Portfolio" has sub-menus, and of those, only "Writing" is supposed to have more than one sub-item ("Fiction" and "Non-Fiction").
http://www.kateswork.com/tests/test-sample4.html
Here is the css:
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
ul.MenuBar2Horizontal
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
    position: relative;
/* 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. These have are a fixed width in the primary menu, an auto width in the secondary menu, which has no children. */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 7em;
    float: left;
    white-space:nowrap;
ul.MenuBar2Horizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 8em;
    float: left;
    white-space:nowrap;
/* Submenus containers 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: 7em;
    position: absolute;
    left: -1000em;
    white-space:nowrap;
/* Submenu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 7em;
/* Sub-submenu containers are wider to accomodate longer items */
ul.MenuBarHorizontal ul ul
    position: absolute;
    width: 11.6em;
    height:2em;
    margin-top: -2%;
    margin-right: 0%;
    margin-bottom: 0;
    margin-left: 0%;
/* Sub-submenu contents */
ul.MenuBarHorizontal ul ul li
    position: absolute;
    width: 11.7em;
/* 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 (99%) */
ul.MenuBarHorizontal ul ul
    margin: 0 0 0 99%;
/* Sub-submenus should also appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul li
    margin: 0 0 0 0%;
    height:auto;
/* 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: 1px solid #999999;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    text-decoration: none;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: #FFFFCC;
    border-bottom-color: #7F7F5C;
    border-left-color: #7F7F5C;
    border-top-width: .1em;
    border-top-style: solid;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:.8em;
    font-weight:bold;
    color: #333333;
    background-color: #CCCC99;
    padding-top: 0.5em;
    padding-right: 1em;
    padding-bottom: 0.5em;
    padding-left: 1em;
ul.MenuBar2Horizontal a
    display: block;
    cursor: pointer;
    text-decoration: none;
    border-right-width: .2em;
    border-bottom-width: .2em;
    border-left-width: .2em;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: #CCCCCC;
    border-bottom-color: #999999;
    border-left-color: #999999;
    border-top-width: .2em;
    border-top-style: solid;
    border-top-color:#999999;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:.8em;
    font-weight:bold;
    color: #333333;
    background-color: #FFFFFF;
    padding-top: 0.5em;
    padding-right: 1em;
    padding-bottom: 0.5em;
    padding-left: 1em;
ul.MenuBarHorizontal ul li ul li a
    border-right-color: #7F7F5C;
/* MOUSEOVER CONDITIONS: */
/* On mouse-over, or "focus," buttons change to a grey background and white text.
The following rule only applies to the IE browser (notice the syntax using the colon): */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: #333333;
    color: #FFFFFF;
    border: 1px solid #CCCCCC;
/* The next rule set has a group selector, so top-menu and submenu items will have the same background color and font color. Notice that the font color here overrides the base rule, above. Menu items that are open with submenus are set to MenuBarItemHover with a grey background and white text. */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #333333;
    color: #FFFFFF;
    border: 1px solid #CCCCCC;
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #333333;
    color: #FFFFFF;
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;
    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
        display: inline;
        f\loat: left;
        background: #FFF;

Developer: web inspector how do I add new css rules

I have been using web inspector for quite some time. It was a regular part of my development workflow, however, I was surprised when the safari team totally re-vamped the tool in safari 6.
You use to be able to click on the menu in the styling section of the tool bar and click "Add new rule". Now it appears you can no longer add css rules in this way. Which is a bummer because I used this feature all the time.
You also, use to be able to double click for a new rule when in the actual stylesheet under the Resources tab. I can no longer do this either. For the life of me, I can't figure out why the safari team would get rid of these valuable options.
Someone please help.
These options must still exist, as they are invaluable when working with css in the browser. Does anyone know how to add a new style rule. I read the documentation and I don't see anything about removing this functionality.
The only way I can find to add a new rule, is through the snippet bar, which is kind of a pain as you have to add the <style> tags every time you add a new rule.
Also, I can't figure out how to view and elements pseudo classes (i.e. :hover , :checked, etc).
I have to say, it is a little frustrating as I don't clearly see the benefits of their redesign and it just seems harder to use. It kind of feels like they reskinned and rearranged things just to make it look new and didn't really think through how developers use this tool.
Does anyone else feel this way with the new safari?
Maybe I will see the light after a couple of days. I hope so because I am partial to using safari.

Build your FGLayout prototype page so it works well in all screen sizes (mobile first, then tablet, finally desktop). To create your home page, SaveAs index.html. Then SaveAs page2.html, replace content. Repeat for other site pages.
Nancy O.

Spry bar text alignment

I need help with aligning text in main spry bar menu. Using DW 5.5, I have a 7 bank bar and 2 have 2 lines, remainder have 1. I need to BOTTOM align everything. I've look through forums, help menus, and u-tube and can not find this answer.
I would also like to not have fixed widths, but widths varied per text length, but when I do that, obviously the 2 lined text banks turn into one line.

To give you an idea of what I would do, have a look at the following by copying and pasting into a new document.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Therapy To Go Home Page</title>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">
<style>
    margin: 0;
    padding: 0;
html {
    background: #FFF;
    height: 100%;
    color: #000;
    font: 100% Verdana, Geneva, sans-serif;
body {
    background: #FFC;
    width: 800px;
    margin: auto;
    font-size: 0.85em;
#header {
    height: 148px;
    background: #C2A4FF;
#nav {
    background: #EEE;
    height: 3.6em;
#aside {
    width: 197px;
    float: left;
    padding: 20px;
#article {
    margin-left: 240px;
    padding: 20px;
    background: #C2A4FF;
ul.MenuBarHorizontal li {
    font-size: 1.05em;
    width: auto;
    text-align: center;
ul.MenuBarHorizontal a {
    background-color: #EEE;
    padding: 0.5em 1.1em;
    color: #333;
</style>
</head>
<body>
<div id="header">
</div>
<div id="nav">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="#"><br>Home</a>    </li>
    <li><a href="#"><br>Services</a></li>
    <li><a href="#">Benefits &<br>Contraindications</a></li>
    <li><a href="#">Common <br>Q&A</a></li>
    <li><a href="#"><br>Pricing/Hours</a></li>
    <li><a href="#">Contact/About<br>Melanie</a></li>
    <li><a href="#"><br>Resources</a></li>
</ul>
</div>
<div id="aside">
<h2>This is the sidebar</h2>
</div>
<div id="article">
<h1>This is the main article</h1>
<p>Consectetur adipisicing elit, in reprehenderit in voluptate excepteur sint occaecat. Ullamco laboris nisi ut enim ad minim veniam, velit esse cillum dolore. Mollit anim id est laborum. Sed do eiusmod tempor incididunt qui officia deserunt cupidatat non proident.</p>
<p>Quis nostrud exercitation in reprehenderit in voluptate lorem ipsum dolor sit amet. Ut aliquip ex ea commodo consequat. Velit esse cillum dolore mollit anim id est laborum. Consectetur adipisicing elit.</p>
<p>Ut enim ad minim veniam, ullamco laboris nisi duis aute irure dolor. Eu fugiat nulla pariatur. Qui officia deserunt in reprehenderit in voluptate cupidatat non proident.</p>
</div>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1");
</script>
</body>
</html>
Gramps

Please help me with spry bar menu

I have laid out my page with the div tags in Dreamweaver. I defined the different sections by putting colors in them until i am ready to put stuff into them however when i insert the spry menu bar into my navigation section, the area below it is behaving like a drop down box of color. What i mean is that the area below which is supposed to stretch from left to right as a single box is now broken up by a different color box the width of the spry bar and goes down to the next box. When i preview it in the browser the page appears normal. How can i get rid of the intruding box in dreamweaver.

HI
I am practicing for the webmaster design course pratical exam. The web page i will be asked to construct will consist of a home page with two or three other pages pages in the site it will have to link to. I know how to do most of the steps individualy but i do not know in what order some of them are done. What i mean is this. ... after setting up the root folder..images..laying out the divs .. i would like to know ... at what point do i do the various things like, set up a styles folder...make a template... make the other pages of the site ..etc. I think i am able to do nearly all of these things but not sure in what order they should be done so the site will work.
I have reached the point where i have established the site and layout, i.e. the wrapper, logo, navigation,header,bodycontent,right and left columns, clearbar, footer. i would like someone to list the sequence i should follow after this. I am praticing on a trial CS5.5 which seems to simplfy to a freat extent what we learned on the course because it is a later version. The version we used on course was CS4 and if the pratical is in this version then i will need to know how it is done in this format.
Date: Sun, 22 Jan 2012 17:45:18 -0700
From: [email protected]
To: [email protected]
Subject: Please help me with spry bar menu
Re: Please help me with spry bar menu created by Nancy O. in Dreamweaver - View the full discussion
If this only happens in DW Design View, use Live View or turn off your CSS display.
View > Style Rendering > un-tick Display Styles.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/4157994#4157994
To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/4157994#4157994. In the Actions box on the right, click the Stop Email Notifications link.
Start a new discussion in Dreamweaver by email or at Adobe Forums
For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746.

Dw does not recognize css rules.

As all know when a CSS file opens in Dw in the left side of the window(in the CODER view) we can find the CSS styles pane where the CSS properties are listed.
When i click to css rule code segment to the open document, automatically, the pane in the left, demonstrates the relevant properties.
Lately, this does not happen in a specific CSS document i am working on. It works fine in other documents but in a specific one, this feature does not work-except in very few rules, rules relative to the body tag for instance.
Why that?
What might be wrong with other rules and their properties are not demonstrated in the CSS pane?
Any ides?
Another strange thing is the fact that when i click the all button in the CSS pane, only 6 rules appear(in the tree structure) despite the fact that the document is full of rules.
As a result it is only these 6 rules that their properties are listed in the CSS pane when I click the corresponding code segment in the main editor window.

<Lately, this does not happen in a specific CSS document i am working on...>
Validate your code and fix reported errors (excluding Spry hacks for legacy browsers).
Code Validation Tools
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Applying css rule to column in a html table?

Im trying to get variable images to be resized with in a table, in one column, to have a standard size on display. Ive googe'd just about every thing i can think of to try find an answer. Being newb to dreamweaver i might not know the correct wording, relating to what im trying to achive.
So if someone could help, would be great .
Also, would a spry data set display the images acording to the css rule?
edit: from what ivé gathered, do I just give the column a col id and the apply the css rule? If so where would the id fit into the column code?
<tr>
<th width="100" scope="col">example</th
</tr>

Im trying to get variable images to be resized with in a table, in one column, to have a standard size on display.
You should crop, resize and save images for the web in your graphics editor first. If you have many images, use batch commands or actions to apply resizing to all images in a folder. Then insert images into table cells.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Alternatives to Spry Bar for navigation

I love the spry bar, but when I preview my page in Explorer I get a message saying: "To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer," and the drop-down submenus don't work.
It's easy for me to just click the message and say "allow blocked content," but I don't want to create an unnecessary hurdle for our users. Is there another way to do a navigation bar that won't create this issue in Explorer? Or some way to change the spry bar code to eliminate the problem?
Thanks!

You can build nested menus with just CSS if you understand it well enough. I tried playing with it, but admittedly, Spry was faster. This guy http://www.duoh.com/csstutorials/2levelmenu/index.html put up a sample of a horizontal CSS only menu with the stylesheet for people to practice with. Making it Verticle is just a matter of changing a few attributes. It's easy - once you get the hang of it. =)

Spry Bar Help

Original Question:
We use CS3 and have created a school website using the sprybar in Dreamweaver as our navigation bar. We have uploaded the spry assets folder and everything works great except for when we make changes to the sprybar, such as adding links. Currently, we have to update the navigation bar by copying the html and then opening and pasting the html into every page in the site, which is more than 100 pages. How do we make the sprybar automatically update whenever we make edits or changes to the sprybar?
We have tried creating the sprybar as a library item and it doesn't work unless it's a problem with Dreamweaver on the local computer communicating with the file on the server. We have played around with using the "include file" command.
As the site continues to get larger, this gets to be a much bigger problem. Any help is greatly appreciated.
Previous Answer Given:
http://foundationphp.com/tutorials/sprymenu/ssi.php
Current Question:
Ok, so we tried doing what was in the above tutorial. It all looks good on the dreamweaver side (I think...the spry bar doesn't show but it is replaced with a php icon). Is there something that needs to be done on the server side? Someone told me the server needed to be "activated" for php. What does this mean?
If php is not an option for us, is there another way to solve this issue?

Jmonday1 wrote:
> Alright guys I am kind of a newbie when it comes to
dreamweaver (I was always a
> fan of golive because of its simplicity). Anyways I am
running Dreamweaver Cs3
> and an older version of the spry scripts (1.4 because I
can't get the updater
> to work on my mac for whatever reason). Anyways I have
my bar layed out as I
> want and it looks great. the problem is it is invisible
in IE. I think its
> probably a filter setting but i'm not sure where its
at... I will attach a
> link, and if you guys want me to post the code I will I
know thats a lot to
> look at though. Any help would be greatly appreciated.
Sorry, not sure what this issue is, but you should try asking
in the Spry forums:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602
Also, just because you can't install the Spry updater
extension doesn't mean that you can't use the updated Spry files
(which may even help resolve the issue). Get the latest versions of
the files here:
http://labs.adobe.com/technologies/spry/home.html
Open the Download zip file and look for the widgets/menubar
folder, it'll contain the latest .js and .css files. The default
1.6.1 files in that package work in IE7, so it may be the specific
CSS that you're using for your page. SO you may want to rebuild
from the latest .js and .css files and apply your styling changes
and test while your doing that.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Spry bar defaulting to second line in FF

My spry bar works great in safari and IE, but defaults to a second line in FF. Thinking this might solve the problem, I changeed the spry MenuBarHorizontal.css width both up and down, from 10 as far down as 6 and as high up as 13, and this does nothing except screw up Safari and IE (it seems '10' is the only width that works on Safari and IE). What do I do to get FF to show the menu on one line?

eberhoo wrote:
My spry bar works great in safari and IE, but defaults to a second line in FF. Thinking this might solve the problem, I changeed the spry MenuBarHorizontal.css width both up and down, from 10 as far down as 6 and as high up as 13, and this does nothing except screw up Safari and IE (it seems '10' is the only width that works on Safari and IE). What do I do to get FF to show the menu on one line?
The original Spry files do work in all modern browsers. Which means that you have changed something, probably within the CSS-file, that has upset the delicate balance.
Compare the original CSS with the one that you have modified and you may be able to figure out where the problem lies. The 10 commandments may help you out and can be found here http://dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one
I hope this helps.
Ben

Editing CSS rules in SlideShow

Hello Community,
I need to create a new CSS rule for the ContentSlideShow from Spry. I want that the title of the headline is in a other color than the other text.
I want the title "The Expendables" in #429af2 and the rest of the text in white. Can somebody help me futher with this? I already tried to create a new CSS rule by enclosing "The Expendables" with a <div>-Tag named "headtitle", but it does not work if I insert it in the CSS-file of the SlideShow.
Here is the CSS-code of the complete title "The Expendables - Unsere Kritik zum Action-Kracher!":
.WLBSlideShow .photo .caption {
font-size: 14px;
font-family: Verdana, Geneva, sans-serif;
color: #ffd700;
margin: 0 6px;
line-height: 25px;
font-style: bold;
padding-left: 8px;
position: absolute;
top: 265px;
And here is the first part of the HTML-code:
<div class="article">
    <div class="photo"> <a href="EDIT"> <img src="Expendables_01.jpg" alt="Expendables" /></a>
      <div class="caption">The Expendables - Unsere Kritik zum Action-Kracher!</div>
    </div>
    <div class="story">
      <div class="banner">
        <div class="title">The Expendables - Unsere Kritik zum Action-Kracher!</div>
        <div class="subTitle">The Expendables - Unsere Kritik zum Action-Kracher!</div>
      </div>
      <div class="content">
        <p>The Expendables - Unsere Kritik zum Action-Kracher!</p>
        <button type="button"><span><span><span>More Info</span></span></span></button>
      </div>
    </div>
</div>
Thanks ahead.

This is one slide of (obviously) several. Is it dynamically created?
For the specific example you've given:
"<div class="caption">The Expendables - Unsere Kritik zum Action-Kracher!</div>
I want the title "The Expendables" in #429af2 and the rest of the text in white."
You'll need to add a span tag inside the div
<div class="caption"><span>The Expendables</span> - Unsere Kritik zum Action-Kracher!</div>
Then the CSS
.WLBSlideShow .photo .caption {
font-size: 14px;
font-family: Verdana, Geneva, sans-serif;
color: #fff;
margin: 0 6px;
line-height: 25px;
font-style: bold;
padding-left: 8px;
position: absolute;
top: 265px;
.WLBSlideShow .photo .caption span {
     color: #429af2;

Customizing a Horizontal spry bar

Maybe I have been looking in the wrong places, but is there a tutorial to customize a spry bar like the sample ones on adobe labs. I have almost got my spry bar completed, but I cannot figure out how adjust a few things. I looked at David Powers' tutorials and one or two others, they were helpful but not enough. All help is greatly appreciated

I am having trouble with the width of the boxes that have submenus (members, safety, and cal/osha).... Basically the width is good as far as the text goes but the arrow that indicates there is a submenu for that box is covering the last letter.
I am also having trouble with the padding/spacing left of the submenu items, I think I some how added padding/spacing to the submenu items when I was following a tutorial but I forgot how to undo that action.
I don't have my site up yet, but I can post the code....
here's the css for my horizontal spry menu bar-
/* 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;
     text-transform: uppercase;
/* 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;
     font-size: 100%;
     position: relative;
     text-align: left;
     cursor: pointer;
     width: auto;
     float: left;
     padding-right: 15px;
     white-space: nowrap;
/* 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
     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;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
     width: auto;
     display: block;
     float: none;
     white-space: nowrap;
     background-color: transparent;
/* 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: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
     display: block;
     cursor: pointer;
     background-color: #FFF;
     color: #000;
     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: #FFF;
     color: #03F;
/* 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: #FFF;
     color: #03F;
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: 100% 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;
     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
          display: inline;
          f\loat: left;
          background: #FFF;
** Just in case here is my source code....
<ul id="PARAMA_Menu" class="MenuBarHorizontal">
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Members </a>
        <ul>
          <li><a href="#">Services</a></li>
          <li><a href="#">Benefits</a></li>
          <li><a href="#">w/c Advantages</a></li>
          <li><a href="#">w/c quote assistant</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Safety</a>
        <ul>
          <li><a href="#">Safety & Loss Control</a></li>
          <li><a href="#">Safety Articles</a></li>
          <li><a href="#">safety articles archive</a></li>
          <li><a href="#">scif newsletters</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">cal/osha</a>
        <ul>
          <li><a href="#">compliance & enforcement</a></li>
          <li><a href="#">consultation</a></li>
          <li><a href="#">archive</a></li>
        </ul>
      </li>
      <li><a href="#">resources</a></li>
      <li><a href="#">site map</a></li>
    </ul>

Creating UL that arent styled by existing CSS rule

Hi,
I am using an UL for a nav bar. I have created a CSS style to style this UL.
Now if I create another UL then this new UL takes its styling from the CSS rule. How do I create other UL that are not automatically styled by my existiing rules? Do I have to create unique IDs for each UL?

li a = any anchor inside any list (not specific).
#nav li a = any anchor inside a list, that is also inside an id="nav" (moderately specific).
#sidebar ul#nav li a = any anchor inside a list, that is inside a ul id="nav" that is inside the #sidebar (very specific).
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

How Do You Add Multiple CSS Rules to Text?

Hi everyone, I have these css rules in my css styles window they are all assigned to some text in a cell on my page.
.Def14grey4 <body>
.def14grey4 a:link <a>
.def14grey4 a:visited <a>
.def14grey4 a:hover <a>
.def14grey4 a:active <a>
.def14grey4 a:focus <a>
How do you add (all of) these styles to the text in the first place, I know how to add the first one (.Def14grey4), you select the text in the cell and choose the rule from the drop-down menu in the css panel, but how do you add the other ones to some text as well, so that it can have the same link properties.
Basically I have some more text elsewhere on the page and want to assign these rules to that as well.
thanks Gareth

You would want to change your order as shown here -
.Def14grey4 <body>
.def14grey4 a:link <a>
.def14grey4 a:visited <a>
.def14grey4 a:hover, .def14grey4 a:focus <a>
.def14grey4 a:active <a>
That way, the hover and the focus states are equivalent.
How do you add (all of) these styles to the text in the first place, I know how to add the first one
You don't really. The 4 bottom selectors say -
"find an element with a class of 'def14grey4', and style any link inside that element this way"
So, <span class="def14grey4"><a href="whatever.html">Whatever</a></span> would get the pseudo-class styles, as would any of the following -
<span class="def14grey4"><a href="whatever.html">Whatever</a></span>
<td class="def14grey4"><a href="whatever.html">Whatever</a></td>
<p class="def14grey4"><a href="whatever.html">Whatever</a></p>
<body class="def14grey4"><a href="whatever.html">Whatever</a></body>
<div class="def14grey4"><a href="whatever.html">Whatever</a></div>
<strong class="def14grey4"><a href="whatever.html">Whatever</a></strong>
and so on. These examples assume that there isn't some other more specific rule that would apply to the same links. You need to study up on the CSS cascade and specificity....

CSS rules spry bar

Similar Messages

Maybe you are looking for