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

Similar Messages

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 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 bar stretches across page

Just started using Dreamweaver CS3 and using Missing Manual
tutorial in chapter 9 (page. 365) #13.
My problem is with IE 5.2.3, which is installed and I never
use. I checked my tutorial in safari and opera and everything
looked fine. But, in IE the navigation bar that is supposed to be a
single line [home/features/ask the experts] under the banner is now
stretching across the page in a vertical position. The tutorial
said how to fix, but does not work. I am thinking the book is wrong
since I tested their finished page in IE and it is doing the same
thing. Mine looks just like this
http://www.sawmac.com/missing/dwcs3/tutorials/Chapter09_finished/hydroponics.html.
How do I fix this?
Thanks,
A Beginner

katemac08 wrote:
> Just started using Dreamweaver CS3 and using Missing
Manual tutorial in chapter
> 9 (page. 365) #13.
>
> My problem is with IE 5.2.3, which is installed and I
never use. I checked my
> tutorial in safari and opera and everything looked fine.
But, in IE the
> navigation bar that is supposed to be a single line
[home/features/ask the
> experts] under the banner is now stretching across the
page in a vertical
> position. The tutorial said how to fix, but does not
work. I am thinking the
> book is wrong since I tested their finished page in IE
and it is doing the same
> thing. Mine looks just like this
>
http://www.sawmac.com/missing/dwcs3/tutorials/Chapter09_finished/hydroponics.htm
> l.
Hummm IE5x probably isn't worth bothering about anymore. With
IE 8 on
the way tough on the very small percentage of IE5 user.
None of the stats for my few sites shows anyone using IE5
anymore and if
so the percentage is so low that in my opinion it isn't worth
the effort
of trying to resolve issues in that particular browser.
Move on and make sure it looks ok in IE6 upwards.

Please help! Nested Movie Clips as navigation bar

Hi everyone,
I just had my first flash lesson a couple of days ago, but decided to venture myself into trying to build a navigation tool bar with movie clips grouped together. My intention is that once the mouse rolls over one particular movie clip, another movie clip fades in under it (my version of a "drop down" menu). Just so it happens, the movie clip that fades in, is also comprised of particular movie clips with their own behaviors (roll over tween effects).
I can make each individual movie clip behave as it should, but I cannot get them to work once they are pieced together. I'm attaching a link that contains the file I'm talking about (submenu), in the hopes that one of you good Samaritans would take a look at it and tell me where I went wrong.
Hopefully I haven't absolutely shocked you guys with my level of ignorance.
http://docs.google.com/fileview?id=0B09iy1xwVTUYZmY0NjdhM2EtZDRjYS00MGNlLWJmNmEtMDJmOTI4ZT ZjYWFi&hl=en
Gaby

its just with the frame labels you have given every where.
and its the same "over" and "out"
the player is confused to play which one fist
i removed some lables and saw that it works partially. (did not debug the whole fla)
hope you will got the way

On v3.6 there was a vertical bar next to the horizontal navigation bars, but now on v.4 there is nothing, so is there a fix for this?

On the older versions of FF, I could always get the history of my tab by clicking the vertical arrow that was on the left side next to the navigation arrows. I really miss the feature, and now everything takes more time since I have to go back, go back, and go back instead of scroll down to see the particular url in the tab I want to return to.
Any help would be appreciated.
Thank you very much.
- Susan

+1, exact same problem. Oddly enough was working yesterday, also on Yosemite then today I get the same message. If I ignore it my game launches but then I can't connect to any of my friends as I get the "failed after 10 retries" message. Specifically L4D for me.
Frustrating as duck.

How do I create a horizontal nav-bar with CSS, set to an exact width?

