Horizontal Navigation Pattern

Hello Experts,
In the Theme Editor under System Admin > Portal Display, there is an element called Patterns. Under here, there is a preview of "Horizontal Navigation Pattern" where you can modify background images for navigation TABS.
How can I use this style of navigation TAB for the top level navigation instead of the standard "Top-Level Navigation"?
Many thanks in advance,
Richard Cook.

Hi Richard,
Just trying to make the same change to the Top-Level Navigation as you attempted before.
Did you successfully manage to make the change?
Cheers
Jay

Similar Messages

Horizontal Navigation pattern / Contextual Navigation pattern

Hello,
Where Horizontal Navigation pattern and Contextual Navigation pattern used in Portal theme.
I am trying to do tab like look and feel for Portal Top Level navigation. Horizontal Navigation Pattern has that kind of look and feel.
Is there any way I can do this one by using Horizontal navigation pattern.
Detail Navigation:
I need to make detail navigation as separated by lines (Padding)
Contextual Navigation Pattern: Has lines of kind structure.
Is there any way I can link these two in Theme Editor. Are they already linked to Portal theme Which property attaches to theme.
Regards
Mark

Hello Mark,
Hope you are doing well. Were you able to change the pattern and set it in a theme?
Regards
PN

Problem with horizontal scroll navigation pattern, please help

Hello,
I am trying to create navigation pattern for portfolio website which features horizontal scroll.
Here is a draft of what im trying to achieve:
Home
As you can see it's built based on containers - in every one there will be three photos and as you scroll down the page, the containers go left and you experience horizontal scrolling
The problem I am currently facing is this:
On a 1920x1200 resolution when you are scrolling down (starting from the top of the page), the first container (in the beginning) is in fact going left as I want it to, but at certain point (when it's just a little bit behind page margin) it just disappears. I would like to have the effect of container "traveling" out of view area naturally, so that when u are looking at a second container you could still see the first one and the third one.
In other words I would like these containers to leave the screen in the same way they appear - smooth motion, not the sudden disappear...
What am I doing wrong ?
If I recreate same draft but without using muse widgets for containers (instead I use for example single image) it works OK.
Also I noticed, that if the container is more narrow, the effect doesnt occur - like last conatiner in the exaple, it travels the way I want it to.
Thank you for any advice.
Filip

Please help, still no solution found...

Spry Horizontal Navigation Bar

A horizontal navigation bar was created using Spry in CS3.
The navigation bar needs to be lengthened.
Does anyone know how to lengthen it so it spreads across the
page?

Hello,
Can you post an URL?
It's easier to tell you exactly what you might need to do.
For example, it's a bit different if the nav bar is in a
container with a
width or not contained.
Take care,
Tim
"Karen L." <[email protected]> wrote in
message
news:fsjtmm$3ea$[email protected]..
>A horizontal navigation bar was created using Spry in
CS3. The navigation
>bar needs to be lengthened.
> Does anyone know how to lengthen it so it spreads across
the page?

Horizontal Navigation with Dropdown Menu

Hello!
I am trying to put together a site with Horizontal navigation with items in the dropdown. I built my plan with main pages and child pages, and added my horizontal navigation on the Master page, but when I go to preview, I don't see any of my dropdown (child) pages. Is there any way to fix this? (I've attached a screenshot, hopefully this will help clarify)......

Hello,
Please click on the tiny white Arrow in the blue circle which comes up at the top right of the Menu. And there change the Menu type from Top Level pages to All pages.
Note : Child pages on the same level in Plan view are listed vertically in a Horizontal Menu.
Regards,
Sachin

Center 2 lines of horizontal navigation using CSS

I have a long horizontal navigation at the foot of my page
and it looks fab, but it's all aligned to the left. How do I center
everything so the second line is centered below the top line?
Applying the BLOCK text align:center rule doesn't work - tried it
on all the various rules (the div itself, ul, li, a etc).

