Spry Menu - getting it to go fully across the page
Hi Everyone,
I'm making pretty good progress with DW CS4 to create my own business website, using a MacBook Pro. I've created a Spry Horizontal Menu Bar on the homepage, and have managed to get it how I want it to look (colours, position etc.) except that I would like the menu to go across the whole width of page. At the moment it leaves a small gap at the right of the menu which looks unprofessional. I had to change the font size to 95% so that the menu doesn't extend onto another line, but I just can't get it to fit exactly the 46em page width. (I am not using any submenus).
Here is the code below. Would be very grateful for any help.
Justin
@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
margin: auto;
padding: 0;
list-style-type: none;
font-size: 95%;
cursor: default;
width: auto;
min-height: 1em;
/* 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;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
white-space: nowrap
/* 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;
width: auto;
position: absolute;
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;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
float: none;
background-color: transparent;
/* 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 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: none;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #83B02B;
padding: 0.5em 1.54em;
color: #FFFFFF;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #E50000;
color: #FFF;
font-size: 100%;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #E50000;
color: #FFF;
#here { background-color: #7F7F7F; }
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%;
font-family: Verdana, Arial, sans-serif;
/* 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: #FFF;
Justin,
I had the exact same question a few days ago. I did what Ben suggested at first. I wrapped the entire menu (or ul) in a div and applied an id with a bgcolor the same as the menu. I was totally dumbfounded when it wouldn't span the entire page. I div should be a block element and therefore span edge of the page. I then set the width of the div trying to get it to go across the full 1000 pixel space I wanted covered. Still nothing!
Then I had an insight. The styles on the ul that build the menu position is absolutely, with basically takes it out of the page flow. Have you ever seen a div with nothing it in...no you haven't because they always collapse, just like an empty td. Sooo, I went back and set the HEIGHT of the div and removed the width and guess what? It worked perfectly. I did have to set the height in ems and played around with it as I decreased the font size of the menu. Currently my menu is set to 80% in the .MenuBarHorizontal and my background div is set to 1.8 ems.
To sum up:
1. Wrap the menu in a div with some id (or class) applied to it.
<div id="navbg">
<ul id="MenuBar1" class="MenuBarHorizontal">
</ul>
</div>
2. Build an id (or class) that sets the bgcolor and height
#navbg {
background-color: #23A6DC;
height: 1.8em; (because my menu is at 80%, otherwise 2 em seemed to work fine)
DONE!
Similar Messages
-
I am moving from Southern California to Maui, Hawaii and I need to figure out the best way to get my 24 inch iMac across the ocean. Does anyone know the best way to do this? I have found GearGrip's LCD harness so that I can do carry-on onto the plane... Or maybe use a Pelican Case to do it as a "checked bag"? Or any other suggestions??! Please help!
Thanks so much!!I don't recommend you send the iMac in a checked bag. Might get damaged.
Check the airlines website for carry on guidelines.
Or, if you have the original box that the iMac came in, if you have someone who can pick up the iMac for you, send it ahead Fed Ex and insure the package.
Just make sure the display is covered to protect it. A blanket perhaps.
Aloha ... -
Q43: How to get Doc Num, Qty, Doc Num Qty going across the page not down
Dear All,
I would like to know if it is possible to report each and every separate purchase order doc num and qty per Item Code across the page in columns as opposed to a 'downward' list such as this report would produce?
SELECT T0.[ItemCode], T0.[Dscription], T1.[DocNum], T0.[OpenQty]
FROM POR1 T0 INNER JOIN OPOR T1 ON T0.DocEntry = T1.DocEntry
WHERE T1.[DocStatus] = 'O'
Example output required
Item No P/o#1Qty P/O#2 Qty P/O#3 Qty
1234 23 2 24 2 25 3
Any solutions gratefully received.
RobinHi Robin,
Use the drag and releate option PO wise on the details. Selct the item and drop it ove PO details. you will get a solution alteast near to what you expect but column wise.
Purchase reports --> Purchase analysis by items Is it not of any help to you ?
Regards,
Rakesh N -
Question
My screen opened, and with every click the page (letters/images) got bigger. I can not get it to return to normal image size. I have to use the slide bar to read across the page. What do i do to correct it back to normal size???Hi jholzworth,
It sounds like you might have accidentally hit the zoom button. Try hitting ''CTRL + 0'' to return it to normal size. Just so you are aware, ''CTRL'' and ''+'' will zoom in and ''CTRL'' and ''-'' will zoom out.
Hopefully this helps! -
See question above. Our website hosts think it's something to do with Firefox since it doesn't happen for them. When I go into a web page to update information, if it has a phone number, after I make an update, the words "Skype highlighting" extend all across the page. It's frustrating.
Do you have the Skype extension for Firefox installed?
That probably opens happens for users who have the Skype extension installed.
Try posting at the Web Development / Standards Evangelism forum at MozillaZine. The helpers over there are more knowledgeable about web page development issues with Firefox. <br />
http://forums.mozillazine.org/viewforum.php?f=25 <br />
You'll need to register and login to be able to post in that forum. -
Newspaper style report (multiple column sets across the page)
Hello,
I have an Answers report that displays the "top 20" and has only 2 narrow columns (name and total). So in the dashboard it looks like a long vertical strip:
aaa 999
aaa 999
aaa 999
aaa 999
It would look much nicer if it was a "newspaper style", where you have more than one column set across the page:
aaa 999 | aaa 999
aaa 999 | aaa 999
aaa 999 | aaa 999
Is this possible to be done using OBI EE? I searched for a "newspaper style" checkbox in the report properties (hoping that it would be that easy) but no luck... I couldnt find any posts in this forum either, maybe I am using the wrong terminology.
Thanks
LuisHi Luis,
yes, this is possible by using a pivot table. assuming you want 10 records per column, you need to do the following:
1) add a column to your report with this formula:
RCOUNT(Column) - 10 * FLOOR((RCOUNT(Column) - 1) / 10)
2) add another column to your report with this formula:
FLOOR((RCOUNT(Column) -1) / 10)
3) go to pivot table
4) add column 1) to Rows Section
5) add column 2) to columns section
6) add the other columns in measures box
7) add aggregation rule to "FIRST" for all columns in measures box
8) put measure label box in rows section under the box of column 2)
Regards,
Stijn -
I want to print an excel worksheet so that the rows are shaded light then dark, light then dark. This helps when reading the data across the page on any selected line. Where do I select that option?
sophia beth wrote:
I want to print an excel worksheet so that the rows are shaded light then dark, light then dark. This helps when reading the data across the page on any selected line. Where do I select that option?
Not sure if it's any better in the version you have, but in earlier versions, you would have to manually select alternating rows using cmd-click in the row numbers and then fill the cells with the lightest possible shade in the fill palette. Again, in an earlier version, it is possible to use the format painter (use your Excel help for details) to select several rows formatted with the shading and paint that format to an equivalent number of rows elsewhere. -
How do i put a "draft" watermark across the page?
how do i put a "draft" watermark across the page?
You search for the keyword "watermark" in Pages User Guide !
You will find it in pages 17, 41, 60, 262 and 263 (in the English version).
Yvan KOENIG (VALLAURIS, France) mardi 12 juillet 2011 22:49:14
iMac 21”5, i7, 2.8 GHz, 4 Gbytes, 1 Tbytes, mac OS X 10.6.8
Please : Search for questions similar to your own before submitting them to the community
To be the AW6 successor, iWork MUST integrate a TRUE DB, not a list organizer ! -
purchased a ipad mini3 keep getting messege Safari could not open the page because the server stopped responding.
Is this a wi-fi iPad? Is it connected to wi-fi? It sounds as if you're not connected to the Internet.
-
I have a Maverick iMac. Something got changed in the way my emails are coming in and they are stretching across the page. I don't want to upgrade my OS until everything is in working order. I must have clicked something to cause it.
R1: Seems you didn't configure you email account in your Outlook client properly. please refer to the following KB article and try to create a new mail profile to configure your email account again:
http://support.microsoft.com/kb/2758902
R2: Do you want create subfolders under Inbox to category your emails? If so, we can just right click on Inbox > select New Folder... After that, we need to create rules to move or copy your emails to each subfoler. See:
http://office.microsoft.com/en-us/outlook-help/manage-email-messages-by-using-rules-HA010355682.aspx
Besides, in order to avoid confusion and keep track of troubleshooting steps, we usually troubleshoot one issue per thread in order to find a resolution efficiently. Concerning your other question, I suggest we create new posts for your other questions via:
http://social.technet.microsoft.com/Forums/en-US/home?forum=outlook
Thanks for the understanding.
Steve Fan
TechNet Community Support -
When I put firefox on as browser the left margin moves about 1/3 across the page. how do I adjust the margins
This issue can be caused by the Babylon Toolbar 1.1.8 extension
*https://support.mozilla.com/kb/Troubleshooting+extensions+and+themes
Start Firefox in <u>[[Safe Mode]]</u> to check if one of the extensions is causing the problem (switch to the DEFAULT theme: Firefox (Tools) > Add-ons > Appearance/Themes).
*Don't make any changes on the Safe mode start window.
*https://support.mozilla.com/kb/Safe+Mode -
The style of the horizontal spry menu seems as to have been turned off when on the web though is visible and functioning on CS4 Dreamweaver design and live views. I have styled the spry menu and can view it in the properties section though the style setting is there on the internet it looks as if the styles have turned off and appears unformatted vertically when it should be a cascading horizontal menu bar. Not sure where the error is, I have looked at the coding and as I'm not the most experienced with spry.....
this is the coding above the head.
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript">
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
I have noticed that SpryMenuBarHorizontal.css doesn't appear in the spry assets folder, does this matter? (not sure how to insert into the assets menu). Any help would be greatly appreciated!thanks for testing it. I'm not sure how to proceed though as the css file is in my local_sites/spry assets folder for the website. I've tried to point it to other (copies of SpryMenuBarHorizontal.css) and spry assets folder externally from the site and again internally in the root folder and seems to make little or no difference.
Your suggestion of what it should read,(sorry to sound so naive at all this) though would you mind giving a step-by-step guide on how to go about it? as I'm obviously missing something in the setup process.
thanks again for your help. -
Customizing Spry Menu - Drop items different from tabs at the top
How can I remove the background image from the dropped down items on a Horizontal Spry Menu while keeping the image for the tabs at the top? It seems every time I change something for the top tabs, the change is carried to the drop down menus as well.
Here is a link:
http://www.monicagraphicdesign.com/Bill/spiritual.html
You can see what is happening if you hover over "About Bill"Open your SpryMenu.css file. Scroll down a ways to this:
/* 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;
background-color: #000;
background-image: none;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
background:none;
width: 8.2em;
Nancy O. -
Spry menu-change links to carry through all 16 pages?
I am sure this is easy to do. I just don't know where to begin.
I have a 16 page website "northeastohioweddingexperts.com. The side menu is the same on all 16 pages. Its a spry menu. What is the easies way to change the links so it changes through all 16 pages? I have been doing it the hard way by make a change to the spry menu, and opening each HTML page and pasting the change in that area. I am sure this can be all changed simply in CSS. So if there is one document that can be altered, or on CSS file that can be changed THIS would be helpful.
Please point me in the right direction.
Thanks,
TonyHTML = content. CSS = styles. I'm sorry to say that changes to your CSS file won't have any global effect on the links in your HTML code.
If you had built your site around a DW Template or Server-Side Includes, making site wide changes to menus would be much easier. See links below for details:
Dreamweaver Templates -
http://www.smartwebby.com/web_site_design/dreamweaver_template.asp#1
Server-Side Includes
http://www.smartwebby.com/web_site_design/server_side_includes.asp
If you don't want to start over, use Find & Replace (Ctrl+F) to change hyperlink code in your local site.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
the menu bar seems crowded on the left side of the page - also I don't remember seeing my desktop background on the older version - the toolbars went across the whole page. I prefer it that way - can i change it?
Can you attach a screenshot?
*http://en.wikipedia.org/wiki/Screenshot
Use a compressed image type like PNG or JPG to save the screenshot and make sure that you do not exceed the maximum file size (1 MB).
Right click in a free space on your desktop.<br />
Left click on Personalization.<br />
There are four options in Windows 7 at the bottom of the screen, choose "Window Color and Appearance".<br />
Select a border color<br />
Uncheck: "Enable transparency"<br />
*[[/questions/804050]]<br />
Maybe you are looking for
-
After SN install can't launch Disk Utility from external drive
I recently upgraded 10.5.9 to SN on my white Macbook. First I used Carbon Copy Cloner to clone the old drive onto the replacement drive in an external enclosure. Then I swapped drives so that the new drive is now the internal drive and the old drive
-
Does any one know how to make idvd in full screen? I have done it many times before, but its not working now.
-
Ebook updates from Itunes producer
How long does it take for my ebook to be updated on iTunes? I updated the file in Itunes producer and re-delivered it but everything is still the same? I need to update the tile and Author info. Any suggestions.
-
Production order different M/C confirmation
Hi all, If possible to entry in single work order two machine production confirmations. Example: Work order: quantity 1000 pcs M/C used: High -500 Pcs, Low speed -500 Pcs for this flow how can make it entry in production order information Advance tha
-
Lookingf for file ixp826.tmp
Trying to re-install itunes on this computer and I get to what seems like the end and it tells me that there was a problem with the installation package. Its also looking for a file ixp826.tmp\itunes64.msi. I had uninstalled Itunes because my neice