I have a problem that I need help with. All I need to do is
to create a simple text-based horizontal navigation bar using CSS.
I have seen many CSS tutorials online about how to make a
horizontal navigation bar using unordered lists, but they all seem
to either set the bar to be centred or to the full width of the
page, or if they do set it to be a certain width, then the buttons
within that width are centred within pre-defined widths for each
one.
Unfortunately none of these help me - let me explain my
scenario...
I have an area that is exactly 700px wide. In this area I
want to put 5 text hyperlinks.
I want the first text-link to be aligned to the left of my
700px width, and I want the last text-link to be aligned to the
right of the 700px width.
I want the spaces between each of these text-links to all be
the same.
The only definite known width is the overall 700px. I will
not know the width of each text-link, as (a) they are all live
text, and (b) the phrases for each could change.
I have mocked up a quick diagram showing in more detail
precisely what I mean:
http://www.nothowitlooks.com/temp/navbar.gif
Can anyone please help me with this?
Thanks.

.oO(BrettArchibald)
>Oh look, a third person joining the discussion and not
actually proposing any
>solutions to the original query. Just what this thread
needs.
Oh look, a person seeking for help turning into a troll. Just
what this
group needs.
> Well, to be fair, Kim did make a sterling effort in
trying, but just didn't
>manage to fully understand the layout required.
>
> To address your "points":
>
quote:
some things simply can't be done or don't make any sense in
the Web. Even a
>client has to accept that. Let them write wishes to Santa
Clause if they want,
>but they have to accept the rules of the medium they're
working with.
>Period.
> Wrong, wrong, silly comment and wrong.
>
> To elaborate: firstly, with regards to design,
everything can be done, it's
>simply a matter of how.
Only in your fantasy. In practice there are always some
limits enforced
by the used material or technology. You simply can't violate
such basic
rules and laws, even if you would like to.
>Whether you use text, images, tables, CSS, or even
>Flash, the objective is first to design the site with
both your client's and
>their customers needs and expectations, and then to build
it, regardless of how
>difficult-to-code that design may or may not be.
It always looks good on paper, but not every design can be
turned into
practice. This not only applies to web design, but to almost
every kind
of development. Often enough you have to find compromises or
workarounds
if the engineers say "won't work". The problem is that many
designers
don't understand this or don't want to. They're just thinking
and living
in their perfect theoretical world, but have no idea of how
things work
in the real world. And many theoretical things simply don't
work there.
Each medium has its own rules and laws. Some things may work
well for a
printed paper for example, but not in the Web and vice versa.
Of course
you can try to break these rules, but you'll definitely fail.
>You should not compromise your
>design because of a lack of coding knowledge.
It's not lack if coding knowledge if you refuse to try things
that are
impossible or don't make sense. It's quite the opposite,
because you
don't have to waste your time with something that won't work
at all.
>If you don't know how to do it
>yourself, then find out how to do it (which is what I was
*originally* trying
>to do here, remember?).
Quite easy. Surf the web, and if you see something like what
you want,
just have a look at the source code or post the URL here. If
it can be
done, then it already has been done. Just show us an example
and we'll
happily explain it to you.
> Secondly, no, a client does NOT have to accept that
"some things simply can't
>be done or don't make any sense in the Web".
Sure they have. The client is not always king. And if they
insist on
stupid things and always know it better - why the hell are
they hiring
you instead of doing it themselves? If they want their work
to be done
by an expert, they should also _listen_ to that expert and
let him do
his work properly instead of telling him how he should do it.
That's not
going to work.
>Like I said earlier, some clients
>are not interested in hearing about how what they want
cannot be done, and any
>attempts to tell them so only serve to convince them to
take their work, and
>their money, to someone else. Most clients, thankfully,
are adaptable and
>willing to reason. However, some are not, and if these
clients take their money
>elsewhere, you lose the job and you don't get paid. It's
that simple.
Let's say you want a little film to be made about whatever.
Would you
tell the director where he should position the cameras, the
lights and
all the stuff? He already knows _what_ you want to get, so
why don't you
just let him decide _how_ to do it? It's his job! And if he
says that
filming directly towards bright sunlight usually doesn't work
well, you
should respect his expert opinion.
>
quote:
You won't make friends here with such an attitude. Please
stop insulting
>regulars or just leave.
>
> Firstly, I'm not here to make friends. Neither am I here
to make enemies. I am
>here to get help with a coding problem. When people offer
"alternative advice"
>that hinders my progress in finding a solution, I tell
them so. I give back
>what I get.
You asked for advice and you got proper answers. We really
don't need
people here just looking for the answers they want to hear.
Often enough
people are coming here looking for a cure to a particular
problem, while
it would be much easier to avoid that problem right from the
beginning.
Of course if they don't want to hear such alternatives -
their problem.
> Secondly, I was not aware that "regulars" to this site
had any special
>"insult-free privileges" or suchlike that newcomers did
not.
It's not the best idea to bite the hand that feeds you. It's
the group's
regulars who answer almost all of the questions here. And
most of them
also know how to use a killfile.
>I don't care if
>someone is a regular or a newcomer - when I ask a
technical question and
>instead of either potential advice or even silence, I
instead receive
>un-warranted "design advice", I'll make my opinions
known.
So do we. If someone wants something that's not possible or
not going to
work, we'll "make our opinions known". After all that's what
a free
discussion board/forum/group is for.
> As for the "just leave" suggestion for supposedly
"insulting regulars", I
>could very well say the exact same thing to you, for the
reason of not actually
>contributing anything to the discussion that attempts to
address the original
>query of this thread.
> In fact, you know what, I think I will. Here goes:
> Please either propose a solution to my original CSS
problem or just leave.
> There, how was that?
Want to try again?
With pure CSS and text links it can't be done within the
given
constraints. I even doubt that it's possible with a table. So
either
drop the fixed 700px width or the equal space between the
buttons.
> P.S: Seeing as though pedantry seems to be something
you're interested in,
>judging by the "rant" tag comment, I thought I'd point
out that you spelled
>Santa Clause wrong.
You can keep the 'e'. In German we have more than enough of
them.
And if you would be familiar with web design, then you would
have known
where this ironic "error message" came from.
Your turn.
Micha

