FWs Nav Bar - Make Hyperlinks

Hi
I am currently making a website and I have created a nav bar
in fireworks using slices and pop-up menus etc. Anyway I have
imported it to my website in Dreamweaver, but I cant figure out how
to make a hyperlink from the from down and nav bar buttons to the
corresponding page. Do I make the links in Fireworks? If so, how?
In Dreamweaver also how?
Any help much appreciated, thanks.

It would be easiest to add the hyperlinks in Fireworks, which
you can do in the pop-up menu editor (same place you entered the
text for the buttons).
If you wanted to add the links in Dreamweaver you'd have to
do it in source-code view. Search for the text that you entered for
the button name, and Fireworks should have entered a pound/hash
symbol (#) for your link (don't quote me on that though). Replace
that with your page link and you should be good to go.
Someone should be along shortly to tell you that the
Fireworks menus suck though, so stand by for that.

Similar Messages

How to make a button stay down when I click on it in CSS nav bar.

So I have created a horizontal navigation bar, I use the CSS
Sprites/Pixy method to get the hover working with the same image as
the link/in active stage of the buttons.
Now how do I make the button stay down when someone click on
them?
These are the codes for the nav bar.
#nav{
width: 780px;
list-style: none;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0;
height: 40px;
#nav li{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
float: left;
padding: 0;
#nav a{
width: 125px;
display: block;
color: #000000;
text-decoration: none;
text-align: center;
background-image: url(ZITTO_IMAGES/button_set1a.jpg);
background-repeat: no-repeat;
background-position: center 2px;
padding-top: 14px;
padding-bottom: 10px;
background-color: #000000;
#link2,#link3,#link4,#link5,#link5,#link6 { margin-left:
6px;}
#nav a:hover{
background-image: url(ZITTO_IMAGES/button_set1a.jpg);
background-repeat: no-repeat;
background-position: center -36px;
color: #FFFFFF;
width: 125px;
padding-top: 14px;
padding-bottom: 10px;
background-color: #000000;
Everything works so far, the hover works when you roll the
mouse but when you click the button goes right back.
How can I make it stay down and then go back to normal when
you click on another link/button?
Thanks very much.
Patrick