Your page throws a js error for me when it loads.
Error: MM_preloadImages is not defined
Source File:
http://www.friendsofwoodhousegrove.co.uk/friendsnew/index.htm
Also, you are using filenames that contain spaces that are
NOT Server
encoded....
<link href="CSS files/images.css" rel="stylesheet"
type="text/css" />
----------------------^
Why don't you fix those and post back?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Cactus Woman" <[email protected]> wrote in
message
news:eujcmd$seo$[email protected]..
> Hi Murray,
>
> This is the url:
>
http://www.friendsofwoodhousegrove.co.uk/friendsnew/index.htm
>
> The navigation I'm trying to centre is at the bottom
over the background
> image. I've done 2 unordered lists, one following the
other, because if I
> do
> the long list as one list some of the page titles start
to double up on
> themselves.
>
> Thanks
>

Content Targeting in Engage based on Clickstream or navigation pattern

Hi Experts,
I have implemented content targeting using Engage based on the visitor's profile (collected via registration/login page).
What I want to know is, is it possible to target content based on the click stream or navigation pattern/behavior of the visitor?
Please let me know where I can find pointers/documentation related to this kind of implementation.
Thanks!
DFy

I finally managed to complete this (been juggling it with three other tasks!).
What I did:
I created History Definition and History Attributes.
Coded the templates (with vdm:recordhistory tags) so that clicking a link fetches values from content attribute and store as history attribute values.
Created segments like SportsFan, MarvelFan, etc. with segment criteria on values of the history attributes.
Created the recommendations.
The result: When site visitors click on links or browse the site, they get classified into segments (based on the content clicked of course!) and the home page calculates the segment and shows the recommendations. Also, since the classification into segments is stored in the database (using history attributes), a visitor gets to see recommendation based on his earlier visits.
Let me know if this helps anyone.
Cheers!
-DFy

Need Help using ul for horizontal navigation

Though I normally use tables, I've been reading that it's better to use <ul> and <li> for horizontal navigation bar on my website.
I'm having problems with spacing, I want each item of the navigation bar to fit in a 166 width box.
Here's my CSS:
#ul.navbar {
    list-style-type: none;
font-weight: bold;
background-image: url(../images/166bar.gif);
    margin: 0;
    padding: 0;
    width: 100%;
#ul.navbar li {
    margin: 0px 20px 10px 20px;
    list-style: none;
#ul.navbar a {
    text-decoration: none;
How do I make sure each item of horizontal navigation bar fits in the center of it's box? Can any recommend a good tutorial or example?

http://alt-web.com/DEMOS/CSS-Menus.shtml
Change
text-align: left
to
text-align:center
I want each item of the navigation bar to fit in a 166 width box.
In that case, you should use tables, images or vertical list menus.
http://css.maxdesign.com.au/listamatic/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb

Horizontal Navigation Bar

I'm using the Spry horizontal menu bar, and I've got a problem.
In IE7, but not in Firefox or Safari or even IE8, the hover state is apparently only active for the text in the submenus, not the entire 'button'. That is, the list item is styled to look like a button, it's 12 ems wide, the text for most of the items doesn't fill the entire button. If one puts their mouse over the 'empty' part of the button, it seems that the 'hover' state is lost and the submenu disappears. In the image below, if you mouse over Northside, but leave the mouse on the right side of the 'button', the menu will quickly disappear if using IE7; it stays put when using the other browsers.
Very annoying to the user (and to this developer).
The site is http://www.acblunit174.org
I wonder if anyone has an explanation? Is this a known problem with a known workaround?
The css file is included below.
Any advice would be appreciated.
Thanks
Bert Onstott
713-851-1511.
[email protected]
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    padding:             0;
    list-style-type:     none;
    font-size:           11px;   /* changed font size to 11px */
    cursor:              default;
    width: 900px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index:             1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin:              0;
    list-style-type:     none;
    font-size:           100%;
    position:            relative;
    text-align:          left;
    cursor:              pointer;
    width:               auto;     /* set the width to auto for the top level navigation bar items so they fit the text. */
    float:               left;
    padding:             0;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin:              0;
    padding:             0;
    list-style-type:     none;
    font-size:           100%;
    z-index:             1020;
    cursor:              default;
    position:            absolute;
    width:               12em;
    left:                -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left:                auto;
    clear:               left;
