Navigation Bar Alignment Issues

I put in a script for a navigation bar at my site. You can
see it at: www.bonedoc.net/nindex2.html
However, the drop down submenu for "Services" is not aligning
up correctly. I've been over the code for the page and the css for
an hour now and can't figure it out.
Can anyone see what I'm missing please?
Thanks in advance.

Hello,
Your service submenu div is inside the ourphysicians div.
The positioned ourphysicians div has a class of "submenu",
which has
top:23px,.
The service submenu div also with a class oif "submenu" , so
it also has
position top:23px.
The problem is that it's 23px from the top of the
ourphysicians div which it
is in, and that div is already 23px from the top of the
navbar.
Positioned divs take their position from their positioned
parent.
You can quickly test this by changing the top value to 0 in
the
services_submenu CSS:
#services_submenu { top: 0px; left: 222px; visibility:
hidden; }
It aligns correctly now, as it is positioned inside the very
top of the
ourphysicians div, so now it, too, is 23px from the top of
the navbar.
Just remove the service div from inside the ourphysicians div
in the code,
or give it a 0 top position so it's aligned at the top of the
ourphysicians
div it is inside.
Take care,
Tim
"MCInteractive" <[email protected]> wrote in
message
news:gh4vuk$jku$[email protected]..
>I put in a script for a navigation bar at my site. You
can see it at:
> www.bonedoc.net/nindex2.html
>
> However, the drop down submenu for "Services" is not
aligning up
> correctly.
> I've been over the code for the page and the css for an
hour now and can't
> figure it out.
>
> Can anyone see what I'm missing please?
>
> Thanks in advance.
>
>

Similar Messages

Responsive Navigation Bar (Alignment)