Read my suggestion again. You are missing a critical point. I
show you
exactly where to put the stylesheet. And it doesn't matter
how many
stylesheets you have on a page.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Webethics" <[email protected]> wrote in
message
news:[email protected]...
>
quote:
Originally posted by:
Newsgroup User
> Change this -
>
> #nav a{
> width: 125px;
> display: block;
> color: #000000;
> text-decoration: none;
> text-align: center;
> background-image: url(ZITTO_IMAGES/button_set1a.jpg);
> background-repeat: no-repeat;
> background-position: center 2px;
> padding-top: 14px;
> padding-bottom: 10px;
> background-color: #000000;
> }
>
> #link2,#link3,#link4,#link5,#link5,#link6 { margin-left:
6px;}
>
>
> #nav a:hover{
> background-image: url(ZITTO_IMAGES/button_set1a.jpg);
> background-repeat: no-repeat;
> background-position: center -36px;
> color: #FFFFFF;
> width: 125px;
> padding-top: 14px;
> padding-bottom: 10px;
> background-color: #000000;
> }
>
> to this -
>
> #nav a{
> width: 125px;
> display: block;
> color: #000000;
> text-decoration: none;
> text-align: center;
> background-image: url(ZITTO_IMAGES/button_set1a.jpg);
> background-repeat: no-repeat;
> background-position: center 2px;
> padding-top: 14px;
> padding-bottom: 10px;
> background-color: #000000;
> }
>
> #link2,#link3,#link4,#link5,#link5,#link6 { margin-left:
6px;}
>
>
> #nav a:hover{
> background-position: center -36px;
> color: #FFFFFF;
> }
>
> Then on each individual page, change this -
>
> </head>
>
> to this -
>
> <style type="text/css">
> #nav a#link4 {
> background-position:center - 36px;
> }
> </style>
> </head>
>
> (for link4, for example)
>
>
> --
> Murray --- ICQ 71997575
> Adobe Community Expert
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
> ==================
>
>
> "Webethics" <[email protected]> wrote
in message
> news:[email protected]...
> >
quote:
Originally posted by:
Newsgroup User
> > When they click on a button, do they go to another
page? And is each
> > button
> > uniquely identified?
> >
> > If so, then put a little stylesheet on each such
page that sets the
> > particular button to the down sprite settings,
e.g.,
> >
> > a#link6 { downspritevalues }
> >
> > --
> > Murray --- ICQ 71997575
> > Adobe Community Expert
> >
> >
> > This is the link to the page.
> >
http://www.patrickjudson.com/zitto_web1d.html
> > What state do I use to get this effect? The active
or the visited?
> >
> > I want the buttons to remain down when click or
even better, how do I
> > get
> > the
> > welcome button to appear down when a person visits
the page to show them
> > they
> > are at the home page.
> >
> > Thanks so much. Patrick
> >
> >
> >
>
>
>
> Hey! Murray, thanks very much for the efforts. However
I'm still confused
> as
> to where to insert the individual styles on each page.
>
> The pages already have a style sheet, in fact they all
share the same
> style
> sheet. The following codes below is what you instructed
but I'm confused
> as to
> where to insert them since the page already has a head
opening and closing
> as
> well as a style opening and closing tags. Can you please
add the codes you
> instructed so I can see where they go and how to
implement them?
>
> Thanks - Patrick
>
>
> Then on each individual page, change this -
>
> </head>
>
> to this -
>
> <style type="text/css">
> #nav a#link4 {
> background-position:center - 36px;
> }
> </style>
> </head>
>
> (for link4, for example)
>
>
>
>

How can i increase the height of the navigation toolbar to make my persona more visible? adding toolbars puts them all below the navi bar and it looks weird. i know this has been asked many times but the answer's always "add toolbars".

How can i increase the height of the navigation toolbar to make my persona more visible?
adding toolbars puts them all below the navi bar and it looks weird.
i know this has been asked many times but the answer's always "add toolbars".

Look here.
http://support.apple.com/kb/index?page=answerlink&url=http%3A%2F%2Fsupport.apple .com%2Fkb%2FHT1495&answerid=16777216&src=support_site.home.search

Smart way to auto update pop-up menu in nav bar?

Smart way to keep updating pop-up menu in Nav bar ?
I created a template in DW 8. It is used to generate many
other pages for the site. only the page content region is editable.
There is a nav bar in the template. Some buttons of the nav bar
display pop-up menu when MouseOver . Those pop-up menu need to be
changed from time to time. What is the best way to automatically
update the pop-up menu in those templated-generated files, using
template (I tried to define the nav bar as editable region,
modified the pop-ups and saved the template. I got a lots of
unexpected problems, DW8 even crashed), using libray items or
something else? I am a relatively new DW developer. Much appreciate
if someone could help.

If the navigation is in a non-editable region of the
template, then changes
to it will propagate automatically to all child pages - are
you not seeing
that happen?
> I tried to define the nav bar as editable region
You wouldn't usually want to do that.
> I got a lots of unexpected problems, DW8 even
> crashed
You must have made other errors. Doing something like this
would surely not
crash DW.
The only problem with having the navigation in the
non-editable region of
the template is that a change to it will touch *every* file
in the site,
each of which must then be uploaded again. To solve this
problem you can
use server-side includes for the navigation. Then you would
make your
change to the include file, upload it, and all pages would
reflect that
change.
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
==================
"lakeleman" <[email protected]> wrote in
message
news:[email protected]...
>
Smart way to keep updating pop-up menu in Nav bar ?
> I created a template in DW 8. It is used to generate
many other pages
> for
> the site. only the page content region is editable.
There is a nav bar in
> the
> template. Some buttons of the nav bar display pop-up
menu when MouseOver .
> Those pop-up menu need to be changed from time to time.
What is the best
> way to
> automatically update the pop-up menu in those
templated-generated files,
> using
> template (I tried to define the nav bar as editable
region, modified the
> pop-ups and saved the template. I got a lots of
unexpected problems, DW8
> even
> crashed), using libray items or something else? I am a
relatively new DW
> developer. Much appreciate if someone could help.
>