Horizontal menu bar

When i insert a spry menu bar horizontal it shows as an
unordered list. The vertical menu bar inserts Ok. the horizontal
bar was working OK. I don't know how i screwed it up. I have
reinstalled Dreamweaver CS4 with no change. It still doesn't work.
I think it is something to do with the CSS. Any suggestions.

Hi Kin,
I decided to upload the homepage so the problem can be
visible. www.sbdne.com
The horizontal navigation bar was created in a one column one
row table. There is no submenu. The navigation bar was adjusted to
spread across the width of the page. The white space did not appear
while testing in IE. It appeared when uploaded. In Mozilla it drops
as a vertical bar. I'm guessing it's either something that was
developed with the Dreamweaver template or there is a problem with
the horizontal spacing.
Please let me know what you think.
Thanks!
Karen

Navigation bar different colors for each tab

I want to have the top horizontal navigation bar with different background colours for each tab on the bar.
I don't want to change the background colour for the entire navigation bar. How do I change them individually?
thanks!

Hi lorrscorpio,
As far as I know it is difficult to change background color of top navigation link OOTB, better to create a html menu for that and add it to your page .In that you can easily change background color of your top navigation link.
Whenever you see a reply and if you think is helpful, click "Vote As Helpful"! And whenever you see a reply being an answer to the question of the thread, click "Mark As Answer

Spry Navigation Bar going wrong way in IE

I have horizontal navigation bar through spry in Dreamweaver. In all other web browsers, my first level of drop down menus go directly down from the main menu items. In IE they go directly right! Does anyone know what I can do to fix this problem and quickly. My final presentation is Tuesday. I am new to all this and I don't have the foggiest how to fix it! Thanks in advance for any and all assistance with this matter!!!!!!

