Navigation Bar Question in Dreamweaver

How do put text on the links in the navigation bar in dreamweaver - this is text the person would see when they rollover the link in the navigation bar

There are two attributes that may be used to place text on a navigation bar in Dreamweaver but I would strongly urge you to not create navigation that is not easy for the visitor to figure out.
The first is through the use of an alt tag thusly:
<a href="where_this_links_to"><<img src="images/your_nav_image" alt="What_the_link_is" /> </a>
This will be picked up in Firefox.
You may use the title attribute for all other browsers, which will cause a tool tip to appear after a certain hover time thusly:
<a href="where_this_links_to"><<img src="images/your_nav_image" alt="What the link is" title="What the link is" /> </a>
alt tags are required for screen readers to assist persons without sight and title tags are generally used to make what is not apparent, apparent.
Again, if your navigation is not understandable, your website design should be corrected so that it is.

Similar Messages

How to create this cool navigation bar in CS5 Dreamweaver

Dear All,
Can somebody please walk me through how to create this cool navigation bar?
Please see the link below:
http://www.viesso.com/viesso/home.php
Thank you for all your help!
I am designing my own website and I stuck at the beginning...
Agi

You can either use CSS to style the SpryMenuBar or there are commercially available options like Project Seven's Pop Menu Magic: http://www.projectseven.com/products/menusystems/pmm2/index.htm . If you have the money I personally recommend the latter of the two, but you can easily style the Spry menu as well.

Invisible Navigation Bar

I use Xara to produce my navigation bars, but in Dreamweaver
8 the bar is generated whee I want it, but not shown in design
mode. I have tried to turn on visibility in 'View' without success.
Any suggestions as to what the solution is?

That usually indicates a problem with the font that is used and isn't working or missing.
Try to use the DOM Inspector to see which font is used in that section.
*DOM Inspector: https://addons.mozilla.org/firefox/addon/dom-inspector-6622/
* https://developer.mozilla.org/En/DOM_Inspector
* https://developer.mozilla.org/en/Introduction_to_DOM_Inspector
The DOM Inspector (DOMi) has a menu item (Search > Select Element By Click) and a button to "Find a node to inspect by clicking on it" (left icon on the toolbar).
* open the browser window in the DOMi (File > Inspect <b>Chrome</b> Document) and choose the first from the list.
* click the "Find a node to inspect by clicking on it" button and use the keyboard (Alt Tab) or the Task bar to go back to the browser window (do not click in the browser window other than the title bar).
* click that element with the mouse and keep the button pressed until you see a red border to indicate the the DOMi has located that element in the DOM tree.
You need to use the keyboard to get access to the location bar of the Firefox window (Ctrl+L) and type something or press the Down key to open the drop down list.<br />
Once the list is open then you can click an entry and you should see the red focus ring.
Then you can check in the right pane in the DOM Inspector which font is used:
* click the icon with the drop marker in the header and choose "Used Font Faces"

Just published site - navigation bar doesn't work

Hi Everyone -
I'm brand new here and apologize if I'm about to ask something that's been asked and answered a hundred times. I looked through the questions and found instances where navigation bars are missing once the site has been published, but my issue is different (though the solution may be the same - I don't know).
I just published my iWeb site (www.thewordwise.com) and found a couple issues (my site doesn't fill the screen, but I'll wank about that later). My navigation bar appears properly at the top, but does not work at all. Only the Welcome page is accessible.
In looking through the various missing navigation bar questions posed here, I would hazard a guess that not all of my pages have been properly uploaded to the hosting site I'm using (godaddy) and that the solution may be to use a third party FTP folder? This is unfortunately Greek to me.
Any assistance would be enormously appreciated. Thank you.

I think you'll find that your navigation menu is not working as your image is overlapping with it - The Word Wise image. An image only has to be overlapping a little and it will then not work. Move the image down so that it is clear of the nav menu and it should then work.
As for your site name - the second is your site name in iWeb - you named your site that and you can change it so that it is not as long - do this in iWeb and then republish your site.

Fuctional Navigation Bar (Newbie Web Designer)