I have my first responsive navigation bar on my page, and can not find the rule to move the (parent?) main menu item headings to the left. (I tried a couple things, some help, some didn't). I would like to move the 'Products' tab (with the others) to the left to line up with the blue border line. I need to also ensure that the subcontent displays starting same position also, and not far left of the main title/heading . (Essentially all text content left and text subcontent left lined up with the border (horz rule) line. Any help would be greatly appreciated.
Here is site for my code: http://www.dothopper.com/
Also two great sites I found:
http://jquery-plugins.net/
Great sripts/plugins
http://tympanus.net/codrops/category/blueprints/
Great, EASY, Quality concepts, plugins, components, layouts. Great Responsive Navigation !!

No Notepad. Plain vanilla is just a basic HTML page with no stylesheets attached to it other than the one you're trouble shooting. When I looked at your page earlier, I remember seeing about 15 CSS files (some jQuery related).
Division-itis is never a good thing.   Use HTML selectors alone or with classes.
/**This is applied to all h2 elements, regardless of where they appear**/
h2 {font-size:18px}
/**this is applied to all h2 elements that are inside the header only**/
header h2 {margin-left: 45px }
/**re-usable classes**/
.red {color: #F00}
HTML:
     <h2 class="red">This is a red, 18px heading 2</h2>
     <header>
          <h2>This is an 18px heading 2 with a margin-left of 45px</h2>
     </header>
This article is a must read:
http://phrogz.net/css/HowToDevelopWithCSS.html
Nancy O.

How can we align TOC and Navigation bar for Captivate 4 Aggregator Project?

Hi,
Is there any way we can align the bottom of TOC and Navigation bar of Captivate 4 Aggregator project. Or can we give a background color so that they don't look like different entities.
Thanks,
Janhavi

I had this issue too. What I discovered was that some of the slides in one of my presentations were off the screen. Some because I had dropped pictures onto a blank slide, and others because I switched background images on recorded slides and didn't merge the images into the existing background. After fixing those issues and republishing, I put the revised .swf into the aggregator and it worked.

Aggregator project and navigation bar not aligned

The navigation bar is cut off in the Aggregator project. It seems the entire slide is moved down as there is also white space at the top of the page. I have set the table of contents in the individual projects and set them to not stretch. I have also tried setting the TOC to stretched but with each the navigator bar gets cut in half in the Aggregator project. How do I ensure these align correctly.

I had this issue too. What I discovered was that some of the slides in one of my presentations were off the screen. Some because I had dropped pictures onto a blank slide, and others because I switched background images on recorded slides and didn't merge the images into the existing background. After fixing those issues and republishing, I put the revised .swf into the aggregator and it worked.

Navigation bar issues

When I view my publication in the content viewer, some buttons in the navigation bar are having issues.
The back button does not always take me to the last page viewed.
The Table of Contents button does not always take me to the first page of an article. Instead, it takes me to the last page I viewed within that article. Likewise, the browser does not display the first page of every article...if another page was viewed that is the first one displayed.
I have the latest set of tools and have re-installed the content viewer on my iPad.

Thanks Bob...that helps me understand some of what I thought were "issues."
I still am finding that the back button is behaving very erratically. Sometimes it goes back to previously viewed page, other times it's a completely random page.
Also, is there an easy way, when within an article, to go back to the top/first page of article?''
Thanks again.

How to align navigation bar with banner?

Hi i need to align my navigation bar with my banner how can i do this?
i have attached a picture of how it looks in chrome 1280x1024
I used Anthony Marchese's guide to do it (http://www.youtube.com/watch?v=l-wuwsZQTl0) but it will not align ive tried everything!!
also how can i resize a div??
please help??
Thanks,
Gershy14

THIS IS MY MAIN CODE.
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>MusicAtTheD's - the home</title>
6 <link href="css/styles.css"rel="stylesheet"type="text/css">
7 <style>
8
9
10 #body {background-image:url(images/washedddd.jpg);background-repeat:no-repeat;background-positi on:center center;
11 background-attachment:scroll;
12 }
13
14 #navbarOFF li {
15 font:17px Arial;
16 display:inline;
17 list-style-type:none;
18
19    }
20 #navbarOFF a {
21 background-color:#09F;
22 color:#fff;
23 text-decoration:none;
24 padding-top:15px;
25 padding-right:28px;
26 padding-bottom:15px;
27 padding-left:28px;
28
29    }
30 #navbarOFF a:hover {
31 background-color:#F90;
32 color:#666;
33
34    }
35 body {
36 background-image:url(images/washedddd.jpg);
37 background-repeat:no-repeat;
38 }
39 </style>
40 </head>
41
42 <body bgcolor="#999999"leftmargin="70"
43 " topmargin="50">
44 <div id="header"> <img src="images/websitefinalll.jpg" alt="banner" width="752" height="161"></div>
45 <nav>
46 <div id="navbarOFF">
47 <div align="center">
48 <ul>
49 <li><a href="#">the home</a></li>
50 <li><a href="#">the boys</a></li>
51 <li><a href="#">the gang</a></li>
52 <li><a href="#">the studio</a></li>
53 <li><a href="#">the band</a></li>
54 <li><a href="#">the music</a></li>
55 </ul>
56 </div>
57 </div>
58 </nav>
59
60 </body>
61 </html>
62
CSS SHEET
1 #body {
2 background-image:url(images/washedddd.jpg);
3 background-repeat:no-repeat;
4 background-position:center center;
5 background-attachment:scroll;
6 }
7 #header {
8 height:160px;
9 width:800px;
10 margin-left:auto;
11 margin-right:auto;
12
13 }

Publish Navigation Bar Entries - page navigation issue

I have created Navigation Bar entries in a master application and have created them in a secondary application using 'Copy and Subscribe'.
I changed my entries in the master application and I wanted to republish them.
Breadcrumb region is currently: Shared Components>Navigation Bar Entries>Edit
Click on 'Publish NavBar' button and page navigates to "Confirm Publish Navigation Bar", breadcrumb changes to: Shared Components>Templates>Confirm Publish Template
Click on 'Refresh All'.
Page now navigates to the "Templates" page. Breadcrumb is Shared Components>Templates.
I now have to navigate back to the Navigation Bar Entries section to publish my next entry.
Regards,
Jon

