Graphical navigation bar using css

I am trying to create a navigation bar for a page I am
designing. Unfortunately, I am new to HTML and CSS and the little
code I do know is not working for me in this regard. I found a
tutorial that basically fakes an unordered list and turns it into
graphical blocks The end result, however, is (1) not centered, and
(2) messes with the layout. I want to contain the navigation bar
within the nav_bar div. In a way it is, but with the navigation bar
present, the div the encloses it moves down the page. Any
suggestions?

Inside code view, place the curser where you want the menu.
Select the spry tab, and choose the fourth button from the
right. It should be right under the Data button. Then select the
horizontal menu from the pop up menu.
Next hover over the new menu and click the blue spry menu tab
that shows up. The properties menu will allow you to edit what is
in the menu. If you do not need the drop down children, select them
and click the "-" above it.
With the menu item selected in the properties menu, on the
right side you can name each one and also give it a link, title,
and target.
Then play with the css file that dreamweaver generated for
you and you are in business. One safty thing, make a copy of the
css file as a back up. So if anything does happen, you do not have
to start all over. Also if you print out the css code, you can get
an idea of what everything is doing by reading the comments.

Similar Messages

Customizing Font Size of Date Navigator Header Using CSS

Hi All,
Can anyone offer any advice on how I'd change the font-size of the Date Navigator Header (i.e. May 2010, June 2010, etc)?
I've tried the good ol' CSS hack underneath the "Font Color of Date Navigator Header" and despite it working during preview, it doesn't come through when I save it.
This is what I've entered:
#000;padding:7px;font-weight:bold;font-size:medium
What am I doing wrong?
Is it because there are too many arguments?
Where else could I modify this?
Thanks,
Bim.

Hello Bim,
I am not sure about your requirement using CSS. But, one way of changing the "Font Color of Date Navigator Header" is through editing the properties of your current theme in "Portal theme editor". For portal theme editor, logon to portal and navigate to System Administration>Portal Display>Theme Editor--> Click on the theme that is currently active.
Now, navigate to "Date Navigator" under Complex Elements and change the required properties. I hope this helps you. Let me know if you need any other information.
Regards,
Gopal.

I made a text nav bar using CSS, and I am trying to get downdown menu's from it?

