• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 314
  • Last Modified:

How to center Spry Horz. Menu - is my CSS all wrong? :/

Hi, :)
I am going out of my mind trying to get my horizontal menu to center on the page. (and also in Safari, both Mac & Windows, I cannot get the table beneath to remain seated beneath it, it tends to sit to the right of the menu) Concentrating on centering right now (but open to more)

I can build things but have a tough time trouble-shooting problems - like this.

I have a CSS file that styles my entire website, and have edited the spry CSS as needed.

I really have tried to follow all advice on this site.  I really just wish someone could review my code.  (is it too painful to paste it all below? oh boy)  -guess I'll do that.  I also am attaching a text file with the code from my homepage.  (all pages are setup the same, only the main div's content changes.)

Please let me know if I can provide any further information. Thank you SO MUCH for your time.   :)



-------------RELATIVE CSS CODE FOR MY SITE - HARDLY ANY:
 
.bodylook {
 width: 65em;
 height:900px;
 margin: 0 auto;
background:url(../images/Tesi-background.png);
background-repeat:repeat-y;
vertical-align: top;
	}
 
----------SPRY MENU - ALL CSS CODE: - I have edited mercilessly - NOT an expert obviously. :) 
 
@charset "UTF-8";
ul.MenuBarHorizontal {width: 80em; margin: 0 auto; }
ul.MenuBarActive
{z-index: 1000;}
ul.MenuBarHorizontal li
{margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#000000;
	background-color:#FF0000;
	text-align:center;
	position: relative;
	text-align: center;
	cursor: pointer;
	width: 8em;
	float: left;}
ul.MenuBarHorizontal ul
{margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 11px;
	color:#000000;
	background-color:#FF0000;
	text-align:center;
	z-index: 1020;
	cursor: default;
	width: 10.1em;
	position: absolute;
	left: -1000em;}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{left: auto;}
ul.MenuBarHorizontal ul li
{width: 10.1em;}
ul.MenuBarHorizontal ul ul
{position: absolute;
	margin: -5% 0 0 95%;}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{left: auto;
	top: 0;}
ul.MenuBarHorizontal ul
{border:#000000;
	border-style:solid;
	border-width:1px;}