It would be a lot easier to answer your question if you had a link to your site or at the very laest showed your markup.
I assume that you have made the menu item widths as being auto rather than a fixed width in which case IE will use the full width available to show the submenu items.
To counteract this you need the following style rules
ul.MenuBarHorizontal ul li {
    display: block;
    float: none !important;
    width: auto;
    white-space: nowrap;
    border-bottom: solid 1px #EEE;
The !important overrides the style rule that is given the element by the JS.
Gramps

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

Move navigation bar

I am very new to iweb so please forgive my ignorance. Trying to create my first website. How do I move the navigation bar horizontal on the left? I got the part about hiding the menu no problem. I read the other post about making a new but that one moved the new bar to the top. Thx!!

You can't move it. You can only create your own, which could go any which-way you want it to.

Centering a Horizontal CSS only, jQuery, or Spry navigation bar within a Div

Hello all. I need a solution for centering a horizontal style nav bar whether it be css only, jQuery or Spry based. I've been trying to use widgets from the adobe widget browser or other ones I've been able to find online. I have been able to get the graphic that goes behind the links to span the entire width of the Div, but I can't move the actual links to the center of the screen and get it to stay in the middle like the rest of the elements do when you resize the page. The links always stay anchored to the left side of the page. I've been able to move them all the way to the right side of the page through a certain css change, but that is not what I'm looking for. Do I need to resize the Div, or add a div within the div? Do I need to split the horizontal width of the single div into three div's and put the nav bar into the middle one? If that is the solution, how do I add the div's next to each other, I tried adding a div within the div, but nothing really appears to show up, so that must essentially be a wrong way of going about it.
Well anyways, I need some advice, somebody please lead me in the right direction on how to get this right. In the div above the one I'm trying to make this happen in, I have a flash object and it just centers itself perfectly with the div and moves with the rest of the page fluidly when you resize. And the same goes for a div right above that which contains the company logo.
Thanks for help in advance.

This is what I mean by the dotted lines not lining up evenly at the ends.
Here is the source code for the page, followed by the css:
<!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 name="description" content="Common Wealth Web Solutions: Web Development, Graphic Design, Media Consultant, Community Engagement" />
<meta name="keywords" content="Common,Wealth,Web,Solution,Design,Graphic,Development,Interactivity,services,fla sh,php,javascript,ajax,professional,Caleb Wright, Peter Wallis,artist,video,multimedia,production,search engine optimization,SEO,video production design" />
<meta http-equiv="Content-Type" content="text
/html; charset=UTF-8" />
<title>Common Wealth Web Solutions: Web Development, Graphic Design, Media Consultation, Community Engagement</title>
<link href="stylesMain.css" rel="stylesheet" type="text/css" />



<script type="text/javascript" src="scripts.js"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<style type="text/css">
#apDiv1 {
    position:absolute;
    width:1844px;
    height:43px;
    z-index:1;
    left: 64px;
    top: 253px;
body {
    background-color: #FFF;
</style>
<link href="SpryAssets/SpryAccordion_flexible.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:link {
    color: #00F;
</style>
<style type="text/css">
#menu {
width: 700px;
margin: 0 auto;
#menu ul {
padding: 0;
margin: 0;
text-align:center;
list-style:none
#menu li{
padding: 0;
margin: 0;
display:inline;
margin-right: -2px;
#menu a {
background-color:#66F;
padding: 6px 15px;
color: #fff;
text-decoration: none;
#menu a:hover {
background-color:#39C;
</style>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3119473-5']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3119473-6']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<link href="CSSOnlyMenu4/css/menu4.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2141545: #OAWidget */
#menu4 ul {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 30px;
    letter-spacing: -3px;
    border-top:5px dotted #003399;
    border-bottom:5px dotted #003399;
    margin:20px;
#menu4 ul li a{
    color: #003399;
    padding: 10px 5px 10px 10px;
    width: 170px;
#menu4 ul li a:hover span.title{
    color:#00adef;
#menu4 ul li a span.text{
    font-family: Georgia, serif;
    font-size: 13px;
    color:#c7e7f3;
/* EndOAWidget_Instance_2141545 */
</style>
<script type="text/xml">

</script>
</head>
<body>
<div id="wrapper-body">
<div id="wrapper-1">
    <div id="branding">
      <h1>
      <div>
        <p><img src="images/lorentzpaintinglogo_cropped2.png" width="317" height="110" alt="Lorenz Painting Co." longdesc="http://www.lorenzpainting.com" /></p></div>
      <div id="flash">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="700" height="250" id="FlashID" title="Lorenz Painting Co Flash Widget">
        <param name="movie" value="LorentzBanner.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="6.0.65.0" />
        
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        
        
        <object type="application/x-shockwave-flash" data="LorentzBanner.swf" width="700" height="250">
          
          <param name="quality" value="high" />
          <param name="wmode" value="opaque" />
          <param name="swfversion" value="6.0.65.0" />
          <param name="expressinstall" value="Scripts/expressInstall.swf" />
          
          <div>
            <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
            </div>
          </div>
          
        </object>
        
      </object>
      </h1>
<div>
<div id="menu4">
    <ul>
      <li><a href=""> <span class="title">Home</span> <span class="text">Why us?</span> </a> </li>
      <li><a href="">Services<span class="text">What we do</span> </a> </li>
      <li><a href=""> <span class="title">Testimonials</span> <span class="text">What they say</span> </a> </li>
      <li><a href=""> <span class="title">Contact</span> <span class="text">How to get in touch</span> </a> </li>
    </ul>
</div>
<p> </p>
<p> </p>
<p> </p>
</div>
      <div></div>
    </div>
    <div id="wrapper-2">
      <div id="content-top" class="png"></div>
      <div id="wrapper-3">
        <div id="content-1">
          <div class="content-wrap">
            <p>Home</p>
            <p>Contact</p>
          </div>
        </div>
        <div id="content-2">
          <div class="content-wrap">
stuff
<p> </p>
          </div>
        </div>
        <div id="content-bottom"></div>
      </div>
      <div id="footer">
        <p><strong>Lorentz Painting Co., 2011</strong><strong></strong></p>
      </div>
    </div>
</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
jQuery("#jQueryUIAccordion").accordion({
        event: "click",
        collapsible: false,
        autoHeight: true
</script>
</body>
</html>
Be forewarned, there are a bunch of rules in here that don't apply to anything anymore, as it's from a recycled rules from another site I built. Sorry.
I will first put the CSS for the main style sheet, and I will put the CSS for the Horizontal Nav Bar in after.
CSS:
Main style sheet:
@charset "UTF-8";
body
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    color: #6B6B6B;
    background: #8D927C url(images/bg_body.jpg) repeat-x;
    margin: 0;
    padding: 0;
    min-width: 800px;
    text-align: center;
    background-color: #000;
h2, h3, h4
    font-size: 16pt;
    font-weight: normal;
    margin: 15px 0 0 0;
#wrapper-3 p
    padding: 0;
    line-height: 1.35em;
    margin-top: 8px;
    margin-right: 0;
    margin-bottom: 8px;
    margin-left: 0;
#wrapper-3 ul
    list-style-type: none;
    margin: 8px 0;
    padding: 0;
#branding
    margin: 0 0 0 0;
@Generic anchor (link) styles
a:link, a:visited
    color: #4f4f3f;
a:hover, a:active
    color: #000000;
@Inline image styles
img.float-left
    float: left;
    margin: 0 6px 6px 0;
img.float-right
    float: right;
    margin: 0 0 6px 6px;
img.border
    background: #FFF;
    padding: 2px;
    border: 1px solid #999;
@Tab navbar styles
#hornav ul
    margin: 0;
    list-style-type: none;
    line-height: normal;
    padding: 0;
    text-align: center;
    margin-bottom: 60px;
    font-size: 0.8em;
    text-transform: uppercase;
#hornav ul li
    display: inline;
    margin: 0 2px 0 0;
    padding: 3px 0 3px 10px;
#wrapper-body #wrapper-1 #hornav ul li a br {
    height: 400px;
#hornav ul li a
    text-decoration: none;
    margin: 0;
    background-repeat: inherit;
    background-position: center center;
    padding-top: 50%;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;
#hornav ul li a:link, #hornav ul li a:visited
    color: #3e3f2f;
#hornav ul li a:hover, #hornav ul li a:active
    color: #000000;
@Secondary navigation styles
#navcontainer
    background: transparent url(images/bg_navlist-top.jpg) no-repeat top center;
    margin: 0;
    padding: 12px 0 0 0;
#navcontainer ul
    margin: 0;
    list-style-type: none;
    line-height: normal;
    padding: 0 0 12px 0;
    border-top: 1px solid #FFF;
    background: transparent url(images/bg_navlist-bottom.jpg) no-repeat bottom center;
#navcontainer a
    display: block;
    padding: 3px 6px;
    width: 168px;
    margin: 0 10px;
    background-color: #c4bfac;
    border-bottom: 1px solid #FFF;
#navcontainer a:link, #navlist a:visited
    color: #FFF;
    text-decoration: none;
#navcontainer a:hover
    background-color: #90937e;
    color: #FFF;
@Masthead text styles
#branding
    margin: 0;
    padding: 0;
#branding h1
    color: #000;
    padding: 10px 0 0px 0;
    border-top: 4px solid #656e5d;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 28px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    margin: 0;
@Layout styles
#wrapper-body
    background: transparent url(images/bg_wrapper-body.jpg) no-repeat top right;
    width: inherit;
    margin: 0;
    padding: 0;
#wrapper-1
    width: auto;
    background: transparent url(images/bg_wrapper-1.jpg) no-repeat;
    margin: 0;
    padding: 0;
#wrapper-2
    width: 45em;
    text-align: center;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
#wrapper-3
    background: url(images/bg_wrapper-3.jpg) repeat-y;
    color: #333;
    text-align: left;
#content-top
    margin: 0;
    height: 1em;
    background: url(images/bg_content-top.jpg) no-repeat;
    font-size: 0;
    line-height: 0;
#content-1
    float: left;
    width: 12em;
    font-size: 0.9em;
    padding: 0;
    margin-top: 2em;
    margin-right: 2em;
    margin-bottom: 0em;
    margin-left: 0em;
#content-2
    float: left;
    width: 40em;
    padding: 0;
    font-size: 0.8em;
    margin-top: 2em;
    margin-right: 0px;
    margin-bottom: 0em;
    margin-left: 0em;
#content-3
    float: left;
    width: 250px;
    font-size: 10pt;
    margin: 0;
    padding: 0;
#content-4 {
    width: 190px;
    padding: 0px;
    line-height: 0px;
#content-bottom
    clear: both;
    height: 1em;
    background: url(images/bg_content-bottom.jpg) no-repeat;
    font-size: 0;
    line-height: 0;
.content-wrap
    margin: 0;
    padding-top: 0px;
    padding-right: 2em;
    padding-bottom: 5px;
    padding-left: 0px;
#footer p
    font-size: .75em;
    margin: 12px 0;
p.content-wrap {
    font-size: 9pt;
    color: #999;
@Blog post styles
.date
    float: left;
    height: 52px;
    width: 52px;
    background: url(images/date.png) no-repeat;
    margin-right: 10px;
    padding-top: 0px;
    line-height: normal;
.date .month
    display: block;
    text-align: center;
    color: #FFF;
    font-size: 11px;
    padding-top: 4px;
    text-transform: uppercase;
.date .day
    display: block;
    text-align: center;
    padding-top: 5px;
    color: #222;
    font-size: 18px;
    font-weight: bold;
.meta
    display: block;
    font-size: 11px;
    color: #666;
    clear: right;
.blog-entry
    clear: both;
    padding-top: 2px;
#searchform
    margin: 8px 0;
    padding: 0;
@Search form styles
#searchform fieldset
    margin: 0;
    padding: 0;
    border: 0;
#searchform label
    color: #999;
    display: none;
#searchform input
    width: 160px;
    color: #222;
#searchform #submitquery
    display: none;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap p {
    line-height: 1.35em;
    text-align: justify;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-1 .content-wrap #Accordion1 .AccordionPanel.AccordionPanelOpen .AccordionPanelContent p {
    line-height: 1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #sprytextarea1 span .content-wrap {
    font-size: .5em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #website {
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #website {
    display: none;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us #website label {
    display: none;
#website {
    display: none;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset legend {
    font-size: 1.1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset legend {
    font-size: 1.1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset legend {
    font-size: 4em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset .AccordionPanelContent {
    font-size: 1em;
#wrapper-body #wrapper-1 #wrapper-2 #wrapper-3 #content-2 .content-wrap #Contact Us fieldset .AccordionPanelContent {
    font-size: 3em;
.fieldname {
    font-size: .9em;
CSS for Horizontal Nav Bar:
#menu4 {
    width: 829px;
    margin: 0 auto 0 auto;
#menu4 ul {
    list-style:none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 30px;
    letter-spacing: -3px;
    line-height: 1.2em;
    border-top:5px dotted #c7e7f3;
    border-bottom:5px dotted #c7e7f3;
    float:left;
    clear:both;
    margin:20px;
    text-align:center
#menu4 ul li{
    float:left;
#menu4 ul li a{
    display:block;
    text-decoration:none;
    padding:10px 10px 5px 10px;
    color:#66b8d8;
    width:170px;
#menu4 ul li a span{
    display:block;
#menu4 ul li a span.title{
#menu4 ul li a:hover span.title{
    color:#00adef;
#menu4 ul li a span.text{
    padding:0px 5px;
    font-family: Georgia, serif;
    font-size: 13px;
    font-style: italic;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.6em;
    color:#c7e7f3;
    visibility:hidden;
#menu4 ul li a:hover span.text{
    visibility:visible;
Thanks!

Move navigation bar of promoted list down

is it possible to move horizontal scroll from position 1 t0 position 2 as in image?any pointer will be helpful..

Hi,
According to your post, my understanding is that you wanted to move navigation bar of promoted list down.
You can add the Jquery code into a Content Editor Web Part.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $existingdiv = $("#promotedlinksheader_WPQ4");
var $temp = $existingdiv.clone();
var $tab = $existingdiv.next();
$existingdiv.remove();
$tab.append($temp);
</script>
You can also use the CSS code to change the style.
<style type="text/css">
#promotedlinksheader_WPQ4 {
POSITION:absolute;
margin-top:150px;
</style>
The result is as below:
Best Regards,
Linda Li
Linda Li
TechNet Community Support

Can we move the navigation bar (prev, next link) of advanced table to left?

Hi,
I have a question regarding the OA Framework advancedTable navigation bar.
Normally it is shown on the top right corner of the table, if it contains more than 10rows,
it will show on the bottom as well.
My question is, is there a setting to move this navigation bar (Previous Link, Records List, Next Link)
from the right side to the left side or to the middle?
In the OAF Developers Guide it doesn't state about being able to move this navigation bar.
Navigation
The navigation bar allows you to traverse across different row ranges of a table and is rendered:
- At the top of the table if the number of rows in the table is less than 10.
- At both the top and bottom of the table if the rows in the table is equal to or greater than 10.
Note: No navigation bar is displayed if the number of rows in the view instance is less than the value specified
for the advancedTable Records Displayed property.
When a user first navigates to the page, OA Framework does not know how many rows will be returned to the
table. The navigation bar simply shows the Previous and Next links.
Once the user navigates through all the rows, the navigation bar displays the row range as a poplist so that the
user can navigate directly to a specific range of rows, as shown below.
Thanks.

Hi,
I don't think there is anyway to move the same from right to left/Middle.
Regards,
Gyan

Unwanted movement in horizontal navigation bar

Similar Messages

Maybe you are looking for