I bought a navigation bar that is all one picture. Does anyone know how I would be able to get it to function? I've seen youtube videos about inputting a navigation bar but there's seem to be in pieces instead of one picture.
I know I need to use an unordered list but I'm lost after that. It is simpler to make a navigation bar myself in dreamweaver but I liked this one so I bought it. The file is psd but I need to convert this navigation bar to html and css in dreamweaver so it is functional and you can click on each menu which it takes you to a different page. Can anyone point me in the right direction of how to do this? Does this picture have to be sliced and if so does anyone know how I would go about doing that. Is it possible to slice a big picture into parts.

what version of photoshop do you have? what OS are you using? Is the psd file a flattened file or are the buttons on their own respective layers?
If it is a single layer, then slicing maybe the way to go. When you add the images via html, you need to create a class or id to make that button unique for your CSS to control it.

Is their any tutorials on how to make a navigation bar with drop downs in Dreamweaver CC now ?

Is their any tutorials on how to make a navigation bar with drop downs in Dreamweaver CC now that they do not have the spry option?

bbull2005 wrote:
Preran, why wouldn't Dreamweaver include it's own menu/navigation bar widget?
I can't answer on Preran's or Adobe's behalf, but I think you'll find at least part of the answer here: http://wiki.jqueryui.com/w/page/38666403/Menubar
Adobe decided to discontinue development of Spry in August last year, and Dreamweaver CC made the switch to using jQuery UI widgets and effects. One reason for dropping Spry was that it failed to work correctly in some browsers. Judging from the fact that the jQuery UI menubar is now "on ice", creating a flyout menu that works reliably across all devices is proving more difficult than originally envisaged.
Because all other widgets in Dreamweaver CC use jQuery UI, it's a reasonable assumption that Adobe hoped the jQuery UI menubar would be ready in time, but it wasn't.

Problems inserting a Fireworks navigation bar in Dreamweaver

I designed a navigation bar in Fireworks. When I preview it
works fine and I exported it as a "HTML and Images" file type. I
used Dreamweaver to insert it through Insert, Image Objects,
Fireworks HTML, I browse the html file, but when I click OK it
displays the message: "The selected file is not the correct format.
Please select an HTML file which was exported from Fireworks". What
am I doing wrong. Is it the file format when I export it? Please
help me, I am a rookie with this, have no manuals, no training at
all, just you.

I have the same problem: I designed a navigation bar in
Fireworks. When I preview it works fine and I exported it as a
"HTML and Images" file type. I used Dreamweaver to insert it
through Insert, Image Objects, Fireworks HTML, I browse the html
file, but when I click OK it displays the message: "The selected
file is not the correct format. Please select an HTML file which
was exported from Fireworks". What am I doing wrong. Is it the file
format when I export it? Please help me, I am a rookie with this,
have no manuals, no training at all, just you.
I followed your directions and still received the same error.
What can I do?

Dreamweaver help! creating navigation bar?

how do i create a navigation bar. my dreamweaver help says a
nav bar has a up. down and over image but doesn't actually tell me
where to get this image or how to create it??
if this is going to be too complex i don't mind just having
my nav bars as text link but can't seem to spread my 7 links out
horizontally as i can only have two space bar in between each text?

