CSS Menu Maker Dreamweaver CS5

Hi folks,
Newb to Dreamweaver CS5 & CSS (yay!) I've read the online tutorials and quite frankly, I'm about ready to smash my head against my desk. This is very confusing. I haven't made any progress with my web site....unless staring at a white screen mocking me is progress.
I got some good feedback from a few users in my first post (this is my 2nd post) for which I'm very greatful btw and figured out that frames aren't the way to go. CSS confused the heck out of me, so I did some research and stumbled upon a website : http://www.cssmenumaker.com
I was able to create & download a horizontal CSS menu that looks very appealing. Problem is, I can't seem to get it to work using Dreamweaver CS5. Perhaps somebody can help me. (God how I hope somebody can help me!)
For starters, I've created a "site" in Dreamweaver CS5. The site in Dreamweaver CS5 connects successfully to my hosting server. The directory structure on my hard drive that holds my files is :
C:\HTML
C:\HTML\images (where I keep any images used for my site)
C:\HTML\menu (this was produced by the CSS menumaker website - has a CSS file in it & an "images" subdirectory within)
Below are the instructions that were included when I unzipped the cssmenumaker's zip file :
INSTALLATION INSTRUCTIONS
1) Upload the "Menu" folder to the root directory of your website.
2) Copy and paste the code below to the desired spot in your site.
<head>
     <link rel="stylesheet" href="/menu/menu_style.css" type="text/css" />
</head>
<div class="menu bubplastic horizontal aqua">
     <ul>
         <li class="highlight"><span class="menu_r"><a href="index.html" target="_self"><span class="menu_ar">Home</span></a></span></li>
         <li><span class="menu_r"><a href="products-services" target="_self"><span class="menu_ar">Products/Services</span></a></span></li>
         <li><span class="menu_r"><a href="faq" target="_self"><span class="menu_ar">FAQs</span></a></span></li>
         <li><span class="menu_r"><a href="contactus" target="_self"><span class="menu_ar">Contact Us</span></a></span></li>
     </ul>
     <br class="clearit" />
</div>
NOTE:
1) Open the "sample.html" to view a sample of your menu.DO NOT use this code in your site.
2) If you run into a problem getting your menu to work or have suggestions for the site please Contact Us and let us know. We will try to help as much as possible.
Can somebody walk me through this step by step? I thought it was fairly simple but obviously I'm doing something wrong.

John,
As I mentioned in my first post I've been through the tutorials already. I just can't seem to get this to work. Working off what I told you in my first post, assume you're working with a blank index.html and you enter in the CSS Menu Maker's code to the blank html file.
The HTML code should look like this, should it not ? :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled</title>
<link rel="stylesheet" href="/menu/menu_style.css" type="text/css" />
</head>
<div class="menu bubplastic horizontal aqua">
    <ul>
        <li class="highlight"><span class="menu_r"><a href="index.html" target="_self"><span class="menu_ar">Home</span></a></span></li>
        <li><span class="menu_r"><a href="products-services" target="_self"><span class="menu_ar">Products/Services</span></a></span></li>
        <li><span class="menu_r"><a href="faq" target="_self"><span class="menu_ar">FAQs</span></a></span></li>
        <li><span class="menu_r"><a href="contactus" target="_self"><span class="menu_ar">Contact Us</span></a></span></li>
    </ul>
    <br class="clearit" />
</div>
<body>
</body>
</html>

Similar Messages

Adobe recommends: New CSS features in Dreamweaver CS5

Over the next week, we are going to be publicizing some high-value content from adobe.com and other community sites. We have been tracking what's been most important to our users, and feel that getting this content out to the larger community will go a long way toward helping people tackle some of their most pressing challenges.
Continuing our trip along the CSS highway, our next recommendation is a video by Dremeaver superstar Brian Wood:
New CSS features in Dreamweaver CS5
The video demonstrates some of the most exciting new CSS features in Dreamweaver: new CSS layouts, CSS inspect, and CSS enable/disable.
Give it a spin and let us know what you think!
Previous recommendation threads:
Use Dreamweaver CS 5.5 to package your web application for iOS and Android devices
Customizing a Spry Menu Bar widget
Spry Menu Bar resources
Layout 101
CSS page layout basics