How to present content without showing the item in left nav bar?

Here's the scenario -
I have a single role. A user logs in and gets their content accordingly. The default content in the main display area is whatever the first item in the role is (e.g. IView A). Under that are various folders, iviews, etc.
How can I make the content from IView A appear, but not actually show the title of IView A in the left hand nav bar?

Here is what you can do (left navigation is called detailed navigation)
       1.      From the Page Content List of the Default Framework Page, select Desktop Innerpage and click Open.
       2.      From the Page Content List of the Desktop Innerpage select the Detailed Navigation iView and click Properties.
       3.      Scroll to the Start at Level property and assign a value that is one higher than the value of the Number of Display Levels property in procedure l. Configure Top-Level Navigation. For example, if top-level navigation is configured for one level, the detailed navigation begins on the second level, that is with the value 2.
       4.      Click Save.
Detailed navigation is not automatically synchronized with top-level navigation; the values you enter for top-level and detailed navigation must agree. For example, if you enter the value 1 for top-level navigation, while detailed navigation still has the value 3, one level is left out, creating a gap.
For more details check this
http://help.sap.com/saphelp_nw04/helpdata/en/2d/91e33edd37de63e10000000a11405a/frameset.htm
Regards,
Piyush
ps: please award points for useful answers.

How can I combine the nav bar and menu bar on the same line to save space?

Firefox v29 seems to be a huge step backward in customization. I need to save space for content so previously I turned off tabs and combined the menu bar and nav bar on the same line. The url space is way too long anyway. Now with v29 all my customization is gone and I cannot get it back. I can no longer move items on the nav bar to combine it with the menu bar. Why was this done? It only limits my ability to customize my browser? I am very frustrated that you took a great browser and ruined it.

I get it that Firefox has changed, but the change is for the worse. It makes it impossible to customize menus as I had before v.29.

Spry Navigation 2.0 - Spacing for div for nav bar

Hello:
I am once again working on an navigation bar that renders somewhat differently in various browsers (problems with IE 8 & 6). The navigation is to fit into a div that is bordered by a gold coloured border top and bottom (top border is attached to the header). The problem is one of calculating the appropriate height based on the settings for the custom nav css file. I have taken the font size, padding (top and bottom) and border (top and bottom) together with padding on the overall container of the nav bar. Accordingly I have set the height of the navigation container div at 41px. In most browsers this works fine, however there are some glitches that cause excess white space to appear either above the navigation bar or below it, thus separating the border from the navigation bar.
The url for the site is http://socls.org/PCLC-testing/CorePages.html
I have included the css for the custom nav settings, and the css relating to the navigation in the general css file as well as a screen shot of IE 8.
Thanks for any help in advance.
Steve.
The custom nav css is as follows:
@charset "UTF-8";
/* CSS Document */
/* BeginOAWidget_Instance_2141544: #MenuBar */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
    these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
     These assume the following widget classes for menu layout (set in a preset)
    .MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
    .MenuBarVertical - vertical main bar; all submenus are pull-right.
    You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
    They only apply to horizontal menu bars:
        MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
        MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
        MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
        MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
                        and centered in its parent container.
        MenuBarFullwidth - Grows to fill its parent container width.
    In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
    with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
    there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
    background-color:#7888c7;
    font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
                                                MenuItem, and MenuItemLabel
                                                at a given level all use same definition for ems.
                                                Note that this means the size is also inherited to child submenus,
                                                so use caution in using relative sizes other than
                                                100% on submenu fonts. */
    font-weight: normal;
    font-size: 17px;
    font-style: normal;
    padding:0;
    border-color: #4457a2 #333366 #2c3868 #4457a2;
    border-width:3px;
    border-style: none none none none;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
    display:none;