/* Menu item containers are seet to 14 ems */
ul.MenuBarHorizontal ul li
    width:               12em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position:            absolute;
    margin:              -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left:                auto;
    top:                 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Menu items are a pale green block with padding, no text decoration and what amounts to      */
/* and outset border. Specifying 'outset' as the border doesn't work in IE with color CCCC99, */
/* so it has to be simulated by specifying different left, right, top and bottom colors.       */
ul.MenuBarHorizontal a
    display:             block;   /* causes menu items to appear horizontally */
    cursor:              pointer;
    background-color:    #ECE9D8; /* light green */
    color:               #000000; /* black */
    text-decoration:     none;
    border-top-width:    3px;
    border-right-width: 3px;
    border-bottom-width: 3px;
    border-left-width:   3px;
    border-top-style:    solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style:   solid;
    border-top-color:    #CCCC99; /* dark greem */
    border-right-color: #666600; /* light green */
    border-bottom-color: #666600; /* light green */
    border-left-color:   #CCCC99;
    padding-top:         3px;
    padding-right:       4px;
    padding-bottom:      3px;
    padding-left:        3px;
    margin: 1px;
/* Menu items that have mouse over or focus have an olive green background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color:    #999966;
    color:               #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with an olive green background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color:    #999966;
    color:               #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
/*ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
*//* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
        display: inline;
        f\loat: left;
/*        background: #ECE9D8;*/

I wonder if anyone can tell me easily how to make the submenu's under the horizontal menu bar also appear horizontally?
This question is more suited to the Spry forum.

Horizontal Navigation?

Is there a way to make a navigation bar with items that line up horizontally?