ul.MenuBarHorizontal a
{display: block;
	cursor: pointer;
	background-color: #FF0000;
	color: #000000;
	text-decoration: none;
	border:#000000;
	border-style:solid;
	border-width:1px;
	padding-top: 1em;
	padding-right: 0em;
	padding-bottom: 1em;
	padding-left: 0em;}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{background-color: #FF0000;
	color: #FFF;}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{background-color: #FF0000;
	color: #FFF;}
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{background-image: url(SpryMenuBarDown.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{background-image: url(SpryMenuBarRight.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;}
d 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%;}
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
 *******************************************************************************/
 
ul.MenuBarHorizontal iframe
{position: absolute;
	z-index: 1010;}
@media screen, projection
{
	ul.MenuBarHorizontal li.MenuBarItemIE
	{display: inline;
		f\loat: left;
		background: #FF0000;}
}

Open in new window

TEENAREE-SITE.txt
0
Teenaree
Asked:
Teenaree
  • 10
  • 7
  • 4
1 Solution
 
mharfouchCommented:
lol. oh dear...it's a little bit messy. ok i think you should start again here.

open up notepad and enter this:
<html>
<head>
put your css file here
</head>

<body class="body>
<P>
<p>
</p>
<p><li>HOME</li>
<li>COLLECTIONS</li>
<li>BRIDAL GOWNS</li>
<li>BRIDESMAIDS</li>
<li>SPECIAL OCCASIONS</li>
<li>FLOWER GIRLS</li></p>
etc

Designer Bridal Gowns at Tesi Bridal Boutique - Sophia Tolli

etc...
</body>
</html>

but like put your links and stuff in aswell.

then in your css put

#body{
        text-align:center;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        color:#000000;
        background-color:#FF0000;
}


and it should work

0
 
mharfouchCommented:
by the way thhat will center everything inbetween your body tags which is what you want to do by the looks of it, just make your menu and the text underneath centered?
0
 
TeenareeAuthor Commented:
Ok, I am going to attempt this.  Am I to understand that we are removing the "spry menu" stuff and baking this from scratch?

and thank you for being so nice.  you SO could of said "holy cow you really chopped up that bad boy" or something like that.  I'll take an "oh dear ANY DAY! :)

I want to try this and am still hanging out if you could please let me know that piece of information.

Thank you so much mharfouch!  :)

~TM
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
mharfouchCommented:
Woahhhhh spry i didn't read that...Can you put a link to the site up sorry? I thought it was just a basic menu.
0
 
TeenareeAuthor Commented:
Sorry about that.  I thought you might want a link.

It is deep bedded in their original site as I was showing the client their new design.

Caution: more clumsiness ahead. (not mine - mine is stylish clumsiness)  :P

TY!

http://tesibridal.com/NEW/index.html
0
 
mharfouchCommented:
.bodylook {
 width: 65em;
 height:900px;
 margin: 0px;
background:url(../images/Tesi-background.png);
background-repeat:repeat-y;
vertical-align: top;
        }
 
----------SPRY MENU - ALL CSS CODE: - I have edited mercilessly - NOT an expert obviously. :)
 
@charset "UTF-8";
ul.MenuBarHorizontal {width: 80em; margin: 0 auto; }
ul.MenuBarActive
{z-index: 1000;}
ul.MenuBarHorizontal li
{margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 10px;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        color:#000000;
        background-color:#FF0000;
        text-align:center;
        position: fixed;
        cursor: pointer;
        width: 8em;
        float: center;}
ul.MenuBarHorizontal ul
{margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 11px;
        color:#000000;
        background-color:#FF0000;
        text-align:center;
        z-index: 1020;
        cursor: default;
        width: 10.1em;
        position: fixed;
        left: -1000em;}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{left: auto;}
ul.MenuBarHorizontal ul li
{width: 10.1em;}
ul.MenuBarHorizontal ul ul
{position: absolute;
        margin: -5% 0 0 95%;}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{left: auto;
        top: 0;}
ul.MenuBarHorizontal ul
{border:#000000;
        border-style:solid;
        border-width:1px;}
ul.MenuBarHorizontal a
{display: block;
        cursor: pointer;
        background-color: #FF0000;
        color: #000000;
        text-decoration: none;
        border:#000000;
        border-style:solid;
        border-width:1px;
        padding-top: 1em;
        padding-right: 0em;
        padding-bottom: 1em;
        padding-left: 0em;}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{background-color: #FF0000;
        color: #FFF;}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{background-color: #FF0000;
        color: #FFF;}
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{background-image: url(SpryMenuBarDown.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{background-image: url(SpryMenuBarRight.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;}
d 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%;}
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
 *******************************************************************************/
 
ul.MenuBarHorizontal iframe
{position: absolute;
        z-index: 1010;}
@media screen, projection
{
        ul.MenuBarHorizontal li.MenuBarItemIE
        {display: inline;
                float: center;
                background: #FF0000;}
0
 
mharfouchCommented:
copy paste that...just reviewed all the errors for you...you accidentally mispelt a couple values and had a few things positioned left rather than center
0
 
TeenareeAuthor Commented:
Ok, will implement that and reply back.

You are a great help, and comforting support at the very least. :)

brb
0
 
TeenareeAuthor Commented:
hmm, I will recheck what I just did, but right now it appears that all buttons are gone accept for the lst one which is sitting in the first button's spot.

In Dreamweaver, they appear all bunched up on top of each other.

I will recheck (as much as I can)  TY! :)
0
 
mharfouchCommented:
I had a feeling that would happen...Repaste this over it


.bodylook {
 width: 65em;
 height:900px;
 margin: 0px;
background:url(../images/Tesi-background.png);
background-repeat:repeat-y;
vertical-align: top;
        }
 
----------SPRY MENU - ALL CSS CODE: - I have edited mercilessly - NOT an expert obviously. :)
 
@charset "UTF-8";
ul.MenuBarHorizontal {width: 80em; margin: 0 auto; }
ul.MenuBarActive
{z-index: 1000;}
ul.MenuBarHorizontal li
{margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 10px;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        color:#000000;
        background-color:#FF0000;
        text-align:center;
        position: inherit;
        cursor: pointer;
        width: 8em;
        float: center;}
ul.MenuBarHorizontal ul
{margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 11px;
        color:#000000;
        background-color:#FF0000;
        text-align:center;
        z-index: 1020;
        cursor: default;
        width: 10.1em;
        position: fixed;
        left: -1000em;}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{left: auto;}
ul.MenuBarHorizontal ul li
{width: 10.1em;}
ul.MenuBarHorizontal ul ul
{position: absolute;
        margin: -5% 0 0 95%;}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{left: auto;
        top: 0;}
ul.MenuBarHorizontal ul
{border:#000000;
        border-style:solid;
        border-width:1px;}
ul.MenuBarHorizontal a
{display: block;
        cursor: pointer;
        background-color: #FF0000;
        color: #000000;
        text-decoration: none;
        border:#000000;
        border-style:solid;
        border-width:1px;
        padding-top: 1em;
        padding-right: 0em;
        padding-bottom: 1em;
        padding-left: 0em;}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{background-color: #FF0000;
        color: #FFF;}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{background-color: #FF0000;
        color: #FFF;}
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{background-image: url(SpryMenuBarDown.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{background-image: url(SpryMenuBarRight.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;}
d 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%;}
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
 *******************************************************************************/
 
ul.MenuBarHorizontal iframe
{position: absolute;
        z-index: 1010;}
@media screen, projection
{
        ul.MenuBarHorizontal li.MenuBarItemIE
        {display: inline;
                float: center;
                background: #FF0000;}
0
 
TeenareeAuthor Commented:
Ok, they menu buttons are now all lined up vertically on top of each other on the left of center.

I appreciate your trying.  I hope it's not too late where you are.  I have about a half an hour left in me here (East Coast USA) 2:30 am

Thanks again, I'm still here if you are.

~TM
0
 
mharfouchCommented:
vertically? ahahaha wtf...I am so confused.
If this doesn't work then I dont know what will

-------------RELATIVE CSS CODE FOR MY SITE - HARDLY ANY:
 
.bodylook {
 width: 65em;
 height:900px;
 margin: 0 auto;
background:url(../images/Tesi-background.png);
background-repeat:repeat-y;
vertical-align: top;
        }
 
----------SPRY MENU - ALL CSS CODE: - I have edited mercilessly - NOT an expert obviously. :)
 
@charset "UTF-8";
ul.MenuBarHorizontal {width: 80em; margin: 0 auto; }
ul.MenuBarActive
{z-index: 1000;}
ul.MenuBarHorizontal li
{margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 10px;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        color:#000000;
        background-color:#FF0000;
        text-align:center;
        position: relative;
        cursor: pointer;
        width: 8em;
        float: left;}
ul.MenuBarHorizontal ul
{margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 11px;
        color:#000000;
        background-color:#FF0000;
        text-align:center;
        z-index: 1020;
        cursor: default;
        width: 10.1em;
        position: absolute;
        left: -1000em;}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{left: auto;}
ul.MenuBarHorizontal ul li
{width: 10.1em;}
ul.MenuBarHorizontal ul ul
{position: absolute;
        margin: -5% 0 0 95%;}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{left: auto;
        top: 0;}
ul.MenuBarHorizontal ul
{border:#000000;
        border-style:solid;
        border-width:1px;}
ul.MenuBarHorizontal a
{display: block;
        cursor: pointer;
        background-color: #FF0000;
        color: #000000;
        text-decoration: none;
        border:#000000;
        border-style:solid;
        border-width:1px;
        padding-top: 1em;
        padding-right: 0em;
        padding-bottom: 1em;
        padding-left: 0em;}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{background-color: #FF0000;
        color: #FFF;}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{background-color: #FF0000;
        color: #FFF;}
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{background-image: url(SpryMenuBarDown.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{background-image: url(SpryMenuBarRight.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;}
d 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%;}
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
 *******************************************************************************/
 
ul.MenuBarHorizontal iframe
{position: absolute;
        z-index: 1010;}
@media screen, projection
{
        ul.MenuBarHorizontal li.MenuBarItemIE
        {display: inline;
                float: left;
                background: #FF0000;}
}
0
 
TeenareeAuthor Commented:
Okay, it's back to a full menu but not centered.  The background color and picture are missing (just an over sight I'm sure - I know how to get them back)

I'm sorry to frustrate you.  Thank you for tweaking code for me.  Lord knows I can't do that.

Are you also East Coast?  the "wtf" made me fee right at home!  LOL  (where's the oh dear guy?)  jk

I understand if you want to move on.  I think I am going to just build a brand new page from scratch.  I read that someone else did that, restarted their computer, and all was good. I don't expect that to happen, but hey, at this point....

I'll be around about another half hour....  if you dare.

THANK YOU!! :D
~TM
0
 
Tony van SchaikFront-end Web developerCommented:
Ok i made the layout from scratch with only divs check the snippet, i didn't edit the default Spry css.
And try not to use inline styles and tables in combination with divs, that will give you browser and layout troubles. And use XHTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
	margin:0px;
	padding:0px;
	font:14px "Segoe UI", Tahoma, Arial;
}
 
#wrapper {
	width:982px;
	margin-left:auto;
	margin-right:auto;
	border:1px solid #e5e5e5;
}
#header {
	height:100px;
	display:block;
	background:#0066CC;
	}
#navigation {
	width:980px;
	height:40px;
	display:block;
	}
#container {
	width:980px;
	}
#content {
	padding:20px;
}
#footer {
	height:60px;
	padding-left:20px;
	background:#CCCCCC;
}
h2 {
	padding-top:0px;
	margin-top:0px;
}
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- WRAPPER -->
<div id="wrapper">
  <!-- HEADER -->
  <div id="header">This is your header</div>
  <!-- NAVIGATION -->
  <div id="navigation">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
          <ul>
            <li><a href="#">Item 1.1</a></li>
            <li><a href="#">Item 1.2</a></li>
            <li><a href="#">Item 1.3</a></li>
          </ul>
      </li>
      <li><a href="#">Item 2</a></li>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
          <ul>
            <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
                <ul>
                  <li><a href="#">Item 3.1.1</a></li>
                  <li><a href="#">Item 3.1.2</a></li>
                </ul>
            </li>
            <li><a href="#">Item 3.2</a></li>
            <li><a href="#">Item 3.3</a></li>
          </ul>
      </li>
      <li><a href="#">Item 4</a></li>
    </ul>
</div>
  <!-- /NAVIGATION -->
  <!-- /HEADER -->
  <!-- CONTAINER -->
  <div id="container">
    <!-- CONTENT -->
    <div id="content"><h2>Here is your content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin posuere ipsum vitae nunc lacinia lacinia. Etiam condimentum volutpat tempor. Nulla faucibus, neque nec eleifend molestie, odio ipsum dignissim ante, eget viverra ligula lorem et dolor. Donec non tortor sit amet elit mollis congue eu in nunc. Cras mattis, turpis eget pulvinar ultricies, quam mi hendrerit nisi, vitae malesuada elit justo quis nunc. In ac velit dolor, vel iaculis sapien. Pellentesque tincidunt urna eu enim lacinia vulputate. Aliquam id odio nisi. Integer sollicitudin elit a eros sodales sit amet vulputate mi pellentesque. Duis mattis elit pretium nisl euismod suscipit. Nunc eu massa leo. Donec a eros leo, ut venenatis turpis. Donec dapibus diam fringilla ligula aliquet in euismod felis imperdiet. Aliquam sapien elit, tempor eu vehicula a, lobortis eu eros. Curabitur a ligula lorem. </p>
 
<p>Aliquam sed consectetur dui. Vestibulum quis lectus nisl, vitae commodo enim. Nullam venenatis consequat euismod. Nullam in mauris purus, eget eleifend mi. Suspendisse nec luctus dui. Donec purus velit, aliquet non suscipit eu, placerat in justo. Integer faucibus ipsum non metus lacinia ultricies. Sed et tincidunt nisi. Nam sollicitudin leo purus, at gravida quam. Etiam iaculis ultrices odio, ullamcorper suscipit leo venenatis ut. Maecenas scelerisque nibh nec sapien mattis mattis auctor augue fermentum. Nunc scelerisque ante ultrices ante eleifend mattis. Proin feugiat, eros eu vehicula cursus, lectus augue condimentum arcu, ac auctor dolor nisi cursus nulla. Aliquam erat volutpat. 
 </p>
    
    
    </div>
    <!-- /CONTENT -->
  </div>
  <!-- /CONTAINER -->
  <div id="footer"><p>This is your footer</p></div>
</div>
 
<!-- /WRAPPER -->
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

Open in new window

0
 
TeenareeAuthor Commented:
Hi therealteune:,

The menu is not centered.  (?)  Is it on your computer?  I just previewed it in Firfox.  created a brand new file, xhtml1-transitional.

Thank you for jumping in.  That some clean code.  :)

~TM
0
 
TeenareeAuthor Commented:
Thanks again mharfouch:, you really did try to help me.  I appreciate it.  

And therealteune:, I do like how clean your code is.  I really want to stop using tables whenever possible, but do not have them completely controlled or understood yet.  Thank you for trying and the advice.  :)

This must be a stumper, I see this question all over the internet, most unanswered.  I wonder if this SPRY stuff is really concrete-ly put together.  

Thank you both!  I am going to have to sign off for now.  Sleep well!
~TM
0
 
Tony van SchaikFront-end Web developerCommented:
Try this; http://livedocs.adobe.com/en_US/Spry/SDG/help.html?content=WS895F3A6D-6D73-42ef-B568-3D04ABD2F171.html
Good luck

<style type="text/css">
<!--
/* Give the menu bar a width and set the margins to "auto"
 * so that the browser does the centering.
 */
ul.MenuBarHorizontal {
	width: 32.2em;
	margin: auto;
}
-->
</style>

Open in new window

0
 
Tony van SchaikFront-end Web developerCommented:
The Sprymenu needs a width to be centered not auto or 100%. Then you only need margin auto to center it.
0
 
TeenareeAuthor Commented:
Yep, that was my first stop a year ago, pretty much stayed away from these menus for the same reason I am having trouble with now.  I tried versions of that code.

THANK YOU THANK YOU for your help!!!  

I will look into this again in the morning.

Good night. :)
~TM
0
 
TeenareeAuthor Commented:
and will try it again tomorrow.  If it works for some unknown to God reason, I will give you the credit!  :)

Thanks again,
~TM
0
 
Tony van SchaikFront-end Web developerCommented:
You're welcome
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 10
  • 7
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now