Help with my moving menu bar in my webpage

Hello,
First of all I am completley new to webdesign and have no clue what I am doing so you will probably see me posting alot in the upcomming weeks. Im trying to create a wepbage for our youthministry at church. The webpage is www.ccifuel.com. My first question is about the navigation menu on it. It seems to move from one place to another when the web browser expands and I would like it to stay in a fixed position over the image. How do I do that? My last question is that im trying to creat a form to collect email addresses to start a newsletter in the box labeled "Join our mailing list!" but when I try to enter a spry validation text field it says, "You cannot insert this widget into an editable region..." and so on. Any idea how to make that area locked so i can insert a form there or would there be a better way to do this? thanks for all the help in advance!

First of all I am completley new to webdesign and have no clue what I am doing so you will probably see me posting alot in the upcomming weeks.
In that case, you really should work your way through some tutorials first. These aren't hard and they'll give you basic skills to work with X/HTML & CSS.
Start here:
HTML & CSS Tutorials - http://w3schools.com/
My first question is about the navigation menu on it. It seems to move from one place to another when the web browser expands and I would like it to stay in a fixed position over the image.
Why do APDivs move?
http://forums.adobe.com/message/2181263#2181263
Your best course of action is to build your HTML content so that it flows naturally from top of page to bottom. Then use CSS default positioning (which is no positioning at all) along with floats, margins and padding to align elements on page.
From Tables to CSS Web Design Part 1 -
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1.html
From Tables to CSS Web Design Part 2 -
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt2.html
Best of luck,
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Similar Messages

Help with a Spry Menu Bar

I'm having trouble with a Spry Menu Bar not displaying
correctly in Internet Explorer, while it displays fine in every
other browser I have available. I've done some searching on these
boards, but the queries I've found with the same type of problem
each has a knowledgeable person editing the code for the
poster...and I can't seem to make heads or tails of it.
So, below is my link. What you'll see if viewed in Explorer
is that the "Clinics" listing and the "Services & Specialties"
listing are each on the same horizontal line, rather than vertical
like the rest of the menu. If anyone can help me in correcting this
problem, I'd be very appreciative.
Thanks in advance.
http://www.chambershospital.com/temp/about.html

Hello,
You might try removing all of the <div> tags you
inserted in the menu.
This can happen if you select text in design view and use the
"align" icons
in the properties window instead of using CSS to align
things.
For example:
<li>
<div align="left"><<****REMOVE THIS
<a href="clinics.html"
class="MenuBarItemSubmenu">Clinics</a>
<ul>
<li><a href="clinic.html">Chambers
Clinic</a></li>
<li><a href="clinic7.html">Scenic 7
Clinic</a></li>
</ul>
</div><<*** REMOVE THIS
</li>
So it looks like this:
<li><a href="clinics.html"
class="MenuBarItemSubmenu">Clinics</a>
<ul>
<li><a href="clinic.html">Chambers
Clinic</a></li>
<li><a href="clinic7.html">Scenic 7
Clinic</a></li>
</ul>
</li>
Repeat for all the other <div align="left"> and
</div> tags in the menu.
Take care,
Tim
"Zim74" <[email protected]> wrote in message
news:fv4vc0$r0t$[email protected]..
> I'm having trouble with a Spry Menu Bar not displaying
correctly in
> Internet
> Explorer, while it displays fine in every other browser
I have available.
> I've
> done some searching on these boards, but the queries
I've found with the
> same
> type of problem each has a knowledgeable person editing
the code for the
> poster...and I can't seem to make heads or tails of it.
>
> So, below is my link. What you'll see if viewed in
Explorer is that the
> "Clinics" listing and the "Services & Specialties"
listing are each on the
> same
> horizontal line, rather than vertical like the rest of
the menu. If
> anyone can
> help me in correcting this problem, I'd be very
appreciative.
>
> Thanks in advance.
>
>
http://www.chambershospital.com/temp/about.html
>
>

Help with vertical spry menu bar submenu displaying incorrectly!

