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.
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 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 Beginnerkatemac08 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. -
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.
> -
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 -
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 -
Add Horizontal Scroll Bar to MII Navigation
Hello,
We are on MII 12.1.8 build (20).
Our client would like to see a horizontal scroll bar for the Navigation pane such that if the Name of the link is longer the navigation page scrolls horizontally but I figured that in MII 12.1 I can only wrap the names or let them expand.
I brought in the DynamicHomePageLibrary.xsl and tried to customized but I am unable to get a proper scroll bar.
Please guide me on how I can add a horizontal scroll bar to MII Navigation page, which lines must be added/modified in DynamicHomePageLibrary.xsl
Thanks,
AdarshAt line 308 you should see something like this:
<xsl:attribute name="style">z-index=5;display:visible;height:100%;border:1px solid #666;padding:5px;overflow:auto</xsl:attribute>
Try adding a css width like so:
<xsl:attribute name="style">z-index=5;display:visible;height:100%;border:1px solid #666;padding:5px;overflow:auto; width: 250px;</xsl:attribute>
Edited by: Michael Appleby on Aug 17, 2011 12:25 AM added lines after and before the blocks -
Combine menu bar and navigation bar in a single horizontal space
I would like to have the navigation bar controls to the right of the menu bar options in the same horizontal space, saving vertical space. This could be done with side-by-side bars or one "compound bar".
Can I do this? How? Thanks for your help.Use the procedure in the following link. It shows how to customize the toolbars, allowing you to drag and drop the items you want onto the menu bar. You can then hide the navigation toolbar - https://support.mozilla.com/en-US/kb/how-do-i-customize-toolbars
You can, if you prefer, hide the menu bar and it will be replaced with the Firefox button. To do that right-click on a toolbar and click on the "Menu bar" entry to de-select it. Then using the Firefox 4 UI Fixer add-on you can convert the Firefox button into an ordinary button that can be moved like other buttons on the toolbar - https://addons.mozilla.org/firefox/addon/firefox-4-ui-fixer -
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" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="PNGfix.css" />
<![endif]-->
<!--[if lte IE 7]>
<style type="text/css">
#hornav ul li { padding: 0 0 0 10px; }
</style>
<![endif]-->
<!--[if lte IE 6]>
<style type="text/css">
#wrapper-body, #wrapper-1, #wrapper-2, #wrapper-3 { height: 1%; }
</style>
<![endif]-->
<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">
<!--
<oa:widgets>
<oa:widget wid="2141545" binding="#OAWidget" />
</oa:widgets>
-->
</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" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="LorentzBanner.swf" width="700" height="250">
<!--<![endif]-->
<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" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<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>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</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! -
i want to delete some tabs from the bar between the navigation bar and the tab bar.
== This happened ==
Not sure how often
== recentlySee [[Deleting bookmarks]]
You can open the Bookmarks Manager (Library: Bookmarks > Organize Bookmarks) and select in the left pane "All Bookmarks > Bookmarks Toolbar" and select the bookmarks that you want to remove. -
Positioning navigation bar vertical rather than horizontal on side on web
Is it possible and I think it is to place the webitem navigation_block bar on the side of the page rather than the default position on the top, without modifying the web template ( at runtime)
Even during the design time I am not able to make it vertical in wad.
Any help would be appreciated.
ThanksI don;t see 0Analyser bar as vertical, it is horintal. Below is the code from 0ANALYZER and I located the navigation bar. my guess is that there is a paramname that can specify vertical alignment.Don;t know what that would be. None of the properties has that option..
<!-- Navigational block: GR1NavBlock--->
<object>
<param name="OWNER" value="SAP_BW"/>
<param name="CMD" value="GET_ITEM"/>
<param name="NAME" value="GR1NavBlock"/>
<param name="ITEM_CLASS" value="CL_RSR_WWW_ITEM_NAV_BLOCK"/>
<param name="DATA_PROVIDER" value="DP"/>
<param name="GENERATE_CAPTION" value=""/>
<param name="WIDTH" value="200"/>
<param name="SHOW_AXES_GROUPING" value="X"/>
ITEM: GR1NavBlock
</object>
Maybe you are looking for
-
White macbook boots to black screen?
I have a 2006 white macbook with the 2.0ghz core 2 duo processor. It boots well and runs fast most of the time, but sometimes after i press the power button instead of the screen becoming white with the apple logo etc. it just stays black. the fans r
-
Here is my plan for upgrading to Lion
I assumed that there was going to end up being a huge thread about problems with upgrading to Lion. And I have too much at stake (Adobe, Microsoft products, etc) to be helping beta test such a major upgrade. And I am really amazed out how many people
-
What printer will work with a mini.
I have a Mini and I needf a all in one printer. I was thinking about the HP Photosmart C3180 All-in-One Printer, Scanner, Copier. My mini is intel and I dont know if this will still work. Does anyone have any info on this. Or maybe you know of a all
-
How do I get my ical on the icloud?
I have my ical on my imacs and I then sync them to my iphone. How do I sync these to the icloud? I am using OSX 10.5.8 and 10.6.8 on my imacs. Once I have my ical info on my iphone is there away to get this info backed up to the cloud? I have tri
-
B570 OneKey Recovery to new SSD
Hi all, I have a B570 laptop purchased in 2012; I created the system recovery disks on first boot up which fitted on 2 DVD's. I have just swapped my WD 750GB 5400RPM HDD for a Samsung 850 EVO 500GB SSD. I wanted to run a fresh install of windows 7 us