Try to edit the page binded to the content area.
There you can change the position and layer of the page regions.
BUT: I don't know how to arrange the items on the navigation bar horizontally. Unfortunatly you cannot arrange the Navigational Items in a horizonatllay manner.
What you can do, is to create a couple of Navbars, each containing ONE item, say, the Basic Search Item or a Category List (formatted as PullDown Menu). Then you divide your Page in two horizontal regions and add to the top-region the new Navigational-Portlets (an example how this may look like you can see in the public area fn our Project-Homepage AccessLab: http://accesslab.wifo.ac.at/)

Second sub-site level horizontal navigation

In SharePoint 2013 Enterprise, I have a publishing site collection on a master page build with the Design Manager. The global top-level navigation contains links to various sub-sites. Their desire is to have a horizontal sub-site navigation underneath the
global navigation. This is identical to the issue at the link below, however for SharePoint 2013.
http://social.msdn.microsoft.com/Forums/en-US/d2704d33-d285-4d8c-8a4e-6e66cf36a9fc/top-navigation-how-to-add-a-second-layer-for-sub-sites?forum=sharepointcustomizationprevious
On the root site of the site collection:
Global nav: Department 1 | Department 2 | Department 3 | Department 4
No sub-nav
At the sub-site, for example in Department 2's sub-site:
Global nav: Department 1 | Department 2 | Department 3 | Department 4
Sub-nav: Dept2-page1 | Dept2-page2 | Dept2-page3 | Dept2-page4 | Dept2-page5
What is the best practice way of adding a 2nd sub-site level navigation?
Also, as an option, would this solution work in a custom page layout file?

I was able to accomplish this by first creating a SharePoint List of Titles and URLs (text field) for the secondary navigation, and then generating the <ul> using the SPServices jQuery library inside of a custom page layout. Alternatively, this secondary
nav could be embedded into a Content Editor or inside a Master Page rather than a Page layout, but this suited my client's business case the best.
You can find more info on the SPServices on their codeplex site.

How to - horizontal navigation

Hello,
I'm having a mental block and can't figure out how to do a
SIMPLE navigation bar horizontally across the top of the page.
Wanted to use "block", but I seem to only be able to get my list in
a vertical format doing this. Then tried "display-list_item" which
looked okay on my screen but loaded again with the navigation being
vertical. I know that this has got to be easy... don't want to make
it hard by creating buttons, etc. when I want something simple.
Page is located at
Sage
City
I haven't been doing many sites lately and I'm badly out of
practice I'm afraid... thanks for your help :)
Maureen

> Murray - Still haven't got it all straightened out and
may end up starting
> from scratch using divs instead. The "client" in this
case is a web person
> (back-end I think) and insisted on using "tables"
because according to her
> this
> has less accessibility issues.
Your client is badly mistaken. If tables are used for
content, they create
accessability problems, since tables are "read" from left to
right, top to
bottom, meaning that vertically adjacent content will not be
read as a block
when they are in different cells in the same column.
> #navigation td
This is a descendent selector - it specifies that the rull
following it
would be applied to all <td> tags within a parent
container with ID =
"navigation". It's quite common to use such selectors.
> it seems cumbersome
Quite the opposite.
> What I've done is changed all the "#" to "." and applied
the classes to
> the
> text as needed.
That's the wrong approach, really.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"webmom24" <[email protected]> wrote in
message
news:[email protected]...
> Patty - I guess I just haven't seen this before and it
didn't seem to work
> correctly in the page either.
>
> For example, here's the navigation code:
> #navigation td {
> border-bottom: 2px solid #C0DFFD;
> }
>
> #navigation a {
> font: 11px Verdana, Arial, Helvetica, sans-serif;
> color: #003366;
> line-height:16px;
> letter-spacing:.1em;
> text-decoration: none;
> display:block;
> padding:8px 6px 10px 26px;
> background: url("mm_arrow.gif") 14px 45% no-repeat;
> }
>
> #navigation a:hover {
> background: #ffffff url("mm_arrow.gif") 14px 45%
no-repeat;
> color:#FF6600;
>
> Then on the page:
> <table border="0" cellspacing="0" cellpadding="0"
width="165"
> id="navigation">
> <tr>
> <td width="165"> <br />
> <br /></td>
> </tr>
> <tr>
> <td width="165"><a href="javascript:;"
> class="navText">destinations</a></td>
> </tr>
> <tr>
> <td width="165"><a href="javascript:;"
> class="navText">airfare</a></td>
> </tr>
> <tr>
> <td width="165"><a href="javascript:;"
> class="navText">cruises</a></td>
> </tr>
> <tr>
> <td width="165"><a href="javascript:;"
> class="navText">specials</a></td>
> </tr>
> <tr>
> <td width="165"><a href="javascript:;"
> class="navText">contact</a></td>
> </tr>
> </table>
>
> I guess I don't understand how the "id" works to format
the table - it
> seems
> cumbersome and I'm not understanding what this is doing
exactly. It was a
> bit
> confusing for me to figure out how to change the
navigation from vertical
> to
> horizontal and in the process I probably deleted some of
the crucial
> elements.
> What I've done is changed all the "#" to "." and applied
the classes to
> the
> text as needed.
>
> Murray - Still haven't got it all straightened out and
may end up starting
> from scratch using divs instead. The "client" in this
case is a web person
> (back-end I think) and insisted on using "tables"
because according to her
> this
> has less accessibility issues. Bottom line is I should
use what I feel
> comfortable with and what works for me and the site. Not
only did she want
> it
> in "tables" but then wanted it set for 600 px wide, with
percentages used
> for
> the columns... this project is going to drive me to
drink...
>
> Maureen
>

