Solved

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

Posted on 2009-05-07
22
299 Views
Last Modified: 2012-05-06
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
Comment
Question by:Teenaree
  • 10
  • 7
  • 4
22 Comments
 
LVL 3

Expert Comment

by:mharfouch
ID: 24333339
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
 
LVL 3

Expert Comment

by:mharfouch
ID: 24333345
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
 

Author Comment

by:Teenaree
ID: 24333364
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
 
LVL 3

Expert Comment

by:mharfouch
ID: 24333378
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
 

Author Comment

by:Teenaree
ID: 24333389
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
 
LVL 3

Expert Comment

by:mharfouch
ID: 24333418
.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
 
LVL 3

Expert Comment

by:mharfouch
ID: 24333421
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
 

Author Comment

by:Teenaree
ID: 24333431
Ok, will implement that and reply back.

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

brb
0
 

Author Comment

by:Teenaree
ID: 24333453
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
 
LVL 3

Expert Comment

by:mharfouch
ID: 24333462
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

Author Comment

by:Teenaree
ID: 24333489
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
 
LVL 3

Expert Comment

by:mharfouch
ID: 24333502
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
 

Author Comment

by:Teenaree
ID: 24333540
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
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 24333565
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
 

Author Comment

by:Teenaree
ID: 24333576
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
 

Author Comment

by:Teenaree
ID: 24333629
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
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 24333648
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
 
LVL 12

Accepted Solution

by:
Tony van Schaik earned 500 total points
ID: 24333652
The Sprymenu needs a width to be centered not auto or 100%. Then you only need margin auto to center it.
0
 

Author Comment

by:Teenaree
ID: 24333663
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
 

Author Comment

by:Teenaree
ID: 24333670
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
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 24333692
You're welcome
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now