Vertical navigation in iWeb 08 possible?

I have a website with around 80 entries in the navigation menu, sorted in around 10 upper level groups. iWeb seems to be rather static in terms of placing the navigation. Is there any plugin, addon or workaround someone has found?
Thanks, Ralf

Hi Ralf,
There's no way to have vertical menu generated automatically in iweb sorry.
Easiest way to have vertical menus: build a textfield containg textlinks to the pages you want to have a link to, copy the textfield and paste it to all the pages it applys to.
Another way (but maybe not working=>maybe links will open in a new page every time) is creating a css menu and paste it in an html snippet. There are tools on the internet like this one: http://www.webmaster-toolkit.com/css-menu-generator.shtml
(others: http://www.google.com/search?q=css%20menu )
Another way you could organize your website is: having a site for every single upper level group so that the nav bar displays the links applying to the group and then make a textfield linking to the 10 groups. So when you add a new entry it gets automatically updated (if you add a new group it doesn't)
Regards,
Cédric
PS: for some of the mentioned ways uncheck the 'show page in navigation menu' box

Similar Messages

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">
<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>
     </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">
    
    <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>

<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>
        
</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;

Replace vertical navigation in custom master page from snippet gallery

Hi.
I'm creating a new master page from seattle.master and I'm trying to implement a customized snippet from the snippet gallery into the master page code without success. The following line is straight from a seattle.master page:
<div id="sideNavBox" class="ms-dialogHidden ms-forceWrap ms-noList">
From here, I see where I think the replacement snippet should go; however, there are discrepancies between the structure of the snippet and the code I'm replacing. Also, the snippet from the gallery is calling some ASP registrations that I
don't see in the original master page code.
How can I insert my custom vertical navigation snippet into this master page?

Hi,
You want to replace the entire <div id="sideNavBox" /> found in your custom HTML Master Page. Your custom vertical navigation will need to replace the entire container and all of its child controls.
Your custom vertical navigation snippet should start similar to:
<div data-name="QuickLaunch">



<div id="sideNavBox" class="ms-dialogHidden ms-forceWrap ms-noList">
Design Manager's snippet manager adds the Register tags into the snippet so that the snippet is self-contained. Your HTML Master Page likely contains these Register tags already but you can leave them as Design Manager will handle any duplicates for you.
The structure of the snippet itself appears different because the seattle.html HTML Master Page includes modifications.
Eric Overfield - PixelMill -
ericoverfield.com -
@EricOverfield

Accordion with Vertical Navigation problem

Following tutorial about phone layout accordion/vertical navigation menu encountering following problem in my original file:
Create accordion - ok (style to my pref)
Insert vertical navigation - ok (style to my pref)
When trying to resize the v/nav to hit the red line on browser edge - both left and right, in preview and in mobile simulator the navigation panels don't expand accordingly to the width of the mobile screen.
If try with only accordion with no menu all ok. As soon as I add the navigation and try to size to hit the red guides indicating that it will resize with browser size, when preview it doesn't as described above.
Any suggestions?
Thanks
Sam

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;

Using Spry Vertical Navigation with Templates-Need to indicate current page

Using Spry Vertical Navigation with the Dreamweaver templates. Using editable attributes etc., the current page mennu item does not seem to be changing. How do you indicate the. current page.

Persistent Page Indicator on Site Wide CSS Menus:
http://alt-web.com/Articles/Persistent-Page-Indicator.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

I want continuous, adjacent buttons in Vertical Navigation

Hi, I'm on CS4 here on an iMac. My vertical navigation is done pretty much, but I'd like the buttons to be vertically adjacent and continuous.
I am able to do this for Firefox and Safari by changing the Height setting to 24px, which perplexes me because my button images are actually 35px high.
But that *seems* to work in Safari and Firefox. But it doesn't fly in IE 6 - it cuts into the actual button images.
First off, I'm not sure what the 'height' property here refers to and how to set it so that the buttons are vertically adjacent and display like this in all browsers.
Here's my site - I can only show the home page with my new setting because I don't want the whole site changed until it all works correctly.
http://www.westwindentertainment.com
I really appreciate any help or pointers on this. I did Google this quite a bit and searched the forums and found no clues by myself.
Many Thanks, Frank B.

Amend your css which controls the nav to EXACTLY the following (see below). I've added in a #navcontainer li selector as an addition to zero out the margin and padding.
#navcontainer ul {
padding:0px;
width: 120px;
margin: 0;
color: Black;
list-style-type: none;
float: left;
font-family: arial, helvetica, sans-serif;
font-size:12px;
text-align:center;
#navcontainer li {
margin: 0;
padding: 0;
#navcontainer ul li a {
background-image:url(NavPx.gif);
background-repeat:no-repeat;
color: #EEE;
text-decoration: none;
display: block;
font-weight:bold;
height: 34px;
line-height: 34px;
#navcontainer ul li a:hover {
background-image:url(NavOv.gif);
background-repeat:no-repeat;
color: #030;

Expand Collapse Functionality on Left Vertical Navigation

Hi,
I am trying to implement an expand/collapse functionality for subcommunities and their links in the left vertical navigation menu. My communities appear as horizontal tabs (as in the support center navigation). Once i have a community selected, the left navigation is rendered with all subcommunities and their links. If i now want to collapse/expand a specific subcommunity, how do i do it?
More specifically, how do i identify what subcommunity i clicked on the vertical nav, so that the next time i am rendering the display of the left nav, i can appropriately expand/collapse only that subcommunity.
regards

hi,
go through the sample code , in this there are 2 radiobuttons, if one is pressed then first sunscreen will come and if second radiobutton is pressed then second subscreen will come
write this where u r decleraing code for selection screen:
PARAMETERS:      par_cust     radiobutton group g1 DEFAULT 'X' USER-COMMAND sel ,
                 par_vend     radiobutton group g1.
PARAMETERS:      par_cust     radiobutton group g1 DEFAULT 'X' USER-COMMAND sel ,
                 par_vend     radiobutton group g1.
*selection criteria for venodr if par_vend radiobutton is ticked
SELECT-OPTIONS: s_txcd1      FOR bset-mwskz MODIF ID M1,
                 s_txcd2      FOR bset-mwskz MODIF ID M1,
                 s_txcd3      FOR bset-mwskz MODIF ID M1,
*selection criteria for customer if par_CUST radiobutton is ticked
                 s_txcd12     FOR bset-mwskz MODIF ID M2,
                 s_txcd13     FOR bset-mwskz MODIF ID M2,
*write this code at : AT SELECTION-SCREEN OUTPUT
AT SELECTION-SCREEN OUTPUT.
LOOP AT SCREEN.
IF par_vend = 'X' AND SCREEN-GROUP1 = 'M2'.
SCREEN-INPUT = 0.
SCREEN-ACTIVE = 0.
SCREEN-INVISIBLE = 1.
MODIFY SCREEN.
ENDIF.
IF par_cust = 'X' AND SCREEN-GROUP1 = 'M1'.
SCREEN-INPUT = 0.
SCREEN-ACTIVE = 0.
SCREEN-INVISIBLE = 1.
MODIFY SCREEN.
ENDIF.
ENDLOOP.
regards
rahul

Vertical navigation

My vertical navigation that I made in Dreamweaver
works perfectly in IE but not in Firefox or Chrome. I appears as if
there are extra pixels between the buttons. Is there any way to fix
this?
Here is my code...

Does anyone know if it has to do with the border or the
onload? I'll try changing those for a bit.

Top-Level Navigation Bar - Is it possible to make it 3 levels?

Dear Portal Experts,
Could someone please advise if it is possible to make the Top-Level Navigation Bar show more than 2 menu levels? I looked at the document and it said we can only have 1 or 2 levels. But I'm just wondering if there is any way around it. Thanks.

yes you are right .we can set only 1 0r 2 levels but good news is there is a workaround
follow this blog
Tag Libraries: Creating a Hover Menu in SAP NetWeaver Portal
reward points if helpful

How to make backwards navigation through slide shows possible?

Hi, I just made my first Encore DVD slide show and spent hours trying to figure out how to do this without a luck. The DVD is one Main Menu with buttons to different slide shows that are all set to manual advance. The end action of each slide show takes to the first image in the next slide show and that was easy and very obvious to achieve in Encore but I didn't find any way to achieve the same for backwards navigation. Does anybody know how to do that.
Will appreciate any help

In case my message wasn't clear, I will try to describe better what I want to achieve.
Currently the viewer starts from a Main menu with 16 buttons linked to 16 slide shows. Starting from the first or any slide show and pressing the next button after an image is displayed, the viewer can see linearly all images in all slide show from that point to the end without ever going to the main menu.
However if the viewer at any point start pressing the previous button on the remote control, he/she can only go to the start of the current slide show and the only way to get to a previous slide show is to use the Main menu button and then jump from there.
Is it possible to make a DVD thata will allow the view to go backwards through different slide shows by pressing the previous button??

Spry Vertical Navigation Bar (What am I doing?)

I was told to check this forum out.. Ok, I have been trying
to fix this problem on my website for a day and a half now. My
vertical spry navigation is working in pretty much all browsers
except IE 6.0 and below. According to site statistics, almost half
my audience is using 6.0. With that said I desperately need help
from the most experienced Dreamweaver CS3 Pro out there:) Male or
Female - Don't care. Looks fine in 7.0, and of course in Safari. I
have the code if needed.
Here is the issue if you are still reading:
In IE 6.0 my left navigation is either all over the place on
the page (not on left side where it is supposed to be) or it is
completely freezing the browser all together. Did the browser
shots. I don't want to use anything else other than Spry since I
already had enough time put into that. What the heck am I doing
wrong? I kinda figure its my lack of CSS and Spry experience among
other things. Sooo..please, anyone?
My site Thanks so
much

See:
* http://kb.mozillazine.org/Sorting_and_rearranging_bookmarks_-_Firefox
Entries in the location bar drop down list with a yellow (blue on Mac) star at the right end are bookmarks.<br />
You can remove such a bookmarked item that shows in the list if you open that url in a tab and click the yellow star in the location bar.<br />
This will open the Edit This Bookmark dialog and you can click the Remove button to remove the bookmark if you want to remove such a bookmarked entry.<br />
* [[Clearing Location bar history]]
* [[Cannot clear Location bar history]]

Spry Vertical Navigation menu with secondary flyout menu not showing

I'm using Windows and CS3. I have a vertical spry menu with one of the items opening to a secondary vertical menu. The menu is positioned left and I want the flyout menu to open so it can be seen on top of the central content column. I have a background color on the central div and when I hover over the item on the menu bar, you can't see the secondary menu opening. But I know it is there as I have removed the central div and when previewed in the browser (IE) it works fine. But when I replace the central div, the secondary menu is hidden again. I don't want to play around too much as I know Javascript is involved and I can easily ruin those elements which are now working. I hope someone can suggest something reasonably straight forward to assist.
The code is the standard stuff - I have only modified colours basicall with one or two other tweaks to fit the space:
ul.MenuBarVertical
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 200px;
background-color: #979c9c;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-color: #FFFFFF;
ul.MenuBarActive
z-index: 1000;
ul.MenuBarVertical li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 200px;
color: #343642;
ul.MenuBarVertical ul
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 200px;
left: -1000em;
top: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 100%;
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0;
ul.MenuBarVertical ul li
width: 200px;
ul.MenuBarVertical ul
ul.MenuBarVertical a
display: block;
cursor: pointer;
background-color: #979c9c;
color: #343642;
text-decoration: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 20px;
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-color: #343642;
color: #fff;
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
background-color: #343642;
color: #fff;
ul.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
ul.MenuBarVertical a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
ul.MenuBarVertical iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
@media screen, projection
ul.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
Thanks.

Frank,
The code that you have shown us re SpryMenuBarVertical.css is correct so that we can assume that the problem lies elsewhere.
Because you have not shown the rest of the code, we can only make assumptions which may or may not help. From the above screen shot, I see that you are using AP's (Absolute Positioned) elements. This is a NO NO!!!
Have a look at the following wich achieves the same, but without AP's. Just copy and paste in a new document and view in any browser.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
    margin: 0;
    padding: 0;
html {
    height: 100%;
    background: #FFC;
body {
    width: 960px;
    margin: auto;
    background: #060;
h1, h2, h3, p {
    margin: 0 20px;
#header {
    height: 95px;
    background: #060;
#sidebarL {
    width: 160px;
    float: left;
    color: #CCC;
#content {
    width: 800px;
    float: left;
    background: #FFF;
#sidebarR {
    width: 200px;
    float: right;
    background: #FF3;
#footer {
    height: 50px;
    background: #060;
    color: #CCC;
    clear: both;
</style>
</head>
<body>
<div id="header"><h1>This is my Header</h1></div>
<div id="sidebarL">
<h3>This is my sidebar</h3>
<p>This is where our menu goes</p>
</div>
<div id="content">
<div id="sidebarR">
      <h3>This is my other sidebar</h3>
    <p>Sed do eiusmod tempor incididunt ullamco laboris nisi velit esse cillum dolore. Duis aute irure dolor sunt in culpa lorem ipsum dolor sit amet. Qui officia deserunt consectetur adipisicing elit, ut enim ad minim veniam.</p>
</div>
    <h2>This is the content</h2>
<p>Velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, ullamco laboris nisi sed do eiusmod tempor incididunt. Ut labore et dolore magna aliqua. Sunt in culpa in reprehenderit in voluptate ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor quis nostrud exercitation lorem ipsum dolor sit amet. Ullamco laboris nisi consectetur adipisicing elit, qui officia deserunt. Ut labore et dolore magna aliqua. Quis nostrud exercitation. Velit esse cillum dolore ut aliquip ex ea commodo consequat.</p>
<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut enim ad minim veniam. Eu fugiat nulla pariatur. Duis aute irure dolor sunt in culpa lorem ipsum dolor sit amet. Cupidatat non proident, excepteur sint occaecat velit esse cillum dolore.</p>
</div>
<div id="footer"><p>and lastly here is my footer</p></div>
</body>
</html>
Gramps

Want to use google analytics in iweb. Possible?

i transfered domain to .mac and had to convert site to iweb 08 from dreamweaver. is there anyway to continue using google analytics? google webmaster tools? insert any code? adsense seems to work but google informs me apple will share the profits!
are there any web analytics tools native to iweb?

Shiels,
try the AddGoogleAnalytics automator script from here: <http://www.apple.com/downloads/macosx/automator/addgoogleanalyticsaction.html>
Works fine for me. Even more, Henrik is very helpful in case of problems.
Regards,
Kai

Navigation in iweb

Hi. Please can someone tell me how I can create a hyperlink to the top of the page. I can hyperlink to other pages but not to a word on a page.
Thank you

Bonjour
Publish your website
Get the url of your page(s)
insert a link to a external page with the inspector
Inspector > Link > hyperlink > Enable as a hyperlink > link to a external page > paste your page URL > Add #body_content at the end of this link
http://www.yourdomainename.com/yoursitename/yourpagename.html #body_content
Now you have a link to the top of your page.
you can aslo choose #nav_layer or #header_layer
http://www.yourdomainename.com/yoursitename/yourpagename.html #nav_layer
if the navigation menu is above the header
or
http://www.yourdomainename.com/yoursitename/yourpagename.html #header_layer
if the header is above the navigation menu

Nokia 2710 navigator - non-breaking spaces possibl...

Hi there, this has been driving me nuts, and it seems like there should be a way to do it! I can format a message in the editor with spacing and it looks perfect, but the spaces are being trimmed it seems! Either before or after sending! Is there a way to make sure the receiver sees my formatting, or does it depend on the properties of his/her phone? (i.e. I don't know if my nokia is trimming before sending or if the receiver's phone is). If I send one to my inbox, the spaces are trimmed as well. Failing that, is there a way to insert a proper non-breaking space (ala html's   ) into an sms? I've googled so hard and no luck!! Basically I wanted to make a creative "ascii art" style msg, and I can't really do it without this...
Thanks in advance for any possible solutions!!!

THere is no non-breaking space - this si not a limitation of your particular phone, it is a limitation of the SMS service in general.
You can insert a graphical smiley into the message by selecting Options>Insert symbol>Smiley then choose from the list of available smileys.

Vertical navigation in iWeb 08 possible?

Similar Messages

Maybe you are looking for