You and me both my friend! I just got off the phone with
"tech support" trying to pay for a single incident ($35) so they
could walk me through putting a navigation bar on my website. It's
so frustrting dealing with some of these techs. I don't want to be
politically incorrect here, but I always wind up with someone I can
hardly understand ( accent ). This stuff is hard enough to follow
with a language barrier. Then I called in to tech support, they
told me I had to pay that I was out of complitmentary assistance,
so they transferred me to sales, who after speaking to two more
people I had trouble understanding, I was transferred back to tech.
support who asked me if I had paid for a plan! Then she says she
can take the credit card etc., when I got through with that she
tells me that she can't walk me through putting the nav. bar
directly on my web site, that I'll have to open a new page and to a
sample one. ( which means when I finish I'll have to remember all
the steps and try to duplicate it on my own site. ( you know how
that goes! ) It's infuriating. I wound up spending an hour and got
nothing, they couldn't even just charge my card so I'd have credit
toward one call later. ( I had to go after dealing with this for 45
minutes)
Anyway, You have to go to Firefox or maybe photoshop to
create the background image. I did some in Firefox, but for the
page background, not the nav. bar. You would open a new page, put
in the size ( pixels ) you need, then use the rectangle tool to
outline that which selects it. Then you can go to the bottom of the
screen and select the color and gradient tool to create some cool
color effects. The thing I don't know is how to know exactly what
size your navigation bar is going to be ahead of time so to size it
right. I understand it has to be exact. This tech told me that they
can't help with any "design issues", like color, where it goes in
your website, etc. If they talk you through how to do it on a blank
page and then you have trouble on your real website, well that's
another issue and another $35. But I don't even understand if they
will help you on the real website. NIGHTMARE!!!!

Dreamweaver Navigation Bar

First off should I use the Insert>Image Objects>Navigation Bar option? If so, is there a way to get text on top of the images that I use so that I dont have to use 20 different images?

I'm not a huge fan of the DW image based navigation menus. I think it's fair to say that the code is bloated and awkward to work with when you need to make menu changes later.
I feel there are much better solutions out there using pure CSS, or a combination of CSS and JavaScript.
If your requirements are simple, this free DW extension will build vertical or horizontal CSS menus for you.
http://www.dmxzone.com/go?5618
Project seven menus are all top notch and rigorously pre-tested to work in various browsers and user settings.
http://www.projectseven.com/products/index.htm
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb

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

A few questions about my navigation bar, centering, getting rid of margins and changing colours via

I am having a few problems with my navigation bar, could be quite simple fixes but I haven't managed to find an answer yet that works. I am wanting to get rid of the white margins at the top of my page and just below the nav bar and centre the text on the page. I want to get rid of the gradient and turn the background white, black text and a light grey hover background. I have a link here
http://vps3147.inmotionhosting.com/~hannahro/home.html
I tried adding aligning the text in nav and I tried changing float left to center. but this only listed my nav bar contents under each other centered. I tried to change the background colour in nav ul from #efefef to #ffffff. However this made no difference either
Here is the navigation css
@charset "UTF-8";
/* CSS Document */
nav {
          margin: 0 auto;
          width: 100%;
          text-align: center;
nav ul ul {
          display: none;
          nav ul li:hover > ul {
                    display: block;
nav ul {
          width: 100%;
          max-width: 1064px;
          background: #efefef;
          background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
          background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
          background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
          box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
          padding: 0px 60px 0px 60px;
          /*border-radius: 10px;*/
          list-style: none;
          position: relative;
          display: inline-table;
          nav ul:after {
                    content: ""; clear: both; display: block;
          nav ul li {
                    float: left;
                    nav ul li:hover {
                              background: #4b545f;
                              background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
                              background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
                              background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
                              nav ul li:hover a {
                                        color: #fff;
                    nav ul li a {
          display: block;
          padding: 20px 20px;
          color: #757575;
          text-decoration: none;
          nav ul ul {
                    width: auto;
                    background: #5f6975; border-radius: 0px; padding: 0;
                    position: absolute; top: 100%;
                    nav ul ul li {
                              float: none;
                              border-top: 1px solid #6b727c;
                              border-bottom: 1px solid #575f6a; position: relative;
                              nav ul ul li a {
                                        padding: 15px 40px;
                                        color: #fff;
                                        nav ul ul li a:hover {
                                                  background: #4b545f;
          nav ul ul ul {
                    position: absolute; left: 100%; top:0;

I'm wanting to change the background colour of the nav bar to white, without a gradient,
Change this:
nav ul {
    width: 100%;
    max-width: 1064px;
    background: #efefef;
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0px 60px 0px 60px;
    /*border-radius: 10px;*/
    list-style: none;
    position: relative;
    display: inline-table;
To this:
width: 100%;
    max-width: 1064px;
    background: #FFF;
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0px 60px 0px 60px;
    /*border-radius: 10px;*/
    list-style: none;
    position: relative;
    display: inline-table;
And add this:
nav li a {
     width:5em; /**ADJUST TOP MENU WIDTH TO FIT**/
     text-align:left;
Nancy O.

CSS or JS Navigation Bar with inline Styled Search Field

Does anyone know of a good tutorial on how to create a CSS or
JS navigation bar that would contain a matching styled search field
box?
I have tried creating something like this a couple of times
using the old JS Navigation Bar wizard in DW, but can't get the
results I need. I can never seem to add a column that would include
a search box and have it look right and inline with the rest of the
navigation.
For reference, I am trying to do a nav that is somewhat
similiar to Apple's Nav bar, where the search field is styled to
match the rest of the Nav and inline with the rest of the buttons.
Any thoughts?
Thanks.

You don't need to use PMM. You can set your menu container to
position:
relative and then absolutely position the search box inside.
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"
"destind4film" <[email protected]> wrote in
message
news:fkukir$8l4$[email protected]..
> Hi Al,
>
> Thanks for the quick reply. I had actually checked your
site earlier
> today,
> since I have had such an awesome experience with your
accordion menus.
>
> That example is almost exactly what I am trying to do,
minus the dropdown
> menu
> buttons. The buttons currently are just simple rollovers
that go directly
> to
> other pages, but I am trying to place a styled search
box to the right
> like
> your example has.
>
> Here is the current page (also using the PVII Accordion
Menu) that does
> not
> have the search added yet, but you can see that I have
plenty of real
> estate to
> include one:
>
>
http://www.dvdflashbacks.com/mrhubcap/
>
> Questions:
> Can the pop menu be used with my current roll over
images for basic Nav
> bars
> like this?
> How easy is it to add the search field to this menu?
(This is a PHP/MySql
> backend for the site using Cartweaver3. I have a php
search snippet from
> CW3
> that I was trying to stick into a table cell next to
this nav but the cell
> would never align properly for some reason.)
>
> Thank you very much and Merry 'Belated' Christmas!
>

Navigation bar icons are quadruplicated, how can i reset to only one.

To the right of the search bar, there are three sets of navigation bar icons. when I go to view and uncheck navigation bar, all 4 are removed. I uninstalled FF and reinstalled it and it remains the same.

Hi,
Don't have "Live View". I am using Dreamweaver 8
My question is about the 2nd Row in Dreamweaver 8.
The first row has Titles: File, Edit, ect.
The second row has icons: I can not click on them to activate them.

Spry Navigation Bar going wrong way in IE

I have horizontal navigation bar through spry in Dreamweaver. In all other web browsers, my first level of drop down menus go directly down from the main menu items. In IE they go directly right! Does anyone know what I can do to fix this problem and quickly. My final presentation is Tuesday. I am new to all this and I don't have the foggiest how to fix it! Thanks in advance for any and all assistance with this matter!!!!!!

It would be a lot easier to answer your question if you had a link to your site or at the very laest showed your markup.
I assume that you have made the menu item widths as being auto rather than a fixed width in which case IE will use the full width available to show the submenu items.
To counteract this you need the following style rules
ul.MenuBarHorizontal ul li {
    display: block;
    float: none !important;
    width: auto;
    white-space: nowrap;
    border-bottom: solid 1px #EEE;
The !important overrides the style rule that is given the element by the JS.
Gramps

Spry Navigation Bars - Make them look GOOD

Have Dreamweaver CS4 PC
Using the plain gray spry navigation bars...im somewhat
new...
Question:
Is there any company that sells or Free to "Change the Look"
of the nav bars easily?
I might w ant to change colors, make rounded edges, make type
smaller, compact specing some, adjust the length.
Does someone have a plugin or extension that works
interactively??
Thanks
Ive searched with little results on customizing spry

A more full-featured menu building tool, with lots of styles:
http://www.projectseven.com/products/menusystems/pmm2/carbon.htm
Another nice menu builder, with lots of styles. Because there
are no timers,
I would recommend these for single-level menus or for menus
with a single
sub-menu level:
http://www.webassist.com/professional/products/productdetails.asp?PID=146
Neither is free.
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/pop
The Ultimate DW Menu System
"suzzie12" <[email protected]> wrote in
message
news:gmq9u2$mfl$[email protected]..
> Have Dreamweaver CS4 PC
>
> Using the plain gray spry navigation bars...im somewhat
new...
>
> Question:
>
> Is there any company that sells or Free to "Change the
Look" of the nav
> bars
> easily?
>
> I might w ant to change colors, make rounded edges, make
type smaller,
> compact
> specing some, adjust the length.
>
> Does someone have a plugin or extension that works
interactively??
>
> Thanks
>
> Ive searched with little results on customizing spry
>

Navigation Bar Question in Dreamweaver

Similar Messages

Maybe you are looking for