Fateh,
My Navigation Bar Entry has:
<a href="#LINK#" class="t13NavLink">#TEXT#
<img src="#IMAGE#" height="#HEIGHT#" width="#WIDTH#" title="#ALT#" />
</a>My navigation bar has:
#WORKSPACE_IMAGES#logout.pngJeff

My navigation bar issue

I am trying to create a template page for a site with a roll-over button navigation bar.
I can’t seem to make each pg different,
I’d like for a different button to start down on each pg depending on which pg they are on.
I have tried putting an editable region around the entire nav bar or around each button sep. then I save it as a template. When I start a new page using that template, it will not let me decide which button starts in the down position. It says it is locked. I cant figure out where to put the editable region. Nothing is working. It always says ‘locked’
Thank you

Here are some tips I wrote up recently:
Premise: Templates may be used: All styling MUST be controlled from the CSS Stylesheet; ONLY variation from vanilla menubar will be ids applied to all list items. Because it will all be controlled from the Stylesheet, you don't need to go into each page's menu to adjust it.
Body ID: Every page must have an id placed on the Body or a containing div: This may be accomplished with an editable attribute. Example: <body id="homepage"> Or use a div that wraps the menubar. Example: <div id="homepage">. The idea is to have a unique way to specify that particular page and its particular corresponding menu item.
List Item ID: Every menu item must be ID'd if contextual hover/display is required and to avoid the necessity for custom-editing every page's menubar in situ.
Example: <li id="home"><a href="home.html">Home</a></li>
Now, in your CSS file, you set styles for rollover. If you are using a Spry MenuBar, here are the styles to look for:
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #33C;
color: #FFF;
This would be whatever styling you have already decided on for the 'normal' rollover and focus. It will apply to all hovered and focused list items (menu items).
You will ADD style selectors that specifically style each list item contextually on its own page. For instance, on the page that has id="homepage" (your index page!), you want the "home" button to be highlighted. For illustration, let's add a couple more pages, #aboutuspage li#aboutus, #contactuspage li#contactus
So in the CSS, do this:
#homepage ul.MenuBarHorizontal #home a,
#aboutuspage ul.MenuBarHorizontal #about a,
#contactuspage ul.MenuBarHorizontal #contactus a,
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #33C;
color: #FFF;
Notice that I have added the additional selectors to the original (you want to KEEP the original rollover!), and used commas to separate them. Don't put a comma after the last one in the list...follow the example.
I have also left off the :hover part of the selector, because you want the #home button to ALWAYS be highlighted when the #homepage is open, not just when it is hovered over. The more general selector in thelist -- the original one -- will take care of the hovering.
This should be all you need to do...be careful and thorough, and you will be able to control it all through the CSS!
Please work through this information and let me know if anything is confusing. I should be back online this evening; for sure tomorrow morning.
Beth
(edited to adjust the placement of the list item id)
Message was edited by: Zabeth69

Issues with navigation bar

I am new to using iWeb. I just finished my first page and published it. When I went to visit the site the only page I see is the welcome page and there is no navigation bar. How do I get it to come up so that people can see the other pages?

Welcome to the Apple Discussions. While your in the Welcome page in iWeb go to the Inspector/Page/Page pane and make sure you have both check boxes checked, Include page in navigation menu and Display navigation menu.
Can you provide the URL to the site so we can examine first hand?
OT

My navigation bar is unresponsive and when I access Firefox help through the menu, it is also unresponsive. I'm sending this on IE as Firefox is not working. Anyone else having issues? ??

I don't know if this is my computer or Firefox. When I type in a URL in the navigation bar and hit "enter" .... nothing happens - it won't browse. I have to look up the URL in Google and click on it to navigate to the URL. Is there some kind of setting that is messing me up? Please help.

I had this too. Starting firefox in safe-mode and disabling all add-ons solved the problem. After re-enabling all add-ons did not bring back the problem.

Skin Navigation Bar Issues

In my adobe captivate projects I have at least 5 slides with video. Reversing the videos or scrolling forward using the the navigation bar head is very clunky. Is there a way to have a separate navigation bar in each slide to allow more precise movement within the project?