.MenuBarLeftShrink {
    float: left; /* shrink to content, as well as float the MenuBar */
    width: auto;
.MenuBarRightShrink {
    float: right; /* shrink to content, as well as float the MenuBar */
    width: auto;
.MenuBarFixedLeft {
    float: left;
    width: 80em;
.MenuBarFixedCentered {
    float: none;
    width: 80em;
    margin-left:auto;
    margin-right:auto;
.MenuBarFixedCentered br {
    clear:both;
    display:block;
.MenuBarFixedCentered .SubMenu br {
    display:none;
.MenuBarFullwidth {
    float: left;
    width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
    padding: 0px 0px 0px 0px;
    margin: 0;     /* Zero out margin on the item containers. The MenuItem is the active hover area.
                For most items, we have to do top or bottom padding or borders only on the MenuItem
                or a child so we keep the entire submenu tiled with items.
                Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
    padding: 0px 24px 0px 0px;
    background-color:#7888c7;
    border-width:3px;
    border-color: #8899cf #566a99 #333366 #8899cf;
    border-style: solid solid solid solid;
#MenuBar .MenuItemFirst {
    border-style: solid solid solid solid;
#MenuBar .MenuItemLast {
    border-style: solid solid solid solid;
#MenuBar .MenuItem .MenuItemLabel{
    text-align:center;
    line-height:1.4em;
    color:#331e0d;
    background-color:#7888c7;
    padding: 6px 15px 6px 39px;
    width: 10em;
    width:auto;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
    width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 14px;
    font-style: normal;
    background-color:#7888c7;
    padding:0px 2px 0px 0px;
    border-width:3px;
    border-color: #8899cf #333366 #333366 #8899cf;
    /* Border styles are overriden by first and last items */
    border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemFirst {
    border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
    padding-top: 6px;
#MenuBar .SubMenu .MenuItemLast {
    border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
    padding-bottom: 6px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
    text-align:center;
    line-height:1em;
    background-color:#7888c7;
    color:#331e0d;
    padding: 6px 12px 6px 5px;
    white-space:normal;
    width: 210px;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
    background-color: #3b4b8d;
    border-color: #5266b7 #14192f #14192f #5266b7;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
    background-color: #3b4b8d; /* consider exposing this prop separately*/
    color: #fefefe;
#MenuBar .MenuItemHover .MenuItemLabel{
    background-color: #3b4b8d;
    color: #fefefe;
#MenuBar .SubMenu .MenuItemHover {
    background-color: #3b4b8d;
    border-color: #5266b7 #14192f #14192f #5266b7;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
    background-color: #3b4b8d;
    color: #fefefe;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
    background-color: #7888c7;
    min-width:0%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
    border-color: #3b4b8d #3b4b8d #3b4b8d #3b4b8d;
    border-width:0px;
    border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
    top: 100%;    /* 100% is at the bottom of parent menuItemContainer */
    left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                    and your personal taste.
                    0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
                    on MenuItemContainer and MenuItem on the parent
                    menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                    the dropdown with the left of the menu item label.*/
    z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
    top: 0px;
    left:100%;
    min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
    background-color: #7888c7;
    min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
    top: 0px;    /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
                that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
                vertically 'centered' on its invoking item */
    left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
                negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
                to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
    background-color: #3b4b8d; /* consider exposing this prop separately*/
    color: #fefefe;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
    background-color: #3b4b8d; /* consider exposing this prop separately*/
    color: #fefefe;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
    margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
The css for the page in general (as it relates to the navigation bar) is:
#main_nav_contents {
    width: 960px;
    height: 41px;
    position: relative;
    padding-left:0px;
    border-bottom: 3px solid #C56F2C;

Hello Again:
Based on some recalculations I realized that with a font size of 17px, 6px padding (top and bottom = 12px) and 3 px border (top and bottom =6) that the height of the nav container should be 35px; I have change the general style sheet to reflect that change, but still have rendering problems accross browsers.
To perhaps add clarity, the following is a screen shot of how it appears in most browsers, and how I intended it should look.
Thanks (again) in advance for any help that can be offered. Steve.

Nav bar question

I have built the first handful of pages for a site using DW CS4. I have a couple of glitches that I can't seem to get sorted out.
Here is the site:
http://www.prospectrealty1.fatcow.com/index.html
First question is regarding the main (in the header) navigation bar. I created it by floating css background images and using a:link and a:hover and a:active. It works fine (in firefox) except for one thing. I want the links to be the active(orange) color when the user is on the associated page. So the link for FEATURED is white when up, has the shadow effect on hover and would be the Orange color on down. I can't figure out how to get the down state to work.
Second problem is with the horizontal ul at the very top. It looks fine in Firefox but in IE 8 the right most email link gets put on a second/lower line and that's not good plus it seems to be messing up the nave bar at the bottom of the header.
Any help with this will be very much appreciated.
Thanks!

markf12 wrote:
I have built the first handful of pages for a site using DW CS4. I have a couple of glitches that I can't seem to get sorted out.
Here is the site:
http://www.prospectrealty1.fatcow.com/index.html
First question is regarding the main (in the header) navigation bar. I created it by floating css background images and using a:link and a:hover and a:active. It works fine (in firefox) except for one thing. I want the links to be the active(orange) color when the user is on the associated page. So the link for FEATURED is white when up, has the shadow effect on hover and would be the Orange color on down. I can't figure out how to get the down state to work.
Second problem is with the horizontal ul at the very top. It looks fine in Firefox but in IE 8 the right most email link gets put on a second/lower line and that's not good plus it seems to be messing up the nave bar at the bottom of the header.
Any help with this will be very much appreciated.
Thanks!
Hello,
Your CSS is a little out of whack!
To create an active tab/link, make a copy of the portion of your CSS that fires the rollover(hover).
Change the color to orange and name the CSS(selector) like this:
.activeLink and place it in the link of the current page like this, than add the style to this selector that you want the link to have.
Based on your CSS, if it does not work, you should use the CSS !important declaration.
<li id="top-home" class=".activeLink"><a href="/index.html"></a></li>, meaning one per page.
Remember add this style only to the the current page.
There are two reasons why the link above could drop. 1). Not enough space for the amount of text you have, eg: too much margin or padding. 2). If the text are floated, you must clear them or at least clear the email so that it does not wrap around the previous text. Example: Clear none or clear right.
Chow!

Creating new page without linking to nav bar

I am creating a website that will have lots of pages. How can I create a page that doesn't link to my nav bar? IE.. I have home, about myself, resources etc.. each time I make a new page and name it, it automatically lists the webpage name in my nav bar. I only want say 5 topics in my nav bar but will have well over 50 pages in my site.. How do I do this? Thanks.

Hi,
and welcome to the Discussion Forums.
How can I have pages which do not display in the navigation menu?
1. Open iWeb then select a page you don't want to display in the top navigation bar
2. Open the Inspector and go to the 'Page' tab
3. Uncheck the "Include page in navigation menu" box
4.Now this page will not appear in the navigation menu but the navigation menu will still appear on that page as the "Display navigation menu" is checked (unless you uncheck that one too)
Regards,
Cédric

How to get externally made nav bar css into dreamweaver

How do I insert 'purecssmenu' made nav bar into dreamweaver? I have a zip file with just the interactive nav bar in it. There used to be an insert nav bar but that seems to have vanished in cs6 presumably because Adobe want you to use Spry!!!
I am completely new to this game but it is not helpful to be constantly told that you should learn coding.
I just want to make 1 tiny personal site. Any constructive help would be very much appreciated.

Sorry you're having such a terrible time not only getting the navbar to work, but interpreting the help here. (That's what it is... help, only you really didn't give us a lot to go on)
You need to do one of two things if you'd like people to stop "guessing" what's wrong with your page.
1.Upload your page to your server and post the URL here so others can download the source code and analyze it.
or
2. Copy and paste your ENTIRE page of code here so it can be seen, downloaded and viewed in someone else's Dreamweaver on their computer. Something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>Generated by Pure CSS Menu.com : Free CSS Drop Down Menu Generator</title>
    <meta name="description" content="Online CSS Menu Maker. Create No-Javascript, 100% CSS Dropdown Menu in seconds! Horizontal css menu & Vertical css menu." />
</head>
<body bgcolor="#ffffff">

<style>
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#333333;
background-repeat:repeat;
border-color:#cccccc #111111 #111111 #cccccc;
border-width:1px;
border-style:solid;
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
float: left;
ul.pureCssMenu ul{
width:155.4px;
ul.pureCssMenu li{
display:block;
margin:2px 0px 0px 2px;
font-size:0px;
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#333333;
border-width:1px;
border-color:#333333;
border-style:solid;
text-align:left;
text-decoration:none;
padding:2px 5px 2px 10px;
_padding-left:0;
font:normal 12px Trebuchet MS,Tahoma;
color: #cccccc;
text-decoration:none;
cursor:default;
ul.pureCssMenu span{
overflow:hidden;
ul.pureCssMenu li {
float:left;
ul.pureCssMenu ul li {
float:none;
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
ul.pureCssMenu li.sep{
text-align:left;
padding:0px;
line-height:0;
height:100%;
ul.pureCssMenu li.sep span{
float:none;     padding-right:0;
width:3px;
height:100%;
display:inline-block;
background-color:#cccccc #111111 #111111 #cccccc;     background-image:none;}
ul.pureCssMenu ul li.sep span{
width:100%;
height:3px;
ul.pureCssMenu li:hover{
position:relative;
ul.pureCssMenu li:hover>a{
background-color:#377D9F;
border-color:#377D9F;
border-style:solid;
font:normal 12px Trebuchet MS, Tahoma;
color: #FFFFFF;
text-decoration:none;
ul.pureCssMenu li a:hover{
position:relative;
background-color:#377D9F;
border-color:#377D9F;
border-style:solid;
font:normal 12px Trebuchet MS, Tahoma;
color: #FFFFFF;
text-decoration:none;
ul.pureCssMenu li.dis a {
color: #666 !important;
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;
height:16px;
ul.pureCssMenu ul img {width:16px;
height:16px;
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover ul{display:block}
ul.pureCssMenu a:hover ul ul,ul.pureCssMenu a:hover a:hover ul ul{display:none}
ul.pureCssMenu span{
display:block;
background-image:url(./images/arr_white.gif);
background-position:right center;
background-repeat: no-repeat;
   padding-right:12px;}
ul.pureCssMenu li:hover>a>span{     background-image:url(./images/arrv_white.gif);
ul.pureCssMenu a:hover span{     _background-image:url(./images/arrv_white.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_white.gif)}
</style>


<ul class="pureCssMenu pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="index.html">Home Page</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Product Info</span><![if gt IE 6]></a><![endif]>
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#">What is New?</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Menu Features</span><![if gt IE 6]></a><![endif]>
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Free Online Generator</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">100% Pure CSS Menu</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">No Javascript Required</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Multi Level Submenus</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Search-Engine Friendly</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Advanced Styling</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Horizontal & Vertical</a></li>
</ul>
</li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>How To Use</span><![if gt IE 6]></a><![endif]>
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#">1. Select Template</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">2. Customize Items</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">3. Download Zip</a></li>
</ul>
</li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Supported Browsers</span><![if gt IE 6]></a><![endif]>
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Windows OS</span><![if gt IE 6]></a><![endif]>
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Internet Explorer</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Firefox</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Chrome</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Safari</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Mozilla</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Opera</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Netscape Navigator</a></li>
</ul>
</li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>MAC OS</span><![if gt IE 6]></a><![endif]>
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Firefox</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Safari</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Internet Explorer</a></li>
</ul>
</li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Unix/Linux OS</span><![if gt IE 6]></a><![endif]>
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Firefox</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Konqueror</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Templates</span><![if gt IE 6]></a><![endif]>
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 1</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 2</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 3</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 4</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 5</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Template 6</a></li>
</ul>
</li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">FAQ</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">Contact Us</a></li>
</ul>
<a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a>


<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
Based on your reply, and the troubles you had just getting the domain, I'll have to assume that you can't upload the page, so be a dear, and paste your code here so we can actually see it and troubleshoot it for you.
Let's see if we can get that egg boiled, eh?

Nav bars rollover stops working when there is a drop down menu

I am making a navigation bar bar that has about 5 links on it
all with rollovers. Their is one rollover that uses a drop down
menu. That rollover doesn't give me a rollover just a drop down. I
want to have both happen.
Also does anyone know how to keep the rollover in the down
state? I want to make it easy for the user to know where they are
in the site by just glancing at the nav bar.

pik80 wrote:
> I am making a navigation bar bar that has about 5 links
on it all with
> rollovers. Their is one rollover that uses a drop down
menu. That rollover
> doesn't give me a rollover just a drop down. I want to
have both happen.
Add a swap image behavior to the button you want to rollover.
> Also does anyone know how to keep the rollover in the
down state? I want to
> make it easy for the user to know where they are in the
site by just glancing
> at the nav bar.
Remove the normal state button image from the linked in page.
Linda Rathgeber [PVII] *Adobe Community Expert-Fireworks*
http://www.projectseven.com
Fireworks Newsgroup:
news://forums.projectseven.com/fireworks/
CSS Newsgroup: news://forums.projectseven.com/css/
http://www.adobe.com/communities/experts/

Scroll over highlight function not working on custom nav bar links

Hi - I've created a custom nav bar in iWeb (www.HollywoodRC.com). I have it set up so that the text highlights when scrolled over. This function works in iWeb but does not work on my published site in Safari; however, works in my published site on IE. Any ideas on how to get the scroll over highlight to work on my published safari site? All the links work properly.
Thanks,
Steve

No. Things must have changed. I created a hyperlink with a non web safe font, LedgerD, added a drop shadow and published. I also put the same link in a shape. You can see them in this test page: Page-1 . The two items are image files but they do not contain the link text. Very strange. The hyperlink text can't be selected nor dragged to the desktop like other links, like the Click to Play links on the page, however.
However, I don't know how IE will handle it. According to this IE emulator site, http://ipinfo.info/netrenderer/, IE can see the drop shadow. But it doesn't tell us how the links will work.

Suppression of nav bars (chrome) in web-content overlays

We've started to experiment with creating interactive content within folios, using web content overlays and HTML5/AJAX.
Problem is the nav bars/chrome (whatever you want to call them) in Adobe Viewer pop up constantly, and unpredictably - for instance, the chrome will appear the *first* time an HTML button is clicked, but not on subsequent occasions. For other <div> elements that have onclick handlers attached, the nav always seems to appear.
Does anyone have any insight into possible ways of suppressing the nav bars completely for web-content user interaction? Judging by the behaviour of HTML buttons, it seems there has been some effort put into this on Adobe's part, but some concrete insight would be brilliant.
Cheers,
David (Boto Media).

I have already come across these "solutions".
I am on v27 and have been since its release.
I have tried method number one. It partially works however it is buggy. When the overlay initially loads, it flashes the Twitter URL before showing the feed in the overlay frame on the article. Additionally, it sometimes flashes back and forth from the Twitter Feed's URL and displaying the feed itself. This, for me is not a wholly valid solution but it will do for now since the only thing that remotely works. I suspect the URL flash has alot to do with the network connectivity of the device one is viewing the feed on. However, to flash that URL before the feed loads makes the overlay appear buggy.
And the second method most definitely crashes ID ever single time I attempt to preview the overlay either on desktop or iPad. And I have tried this method on several different machines, thinking it was my copy of ID. It still crashes upon preview, so mehtod two is not a valid solution at all, unless there is something special that needs to be in the HTML file (besides the twitter widget) for it to not crash ID, that I am unaware of.
Thank you for your assistance.

Botton Nav Bar

i just need a simple text Navigation bar to float on the
bottom of my page to coincide with the top Nav bar. i've created a
Div ID for this, but i'm having trouble keeping it to default to
the bottom of the page below the other Div IDs.
here is the css:
#bottomBar {
font-size: 12px;
font-weight: bold;
text-decoration: none;
border-top-width: thin;
border-top-style: dotted;
border-top-color: #999999;
color: #333333;
padding: 0px;
position: relative;
text-align: center;
bottom: 0px;
here is the html:
<div id="bottomBar">paul consiglio :: 72pixels.com
</div>
thanks in advance.

That's not enough. If you want help from a NG like this
(manned by unpaid
volunteers) it is advisable to make things as easy as
possible. Follow these
simple steps:
1. Publish the page to the Internet
2. Post a link to that page
That way we can see the entire page in context and have
access to the
various support files LIKE THE CSS
Walt
"poby72" <[email protected]> wrote in
message
news:[email protected]...
> here we go:
>
> <!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=ISO-8859-1" />
> <title>paul consiglio | graphic design |
72pixels.com</title>
> <link href="p72.css" rel="stylesheet" type="text/css"
/>
> </head>
>
> <body>
>
> <div id="content">
>
> <div id="menuBar">
> <object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
> codebase="
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve
> rsion=7,0,19,0" width="800" height="130">
> <param name="movie" value="images/72Drag.swf" />
> <param name="quality" value="high" />
> <embed src="images/72Drag.swf" quality="high"
> pluginspage="
http://www.macromedia.com/go/getflashplayer"
> type="application/x-shockwave-flash" width="800"
height="130"></embed>
> </object>
> </div>
>
>
>
>
>
> <div id="rightCol">
> <p class="subHead">poof bubbles</p>
> <p><img
src="images/portfolio/illustration/poof.jpg" alt="poof"
> width="399" height="298" class="imagebox" />
</p>
> </div>
>
>
>
> <div id="leftCol">
> <p><span class="header">Illustrator
Portfolio</span></p>
> <p><a href="fishDrawings.htm"
target="_self"><<</a> <a
> href="redDevil.htm">>></a><br />
> <br />
> I didn't get my hands dirty with this illustration since
it's done
> totally in Illlustrator, digitally. It's so clean.<br
/>
> <br />
> illustrator cs <br />
> <br />
> </div>
>
>
> <div id="bottomBar">paul consiglio :: </div>
>
> </div>
>
> </body>
> </html>
>
>

Using the nav bar to link to another page.

It is possible to use the nave bar to link to another page such as a blog?
Example:
Welcome About Me My Photos Blog (linked to external blog such as blogger)

If you want the link to the external page to appear in the default navbar then do the following:
1 - create a blank page and name it the way you want it in the navbar.
2 - add an HTML Snippet to that page with the following code in it:
<script type="text/javascript">
parent.window.location = "URL TO THE EXTERNAL PAGE"; </script>
What this does is automatically redirect the viewer to the external page when the link in the navbar is clicked on.
My Demo Sites are setup this way. The Contents page for each site is redirected to a separate Contents site which contains the index of all the pages in the three demo sites. That way I only have to change the index on the Contents site instead of doing it for each site individually.
If you want the other page to open in a new window you'll have to create a separate text based hyperlink and use the Inspector/Link pane to link the text to it and check the open in new window option. If you need to have that in the navbar you can create a texbased navbar, hide the default one and set your links as needed in the Inspector/Link pane. This is a demo page of a Text Based Navbar.
OT
Message was edited by: Old Toad

FWs Nav Bar - Make Hyperlinks

Similar Messages

Maybe you are looking for