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.

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

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

How do we make vertical navigation bar attached to left browser edge without pinning it? Has to be scrollable!

Demo site working like this: http://www.sogndallodge.no/no/

Hi
To confirm you with the workflow, there are two option :
1. You may the vertical menu normally, and it will scroll as the page scroll.
2. Using pinning : This will make the item out of the page scrolling workflow and stick to the location you pin the same.
Looking at the site you have provided, its the normal workflow of the menu that is being used , which makes the menu items move up as you scroll down the page.

My blue vertical navigation bar drops to bottom of the page

I use the latest edition of Firefox together with windows XP. The problem happens when I use Firefox, Google or Chrome to access a web site or email. The page being viewed drops to the end and I cannot use the navigation bar to return to my original place. I have used CCleaner to clear unwanted files. Sometimes this works for a limited period. I would be grateful for any assistance that you may be able to give me. Thanks.

Create a new profile as a test to check if your current profile is causing the problems.
See "Basic Troubleshooting: Make a new profile":
*https://support.mozilla.org/kb/Basic+Troubleshooting#w_8-make-a-new-profile
There may be extensions and plugins installed by default in a new profile, so check that in "Tools > Add-ons > Extensions & Plugins" in case there are still problems.
If that new profile works then you can transfer some files from the old profile to that new profile, but be careful not to copy corrupted files.
See:
*http://kb.mozillazine.org/Transferring_data_to_a_new_profile_-_Firefox

How can I make a horizontal accordion / vertical navigation panel?

I found the mobile compound widget article which almost gets me there. Problem is when I orient the accordion menu to open horizontally I'm not able to rotate the menu. I would love for the menu to push the content off the page to the right when it's expanded but I'm guessing that's too much heavy lifting for Muse as of yet. Even if I could get the menu to fly over my content that would be great. Any ideas?
An example:

Hi ,
I had created a small video regarding how to create such a menu using accordions in Muse sometime back. I hope this is what you are looking for
Please download the video from here :- http://adobe.ly/1pXFPh2
Regards,
Rohit Nair

Vertical Tab Navigation Titles

I am attempting to add text to an existing vertical
navigation tab. The additional text will cause the tab to expand
considerably. I have located the source code but attempts to add
the needed text have not worked. Any ideas?

lv2crochet wrote:
> I am attempting to add text to an existing vertical
navigation tab. The
> additional text will cause the tab to expand
considerably. I have located the
> source code but attempts to add the needed text have not
worked. Any ideas?
>
Not without a URL, are you in a locked template region?
Cheers jojo
Adobe Community Expert for Dreamweaver 8
http://www.webade.co.uk
http://www.ukcsstraining.co.uk/
Extending Knowledge, Daily.
http://www.communityMX.com/
Free 10 day trial
http://www.communitymx.com/joincmx.cfm

OOTB Left Navigation error in Page Layout SharePoint 2013

I created a SharePoint 2013 master page through Design Manager in Sharepoint 2013 and created a page layout like we do trough sharepoint designer as in sharepoint 2010 steps are below
SharePoint Designer--->Page Layouts---->New Page Layout
now i want to insert left navigation in the page layout ,i tried to insert the following snippet in the page layout
<div data-name="QuickLaunch">



<div id="sideNavBox" class="ms-dialogHidden ms-forceWrap ms-noList">





































<hr />





</div>

</div>
but i get the following error when i create page through this page layout
"Content Place holders are only allowed in master page"
Can anyone tell me how do i insert left navigation in page layout which is created through sharepoint designer (.aspx file) but master page is created through design manager

Hi ,
As the error says, you need to add Content Place holders to Mater Page not the Page Layout.
For inserting left navigation, you can add Vertical Navigation SharePoint component to the master page using Snippets manager:
1.
Open the site then click design manager link from right top corner "Settings".
2.
Click “Edit Master Pages” link.
3.Click your custom mater page. It will open preview page.
4.
Once open the preview page then click Snippets menu from top right side. It will open “Snippet Gallery” in new tab page.
5.
Click the Vertical Navigation menu item in “DESIGN “tab.
6.
In this page we can easy to configure component properties.
After customization must click the update button then only the changes are reflected in the component snippet.
7.
Once click the update button the HTML code automatically generated in the “HTML snippet” box and click “Copy to Clipboard” button.
8.
Open the mapped network drive then open the Mater Page HTML file and paste HTML snippet where you want the navigation to show.
Reference:
http://www.sharepointpals.com/post/Add-snippets-in-Page-layout-using-design-manager
Best Regards,
Eric
Eric Tao
TechNet Community Support

Vertical navigation

Similar Messages

Maybe you are looking for