I’m new to Dreamweaver and am learning as I go. I am having a problem with the vertical spry menu bar submenu in the Live View. When I scroll over the spry menu bar option that has a submenu, the submenu appears in the upper right hand corner of my screen. (My menu bar is going down the left hand side.) However, when I preview it in Internet Explorer it looks fine after I allow the Java Script to run or the Active X controls, which my browser usually automatically blocks. (The browser just displays a small message along the top and I click on it to allow it.) To get it to do this much, I had to play around with the CSS for the spry menu bar a little bit.
Before, when I clicked on the Live View option, a small message ran along the top in Dreamweaver saying it couldn’t find the Flash Plugin and asked me to download the most recent FlashPlayer, which I did twice. It continued to say that and then I just closed that message that kept popping up, but I think that has something to do with the problem. I then researched that problem in the Spry Framework Help and Dreamweaver Help, but couldn’t find a solution that worked. (Someone had posted a link for downloading the Flash Player for Netscape Navigator, but that didn’t seem to do anything.)
Please also note that I am using one of Dreamweaver’s pre-built layouts. I don’t know if that makes a difference with this problem.
How do I fix this problem so that it displays correctly in the LiveView? And will the message that I get on my browser about allowing blocked content appear on other people’s computer when they open my website?

IE is a big problem child among browsers. Don't use it as your default browser.
For best results, build your site to display & perform well in the web standards browsers like Firefox, Chrome, Safari & Opera. If it works in one, it should work pretty much the same in all of them.
After you're satisfied with how your site looks in the good browsers, then test in IE. If needed, add hacks or conditional comments to make IE behave. There are many web sites that discuss known bugs in IE and how to work around them.
Lastly, the active X nag screens only appear locally. Once deployed on the remote server, you won't see them.
For better answers to your layout questions, we need to see your page. Can you post a URL?
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

***I need help with my SPRY MENU BAR***

Hi everyone,
I have installed a Horizontal and Vertical Spry Menu Bar.
It looks great, but I can not figure this out.
When I click on any of the links on the bars,
my text jumps to the righ
Can someone please tell me how I can make
the text to stop jumping.
My test page is located at the link below:
http://www.tonyasdynamicdesigns.com/gregs-pages/index.html
Thank you so much for your help,
Tonya