Hello,
I am working through a tutorial book and just created a text navbar with CSS, which I have never done before. Basically it was an Unordered list and then I used the float property right to make them go next to each other. Then created a few more styles to give them padding etc.
I thought I could go after each list item and now add a group of unordered lists items to pop up when I mouse over., but whatever I try in a new CSS style doesn't work to put them underneath.
Here is the code and the style sheet code thus far, and I have colored in blue, the items I wanted to have dropdown menu's come from. Can anyone help me or guide me to where I might find this info? I want to get to the next level, but this is as far as the book goes.
thanks!
babs
@charset "UTF-8";
body {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: small;
    color: #333;
    background-color: #739112;
    text-align: center;
    #container {
    background-color: #FFF;
    width: 840px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    text-align: left;
    background-image: url(images/container_bg.gif);
    background-repeat: repeat-y;
#header {
    height:80px;
    z-index:1;
    background-color: #9fcc41;
    background-image: url(images/veggies.jpg);
    background-repeat: no-repeat;
    background-position: right;
#header img {
    margin-top: 20px;
    margin-left: 15px;
dl {
    color: #000;
    font-size: medium;
    margin-left: 15px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: bold;
dd {
    font-size: small;
    margin-bottom: 10px;
    font-weight: normal;
    margin-right: 10px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    margin-left: 5px;
    #navigation {
    background-color: #88b036;
    height: 36px;
    width: 100%;
    #footer {
    background-color: #ccc;
    clear: both;
    height: 1%;
    #main {
    float: left;
    width: 520px;
    padding-left: 20px;
#navigation ul ul {
    float: none;
#container #navigation ul ul {
    float: none;
    clear: none;
    #sidebar {
    float: right;
    width: 270px;
    background-color: #c8d9bc;
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: #060;
    #navigation ul li {
    float: left;
    list-style-type: none;
    #navigation ul li a {
    text-decoration: none;
    color: #FFF;
    padding-top: 8px;
    padding-right: 15px;
    padding-bottom: 8px;
    padding-left: 15px;
    display: block;
    #navigation ul {
    margin: 0px;
    padding: 0px;
    #navigation a:hover {
    background-color: #9fcc41;
<!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>OrganicUtopia Home Page</title>
    <style type="text/css">
    </style>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    </head>
<body>
<div id="container">
<div id="header"><img src="images/ou_logo.gif" width="210" height="41" /></div>
<div id="navigation">
    <ul>
     <li><a href="#">Home</a></li>
      <li><a href="#">About US</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</div>
<div id="main">
    <h1 >Welcome to organic utopia</h1>
    <p>There's big news at OrganicUtopia this month! We've expanded to include 2 new lines of body and earth-friendly products. We now carry bio-degradeable furniture - imagine a couch you can leave on the street that will slowly decompose back into Mother Earth! We also have added recyclable shopping bags, which eliminate the need for the age-old question "paper or plastic?". These bags are tough, stylish, and eco-friendly!</p>
    <h1 >What do we do?</h1>
    <p> We've got everything from healthy<a href="#"> lifestyle foods</a> and <a href="#">organic gourmet products</a> to other lifestyle products. We also have a full line of eco-friendly furniture, clothes, candles and home furnishings.</p>
    <h1>One stop shoppingOne stop shopping</h1>
    <p>You can find it all here, and our online store makes it easy to order! Pick from carefully selected food, lifestyle and home products and add them to your shopping bag, all from the convenience of home. We even offer free shipping on many items, or save you big dollars by shipping items together.</p>
<p>You can find it all here, and our online store makes it easy to order! Pick from carefully selected food, lifestyle and home products and add them to your shopping bag, all from the convenience of home. We even offer free shipping on many items, or save you big dollars by shipping items together.</p>
    <h1>Member benefits</h1>
    <p>Anybody can shop at Organic Utopia, members however, enjoy certain benefits. For only $150 a year you will recieve a 20% discount on anything in the store. Additionally, you can take advantage of ordering bulk items when you become a member. There's really no reason *not* to join! <a href="#">Learn more.</a></p>
</div>
<div id="sidebar">
    <dl>
      <dt>December 20, 2012</dt>
      <dd>Organic Utopia's blowout sale. Lots of great deals on clothing, food, green accessories and more. Big saviings can be found everywhere!</dd>
      <dt>December 21, 2012</dt>
      <dd> All Organic Utopia stores will be closed to non-members as we prepare for the first annual World Age exhibition. Members are encouraged to come to your local store and help prepare for this once-in-a-lifetime event.</dd>
      <dt>December 22, 2012</dt>
      <dd> Community Green up. Volunteer to help clean up your community's neighborhood. </dd>
    </dl>
</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</body>
</html>

Perhaps it would be helpful for you to view the page source code of this page
http://www.alanwork.com/
As you can see, the submenu code links are immediately below the top level code, and are
wrapped in their own <UL> </UL> tag pairs.
Hope that helps

Spry Menu Bar using CSS background image without losing submenu ( V) indicators

Spry menu bar sets the down and side submenu indicators using
a positioned background image. I have a requirement to use a
specific background image yet must retain the > and v submenu
indicators. Without having to generate full width custom background
images for each of the menu item types to include the side and down
menu indicators, is there anyway to use a generic background image
and show the indicators using just CSS?

Don't use reserved words in JS
var event = new Spry.Data.XMLDataSet("events.xml", "catalog/event", {sortOnLoad: "date", sortOrderOnLoad: "descending"});
event is such a reserved word. If you change this to event1 then all is well.
I hope this helps.
Ben

I just upgraded to ver 3.6. Typing addresses in navigation bar used to bring up a list of cites I had been to as I typed and I did not have to type whole address. That is now gone. How do I get it back.

Using Windows XP.

Make sure that the Location Bar is not set to "Nothing":
*Tools > Options > Privacy > Location Bar: When using the location bar, suggest: History, Bookmarks, History and Bookmarks
See [[Smart Location Bar]]

How do I create a horizontal nav-bar with CSS, set to an exact width?

I have a problem that I need help with. All I need to do is
to create a simple text-based horizontal navigation bar using CSS.
I have seen many CSS tutorials online about how to make a
horizontal navigation bar using unordered lists, but they all seem
to either set the bar to be centred or to the full width of the
page, or if they do set it to be a certain width, then the buttons
within that width are centred within pre-defined widths for each
one.
Unfortunately none of these help me - let me explain my
scenario...
I have an area that is exactly 700px wide. In this area I
want to put 5 text hyperlinks.
I want the first text-link to be aligned to the left of my
700px width, and I want the last text-link to be aligned to the
right of the 700px width.
I want the spaces between each of these text-links to all be
the same.
The only definite known width is the overall 700px. I will
not know the width of each text-link, as (a) they are all live
text, and (b) the phrases for each could change.
I have mocked up a quick diagram showing in more detail
precisely what I mean:
http://www.nothowitlooks.com/temp/navbar.gif
Can anyone please help me with this?
Thanks.

.oO(BrettArchibald)
>Oh look, a third person joining the discussion and not
actually proposing any
>solutions to the original query. Just what this thread
needs.
Oh look, a person seeking for help turning into a troll. Just
what this
group needs.
> Well, to be fair, Kim did make a sterling effort in
trying, but just didn't
>manage to fully understand the layout required.
>
> To address your "points":
>
quote:
some things simply can't be done or don't make any sense in
the Web. Even a
>client has to accept that. Let them write wishes to Santa
Clause if they want,
>but they have to accept the rules of the medium they're
working with.
>Period.
> Wrong, wrong, silly comment and wrong.
>
> To elaborate: firstly, with regards to design,
everything can be done, it's
>simply a matter of how.
Only in your fantasy. In practice there are always some
limits enforced
by the used material or technology. You simply can't violate
such basic
rules and laws, even if you would like to.
>Whether you use text, images, tables, CSS, or even
>Flash, the objective is first to design the site with
both your client's and
>their customers needs and expectations, and then to build
it, regardless of how
>difficult-to-code that design may or may not be.
It always looks good on paper, but not every design can be
turned into
practice. This not only applies to web design, but to almost
every kind
of development. Often enough you have to find compromises or
workarounds
if the engineers say "won't work". The problem is that many
designers
don't understand this or don't want to. They're just thinking
and living
in their perfect theoretical world, but have no idea of how
things work
in the real world. And many theoretical things simply don't
work there.
Each medium has its own rules and laws. Some things may work
well for a
printed paper for example, but not in the Web and vice versa.
Of course
you can try to break these rules, but you'll definitely fail.
>You should not compromise your
>design because of a lack of coding knowledge.
It's not lack if coding knowledge if you refuse to try things
that are
impossible or don't make sense. It's quite the opposite,
because you
don't have to waste your time with something that won't work
at all.
>If you don't know how to do it
>yourself, then find out how to do it (which is what I was
*originally* trying
>to do here, remember?).
Quite easy. Surf the web, and if you see something like what
you want,
just have a look at the source code or post the URL here. If
it can be
done, then it already has been done. Just show us an example
and we'll
happily explain it to you.
> Secondly, no, a client does NOT have to accept that
"some things simply can't
>be done or don't make any sense in the Web".
Sure they have. The client is not always king. And if they
insist on
stupid things and always know it better - why the hell are
they hiring
you instead of doing it themselves? If they want their work
to be done
by an expert, they should also _listen_ to that expert and
let him do
his work properly instead of telling him how he should do it.
That's not
going to work.
>Like I said earlier, some clients
>are not interested in hearing about how what they want
cannot be done, and any
>attempts to tell them so only serve to convince them to
take their work, and
>their money, to someone else. Most clients, thankfully,
are adaptable and
>willing to reason. However, some are not, and if these
clients take their money
>elsewhere, you lose the job and you don't get paid. It's
that simple.
Let's say you want a little film to be made about whatever.
Would you
tell the director where he should position the cameras, the
lights and
all the stuff? He already knows _what_ you want to get, so
why don't you
just let him decide _how_ to do it? It's his job! And if he
says that
filming directly towards bright sunlight usually doesn't work
well, you
should respect his expert opinion.
>
quote:
You won't make friends here with such an attitude. Please
stop insulting
>regulars or just leave.
>
> Firstly, I'm not here to make friends. Neither am I here
to make enemies. I am
>here to get help with a coding problem. When people offer
"alternative advice"
>that hinders my progress in finding a solution, I tell
them so. I give back
>what I get.
You asked for advice and you got proper answers. We really
don't need
people here just looking for the answers they want to hear.
Often enough
people are coming here looking for a cure to a particular
problem, while
it would be much easier to avoid that problem right from the
beginning.
Of course if they don't want to hear such alternatives -
their problem.
> Secondly, I was not aware that "regulars" to this site
had any special
>"insult-free privileges" or suchlike that newcomers did
not.
It's not the best idea to bite the hand that feeds you. It's
the group's
regulars who answer almost all of the questions here. And
most of them
also know how to use a killfile.
>I don't care if
>someone is a regular or a newcomer - when I ask a
technical question and
>instead of either potential advice or even silence, I
instead receive
>un-warranted "design advice", I'll make my opinions
known.
So do we. If someone wants something that's not possible or
not going to
work, we'll "make our opinions known". After all that's what
a free
discussion board/forum/group is for.
> As for the "just leave" suggestion for supposedly
"insulting regulars", I
>could very well say the exact same thing to you, for the
reason of not actually
>contributing anything to the discussion that attempts to
address the original
>query of this thread.
> In fact, you know what, I think I will. Here goes:
> Please either propose a solution to my original CSS
problem or just leave.
> There, how was that?
Want to try again?
With pure CSS and text links it can't be done within the
given
constraints. I even doubt that it's possible with a table. So
either
drop the fixed 700px width or the equal space between the
buttons.
> P.S: Seeing as though pedantry seems to be something
you're interested in,
>judging by the "rant" tag comment, I thought I'd point
out that you spelled
>Santa Clause wrong.
You can keep the 'e'. In German we have more than enough of
them.
And if you would be familiar with web design, then you would
have known
where this ironic "error message" came from.
Your turn.
Micha

Any tutorials on simple responsive navigation bar?

I made a simple navigation bar using using lists with 4 links.
The problem I'm having is adjusting the navbar for different media like the ipad or desktop where the navbar has to go from display:block (mobile) to display inline horizontally. for a desktop view. I can't find any tutorials that deal with dreamweaver cc and inserting a responsive navbar. Can anyone help me? Thanks in advance.

Very simple, very basic....can be elaborated on to include a sandwich icon which are common with mobile menus. Alternatively Google youtube there's plenty of tutorials, some complex and some simple - solution depends what it is you want to do.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile Menu</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$('#showMenu').css('cursor' , 'pointer').click(function() {
$('nav').slideToggle();
$(window).on('resize', function(){
var win = $(this); //this = window
if (win.width() >= 600) { $('nav').show(); }
if (win.width() <= 599) { $('nav').hide(); }
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 15px;
nav {
display: block;
background-color:#333;
nav ul {
margin: 0;
padding: 0;
nav li {
margin: 0;
padding: 0;
list-style: none;
display: block;
width: 100%;
nav a {
text-decoration: none;
color: #fff;
padding: 10px;
display: block;
border-bottom: 1px solid #fff;
nav a:hover {
background-color: #999;
#showMenu {
display: block;
padding: 10px;
nav {
display: none;
@media screen and (min-width: 600px) {
#showMenu {
display: none;
nav {
display: block;
nav li {
display: inline;
nav a {
display: inline-block;
border-bottom: none;
</style>
</head>
<body>
<div id="showMenu">Show Menu</div>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</nav>
</body>
</html>

Why navigation bar or Flash options are missing?

First of all, thank you to set aside time to look at this issue.
1- Product:
     Dreamweaver / Trial Version
2- Behavior:
     I am trying to create a navigation bar using images but the navigation bar option is missing when I try to get it from the insert panel - insert/common/image/???Navigation bar???.
Also the flash text, flash button, flash paper, flash video options are missing from insert/media from the application menu bar.
3- Browser / version
     Mozilla Firefox / 3.6.10
4- OS / Version
     Windows Vista / 32 bit - Service Pack 2
Thanks you for your assistance.

F1 (help) Spry Menus.
Spry Widget Samples -
http://labs.adobe.com/technologies/spry/samples/
Using Spry with Widget Browser -
http://www.adobe.com/devnet/dreamweaver/articles/spry_menu_bar.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

My links on my navigation bar are not working. HELP PLEASE!

Hi, I am making a website for my AS IT course and need your help. Before i explain my problem, i am using dreamweaver 8.
I made a drop down navigation bar using coding and CSS. At the moment, I have linked three pages. The first page being Home at the start, the second bar is called 'The Players' and i have linked that and they both work right. However, 'the players' has two drop down menus called PDC and BDO, i have linked my page to PDC through the code. However, i can only click onto this page and it will only direct me tot hat page if i click it straight from my template. If i click onto my home page or players then click onto PDC, it will not take me there. However, if i am on the players and click onto another page, it will take me there.
I did all this on my template.
Thanks.

This is my code of my template, sorry it's long but its the PDC button I am having trouble with.
<!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>Template</title>
<link href="file:///N|/A Level Subjects/IT/Year 13/Unit 12 - Website production/CSS/DropDown1.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<link href="file:///N|/A Level Subjects/IT/Year 13/Unit 12 - Website production/CSS/Favourites.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<style type="text/css">

</style>
<link href="Text CSS.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<link href="Templates/Text CSS.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body>
<div id="wrapper">
<div id="navMenu">
<ul>
<li><a href="Home.html">Home</a>
</ul>

</li> 
</ul> 
<ul>
<li><a href="The Players.html">The Players</a>
<ul>
<li><a href="PDC.html">PDC</a></li>
<li><a href="#">BDO</a></li>
</ul> 
</li>

</ul>

<ul>
<li><a href="#">Get involved?</a>
</ul> 
</li> 
</ul> 
<ul>
<li><a href="#">Tournaments</a>
<ul>
<li><a href="#">PDC</a></li>
<li><a href="#">BDO</a></li>
</ul> 
</li>

</ul> 
<ul>
<li><a href="#">Equipment</a>
<ul>
<li><a href="#">Darts</a></li>
<li><a href="#">Stems</a></li>
<li><a href="#">Flights</a></li>
<li><a href="#">Other</a></li>
</ul> 
</li>

</ul> 
<ul>
<li><a href="#">Gallery</a>
</ul> 
</li> 
</ul> 
<br class="clearFloat"/>
</div> 
</div>
<div id="Layer6">
<marquee behavior="scroll" direction="left">
<span class="style3">Welcome to The Darts Club, enjoy! </span>
</marquee>
</div>
<div id="Layer1">
<center>
    <p class="style1">Choose your background colour! </p>
    <p class="style1">(Hover over colour) </p>
    <p><a href="" class="style4" onmouseover="document.bgColor='turquoise'">Turqoise</a></p>
    <p>
      <span class="style4"><a href="" onmouseover="document.bgColor='pink'">Pink</a></span></p>
    <p class="style4">
    <a href="" onmouseover="document.bgColor='blue'">Blue</a></p>
    <p class="style4">
      <a href="" onmouseover="document.bgColor='red'">Red</a>    </p>
    <p class="style4"><a href="" onmouseover="document.bgColor='yellow'">Yellow</a>    </p>
    <p class="style4"><a href="" onmouseover="document.bgColor='green'">Green</a></p>
    <p class="style4">
      <a href="" onmouseover="document.bgColor='white'">White</a></p>
    <p class="style4">
        <a href="" onmouseover="document.bgColor='brown'">Brown</a>        </p>
    <p><span class="style4"><a href="" onmouseover="document.bgColor='black'">Black</a></span> </p>
</center>
</div>
<div id="Layer2"><img src="file:///N|/A Level Subjects/IT/Year 13/Unit 12 - Website production/Banner.png" width="600" height="120" /></div>
<div id="Layer3"><img src="file:///N|/A Level Subjects/IT/Year 13/Unit 12 - Website production/Logo.png" width="150" height="120" /></div>
<p>

</p>
<div id="Layer18">
<p>ChangeMe</p>
<p>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="125" height="20">
      <param name="movie" value="file:///N|/A Level Subjects/IT/Year 13/Unit 12 - Website production/Templates/button6.swf" />
      <param name="quality" value="high" />
      <param name="SCALE" value="exactfit" />
      <embed src="file:///N|/A Level Subjects/IT/Year 13/Unit 12 - Website production/Templates/button6.swf" width="125" height="20" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" scale="exactfit" ></embed>
    </object>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="125" height="20">
      <param name="movie" value="file:///N|/A Level Subjects/IT/Year 13/Unit 12 - Website production/Templates/button8.swf" />
      <param name="quality" value="high" />
      <param name="SCALE" value="exactfit" />
      <embed src="file:///N|/A Level Subjects/IT/Year 13/Unit 12 - Website production/Templates/button8.swf" width="125" height="20" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" scale="exactfit" ></embed>
    </object>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="125" height="20">
      <param name="movie" value="file:///N|/A Level Subjects/IT/Year 13/Unit 12 - Website production/Templates/button7.swf" />
      <param name="quality" value="high" />
      <param name="SCALE" value="exactfit" />
      <embed src="file:///N|/A Level Subjects/IT/Year 13/Unit 12 - Website production/Templates/button7.swf" width="125" height="20" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" scale="exactfit" ></embed>
    </object>
<INPUT Type="button" VALUE="Back" onClick="history.go(-1);return true;">
<INPUT TYPE="button" VALUE="Add To Favorites"
onClick='window.external.AddFavorite(location.href, document.title);'></p>
<p>
<FORM method=GET action="http://www.google.com/search">
<input type=hidden name=ie value=UTF-8>
<input type=hidden name=oe value=UTF-8>
<TABLE bgcolor="#FFFFFF"><tr><td>
<A HREF="http://www.google.com/">
<IMG SRC="http://www.google.com/logos/Logo_40wht.gif"
border="0" ALT="Google" align="absmiddle"></A>
<INPUT TYPE=text name=q size=25 maxlength=255 value="">
<INPUT type=submit name=btnG VALUE="Google Search">
</td></tr></TABLE>
    <img src="file:///N|/A Level Subjects/IT/Year 13/Unit 12 - Website production/fb.png" width="40" height="40" />
    <img src="twitter.png" width="40" height="40" />
</FORM>
</p>
 </div>
<p> </p>
</body>
</html>

Applying a Navigation Bar to a Site

I created a Navigation Bar and would like to apply it to all
of the files that are on my site map. How to? Couldn't find any
instructions in the Help files.

> I Loved AllWebMenus
I'm sorry to say that's only because you never discovered all
the reasons to
hate them. And there are lots.
> I'm afraid I am clueless
> about things like "Server-side includes" - could you
point me to more
> information on that?
Just google the term. You'll find lots. I think there is a
reasonable
tutorial at
http://www.bignosebird.com.
> I'd like to 'integrate' them so that the Nav Bar still
appears on those
> pages.
> The only way I can think of to do that, is to use a
frame. Or... ?
Frames do have some value in situations like this. Just make
sure you
understand the downsides of that choice....
As far as I know, the most comprehensive discussions of
frames and their
potential problems can be found on these two links -
http://apptools.com/rants/framesevil.php
http://www.tjkdesign.com/articles/frames/
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
==================
"Qamera" <[email protected]> wrote in
message
news:g9ud3t$g9f$[email protected]..
> Murray,
>
> I'm afraid I come from that FrontPage area (ugh) where I
could create a
> navigation bar using an external plug in (I Loved
AllWebMenus), apply it
> to my
> entire navigation structure, then drop it into a top
frame that I could
> include
> (nor not) in any and all pages within the structure. I'm
afraid I am
> clueless
> about things like "Server-side includes" - could you
point me to more
> information on that?
>
> By the way, I only have about 6 pages for this site, but
several of them
> are
> external links, i.e. one links to a Forum and another to
a WordPress blog,
> but
> I'd like to 'integrate' them so that the Nav Bar still
appears on those
> pages.
> The only way I can think of to do that, is to use a
frame. Or... ?
>

Record set navigation bar problems

I am creating a site using ASP and MySQL. I have created a
Recordset that returns data from my data base. I have created a
'Record set navigation bar' using Dreamweavers 'Insert > Data
Objects > Recordset Paging' feature but it isn't working. If I
print the record set 'total records' binding it returns the value
-1, so when I click on next in the navigation bar it looks back
through the database and returns a record that is not even present
in the SELECT WHERE recordset statement.
How do I get Dreamweaver to return the correct total records
value?
There is a lot of code in the top of the page, I haven't
included it as I don't understand it well enough to know what bits
of code apply to the record count.
Thanks,
Rob

I am creating a site using ASP and MySQL. I have created a
Recordset that returns data from my data base. I have created a
'Record set navigation bar' using Dreamweavers 'Insert > Data
Objects > Recordset Paging' feature but it isn't working. If I
print the record set 'total records' binding it returns the value
-1, so when I click on next in the navigation bar it looks back
through the database and returns a record that is not even present
in the SELECT WHERE recordset statement.
How do I get Dreamweaver to return the correct total records
value?
There is a lot of code in the top of the page, I haven't
included it as I don't understand it well enough to know what bits
of code apply to the record count.
Thanks,
Rob

Slide Show Navigation bar

When you create a pdf slide show with Adobes Photoshop Album Starter Edition 3.0, each slide contains a full navigation bar in the upper right.
When you create a pdf slide show with Photoshop Elements 5.0, you get only < > and an escape arrow in the lower left.
How can you get the full navigation bar using Photoshop Elements?

I doubt there is a video for anything this basic, but you can try searching. I recommend practicing in a copy of the file you intend to place them in so that you don't lose that file due to a learning curve.
If you open the fla's of your navbar, etc, you want copy the timeline. So you select all the layers and frames of the main timeline, right click the selection and choose Copy Frames. Then, in the destination file you should create a new movieclip symbol. Select the first frame of the new symbol, right click and select Paste Frames. All of the layers and frames that you copied should appear in the timeline.
If you happen to have library symbols with the same names in the different files you'll be combining, that could cause a problem as it will prompt you as to whether you want to replace one with the other. So it is best to rename any such symbols before copying them.

Validation errors javascript navigation bar

I created a navigation bar using Dreamweaver CS3 wizard. I
got several error messages. After I replaced all the uppercase
letters with lower case, I had only one error message. I know
nothing about javascript and I may have messed something up.
Dreamweaver put the navigation bar in a table. I got rid of the
table and put it in div tags. I also moved the part that goes in
the head to an external sheet. Here is coding from the page:
quote:
<div id="mainNav">
<div class="buttons"> <a href="#" target="_top"
onClick="MM_nbGroup('down','group1','home','images/buttons/home2.jpg',1)"
onMouseOver="MM_nbGroup('over','home','images/buttons/home2.jpg','',1)"
onMouseOut="MM_nbGroup('out')"><img name="home"
src="images/buttons/home2.jpg" border="0" alt=""
onLoad="MM_nbGroup('init','group1','home','images/buttons/home1.jpg',1)"
/></a> </div>
<div class="buttons"> <a href="javascript:;"
target="_top"
onClick="MM_nbGroup('down','group1','About','images/buttons/about2.jpg',1)"
onMouseOver="MM_nbGroup('over','About','images/buttons/about2.jpg','',1)"
onMouseOut="MM_nbGroup('out')"><img name="About"
src="images/buttons/about1.jpg" border="0" alt="" onLoad=""
/></a></div>
<div class="buttons"> <a href="javascript:;"
target="_top"
onClick="MM_nbGroup('down','group1','support','images/buttons/support2.jpg',1)"
onMouseOver="MM_nbGroup('over','support','images/buttons/support2.jpg','',1)"
onMouseOut="MM_nbGroup('out')"><img name="support"
src="images/buttons/support1.jpg" border="0" alt="#" onLoad=""
/></a> </div>
<div class="buttons"> <a href="javascript:;"
target="_top"
onClick="MM_nbGroup('down','group1','contact','images/buttons/contaqct2.jpg',1)"
onMouseOver="MM_nbGroup('over','contact','images/buttons/contaqct2.jpg','',1)"
onMouseOut="MM_nbGroup('out')"><img name="contact"
src="images/buttons/contact1.jpg" border="0" alt="" onLoad=""
/></a></div>
</div>

And the error messages:
quote:
Line 33, Column 302: there is no attribute "onload".
…/home2.jpg" border="0" alt=""
onload="MM_nbGroup('init','group1','home','imag
/Q]
If I may throw another javascript question in.... Dreamweaver
threw something into the body tag that appears to be preloading the
images
"<body
onload="MM_preloadImages('images/buttons/about2.jpg','images/buttons/support2.jpg','image s/buttons/contaqct2.jpg','../images/buttons/home1.jpg','../images/buttons/home2.jpg')">"
Can this be moved to the external sheet or is this the same
thing which is in the external sheet:
"function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new
Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0;
i<a.length; i++)
if (a
.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
Thanks.

> I have a complex navigation bar created using
> javascript.
It should only take you a few weeks to discover what a bad
idea this is,
then.
> I need to make sure the links are not broken.
DW will not do this. Furthermore, if you rename or move a
linked file, you
will break that link, since DW cannot manage them either.
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
==================
"KellyFaith" <[email protected]> wrote in
message
news:e3fpba$mh1$[email protected]..
> I'm relatively new to DW. I have a complex navigation
bar created using
> javascript. Is there a way I can check that there are no
broken links in
> the
> navigation bar? When I use the Link Checker, it does not
appear to check
> the
> links in the javascript. I need to make sure the links
are not broken.
>

How can I use my Html/CSS Navigation bar to control an Edge Stage?

I have an HTML/CSS navigation bar set up in my EDGE created page. The Navbar is not created in edge. I would like to use these buttons to control the stage.
Inside the stage the main timeline has labels and stop actions every 1.5 secs to create a horizontally sliding site.
The labels are as follows: home, work, blog, profile, and contact. I can easily use a symbol created inside edge for example:
sym.play("home");
and animate a 6000px width symbol across my 1000px stage in 1000px increments.
I do not want to use a symbol inside of edge to do this because I cannot create the effect that the html/css navbar has on mouseover inside of edge.
So I am interested in knowing if I can use this bar to control my main timeline so I don't have to sacrifice design for functionality.
currently the link list is setup with the standard hyperlink. What code would I use to play the stage on click of the html navbar?
Many thanks to anyone who can help with this!
Here is the code for the navbar:
<div id="menu"><ul class="block-menu">
                    <li><a href="/home" class="three-d">
                              Dynamic
                              <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                    </a></li>
                    <li><a href="/demos" class="three-d">
                              Work
                              <span class="three-d-box"><span class="front">Work</span><span class="back">Work</span></span>
                    </a></li>
                    <li><a href="/deals" class="three-d">
                              Blog
                              <span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
                    </a></li>
                    <li><a href="/about" class="three-d">
                              Profile
                              <span class="three-d-box"><span class="front">Profile</span><span class="back">Profile</span></span>
                    </a></li>
        <li><a href="/about" class="three-d">
                              Contact
                              <span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
                    </a></li>
          </ul>
<span class="block-menu"></span></div>
Full HTML:
<!DOCTYPE html>
<html>
<head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
          <title>Untitled</title>

    <script type="text/javascript" charset="utf-8" src="workapp_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-57204389 { visibility:hidden; }
              .block-menu {
                              display: block;
                              background: #000;
                    .block-menu li {
                              display: inline-block;
                    .block-menu li a {
                              color: #fff;
                              display: block;
                              text-decoration: none;
                              font-family: 'Passion One',Arial,sans-serif;
                              -webkit-font-smoothing: antialiased;
                              -moz-font-smoothing: antialiased;
                              font-smoothing: antialiased;
                              text-transform: uppercase;
                              overflow: visible;
                              line-height: 20px;
                              font-size: 24px;
                              padding: 15px 10px;
                    /* animation domination */
                    .three-d {
                              -webkit-perspective: 200px;
                              -moz-perspective: 200px;
                              perspective: 200px;
                              -webkit-transition: all .07s linear;
                              -moz-transition: all .07s linear;
                              transition: all .07s linear;
                              position: relative;
                              .three-d:not(.active):hover {
                                        cursor: pointer;
                              .three-d:not(.active):hover .three-d-box,
                              .three-d:not(.active):focus .three-d-box {
                                        -moz-transform: translateZ(-25px) rotateX(90deg);
                                        -webkit-transform: translateZ(-25px) rotateX(90deg);
                                        -o-transform: translateZ(-25px) rotateX(90deg);
                                        transform: translateZ(-25px) rotateX(90deg);
                    .three-d-box {
                              -webkit-transition: all .3s ease-out;
                              -moz-transition: all .3s ease-out;
                              -ms-transition: all .3s ease-out;
                              -o-transition: all .3s ease-out;
                              transition: all .3s ease-out;
                              -webkit-transform: translatez(-25px);
                              -moz-transform: translatez(-25px);
                              -o-transform: translatez(-25px);
                              transform: translatez(-25px);
                              -webkit-transform-style: preserve-3d;
                              -moz-transform-style: preserve-3d;
                              -ms-transform-style: preserve-3d;
                              -o-transform-style: preserve-3d;
                              transform-style: preserve-3d;
                              pointer-events: none;
                              position: absolute;
                              top: 0;
                              left: 0;
                              display: block;
                              width: 100%;
                              height: 100%;
                    .front {
                              -webkit-transform: rotatex(0deg) translatez(25px);
                              -moz-transform: rotatex(0deg) translatez(25px);
                              -o-transform: rotatex(0deg) translatez(25px);
                              transform: rotatex(0deg) translatez(25px);
                    .back {
                              -webkit-transform: rotatex(-90deg) translatez(25px);
                              -moz-transform: rotatex(-90deg) translatez(25px);
                              -o-transform: rotatex(-90deg) translatez(25px);
                              transform: rotatex(-90deg) translatez(25px);
                              color: #FFE7C4;
                    .front, .back {
                              display: block;
                              width: 100%;
                              height: 100%;
                              position: absolute;
                              top: 0;
                              left: 0;
                              background: black;
                              padding: 15px 10px;
                              color: white;
                              pointer-events: none;
                              -moz-box-sizing: border-box;
                              box-sizing: border-box;
    </style>

</head>
<body>
<div id="menu"><ul class="block-menu">
                    <li><a href="/home" class="three-d">
                              Dynamic
                              <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                    </a></li>
                    <li><a href="/demos" class="three-d">
                              Work
                              <span class="three-d-box"><span class="front">Work</span><span class="back">Work</span></span>
                    </a></li>
                    <li><a href="/deals" class="three-d">
                              Blog
                              <span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
                    </a></li>
                    <li><a href="/about" class="three-d">
                              Profile
                              <span class="three-d-box"><span class="front">Profile</span><span class="back">Profile</span></span>
                    </a></li>
        <li><a href="/about" class="three-d">
                              Contact
                              <span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
                    </a></li>
          </ul>
<span class="block-menu"></span></div>
<div id="Stage" class="EDGE-57204389">
</div>
</body>
</html>

I've come across this from the Edge API:
Edge.getComposition(compId)
Anyone having trouble with this same issue should try this:
var targetComp = AdobeEdge.getComposition('TARGETCOMPID');
   targetComp.getStage().play();
in their trigger or event handler.
How I got it to work:
<li><a href="javascript:var targetComp = AdobeEdge.getComposition('EDGE-57204389');
   targetComp.getStage().play();" class="three-d">
                              Dynamic
                              <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                    </a></li>

Saving Navigation Bar as Library Item with CSS working?

I have created a simple navigation bar with a separate color for "over" and saved it as a library item. A warning box indicates that the item may not work the same as the original as the CSS may not be copied. What is the simplest method for correcting this?

If your html docs are linked to an external stylesheet, they will get their styles from the CSS file.
http://alt-web.com/DEMOS/DW-Link-Stylesheet.shtml
I highly recommend using server-side includes instead of Library Items for menus. A server-side include file is easier to maintain by editing one file and uploading it to your server. With Library Items you must make changes to the Library Item and then re-publish all pages containing that item.
SSI's
http://www.smartwebby.com/web_site_design/server_side_includes.asp
More on SSI
http://forums.adobe.com/message/2112460#2112460
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Graphical navigation bar using css

Similar Messages

Maybe you are looking for