Navigation menu indicator triangle problem

Hi all,
the navigation menu of my site looks correct in layout mode:
It still looks correct in preview mode (notice the triangles' position):
BUT when I go on to Safari, either by previewing it or uploading to my server, the triangles interfere with the text:
Is there anything I can do about it? This looks awful!
Thanks a lot!

No. But it isn’t in Muse’s hand how a browser renders a certain font. You have to use a sort of "security belt".
The alternative is, you have a layout problem (different font sizes for example in different menu states; using system fonts … …)

Similar Messages

  • Navigation menu--not centered

    Mac gurus,
    When I transferred my site to iweb 08, many things were different, but the one thing that I can't fix is the navigation menu. After reading some posts, I am nervous about publishing it, but even before I publish it, I would like to CENTER the navigation menu. The text block itself is still centered on the page, but the hyperlinks are now lined up on the left side of the text block.
    I am unable to highlight anything in the text block in order to make the hyperlinks centered.
    Any thoughts?
    Thanks for your help, as always!
    Lara Walker
    Message was edited by: Doug & Lara

    I feel your pain!
    The funny/worst thing is that I have added 2 new pages since I posted the original request for help: one blog and one movie page. The blog page that I added is in a different template and it centered the navigation menu with no problem. The movie page that I added is in the same template as the original website and the navigation menu is un-centered just like the rest of the pages. Bizarre!!! I thought that a new page would not have the same issues as the old pages do upon transfer.
    Lara

  • Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome

    Problem with jquery slide show conflict with vertical navigation menu in Firefox & Chrome. Works in IE. This is my first time trying to post a question - so please be kind. I am also not good with code and am finding css a real challenge after learning to design based on tables. I'm using CS5.
    The "test" page with the slide show is: http://www.reardanwa.com/index-slides.html   The same page without the slide show is http://www.reardanwa.com/
    I realize the images are not ideally sized - I'll fix those once I get the pages to function.  Maybe I need a different slide show? I would prefer a widget that I can modify to required size & postition. Again - I'm not good at building with code from scratch.
    The problem is the naviagation links that are directly next to the slide show do not work in Firefox of Chrome. They do work in IE.
    I've read about using jQuery.noConflict(); code but can't figure out the correct way to use it in my case or whether that's even part of the solution. I know my code is not well organized as I have cobbled together from various sources in an attempt to format the page the way the client wants it. Also, FYI, I will eventually try to make the page work in Surreal CMS.
    I've spent sevaral days over the last several weeks trying to solve sth slide show/navigation conflict - so any specific light you can shed will be much appreciated.
    Thanks in advance.
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Reardan Area Chamber of Commerce</title>
    <meta name="description" content="home page for Reardan Area Chamber of Commerce" />
    <meta name="keywords" content="Reardan WA, chamber of commerce" </>
    <script src="scripts/jquery-1.6.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.cycle.all.js" type="text/javascript">  </script>
    <script type="text/xml">
    </script>
    <style type="text/css">
                                  #slideshow { 
                                      padding: 10px;
                                            margin:0; 
                                  #slideshow-caption{
                                            padding:0;
                                            margin:0;
                                  #slideshow img, #slideshow div { 
                                      padding: 10px;
                                      background-color: #EEE;
                                      margin: 0;
    body {
              font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
              background: #004B8D;
              margin: 0;
              padding: 0;
              color: #000;
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
              padding: 0;
              margin: 0;
    h1, h2, h3, h4, h5, h6, p {
              margin-top: 0;           /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
               /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
    .left
    position:absolute;
    left:0px;
    .center
    margin:auto;
    width:95%;
    .box
              position:relative;
              left:-90px;
              width:950px;
              height:350px;
              border-radius: 13px;
        -moz-border-radius: 13px;
        -webkit-border-radius: 13px;
              z-index:1000;
    .slide{
        position:absolute;
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
              border: none;
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
    a:link {
              color: #42413C;
              text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
              color: #6E6C64;
              text-decoration: underline;
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
              text-decoration: none;
    /* ~~this fixed width container surrounds the other divs~~ */
    .container {
              width: 960px;
              min-height:900px;
              padding:5px 0px 0px 0px;
              background: #E8F8FF;
              margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
    /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
    .header {
              background: #E8F8FF;
              padding:10px 5px 0px 5px;
    .sidebar1 {
              float: left;
              width: 225px;
              margin: 60px;
              color: #FFFF0D;
              background: #595FFF;
              border-radius: 13px;
        -moz-border-radius: 13px;
        -webkit-border-radius: 13px;
              padding: 5px 5px 0px 5px;
        border: 3px solid #F7F723;
        z-index:-1;
    .sidebar2 {
              float: left;
              width: 275px;
              color: #FFFF0D;
              text-align: left;
              background: #595FFF;
              padding-bottom: 10px;
              border-radius: 13px;
        -moz-border-radius: 13px;
        -webkit-border-radius: 13px;
        border: 3px solid #F7F723;
        z-index:2;
    .sidebar3 {
              float: left;
              width: 275px;
              color: #FFFF0D;
              text-align: left;
              background: #595FFF;
              padding-bottom: 10px;
              border-radius: 13px;
        -moz-border-radius: 13px;
        -webkit-border-radius: 13px;
        border: 3px solid #F7F723;
        z-index:3;
    .content {
              padding: 0px 0px 0px 0px;
              width: 780px;
              float: left;
              background: #E8F8FF;
    /* ~~ This grouped selector gives the lists in the .content area space ~~ */
    .content ul, .content ol {
              padding: 0px 15px 5px 10px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
    /* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
    ul.nav {
              list-style: none; /* this removes the list marker */
              border-top: 0px solid #FFFF66; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
              margin-bottom: 50px; /* this creates the space between the navigation on the content below */
              font: Arial Black, Verdana, , Helvetica, sans-serif;
              font-size:1.3em;
              font-weight:bold;
              z-index:2;
    ul.nav li {
              border-bottom: 0px solid #FFFF66; /* this creates the button separation */
              font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
    ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
              padding: 3px 0px 5px 0px;
              display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
              width: 185px;  /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
              text-decoration: none;
              color: #FFFF0D;
              background: #595FFF;
    ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
              background: #595FFF;
              font: 120%/1.4 Arial Black, Verdana, , Helvetica, sans-serif;
              color: #FFFFFF;
    /* ~~ The footer ~~ */
    .footer {
              padding: 10px 0;
              background:  #595FFF;
              color: #FFFF0D;
              position: relative;/* this gives IE6 hasLayout to properly clear */
              clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
    /* ~~ miscellaneous float/clear classes ~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
              float: right;
              margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
              float: left;
              margin-right: 8px;
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
              clear:both;
              height:0;
              font-size: 1px;
              line-height: 0px;
    -->
    </style>
    </head>
    <body>
    <div class="container">
      <div class="header"><!-- end .header -->
      <a href="#"><img src="images/Chamber-Logo-2.gif" alt="Reardan Chamber Logo" width="187" height="163" hspace="10" vspace="5" align="top" /></a><img src="images/Reardan-Chamber-Title.gif" width="476" height="204" alt="Reardan Area Chamber of Commerce, Dedicated to Preserving and Enhancing Area Businesses" /><p></p>
      <p style="color: #F00">This Site is under construction! Please pardon our dust as we create!</p>
      </div>
      <div class="sidebar1">
        <ul class="nav">
          <li><a href="about.html">About Us</a></li>
          <li><a href="history.html">Reardan History</a></li>
          <li><a href="activities.html">Activities</a></li>
          <li><a href="business.html">Business<br />
            Directory</a></li>
          <li><a href="about.html">Join the<br />
            Chamber</a></li>
           <li><a href="links.html">Links<br />
      <span style="font-size: 85%">Tourism</span><br />
          </a></li>
        </ul>
         <!-- end .sidebar1 --></div>
    <br />
    <br />
    <br />
    <br />
    <div class="box" +"slide">
      <script type="text/javascript">
    // BeginOAWidget_Instance_2559022: #slideshow
                               slideshowAddCaption=true;
    $(window).load(function() {
      $('#slideshow').cycle({
                        after:                              slideshowOnCycleAfter, //the function that is triggered after each transition
                        autostop:                              false,     // true to end slideshow after X transitions (where X == slide count)
                        fx:                                        'blindX',// name of transition effect
                        pause:                              false,     // true to enable pause on hover
                        randomizeEffects:          true,  // valid when multiple effects are used; true to make the effect sequence random
                        speed:                              100,  // speed of the transition (any valid fx speed value)
                        sync:                              true,     // true if in/out transitions should occur simultaneously
                        timeout:                    5000,  // milliseconds between slide transitions (0 to disable auto advance)
                        fit:                              true,
                        height:                       '300px',
                        width:         '525px'   // container width (if the 'fit' option is true, the slides will be set to this width as well)
    function slideshowOnCycleAfter() {
              if (slideshowAddCaption==true){
                                  $('#slideshow-caption').html(this.title);
    // EndOAWidget_Instance_2559022
      </script>
      <div id="slideshow">
        <!--All elements inside this will become slides-->
        <img src="images/100_1537.jpeg" width="600" height="450" title="caption for image1" /> <img src="images/Parade-2011-2.jpg" width="300" height="225" title="caption for image2" /> <img src="images/100_1495.jpeg" width="600" height="450" title="caption for image3" />
        <div title="sample title"> Images for slide show will need to be re-sized to fit box to avoid distortion</div>
        <img src="images/beach4.jpg" width="200" height="200" title="caption for image4" /> <img src="images/beach5.jpg" width="200" height="200" title="caption for image5" /> </div>
      <!--It is safe to delete this if captions are disabled-->
      <div id="slideshow-caption"></div></div>
    <div class="sidebar2" "anotherClass editable"><p align="center"><strong>Chamber News</strong><br />
    Local News item
    <br />
    Another New item</p>
      <p align="center">lots of news this week<br />
        <br />
        <br />
        <br />
      </p>
    </div>
    <div class="sidebar3" "anotherClass editable"><p align="center"><strong>Upcoming Events</strong></p>
      <div align="center">    <a href="activities.html" style="color: #FFFF0D">Community wide yard sales</a><br />
        <br />
        <br />
        <br />
        <br />
      </div>
    </div>
    <div class="content"><br />
    <br />
    </div>
    <div class="footer">
            <p align="center"><span style="font-size: small">Reardan Area Chamber of Commerce</span><br />
              <span style="font-size: x-small">[email protected]  - 509.796.2102</span><br />
            </p>
            <!-- end .footer -->
    </div></body>
    </html>

    If you DO want the slideshow overlaping the navigation try the below css:
    .sidebar1 {
        float: left;
        width: 225px;
        margin: 60px 0px 60px 60px;
        color: #FFFF0D;
        background: #595FFF;
        border-radius: 13px;
        -moz-border-radius: 13px;
        -webkit-border-radius: 13px;
        padding: 5px 5px 0px 5px;
        border: 3px solid #F7F723;
    .box {
    float: left;
    margin-left:-60px;
    width:700px;
    height:350px;
    border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;

  • A solution for Navigation Menu Problems

    Many people have been complaining about iWeb messing up its rollover navigation menus at the top of each webpage. This phenomenon usually occurs when one has an existing site, and attempts to add another page to the site, thus requiring the menu at the top to be changed. What you will see if you visit the page is an incorrect navigation menu. The item may be cropped funny. Or it will show the wrong item name for a particular link. Or you will see duplicate names. Or the rollovers won't match the unhilited item names.
    There seems to be a problem that sometimes occurs in which iWeb is unable to overwrite the previous versions of the navigation menus on your page up on the .Mac volume. If you run into this problem, this is how you fix it.
    - Log into you iDisk. Navigate the folders to get to the offending page folder. The path will be Web/Sites/iWeb/your page name/your page name_files/
    - Inside this folder you will see a series of png images which begin with navbar_. Select them all, and drag them to your trash can. They will be immediately deleted.
    - Return to iWeb, and publish your page again. This will replace the navbar images with the updated versions.
    This seems to work reliably. Anyone else have any experience with this technique?

    Narly
    There are various different approaches to this, which one really works, anyones guess!
    The number one suspect is the cahing on the .mac servers, see my site, my bar is all over the place I made the changes last night! (Or the cahce of your own isp)
    Peviously discussed options:
    1. Clear your browser cahce, a few times!
    2. Get someone else to hit you site, I did and I saw "menu look watch watch contact"
    3. Using inspector, Page Tab, uncheck the box "Include page in navigation menu", publish your site, then recheck the boxes and republish.
    4. Make a change to each page, move an image one pixel left and then back again and republish.
    5. Press the Option key, between the ctrl + Apple key, while you select Publish, it changes Publish to Publish All Pages, kind of a forced refresh.
    But generally its trial and error, and time!
    Will
    1GHz G4, 15" PowerBook, Airport Network, 1G iPod Mini   Mac OS X (10.4.5)   Getting Started with iWeb - Tips here

  • Mac Os X update disappearing navigation menu on IWeb

    After updating Mac Os X to 10.5.6 I was working in IWeb...doing the same stuff I do everyday.
    Attempted to "publish to folder"...said I had an publishing error. Never done this before.
    Then, I noticed that the 3 pages that I had worked on...all had the navigation menu at the top of the page missing.
    I did nothing related to the navigation menu.
    Any insight and wisdom out there?
    dalemoore.tv
    Thanks!

    Welcome to the Apple Discussions. Log into another account on your Mac and see if the problem persists. You may have to copy the domain file from your account (User/Library/Application Support/iWeb) to the Shared folder in order to get it to the other account. Then move it to the desktop in the other account and double click on it to open with iWeb. If you get the same problem in the other account than a reinstall of iWeb is indicated. To do so you'll have to delete the current application and all files with "iWeb" in the file name that reside in the HD/Library/Receipts folder. Then reinstall from the disk it came on, run the latest update, repair disk permissions and reboot.

  • How do I fix my floating drop down navigational menu?

    Hello, I am currently reworking my website to make it responsive, but I have hit a roadblock with my navigation menu:
    My goal for the menu is to have a floating navigational menu in which as the user hovers over the link the image changes. One of the tabs is intended to be a submenu that drops down horizontally. I also am trying to get the menu centered on the page using fluid positioning.
    As of now, I have a functional drop down menu with the rollover effects. It wasn't until I began work on floating the menu that I ran into a problem. At first, the menu was not scaling proportioally with the rest of the page, but upon looking around, I found: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browse r-support.
    Using the code on the link, I recoding the menu. In the end, the drop down menu is causing the problem. When I have the drop down menu still included in the code, the menu is broken up in three lines. The submenu is grouped with its parent, but they are grouped boxy (at least in the browsers I have checked) and only two are visible.
    I decided to humor myself and removed the code for the drop down menu to find that the menu works perfectly--it does everything I was aiming for for the time being--rollover, center, floating.
    Is there something that I am overlooking that will fix the drop down menu?
    I was thinking that I would have to center the styles for the sub menu, but I didn't see any results.
    What am I missing that I am not seeing?
    The links to the two pages:
    http://ryanolsenstudios.com/WithDropDown.html
    http://ryanolsenstudios.com/WithoutDropDown.html
    If anyone can point me in the right direction it would be appreciated, I have been looking around trying to figure this out, but to no avail. Thank you.

    I don't advise you use images for navigation as they are NOT scalable to any good effect.
    Below is a simplified version of your image buttons with dropdowns in place.
    The jQuery used to create the rollover swaps is going to get very long and unmanagable (it's just as an example) I suspect there will be more streamlined solutions using jQuery if you Google, like just adding _static.jpg and_over.jpg to the end of the image src, which will keep the code to a minimum of lines.
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1"><title>Ryan Olsen's Studio</title>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    $(document).ready(function(){
    $("#home img").hover(function() {
    $(this).attr("src","http://ryanolsenstudios.com/images/hometabroll.jpg");
    }, function() {
        $(this).attr("src","http://ryanolsenstudios.com/images/home.jpg");
    $("#about img").hover(function() {
    $(this).attr("src","http://ryanolsenstudios.com/images/bioroll.jpg");
    }, function() {
        $(this).attr("src","http://ryanolsenstudios.com/images/bio.jpg");
    $("#shows img").hover(function() {
    $(this).attr("src","http://ryanolsenstudios.com/images/showsroll.jpg");
    }, function() {
        $(this).attr("src","http://ryanolsenstudios.com/images/shows.jpg");
    </script>
    <style>
    body {
        background-color: #000;
    .myMenu {
    margin:0;
    padding:0;
    display: block;
    text-align: center;
    .myMenu li {
    margin: 0;
    padding: 0;
    list-style:none;
    display: inline-block;
    position: relative;
    .myMenu ul {
    position: absolute;
    display: none;
    margin: 0;
    padding: 0;
    left: 0;
    top: 5em;
    z-index: 100;
    .myMenu li:hover ul {
    display: block;
    </style>
    </head>
    <body>
    <!--Navi Menu-->
    <ul class="myMenu">
    <li><a href="#" id="home"><img src="http://ryanolsenstudios.com/images/home.jpg" alt="HomeTab"></a>
    <ul>
    <li><a href="#"><img src="http://ryanolsenstudios.com/images/home.jpg" alt="HomeTab"></a></li>
    <li><a href="#"><img src="http://ryanolsenstudios.com/images/home.jpg" alt="HomeTab"></a></li>
    </ul>
    </li>
    <li><a href="#" id="about"><img src="http://ryanolsenstudios.com/images/bio.jpg" alt="AboutMeTab" /></a>
    <ul>
    <li><a href="#"><img src="http://ryanolsenstudios.com/images/home.jpg" alt="HomeTab"></a></li>
    <li><a href="#"><img src="http://ryanolsenstudios.com/images/home.jpg" alt="HomeTab"></a></li>
    </ul>
    </li>
    <li><a href="#" id="shows"><img src="http://ryanolsenstudios.com/images/shows.jpg" alt="ShowsTab" /></a>
    <ul>
    <li><a href="#"><img src="http://ryanolsenstudios.com/images/home.jpg" alt="HomeTab"></a></li>
    <li><a href="#"><img src="http://ryanolsenstudios.com/images/home.jpg" alt="HomeTab"></a></li>
    </ul>
    </li>
    </ul>
    </body>
    </html>

  • How can I get Navigation Menu Button to remain in down state after clicked?

    Hi there,
    I'm messing about with a Navigation Menu and would like to click on the button and once clicked, the button remains in its down state.  I can't seem to find a way of doing this?  Any pointers?
    Cheers

    We would need to see your live page and code to offer more meaningful answers.  But I wonder if what you really want is a "persistent page indicator" on your nav menu?
    HOME  |  PRODUCTS  |  CONTACT US
    When you're on the Home page, the HOME menu is highlighted.
    HOME  |  PRODUCTS  |  CONTACT US
    When you're on the Products page, the PRODUCTS menu is highlighted. And so on...
    See this related discussion -
    http://forums.adobe.com/message/2398026#2398026
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.com

  • The navigation menu does not appear when published to folder and my 12 photos are not on the site either

    The navigation menu does not appear when published to a file.  My 12 photos are also absent as well, just as if they wernt added.
    I have tried rebuilding the site but the same problem appears.  Everything else seems perfect up to tha publidhed file.
    Has anyone had the same problem,
    John
    Message was edited by: BOURBAH

    Have you tried: Trouble installing iTunes or QuickTime for Windows or iTunes for Windows Vista or Windows 7: Troubleshooting ...

  • The navigation menu does not appear when published to folder and my 12 photos arenot on the site eitherr

    The navigation menu does not appear when published to a file.  My 12 photos are also absent as well, just as if they wernt added.
    I have tried rebuilding the site but the same problem appears.  Everything else seems perfect up to tha publidhed file.
    Has anyone had the same problem,
    John

    Have you tried: Trouble installing iTunes or QuickTime for Windows or iTunes for Windows Vista or Windows 7: Troubleshooting ...

  • Navigation menu not showing up

    Hi,
    I am creating a site using iWeb and have uploaded it to my web host and all runs fine... except for the navigation menu, which is kinda important. I know i could make my own, but I would like to use the default one anyway.
    So everything looks fine in iWeb. Here is a screenshot showing the default navigation menu (I am using the darkroom theme)
    But when I publish to my server and view through safari (have also tried Firefox and get the same results), this is what I see where the navigation menu should be:
    There is no light grey horizontal box, no writing, just a black dot point. The dark grey on the sides is normal, its not in the iweb screenshot because my window wasn't very wide.
    I tried disabling the menu, re-publishing (which removed the dot point), enabling it again and re-publishing but I still get the same issue.
    Any ideas on why I can't get the menu??
    Cheers.

    I had the same issue.  It's a cache settings problem.  I resolved it this way:
    Go to Firefox > Preferences > Advanced > Network
    On that screen under the 'Cached Web Content' section, UNCHECK the 'Override automatic cache management' check box. 
    Then quit Firefox entirely and restart it.  Should do the trick.
    Peace out
    SL

  • Add a link to the navigation / menu bar

    I would like to add a home button infront of the My Workspace button in the navigation/menu bar at the top of my Vibe page.
    What jsp of file should I edit to achieve this?

    I didn't look for that JSP, but used the branding for a high level "menu" AND wrote my own JSP to have a dynamic horizontal menu based on a portion of the workspace tree. The problem with changing Vibe's grey menu bar is that any upcoming updates might destroy your tweak. I have a few of those I need to keep in mind whenever an update or patch is done.
    With my JSP adding, removing or modifying workspaces/folders in the identified branch automagically changes on the fly generated horizontal menu with the next refresh/visit of the landing page using the JSP. The menu can be for any branch of your workspace tree. If a visitor doesn't have access to a workspace or folder, the menu skips right over it automagically as well.
    You can find this homebrewed JSP and key details at : Use this nifty JSP to make a dynamic horizontal menu from a branch of your workspace tree | Novell User Communities
    It allows you to reorder the menu items and even drop some workspaces/folders from the menu with a simple trick explained in the article.
    To see the JSP at work, go to CSDECSO - Conseil scolaire de district des écoles catholiques du Sud-Ouest or any of our 30 or so school web sites being implemented within our existing Vibe instance. You won't be able to change the tree branch, but you will see the menu. Some schools have slightly different menu choices, if you poke around long enough to find these differences. I just made them accessible to the public a few weeks ago.
    Don't forget to use the integrated GoogleTranslate (generally near the Vibe printer icon in upper right corner beneath the branding and grey menu) to convert the bulk of our sites' content to any one of the 60 or so languages supported by Google. I have an article explaining how this was done as well. Of course, it is an automated translation, so don't expect perfection and don't be offended if it comes out the wrong way.

  • Need Help making a navigation menu for a website

    Alright so I've been having some problems getting this to work correctly. I am making a navigation menu for a website and I'm trying to get when I hover over the main header a drop down appears animated of course below it. I also want when you highlight a specific text line for it to highlight blue along with a rectangle behind it to change to a lighter shade of red.
    Some of the problems  I have been running into is play and stop commands on mouseover and them not stopping when they should and getting the text to change color.
    Thanks for the help.
    Here are some screen grabs of what I am doing
    http://imgur.com/W2bZuF3
    http://imgur.com/W2bZuF3
    http://imgur.com/2GI3y71

    Your page's code is still a bit of a wreck.  Do you ever look at it?
    <html>
    <style type="text/css">#p7MBM_1 {
      width: 951px;
    You need a doctype first - I recommend HTML4.01 Transitional.  Open this (and other pages) in DW and use FILE | Convert > HTML 4.01 Transitional, then save.  But wait until you do the other changes recommended below before doing this.
    Add a <head> tag below the <html> tag.
    Add a <title> tag below the <head> tag.
    Add this below the <title> tag - <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    Add </head> below this -
    <style type="text/css">
    <!--
    .style10 {font-family: "Goudy Old Style"}
    -->
    </style>
    You may want to change that font-family style to "Goudy Old Style, Geneva, Times, 'Times New Roman', serif", since Goudy is not web safe.
    Move <body> below that </head> you just added.
    That will clean your code up a bit.  Let's look at the page again when you have done these.

  • Not able to edit  text or place any hyperlink in navigation menu in Muse

    I am not able to select/edit text in navigation menu also not able to apply any hyperlink on the text or tabs. It is not letting me do that.  I don't see any hyperlink option even when I select the tab. Is it some kind of bug? I made two sites with Adobe muse and both has same problems. I have wasted so much time in finding the problem. I don't have much time to waste any more. I read other discussions thread in Adobe but didn't find any solution yet. Could you please help me?

    Hello
    The menu items pick the name of the page from your site's plan mode and those text (page names) and their hyperlinks are not editable, unless you change the menu type to manual from the menu options (the blue arrow on the top right corner of the menu).
    Cheers
    Parikshit

  • How to Make DropDowns in Navigation Menu Fit

    cs4
    http://ahy4life.com/test2/index.php
    The client wishes to have nine dropdowns in the navigation menu at top. Only eight are ostensibly visible just now, even tho they exist in the code. While I can change the width of each menu item, how can I make "Meet the Owners" and "Events & Promos" appear on two lines. For example:
    Events &
    Promos
    Please disregard the improper alignment of the dropdowns; I will correct those once this other issue is addressed.
    Thanks, -Biggs

    hello,
    Looks like you have some significan code problems in your page.  These need to fixed before you can address the difficulities you describe.
    Martin
    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fahy4life.com%2Ftest2%2Findex.php

  • Specials characters in navigation menu

    I have a site host at MobileMe made with iWeb 08. In my navigation menu I have a word written in my language (Portuguese) which has a non english letter " ç " . It has no problem at all in directing and opening the needed page but I am moving this same site to another Host (Host Excellence) and there I had to take that letter out if I want it working. The same letter used in Text Boxes has no problems. It shows perfectly. Another non-english signs in letters " í " (we called it accent) used in a HTML Snipet, shows different in Firefox.
    Does anybody has a clue to solve it ?
    Thanks.

    "MobileMe has not problem with non-ascii filenames, but some servers have problems with them."
    Thanks for that information. I didn't know that.
    But unfortunatly Cyberduck is the one I use. I have just found the solution for those letters used in the HTML Snipets. There are several sites over the internet informing HTML codes that "writes" these special characters, like:
    http://www.utexas.edu/learn/html/spchar.html
    http://www.degraeve.com/reference/specialcharacters.php
    http://www.webmonkey.com/reference/Special_Characters
    In the snipet I had just to use the codes instead of the "real" letter.
    But at the navigation menu, as I don't have access to "codes" I don't know how to solve.
    I was thinking in not use the "pre formated" of iWeb and instead of it, write my own.

Maybe you are looking for