Ul horizontal navigation not displaying correctly in IE6

I am designing a web site for my psychology department and ideally it will display correctly across browsers, including older versions. I've used CS Live to test how it displays, and everything looks great EXCEPT IE6. What percentage of people out there are still using that? I'm not sure how concerned to be.
If there is a fix, I'd like to apply it, because the problem is with my top navigation, which will display on about 130 pages of the web site.
Here is what it is supposed to look like
Here is what it looks like in IE6
Here is my posted page:
http://www.psychology.vcu.edu/test/
Here is my code:
SOURCE CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>VCU Psychology Department</title>
<style type="text/css"></style>
<link href="styles/homepage.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" type="image/ico" href="images/favicon.ico"/>
</head>
<body>
<div class="container">
<div class="header">
    <div id="quick_links"><a href="http://www.has.vcu.edu/psy/cpsd" title="Center for Psychological Services and Development" target="_blank">Clinic</a> | <a href="undergraduate/advising.html" title="Academic advising">Advising</a> | <a href="http://vcu.sona-systems.com/" title="Participation in research" target="_blank">SONA</a></div>
    <img src="images/homepage/vcu_psyc_banner.jpg" alt="VCU Psychology Department" width="500" height="60" border="0" usemap="#Map" />
    <map name="Map" id="Map">
      <area shape="rect" coords="19,20,125,62" href="http://www.vcu.edu" target="_blank" alt="VCU homepage" />
      <area shape="rect" coords="129,21,488,60" href="http://www.psychology.vcu.edu" alt="Psychology homepage" />
    </map>
    <ul id="main_nav">
      <li><a href="about/index.html">About Us</a></li>
      <li><a href="undergraduate/index.html">Undergraduate Program</a></li>
      <li><a href="graduate/index.html">Graduate Programs</a></li>
      <li><a href="research/index.html">Research</a></li>
      <li><a href="people/index.html">People</a></li>
      <li><a href="centers/index.html">Centers and Institutes</a></li>
      <li id="main_nav_last"><a href="resources/index.html">Resources</a></li>
    </ul>
    </div>