Thanks for the answer this is very useful however I still find that Dreamwever defaults back to writing in CSS, I have to go to the manel every time and switch from CSS style to Inline style which is very irritating. Is there any way to disable writing in CSS all together like their used to be in CS3..in the preferences.
Much appreciated

Drop-down menu in Dreamweaver CS5.5 not displaying

Thanks for anyone's help. I'm a first time user of the forum so please excuse any protocol errors.
I can't get my drop-down menu to display on my web page (http://www.cglcontracting.com/) on a Windows platform using Dreamweaver CS5.5.
Thanks very much for any advice/help.

Hi again -
My previous suggestion did not seem to make any difference, the CSS still did not validate.
I seems to be choking on your Browser Hack section.
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.cglcontracting.com%2FSpr yAssets%2FSpryMenuBarHorizontal.css&profile=css3&usermedium=all&warning=1&vextwarning=&lan g=en
I re-wrote the bottom Browser Hack section and it now validates.
I'll paste the whole CSS file here, Save it as "SpryMenuBarHorizontal.css" and give it a try.
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 90%;
    cursor: default;
    width: auto;
    color: rgb(153,153,153);
    text-transform: uppercase;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-align: center;
    background-color: rgb(255,255,255);
    vertical-align: middle;
/* 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
    color: rgb(153,153,153);
    z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 8em;
    float: left;
    color: rgb(0,255,0);
    overflow: hidden;
    visibility: inherit;
/* 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
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    color: rgb(204,204,204);
    top: 0px;
    overflow: auto;
    visibility: inherit;
    margin-top: -5%;
    margin-left: 95%;
/* 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
    color: rgb(204,204,204);
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-variant: small-caps;
    text-transform: uppercase;
    background-color: rgb(255,0,0);
    left: auto;
    width: auto;
    z-index: auto;
    visibility: inherit;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    text-align: left;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    background-color: rgb(204,204,204);
    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: 100px;
    background-color: rgb(204,204,204);
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
    border: 0px none #CCC;
    margin-top: 0%;
    margin-right: 0%;
    margin-bottom: 0%;
    margin-left: 0%;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #F00;
    color: #003;
    text-decoration: none;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 1.2ex;
    font-weight: bold;
    vertical-align: middle;
    padding-bottom: 0.53em;
/* 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: #000;
    color: rgb(255,255,255);
    text-align: center;
/* 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: #900;
    color: #066;
    text-align: center;
    vertical-align: middle;
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: 98% 50%;
    background-color: rgb(255,0,0);
    color: rgb(0,0,51);
/* 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: 98% 50%;
    background-color: rgb(204,204,204);
    visibility: inherit;
/* 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: 98% 50%;
    background-color: rgb(153,0,0);
    visibility: visible;
/* 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: 98% 50%;
    background-color: rgb(153,153,153);
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;
/* 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;

How do I change vertical menu to a horizontal menu in Dreamweaver CS5?

Doing a website (my first) for a friend of mine. Followed the Adobe tutorial for a lot of it (with Paul Trani) and have everything done but now my friend wants the menu bar to be horizontal instead of vertical. (I have other questions but this is the big one for now) I do have a CSS file that is linked to all 4 pages. I have hunted and searched to no avail. The page started out as a template (2 column fixed, left sidebar, header and footer). I am hoping I just have to paste some code into it and have found a few suggestions on the web but nothing seems to work. I did get it to the point with a list with no bullets with no background but can't get it to go horizontal. Then code started showing up on my design page and I gave up and turned to this forum. I would hate to start over. I do not even see a template that has a horizontal menu on it for one of the choices. Any help would be greatly appreciated.

I think you are confused about how to differentiate between horizontal navigation and vertical navigation.
In HTML, both are exactly the same. You use a list. So both will be just like you describe them:
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
Now, there's your navigation. Done. So how do we do an horizontal nav? Well we tell web browsers to format our HTML code in a style sheet, called a Cascading Style Sheet, or CSS. So let's give the <ul> a tag that tells the browser that it's not just a simple unordered list; it's special and has to be set up a certain way:
<ul id="nav">
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
Now, let's go to our style sheet and create the style for the id "nav." And remember, anything with an ID on a web page must occur only once. If you're going to have several "nav" tags on your page, you have to make a class. The difference (in CSS) between a class and an id is the use of a hash "#" for an id and a dot "." for a class.
So here's the CSS for the horizontal navigation:
#nav {
          width: 100%;
          float: left;
          margin: 0 0 3em 0;
          padding: 0;
          list-style: none;
          background-color: #f2f2f2;
          border-bottom: 1px solid #ccc;
          border-top: 1px solid #ccc;
#nav li {
          float: left;
#nav li a {
          display: block;
          padding: 8px 15px;
          text-decoration: none;
          font-weight: bold;
          color: #069;
          border-right: 1px solid #ccc;
#nav li a:hover {
          color: #c00;
          background-color: #fff;
Here you're floating both the list and the list items left. Floating the list items left is what pulls them into a nice horizontal row, stacking the items from left to right. However, because of how floats behave, the containing list will collapse to a height of zero unless it is also floated left.
And that wouldn’t be a major problem, except the list has a background color and if the list collapses, that background color won't show. This way, it’ll fill up the entire width of the page (or of its container, if it’s in a container with a width set).
Additionally, the only margin you see will be the bottom one, so the list items will make their own margins and behave themselves. The list-style is set to “none,” which removes the bullets.
Now all navigation will certainly be a link, so I style the list items that are links (#nav li a) with padding that will space them out, get rid of the default underline, setting the text decoration to none, making them bold and creating a thin right border. Then I change the color on the nav for a hover.
Now, vertical is the default for a list.
Here's the difference:
You keep list-style: none;
You get rid of your floats.
You get rid of the 100% width, unless you have it corralled in a containing div, like a left or right sidebar.
Boom! you're done.
-Mark

Navigation Bar Drop Down Menu for Dreamweaver CS5

Does anybody know how to make a navigation bar with drop down menus in CS5 flash?
-Harley

Does anybody know how to make a navigation bar with drop down menus in CS5 flash?
-Harley

Creating dropdown menu in Dreamweaver CS5 that is compatible with iPad

The spry menu bar on my website does not work properly on iPads or other touchscreen devices. Some of the solutions I've been looking at tell me to download the Widget Browser and use Spry MenuBar 2.0. However, I cannot find the Widget Browser to download it and move forward.
Is the Widget Browser no longer available? If not, please could someone suggest a solution to create both vertical and horizontal menus that work on touchscreen devices. Simple solutions, please, because I'm not as technical as I'd like to be.
Thank you!

Primer for using jQuery Plugins
http://alt-web.blogspot.com/2012/11/primer-for-using-jquery-plug-ins.html
jQuery Superfish (touchscreen friendly drop menus)
http://users.tpg.com.au/j_birch/plugins/superfish/
Nancy O.

Adobe recommends: Enhanced support for CSS3 in Dreamweaver CS5.5

Over the past week, we publicized some high-value content from adobe.com and other community sites. Hopefully you enjoyed these posts and found the resources useful. Today is our last day of the "Adobe Recommends" series.
Continuing our trip along the CSS highway, we now move to CSS3 with our next recommendation, by Preran Kurnool:
Enhanced support for CSS3 in Dreamweaver CS5.5
This blog post takes you through using box shadow, text shadow, border radius, and border image properties in Dreamweaver CS5.5.
Give it a spin and let us know what you think!
Previous recommendation threads:
Use Dreamweaver CS 5.5 to package your web application for iOS and Android devices
Customizing a Spry Menu Bar widget
Spry Menu Bar resources
Layout 101
CSS page layout basics
New CSS features in Dreamweaver CS5
Automatically attaching style sheets to new documents

Aegis Kleais wrote:
Sorry, Al, but I couldn't disagree more. Where I respect the fact that, as coders, we're rather ingrained with our workflow processes and, at times, hesitant to change, I've found LESS' benefits to be very worthwhile.
No need to apologize. Preprocessing is a topic on which there are differing opinions. You have one. I have one. There are advocates:
http://blog.urbaninsight.com/2012/04/12/ten-reasons-you-should-be-using-css-preprocessor
There are those who are not sold:
http://blog.millermedeiros.com/the-problem-with-css-pre-processors/
http://www.skybondsor.com/blog/css-preprocessors
There are those mostly sold:
http://css-tricks.com/musings-on-preprocessing/
There are even those who have been converted (but who might reverse at some later point):
http://cognition.happycog.com/article/preprocess-this
Heck, even I might be converted someday - or not
Bottom line for me, right now? I know I can write CSS that is better than most, more efficient than most, and easier to follow than most, and a preprocessor would add unwanted complexity. But that's for me. For someone not able to be organized intutively, or for a large - but carefully coordinated - team, a preprocessor could be a positive.
But not for me.
There are evolving trends - popular aspects of the technology that may and should find themselves being adapted into CSS. But I've been around this business as long as CSS has. I've seen buzzwords and trends and I've historically been spot-on in predicting the one that will stick. I think preprocessing will stick - but only insofar as it will be a catalyst for features in future versions of CSS. As a separate technology it makes no sense - to me

How can I modify the old pop up menus (originally created with DW 8) in dreamweaver cs5?

I just purchased dreamweaver cs5. I am currently maintaining old sites that were creating with drop down menus using dreamweaver 8. I realize that this is a deprecated feature and I cannot create pop up the old way; however can I still edit these with dreamweaver cs5?

First, read this about the old MM menus:
http://losingfight.com/blog/2006/08/11/the-sordid-tale-of-mm_menufw_menujs/
CSS Menu systems
CSS Express Drop-Down Menus (tutorial)
http://www.projectseven.com/tutorials/navigation/auto_hide/
List-O-Rama (free DW Extension)
http://www.dmxzone.com/go?5618
CSS Menu Maker (On-Line Menu Generator)
http://www.cssmenumaker.com/
Pop-Menu Magic2 by PVII (DW extension purchase)
http://www.projectseven.com/products/menusystems/pmm2/index.htm
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Inserting iFrame and css menu script

Something in this isn't working.
I've downloaded the css menuscript from css menu generator, uploaded the "menu" folder to the root folder www.widman.biz/Corvair
then put the following in the html widget
Time for help.
this is what I'm getting instead of a menu across the top where the menu should be
"The requested URL /Corvair/English//Englishfiles/widget0markup.html was not found on this server."
I uploaded the "menu" folder from CSS menu maker to the "Corvair" folder of www.widman.biz
This is what I put in the snippet:
<iframe src="http://www.widman.biz/Corvair/menu/menu_style.css" frameborder="0" width="775" height="90" scrolling="no"></iframe>
<textarea>
<head>
<link rel="stylesheet" type="text/css" href="/menu/menu_style.css" />
</head>
followed by all the rest of the text generated by the css menu site, which if I post here actually ends up as a text menu instead of the script. (see other post
(http://discussions.apple.com/thread.jspa?threadID=2209476&tstart=25)
I'm supposed to end up with a drop down menu across the top
I'm guessing I'm not putting the script in right, or what?

There's a lot wrong with [your HTML Snippet|http://www.widman.biz/Corvair/English//Englishfiles/widget1markup.html]:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><body></p>
<textarea>
<head>
<link rel="stylesheet" type="text/css" href="http://www.widman.biz/Corvair/menu/menu_style.css" />
</head>
<More code that should be displayed but isn't.>
The body, p and textarea elements should not be there. Plus a body element in the place where it should be is missing.
[Here's the page you want.|http://www.wyodor.net/_Discussions/widman.html] Save it as HTML and copy/paste the entire code in the HTML Snippet.
[Using the HTML Snippet in iWeb|http://www.wyodor.net/blog/archives/2009/07/entry_213.html]
Paying attention to detail is the name of the game.

Insert css menu bar

Dear all,
i am trying to insert a menubar developed by a thirdparty css menu builder into adobe muse, but whenever i try to insert the scripts via "object>insert html" it does not seem to work.
i am using a CSS menu builder form "CSS3 Menu. Free CSS Menu Maker"
i cant use the default menu builder from Muse becuase i have too many drop downs.
here is an example of one of my sites that i used a java script menu builder instead. "Kraft Foods Portal"
i am transitioning to css because java menu builder is obselete and Css is able to make it look cooler.
any help would be highly appreciated. thanks.

Muse can build it's own menu system using CSS. (Menu widget)
Not sure if you can even bring a third party menu builder inside Muse and work properly.

Menu behind spry slideshow dreamweaver cs5?

Using Dreamweaver CS5
Hi. I have a site with a css3 dropdown menu that seems to work fine on all of my pages except my photo gallery page. The menu appears behind the Spry Slideshow with Filmstrip that I got from the Widget Browser.
The site is not live and only on my local machine but here is the page html in a text doc: http://www.210usa.com/index.txt
Here is the main css: http://www.210usa.com/css_prob.txt
Here is the slideshow css: http://www.210usa.com/css_slideshow.txt
I have changed the z index but that is not helping at all. I found this for problems with flash docs but I am a real novice and do not know how to even put these tags in my code. Any help would be greatly appreciated.
Thanks

Grüss Dich sailor,
in my opinion "SpryTabbedPanels" actually only do what they should to do and so it inevitably leads to the covered menu items. I played a little bit around with the width from your "css3menu1/style.css"
height:22px;line-height:22px;border-width:0 0 3px 0;border-style:none;border-color:#009900;border-radius:10px;-moz-border-radius:10px;-webk it-border-radius:10px;padding:3px 10px; width: 650px;}
and I got this:
so you can see what I mean. To correct this you had to put down your "photo gallery for Mystic Pizza II" so far, till there is enough space for the panel. And therefore I would prefer a solution by using a "SpryMenuBarVertical" leftmost on your page (if you mean it's necessary so too on the right).
Glück auf!
Hans-Günter

Help with Dreamweaver CS5 spry menus. Menu is not dropping down in IE7.

Hello.
We recently upgraded from GoLive CS3 to Dreamweaver CS5. Wow! This has been a big change for us. We are having trouble with a website that we are building, specifically the Spry Menu drop downs not appearing correctly in IE7 and older. While the dropdown menu appears in other browsers, it is not dropping down at all in IE7 and earlier versions. After researching this topic on many websites, including this forum, we are still unable to resolve our particular issue. We have tried many of the suggestions that are common to our problem, but have not found a solution as yet. Could someone please check out this page for us, and possibly give us some advise. We are working on Mac OSX. Thank you in advance for any suggestions you may offer.
http://www.advertools.net/pgtdemo/index.html

When I added the following to the document
<style>
#main_image {position:static;}
</style>
the menu items appeared albeit in the wrong position.
The reason for the hidden menu items is because #main_image had a position of relative, effectively creating a flow of its own rather than following the natural flow of the document.
Now for the postion of the submenu. If I add the following style rules to the document the submenu items are in the correct position
ul.MenuBarHorizontal li {text-align: left;}
ul.MenuBarHorizontal a {text-align: center;}
In the first line I have reset the rule that you had changed to center align and in the second line (which is not in the original CSS) I have aligned the text in the anchor tag to align center.
The reason is that IE<8 behaves differently to other browsers when it comes to list items causing the nested list items (submenu) to align themselves to the center of the text of the parent list item.
I hope the above helps.
Gramps

Syntax Highlighting for LESS CSS in Dreamweaver CS5.5

This article describes how to add the .less extension to Dreamweaver so that it views it as CSS and thus performs proper syntax highlighting.
I'm using Dreamweaver CS5.5 and following those steps still doesn't work for me. It works perfectly fine in CS5 and earlier versions but not CS5.5.
Do you have any ideas? I'm modifying the following file as the above link suggests:
C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS5.5\configuration\DocumentTypes\MMDocumentTypes.xml

Aegis Kleais wrote:
Sorry, Al, but I couldn't disagree more. Where I respect the fact that, as coders, we're rather ingrained with our workflow processes and, at times, hesitant to change, I've found LESS' benefits to be very worthwhile.
No need to apologize. Preprocessing is a topic on which there are differing opinions. You have one. I have one. There are advocates:
http://blog.urbaninsight.com/2012/04/12/ten-reasons-you-should-be-using-css-preprocessor
There are those who are not sold:
http://blog.millermedeiros.com/the-problem-with-css-pre-processors/
http://www.skybondsor.com/blog/css-preprocessors
There are those mostly sold:
http://css-tricks.com/musings-on-preprocessing/
There are even those who have been converted (but who might reverse at some later point):
http://cognition.happycog.com/article/preprocess-this
Heck, even I might be converted someday - or not
Bottom line for me, right now? I know I can write CSS that is better than most, more efficient than most, and easier to follow than most, and a preprocessor would add unwanted complexity. But that's for me. For someone not able to be organized intutively, or for a large - but carefully coordinated - team, a preprocessor could be a positive.
But not for me.
There are evolving trends - popular aspects of the technology that may and should find themselves being adapted into CSS. But I've been around this business as long as CSS has. I've seen buzzwords and trends and I've historically been spot-on in predicting the one that will stick. I think preprocessing will stick - but only insofar as it will be a catalyst for features in future versions of CSS. As a separate technology it makes no sense - to me

HTML 5 and CSS 3 Support In Dreamweaver CS5

I cannot find any information on this web site about whether and how Dreamweaver CS5 supports HTML 5 and CSS 3. There are lots of other fancy high-end whiz-bang technologies highlighted in CS5, but without support for HTML 5 and CSS 3, Adobe has left a great big hole in the middle of the new Dreamweaver. If I'm going to have to code these by hand, then there's little incentive for me to upgrade from CS4. Adobe may, by this oversight, intend to extend the useful life of Flash, but if this is so it's penny wise and pound foolish. There is much to like about Flash - and much to dislike about how it works on the user side. Leaving these problems unresolved hurts Flash, and leaving HTML 5 and CSS 3 support out of Dreamweaver hurts Dreamweaver. In other words, this is a lose-lose strategy.

Hi Scott
Sorry for the delay in replying, but I turn my internet connection off when working, otherwise I have found I tend to do more research than work.
Media-Queries:
I had viewed the video on the possible implementation of media-queries when it was first released, and in most respects the implementation is as I would expect, but it would be helpful if it was, (in a future development of the use) possible to show a list of 'common' smartphone/handheld devices, (makes/models) within the dreamweaver interface that would be usable with the screen size being used, (possibly as an import from the 'device central' device list as a drop-down list). My reason for asking for this feature is primarily as a time saving feature for the css layouts via media-queries as it would then show the targeted/usable devices in a list, and possibly alleviate the requirement of developing layouts that are not really required.
Video:
At the moment I am using the video feature as you have indicated where possible, and am doing so with the use of IECC's for IE as a fall-back for that browser. I have tried targeting versions if Firefox and Safari that support the video element by testing for it with JavaScript, but I have found this unreliable, possibly when the standard is finalized this may be the better method.
SVG:
I personally have decided to go with svg in preference to canvas. I have seen a few 'wow' factor demo's produced using canvas but as they use cross-compiled java to javascript code they are in reality showing nothing that has not been done before, (If we had 4Ghz processors with multi-core in 1999 similar trial graphics in vml would have worked just as good then, showing my age here!).
My current work-flow with svg is - Inkscape - Modify the code by hand/preview in a browser - copy/past the code into dreamweaver.
The current in-line implementation of svg's in the IE9 preview is where I see the main future of the svg implementations, as this makes using svg's for graphic elements and basic animations much more viable/easier for the average designer/developer, and lets not forget that as it is a vector it is ideal for resizeable background images in fluid/liquid layouts.
I should say here, that I will for the foreseeable future use flash/swf's for more complex animations, as these are still much better quality than anything that can be achieved with svg or canvas.
I would like to see the possibility of using Fireworks for the creation of svg's, and a work flow similar to that available between fireworks and dreamweaver at the moment.
Cache manifest and database:
As you have rightly grouped these two together, (and I cannot really envision a situation that they would not be used so) the situation with these is for me, (when trying to create the code for use) the necessity of 'remembering' what I must include in the cache and the transfer of the data for the database.
Both are probably better explained with a typical scenario -
A new research/development firm has developed the technology and parts to upgrade an autos internal combustion engine to an hydrogen powered engine. However the products list is specific to the motor manufacturers engine type, and to make matters worse the sales department also wishes an off-line version of the demos and parts list to be available to its sales team and customers, (o/k, maybe this is not a typical scenario, but it does demonstrate the usage).
When developing the 'custom' html 5' enabled page I would require the cache manifest to include all necessary javascript/images/videos that would be required for the particular auto manufacturer to be available off-line, and compiling the list must be done at present by hand making it subject to possible errors.
As for the database, (manufacturer specific) this must also be available off-line and updateable by the sales person and customer, as they are not always on-line and no hard-copys of material will be produced, (except when printed by the mechanic).
My solution for me regarding the cache manifest would possibly be a dialogue in dreamweaver that would show all resources associated with the auto manufacturers model type used in the html site. I have used namespaces, (or some form of identifier) for general and model specific javascript, and a model identifying code for images and videos. The dialogue would then allow me to filter the resources required using the namespaces and identifier and include them in the list as required, possibly in much the same way that items are moved from a general list to a more specific list when creating the 'favourites' toolbar in dreamweaver.
The database is on first appearance much simpler, as I would simply download the database using the motor_id as a filter, (yes Scott, you can see where I am going with this ) for those who cannot this would be wrong. You have correctly seen the problem with doing this, but I will explain for those who have not. The sales person and the customer would not see any of the images or videos that have references stored in the database, as these are just references and not the actual images/videos, yes one could use 'BLOB' for storing the items but this is not in my experience a reliable method. What is required is some form of method that would also download these items and place them into the required file position for off-line viewing, (which is what the cache manifest would do).
So I would also require the possibility to add dynamically to the cache manifest from an sql database at the same time as the 'save for off-line' option is generated, (I have experimented with doing this in a similar manner that xml is created from an sql database).
That's it for the html 5.
Accessibility:
For checking I use the firefox accessibility extension and total validator extension first, then the WAVE evaluation tool.
But for Dreamweaver I would like to see the inclusion of the ARIA options as standard, especially when developing 'rich-internet-applications' particularly the aria-live and role options. I often find it interesting in discussions about html 5 where it is seen by many as a 'new' mark-up' language for the web, but rarely seen in the context of helping in accessibility when used correctly. Even the html 5 spec contains a section on using the new mark-up as part of accessibility and how the ARIA roles should be applied, (see - http://www.whatwg.org/specs/web-apps/current-work/multipage/content-models.html#annotation s-for-assistive-technology-products-%28aria%29).
The inclusion of an extra live-view option in dreamweaver that render the page in 'screen reader' mode would also be a possible accessibility checking help. This could be done by simply turning off the background-images 'on-mass' and rendering any items as they would be seen by a screen reader. As most screen readers do now parse JavaScript and css, it would illustrate the problems of using such techniques as light-boxes without using the aria-live role to tell users that the light-box in now the focus of the page.
For anyone who has stayed with this post, my sincere thanks, and any comments on the content would be welcome.
Paula Z

CSS Template in Dreamweaver, cannot make flash(swf) show ???

Hi all,
I'm quite new at using dreamweaver, have been using GoLive
some before and I have got a time consuming problem:
To try to get a hang of CSS page designs I've used the Page
Design (CSS) Halo Right nav that comes with DW8.
I've learnt pretty much how it works BUT, I cannot make a
flash file visible when inserted to the page design ????
It does not show if I insert it to an existing div tag or if
I insert it in a new layer. What am I doing wrong ?
(same goes for images)
Need help quickly.
Thanks!

This is one of the several weird problems with the HALO
layout.
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
==================
"Pasay" <[email protected]> wrote in message
news:eve7b0$s6g$[email protected]..
> OK!,
> will look into that, as I said I'm all new to this,
grateful for all tips.
> I've posted a new Topic : CSS Template in Dreamweaver,
Submeny
> dissapears?
> may be related to the javascript error ?
> //Bosse
>

CSS Menu Maker Dreamweaver CS5

Similar Messages

Maybe you are looking for