I know that the problem is in my main-css.css because
when I deleted this css code, the text jumping stopped.
I can not figure out how to fix my main-css.css style.
Can you please help me?
Below is part of my css code
that is causing the problem.
body {
          background-color: #000000;
          background-repeat: repeat;
          background-image: url(.../gregs-images/bg.jpg);
          background-position: center;
          background-attachment: fixed;
#container {
          width: 965px;
          fixed-width: 965px;
          background-color: #1f1f1f;
          margin-right: auto;
          margin-left: auto;
          font-size: 12px;
          color: #afafaf;
          font-family: Arial, Helvetica, sans-serif;
          font-style: normal;
          line-height: normal;
          font-weight: normal;
          font-variant: normal;
          text-transform: none;
          text-decoration: none;
          border: 2px solid #1f1f1f;
          margin-bottom: 30px;
          margin-top: 30px;
          background-image: url();
          background-repeat: repeat;
#shadow {
          width: 968px;
          background-image: url(.../images/vertical-website-background-shadow.png);
          background-repeat: repeat-y;
          margin-right: auto;
          margin-left: auto;
#bottomShadow {
          margin-right: auto;
          margin-left: auto;
          width: 968px;
          background-repeat: no-repeat;
          background-image: url(.../images/bottom-website-background-shadow.png);
          height: 54px;
#header {
          height: 272px;
          background-image: url(../gregs-images/smokehouse-studios-banner.png);
          width: 965px;
#footer {
          height: 381px;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 12px;
          clear: both;
#navigation {
          width: 900px;
          fixed-width: 900px;
          background-color: #1f1f1f;
          display: in-line;
          position: fixed;
          overflow: hidden;
#content {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 14px;
          color: #afafaf;
          background-repeat: repeat;
          background-image: url(.../gregs-images/grey-gradient-bg.png);
          background-color: #1f1f1f;
          text-align: left;
          width: 965px;

Help with spry tabbed menu bar

Hi.
I need help with the spry tabbed menu panel (horizontal) It
works fine in dreamweaver ( pressing f12 ) but when i goto my
website www.so-nouveau.com it puts it all over and not in boxes
either just the writing.
I ahve double checked all uploading is correct and files are
located but it wont work.
Here is what i did >
new> html> 1 column elastic,centered. i have not
changed any other settings at all. Do i need to change the doc type
or css layout in the drop down menus before starting (doc
type=xhtnl 1.0 transitional and layout css=add to head)
I am still on cs3 , does this matter ? or is 4 easier ?
any help out there guys is much appreciated but please bear
in mind that i am not a web designer or pc expert at all , this is
just me building my own site , until nowit has been an enjoyable
experience but grrrrrr when it dont work
Thanks
Jay

so-nouveau wrote:
> Hi.
> I need help with the spry tabbed menu panel (horizontal)
It works fine in
> dreamweaver ( pressing f12 ) but when i goto my website
www.so-nouveau.com it
> puts it all over and not in boxes either just the
writing.
Please post links directly to the page having an issue. I saw
no tabs on the home page, but I noticed that there is a link on the
bottom of the page to this page that has a Spry tab on it:
http://www.so-nouveau.com/test%208.html
> I ahve double checked all uploading is correct and files
are located but it
> wont work.
That page refers to a Spry JavaScript file and a Spry CSS
file, which should be at the following locations but are not
present:
http://www.so-nouveau.com/SpryAssets/SpryTabbedPanels.js
http://www.so-nouveau.com/SpryAssets/SpryTabbedPanels.css
Make sure you upload the SpryAssests folder and see where
you're at after that.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Problems with Vertical Spry menu bar in Internet Explora

Hi I'm new to Dreamweaver,
I having trouble with a new site I'm making in CS4. A problem with a vertical menu bar, in IE. Can anyone help?
1. The text is left aligned and should be centered.
2. The menu bar has moved left
3. My paragraph text has moved up the page and aligned itself to the to the menu bar.
Website address: http://www.greenwyse.co.uk/
I'm finding dreamweaver a bit clunky, reading the 'Missing Manual' but still very frustrating. Any one have any idea's/
cheers
myquirk

Sorry, but your CSS is has been mangled beyound recognition.
The solution is to start with an untouched style sheet. Then add or modify the CSS testing in your browsers as you make the changes.
Have a look at the following where I have positioned the menu. All that is now required is the styling for font and the hover event.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet">
<style>
body {width: 960px;    margin: auto;}
.article {clear: both; margin: 20px;}
/* SPRY MENUBAR */
ul.MenuBarVertical {width: 29em; margin: auto; border: none;}
ul.MenuBarVertical li {width: 29em; text-align: center;}
ul.MenuBarVertical a {background-color: transparent;}
</style>
</head>
<body>
<h1><img src="http://www.greenwyse.co.uk/greenwyse natural products/green_wyse_logo.png" width="200" height="136" alt="Green Wyse Natural Body Care Products" longdesc="greenwyse natural products/green_wyse_natural_body_care_products.png" /></h1>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="index.html">100% Natural</a></li>
<li><a href="greenwyse natural products/about dawn Ireland.html">Handmade</a></li>
<li><a href="greenwyse natural products/Hand-Made-Natural-Bodycare.html">Eco Friendly</a>      </li>
<li><a href="greenwyse natural products/green wyse body care products.html">Luxurious Body Care</a>    </li>
</ul>
<div class="article">
<p>Working through a top-down, bottom-up approach, the vitality of conceptual synergies is of supreme importance to focus on improvement, not cost. Motivating participants and capturing their expectations, through the adoption of a proactive stance, the astute manager can adopt a position at the vanguard. Building flexibility through spreading knowledge and self-organization, by moving executive focus from lag financial indicators to more actionable lead indicators, the new golden rule gives enormous power to those individuals and units.</p>
<p>Organizations capable of double-loop learning, empowerment of all personnel, not just key operatives, measure the process, not the people. In a collaborative, forward-thinking venture brought together through the merging of like minds. The balanced scorecard, like the executive dashboard, is an essential tool in order to build a shared view of what can be improved, the vitality of conceptual synergies is of supreme importance. While those at the coal face don't have sufficient view of the overall goals.</p>
</div>

<script src="SpryAssets/SpryMenuBar.js"></script>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Gramps

Dreamweaver Help | Working with the Spry Menu Bar widget

This question was posted in response to the following article: http://helpx.adobe.com/dreamweaver/using/spry-menu-bar-widget.html

Adobe has discontinued further Spry development.
http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l
You can continue using Spry but if mobile & tablets are your concern, I would use a different menu system.
Project Seven's Commercial Extensions:
http://www.projectseven.com/products/templates/pagepacks/adaptations/index.htm
http://www.projectseven.com/products/menusystems/index.htm
Or roll your own with jQuery plug-ins:
http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-m ulti-level-navigation/
https://github.com/mattkersley/Responsive-Menu
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
Nancy O.

Problems with my spry menu bar, need help

i made a spry menu bar, and it works on my computers at my house and my computers at school, but on other computers the home page menu bar is in the middle of the page (not on the left side) and on the other pages the menu bar submenus dont go out to the side of that button, its hard to explain but the "designs" button has a sub menu that is supposed to go out to the side of it but it goes out to the side at the top!.. please look at it for me...?
www.branchoutadvertising.com
Linda

i made a spry menu bar, and it works on my computers at my house and my computers at school, but on other computers the home page menu bar is in the middle of the page (not on the left side) and on the other pages the menu bar submenus dont go out to the side of that button, its hard to explain but the "designs" button has a sub menu that is supposed to go out to the side of it but it goes out to the side at the top!.. please look at it for me...?
www.branchoutadvertising.com
Linda

I am not happy with the new menu bar. I made a mistake in changing. Want ability to use the refresh button or have a new tab open when requested without

I made a mistake some how. I am not the best a computer new things like the new avg changes with the search. I want back my old menu bar. I want to be able to open a new tab without having a search window open. I don't like to new tiny "file at the top it doesn't help me. I want back the ability to click the little refresh button. How do I go back to what I had before??

jscher,
Thank you that fixed my problem. I had sort of gotten there but you helped me the rest of the way. Thank you(:)!

Help with creating a menu in CSS

I'm new to creating CSS, but as I'm a designing a huge
website, I know that the CSS will help me out some.
I'm using a CSS that came with Dreamweaver - a 2 column fixed
with header and footer.
My problem is, I need to insert a section for a menu bar
between the header and the side bar/main content.
If someone could help me out with where and what code to
enter into my css, I would really appreciate it.
Below is my CSS as it stands:

Well they are menus from En not just text in Ae but I see what your saying what I was able to do is put a new background layer onto and use a couple of masks that changed shape with directional blur and added a gradient wipe; it seems to work well enough for me. Thank you for the help.

IE problems with vertical spry menu bar

hi,
first of all: I'm aware that this problem has been discussed
before. but nothing I've found so far has really helped me.
the problem is that my vertical spry menu bar doesn't work
properly with the internet explorer. I've (clumsily) repositioned
the submenu bars, but that didn't seem to be the main problem.
I'm using dreamweaver cs3 on a mac and have checked for
safari and firefox, in which everything works fine. I'd be very
grateful if someone could have a look at
www.philipbirau.com/portfolio.htm.
unfortunatly, I have neither the skills nor the money for
'professional' webdesign, so any hint will be appreciated. if you
need more information, please let me know.
thanks!
philip

hi,
first of all: I'm aware that this problem has been discussed
before. but nothing I've found so far has really helped me.
the problem is that my vertical spry menu bar doesn't work
properly with the internet explorer. I've (clumsily) repositioned
the submenu bars, but that didn't seem to be the main problem.
I'm using dreamweaver cs3 on a mac and have checked for
safari and firefox, in which everything works fine. I'd be very
grateful if someone could have a look at
www.philipbirau.com/portfolio.htm.
unfortunatly, I have neither the skills nor the money for
'professional' webdesign, so any hint will be appreciated. if you
need more information, please let me know.
thanks!
philip

Help with vertical Spry menu

I posted this in the general forum, but thought I'd repost
here since this is more specific to Spry.
I'm having issues in IE (6 & 7...surprise, surprise) with
my vertical spry menu. It displays exactly the way I want it when I
use Opera. I think it has to do with the whitespace:nowrap on the
2nd level menu items, but I really don't know. I want the 2nd level
menu to be different width than the 3rd level, so I have both
levels set to auto width with nowrap.
This is how it looks in IE 7:
Menu
in IE
This is how it looks in Opera (correct):
Menu
in Opera
Attached is my CSS as well. Let me know if you need the HTML,
too.
Thank you for helping!
quote:
@charset "UTF-8";
/* SpryMenuBarVertical.css - Revision: Spry Preview Release
1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
LAYOUT INFORMATION: describes box model, positioning,
z-order
/* The outermost container of the Menu Bar, a fixed width box
with no margin or padding */
ul.MenuBarVertical
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 8em;
/* Set the active Menu Bar with this class, currently setting
z-index to accomodate IE rendering bug:
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this
container and are same fixed width as parent */
ul.MenuBarVertical li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
/* Submenus should appear slightly overlapping to the right
(95%) and up (-5%) with a higher z-index, but they are initially
off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: auto;
left: -1000em;
top: 0;
white-space: nowrap;
/* Submenu that is showing with class designation
MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
width: auto;
white-space: nowrap;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
border: 1px solid #CCC;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue
background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-color: #33C;
color: #FFF;
/* Menu items that are open with submenus are set to
MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical
a.MenuBarItemSubmenuHover, ul.MenuBarVertical
a.MenuBarSubmenuVisible
background-color: #33C;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a
given menu item
/* Menu items that have a submenu have the class designation
MenuBarItemSubmenu and are set to use a background image positioned
on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class
designation MenuBarItemSubmenuHover and are set to use a "hover"
background image positioned on the far left (95%) and centered
vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless
you are an expert
/* HACK FOR IE: to make sure the sub menus show above form
controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the
slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;

IE is a big problem child among browsers. Don't use it as your default browser.
For best results, build your site to display & perform well in the web standards browsers like Firefox, Chrome, Safari & Opera. If it works in one, it should work pretty much the same in all of them.
After you're satisfied with how your site looks in the good browsers, then test in IE. If needed, add hacks or conditional comments to make IE behave. There are many web sites that discuss known bugs in IE and how to work around them.
Lastly, the active X nag screens only appear locally. Once deployed on the remote server, you won't see them.
For better answers to your layout questions, we need to see your page. Can you post a URL?
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Help, iPhoto in the menu bar but...

The is no main window when I launch iPhoto. It says iPhoto in the menu bar, shows me it is running, but there is no main window to be seen. Nor can I even choose any options from the pull downs... I have repaired disk permissions and restarted, but it hasn't helped. I have not done anything special to iphoto or my hardrive. What's going on? More importantly, how can I fix it?
I am/was running version 4.0.3

Are you getting the SWOD, spinning wheel of death, in the center or the iPhoto window? If so then one possible cause of that is a damaged album. Here's how to tell if that's the case:
Determining if the SWOD (spinning wheel of death) at launch is caused by a corrupt album.
1 - move the Albums folder and the AlbumData.xml file to the Desktop
2 - launch iPhoto. If it launches OK then it's a bad album.
3 - to determine which one(s) is the bad apple (pun intended) move, one at a time, each album folder and it's associated data file back into the new Albums folder that was created inside the iPhoto Library folder.
4 - Launch iPhoto. If the launch is OK, that one was good and try the same with the next one.
5 - If the launch gives you the SWOD, remove that last album folder and it's data file.
6 - repeat with each album folder and data file until you've checked them all.
Hope this has been of some help. Good luck.
OT

I need help with the navigation menu please?

I have been working my way through your six part printed instructions and I am styling the header and navigation menu. The bullet points disappeared which was correct and the tabs moved to the right, as they should, but one tab sits underneath another tab and all tabs are covered up by my main heading. This is dreamweaver CS6.
It looks a bit of a mess!

I have moved this to the main Dreamweaver forum, as the other forum is intended to deal with the Getting Started video tutorial.
The best way to get help with layout problems is to upload the files to a website and post the URL in the forum. Someone can then look at the code, and identify the problem. Judging from your description, it sounds as though the Document window is narrow, which would result in the final menu tab dropping down to the next row. Try turning on Live view or previewing the page in a browser. Design view gives only an approximate idea of the final layout. Live view renders the page as it should look in a browser.

Newbie - Help with Fireworks CS5 nav bar

I am new to Fireworks. I am using Fireworks CS5. I need help with creating navigation bars and menu. Any tutorial or tips is greatly appreciated.
Thank you.

You'll find a tutorial named "Create a basic navigation bar" in the Fireworks help files.

Help with my moving menu bar in my webpage

Similar Messages

Maybe you are looking for