Duelling Playbars!
You've made my day. Best new expression I've heard in a long time.

My navigation bar refuses to come down with the usual down swipe, whats the solution/fix for this issue???

this has just begun lately--what is the fix??is it a setting preference by any chance???

We simply must figure this out for you. Can you recall if there have been any changes to the phone since this began? Have you tried the power/off trick?
Does the navigation bar move at all?
TamaraH_VZW
Follow us on Twitter @VZWSupport

Navigation bar floating, can't seem to position to top

Could use a second set of eyes. Bought a theme template and did some adjustments in DW. For the life of me, I cannot figure out why the navigation bar - "top_bar" - is floating. it should be positioned at the top of the page. The footer also seems to be floating.
http://kaufmanphotography.com/kp-weddings/
Not sure if this is a css or php issue. I can deal with css, php is a little tougher on me. Guidance would ure be appreciated.

I've been doing the drinking part...believe me!
Here is the grid.css code. It seems only directed to the tablets, etc...which is maybe what you were saying...or is there supposed to be something in there directed at the full page site and it is missing?
#Tablet (Portrait)
==================================================
@media only screen and (min-width: 768px) and (max-width: 960px) {
          .social_wrapper { width: 766px; }
          .logo_wrapper { margin: 28px 40px 0 20px; }
          #wrapper { width: 100%; margin: auto; }
          #top_bar { width: 766px; margin: auto; }
          .tagline { width: 706px; }
          .top_right, #slider_wrapper { display:none; }
          .page_caption, #page_content_wrapper { width: 726px; margin: auto; }
          .nivoSlider { width: 766px; }
          .nivoSlider img { width: 766px; }
          .nivo-controlNav { width: 766px; }
          .standard_wrapper.small { width: 726px; }
          input[type="submit"].medium, input[type="button"].medium, a.button.medium { font-size: 14px; padding: .65em 1.4em .65em 1.4em; }
          #footer { width: 766px; }
          #footer ul.sidebar_widget { width: 726px; }
          #copyright { width: 766px; }
          .copyright_wrapper { width: 726px; }
          .copyright_wrapper .left_wrapper { width: 450px; }
          .copyright_wrapper .right_wrapper { width: 200px; }
          #page_content_wrapper .inner { width: 726px; margin: auto; }
          .caption_inner { width: 726px; }
          .standard_wrapper { width: 726px; }
          #content_wrapper .inner .inner_wrapper img { max-width: 100%; }
          #content_wrapper .inner .inner_wrapper .sidebar_wrapper, #page_content_wrapper .inner .sidebar_wrapper .sidebar, #page_content_wrapper .inner .sidebar_wrapper { width: 190px;}
          #content_wrapper .inner .inner_wrapper .sidebar_content { width: 520px; }
          #content_wrapper .inner .inner_wrapper .sidebar_content img, #content_wrapper .inner .inner_wrapper .sidebar_content iframe, #content_wrapper .inner .inner_wrapper .sidebar_content div, #page_content_wrapper .inner .sidebar_content, #page_content_wrapper .inner .sidebar_content img, #page_content_wrapper .inner .sidebar_content iframe, #page_content_wrapper .inner .sidebar_content div { max-width: 500px; height: auto; }
          .comment .right { width: 79.5%; }
          ul.children div.comment .right { width: 64.5%; }
          #content_wrapper ul.children ul.children, #page_content_wrapper ul.children { width: 104%; }
          #menu_border_wrapper select { display: none; }
          .post_social { margin-top: 20px; }
#Mobile (Portrait)
==================================================
@media only screen and (max-width: 767px) {
          .top_right, #slider_wrapper { display:none; }
          .logo_wrapper { margin: 28px 40px 0 10px; }
    .social_wrapper { width: 318px; }
          #wrapper { width: 100%; margin: auto; }
          .page_caption, #page_content_wrapper { width: 290px; margin: auto; margin-top: 25px; }
          .page_caption { width: 298px; }
          #top_bar { width: 318px; height: auto; margin: auto; }
          #slider_wrapper { width: 318px; height: 132px; margin-top: 37px; }
          .nivoSlider { width: 318px; }
          .nivoSlider img { width: 318px; }
          .nivo-controlNav { width: 318px; }
          .standard_wrapper.small { width: 290px; }
          #footer { width: 318px; margin: auto; display: none; }
          #footer ul.sidebar_widget { width: 290px; }
          #copyright { width: 318px; }
          .copyright_wrapper { width: 290px; }
          .copyright_wrapper .left_wrapper { float: left; width: 100%; }
          .copyright_wrapper .right_wrapper { float: left; width: 100%; text-align: left; }
          #footer ul li.widget, #footer ul li.widget.last { float: left; width: 100%; }
          #content_wrapper { margin-top: -20px; }
          #page_content_wrapper { margin-top: 20px; padding: 20px 0 20px 0 }
          .caption_inner { width: 290px; }
          .standard_wrapper { width: 290px; }
          .small_thumb { width: 68px; height: 68px; }
          #page_content_wrapper .inner .inner_wrapper .sidebar_content img.img.portfolio_img, #page_content_wrapper .inner .inner_wrapper .sidebar_content img.portfolio_img, #page_content_wrapper .inner .sidebar_content { width:290px; }
          .inner_wrapper > .one_third, .inner_wrapper > .two_third.last { width: 100%; }
          .inner_wrapper > .two_third.last { margin-top: 20px; }
          #page_content_wrapper .inner { margin-top: 0; }
          #page_content_wrapper .inner .inner_wrapper img { max-width: 100%; height: auto; }
          #page_content_wrapper .inner .inner_wrapper .sidebar_wrapper { width: 100%; padding-left: 0;}
          #page_content_wrapper .inner .inner_wrapper .sidebar_content { width: 100%; }
          #page_content_wrapper .inner .inner_wrapper .sidebar_content .post_wrapper iframe, #page_content_wrapper .inner .inner_wrapper .sidebar_content .post_wrapper div, #page_content_wrapper .inner .inner_wrapper .sidebar_content .post_wrapper img, .post_wrapper img { max-width: 100%; height: auto; }
          #page_content_wrapper .inner .inner_wrapper .sidebar_wrapper { margin-top: 10px; }
          #searchform input[type="text"] { width: 286px; }
          .comment { width: 286px; }
          .comment_arrow { display: none; }
          .comment .right { width: 79%; }
          ul.children div.comment .right { width: 61.5%; }
          #page_content_wrapper ul.children ul.children { width: 72%; }
          #page_content_wrapper ul.children ul.children { width: 100%; }
          ul.children .comment { margin-left: 0; }
          #page_content_wrapper ul.children { border: 0; width: 410px; }
          #page_content_wrapper ul.children ul.children { margin-left: -16px; }
          .comment_wrapper #respond { margin-left: 0; }
          .comment_wrapper ul.children #respond { margin-left: -40px; }
          form textarea { max-width: 286px; }
          .post_header .post_detail { display: none; }
          .post_social { margin-top: 20px; }
          #menu_border_wrapper .nav ul, #menu_border_wrapper div .nav { display: none; }
          #menu_border_wrapper select { display: inline-block; float: right; margin-top: 10px; }
          .logo_wrapper { margin-top: 10px; }
          #menu_border_wrapper { text-align: center; margin: 10px 0 0 0; width: 100%; border: 0; }
          #imageFlow { top: 27%; height: 75%; }
          .post_img img.frame { border: 0; }
#Mobile (Landscape)
==================================================
@media only screen and (min-width: 480px) and (max-width: 767px) {
          .top_right, #slider_wrapper { display:none; }
          .social_wrapper { width: 480px; }
          #wrapper { width: 100%; margin: auto; }
          #top_bar { width: 480px; height: auto; margin: auto; float: none; }
          .page_caption, #page_content_wrapper { width: 450px; margin: auto; margin-top: 25px; }
          .page_caption { width: 460px; }
          .tagline { width: 420px; margin-left: -30px; }
          #slider_wrapper { width: 480px; height: 200px; margin-top: 37px; }
          .nivoSlider { width: 480px; }
          .nivoSlider img { width: 480px; }
          .nivo-controlNav { width: 480px; }
          .standard_wrapper.small { width: 420px; }
          .tagline_text { float: none; width: 100%; }
          .tagline_button { float: none; width: 100%; text-align: center; margin-top: 30px; }
          #footer { width: 480px; margin: auto; display: none; }
          #footer ul.sidebar_widget { width: 420px; }
          #copyright { width: 480px; }
          .copyright_wrapper { width: 420px; }
          .copyright_wrapper .left_wrapper { float: left; width: 100%; }
          .copyright_wrapper .right_wrapper { float: left; width: 100%; text-align: left; }
          #footer ul li.widget, #footer ul li.widget.last { float: left; width: 100%; }
          #content_wrapper { margin-top: -10px; }
          .caption_inner { width: 440px; }
          .standard_wrapper { width: 440px; }
          #content_wrapper .inner { margin-top: 0; }
          #page_content_wrapper .inner .sidebar_content, #page_content_wrapper .inner .sidebar_wrapper { width: 480px; }
          #page_content_wrapper .inner .inner_wrapper .sidebar_wrapper, #page_content_wrapper .inner .sidebar_wrapper .sidebar { width: 100%; padding-left: 0;}
          #page_content_wrapper .inner .inner_wrapper .sidebar_content { width: 100%; }
          #page_content_wrapper .inner .inner_wrapper .sidebar_content iframe, #page_content_wrapper .inner .inner_wrapper .sidebar_content div, #page_content_wrapper .inner .inner_wrapper .sidebar_content .post_wrapper img, .post_wrapper img { max-width: 100%; }
          #page_content_wrapper .inner .sidebar_wrapper .sidebar .content { margin-left: 0; }
          #searchform input[type="text"] { width: 426px; }
          .comment { width: 480px; }
          .comment_arrow { display: none; }
          .comment .right { width: 79%; }
          ul.children div.comment .right { width: 61.5%; }
          #page_content_wrapper ul.children ul.children { width: 72%; }
          #page_content_wrapper ul.children ul.children { width: 100%; }
          ul.children .comment { margin-left: 90px; }
          #page_content_wrapper ul.children { border: 0; }
          #page_content_wrapper ul.children ul.children { margin-left: -16px; }
          .comment_wrapper #respond { margin-left: 35px; }
          .comment_wrapper ul.children #respond { margin-left: -40px; }
          form textarea { max-width: 480px; }
          .post_header .post_detail { display: none; }
          .post_social { margin-top: 20px; }
          #menu_border_wrapper .nav ul, #menu_border_wrapper div .nav { display: none; }
          #menu_border_wrapper select { display: inline-block; float: right; margin-top: 10px; }
          .logo_wrapper { margin-top: 10px; }
          #menu_border_wrapper { text-align: center; margin: 10px 0 0 0; width: 100%; border: 0; }

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>

Please see my site about Navigation Bar Links not working

Greetings,
I have an urgent issue with www.ForexProFund.com and it's navigation bar links. For some reason only some of the links work in the navigation bar. I have tried and recreated new pages and moved all the content over to the new pages with no luck. I moved the nav bar to the most "forward" position and pushed everything else to the back so it's on the top for sure. You can see that on the "contact" page, the navigation bar does not work, and I have no idea why...it's the same on the "Open Account" page.
I really need this fixed, as I am sure many of you do.
Thanks in advance for any input or ideas.
Jason :>

Hi there,
Can you tell me how to "reduce" these things? I am not sure why some links in the nav bar and others do not...maybe I am doing something wrong? Very frustrating since Mac. does not let you simply setup a nav bar....it all has to be template based and then these types of things happen. Either way, if you have details of how to remedy this, please let me know. I tried to remove the line under the nav bar on the first two pages and still no luck.
Thank you!

Navigation Bar Alignment Issues

Similar Messages

Maybe you are looking for