CSS CODE
@charset "utf-8";
body {
background-color: #000;
background-image: url(../images/backgrounds/container_yellow_gr_220.jpg);
background-repeat: repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000;
margin: 0px;
line-height: 1.1;
h1, h2, h3, h4, h5, h6, p {
margin: 0px;
padding: 0px;
h1 {
color: #FFA103;
font-size: 20px;
float: left;
padding-top: 10px;
padding-bottom: 7px;
a img {
border: none;
#quick_links {
position: absolute;
top: 20px;
right: 40px;
#quick_links a {
color: #000000;
text-decoration: none;
#quick_links a:hover {
text-decoration: none;
color: #FFA103;
a:link, a:visited {
color: #999999;
text-decoration: none;
a:hover, a:active, a:focus {
text-decoration: none;
color: #FFA103;
.container {
width: 960px;
background-color: #EEF0EC;
background-image: url(../images/backgrounds/container_bg.jpg);
background-repeat: repeat-x;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
.header {
position: relative;
height: 110px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
ul#main_nav {
list-style-type: none;
width: 920px;
background-color: #EAECE7;
background-image: url(../images/backgrounds/main_nav_grey_gr.jpg);
background-repeat: repeat-x;
padding: 0px;
height: 30px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
#main_nav li a {
color: #000;
text-decoration: none;
display: block;
margin: 0px;
padding-right: 19px;
padding-left: 19px;
padding-top: 6px;
height: 24px;
font-weight: bold;
#main_nav_last {
width: 110px;
#main_nav li {
float: left;
#main_nav li a:hover, #main_nav li a:active, #main_nav li a:focus {
color: #FFF;
background-color: #000;
display: block;
font-weight: bold;
Thanks for any advice that you may have!

Thanks for the reply!
I did add the float left as suggested, and it did fix the menu for IE6. Here is the current page, which I hope displays correctly in every browser, including IE6, http://www.psychology.vcu.edu/test/.
The problem is that it broke one aspect of the menu for IE7 and others.
The code in blue is what was added to fix IE6.
The code in red is what no longer works. I had added it so that the width of the final list item would extend to the end of the main_nav width.
ul#main_nav {
list-style-type: none;
width: 920px;
background-color: #EAECE7;
background-image: url(../images/backgrounds/main_nav_grey_gr.jpg);
background-repeat: repeat-x;
padding: 0px;
height: 30px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
#main_nav li a {
float: left;
color: #000;
text-decoration: none;
display: block;
margin: 0px;
padding-right: 19px;
padding-left: 19px;
padding-top: 6px;
height: 24px;
font-weight: bold;
#main_nav_last {
width: 110px;
#main_nav li {
float: left;
#main_nav li a:hover, #main_nav li a:active, #main_nav li a:focus {
color: #FFF;
background-color: #000;
display: block;
font-weight: bold;
If anyone has suggestions on how to optimize this code I'd be grateful. This menu will appear on 120 pages or so, and I want it to be as perfect as possible.
Thank you so much.

Spry horizontal navigation element covers flash element...

i have a spry navigation bar with a flash movie underneath,
and when i hover over the navbar and the submenu pops down it
covers the flash movie, but it doesn't cover the .jpg image that is
next to the flash movie. how can i fix this? thanks.

thanks for the reply Murray, a responder from the flash forum
gave me the following answer and it worked perfect.>>
The <object> and/or <embed> HTML elements that
reference your Flash content accept a number of optional
parameters. For the <object> element, these parameters are
supplied via nested <param> elements. Simply add the
following new <param>:
<param name="wmode" value="opaque">
The <embed> parameters are supplied via attributes. For
the <embed> element, add the following new attribute:
wmode="opaque"
That’s it. Your Flash content is now stackable via
z-index; for example, you may wrap your
<object>/<embed> pair in a <div> and set the
<div>’s z-index as you please.
<div style="position: absolute; z-index=1;">
<object attributes >
<embed attributes />
</object>
</div>
If you’re using Dreamweaver, just press the Parameters
button in the Insert > Media > Flash dialog or in the
Property inspector when selecting existing Flash content. Type
“wmode” (without quotes) in the name/parameter column
and “opaque” (without quotes) in the value column. That
will handle the above HTML for you, even with the new JavaScript
embedding available since the 8.0.2 update.

Unwanted movement in horizontal navigation bar

Have been struggling with this for days but finally have
found an improvised solution.

I've had a quick look.
On your index page, events and contact you have two instances
of </head>,
<title></title>.
Fix those and post back if the problem remains. I haven't
looked further yet
as there's just so much code...
A comment on dyscalulia - I'm terrible with numbers - *but*
coding is
logic, not mathematics and your site would (IMHO) be easier
to control using
CSS. Try giving it a whirl, see what happens (o:
I'm no expert, either at CSS or dyscalculia but I thought I'd
stick in my 2¢
anyway.
I recommend
http://www.w3schools.com/css/default.asp
and
http://projectseven.com/tutorials/css/css_td/index.htm
Jo
"cydcyd" <[email protected]> wrote in
message
news:ev2sc9$9gl$[email protected]..
> My horizontal bar moves horizontally between pages. I
would be very
> grateful if
> anyone would explain to me how to get it to keep
perfectly still, as
> simply as
> possible, preferably by cutting and pasting.
Unfortunately my brain just
> can't
> do code (I have discalculia) so I created the website in
Design mode. My
> website is at
http://rachelspring.co.uk.
Many thanks if anyone is willing
> to
> help me.
>

Horizontal Navigation Pattern

Similar Messages

Maybe you are looking for