PDA

View Full Version : Centering Spry?



kerrminator
Jan 19th, 2010, 06:03 PM
Hi! I feel like this is a dumb question, but I don't know how to get my spry horizontal menu bar to be centered in my table cell. I thought that simply by selecting the align center option for the table cell would center the menu bar, but it just stays aligned left. Do I have to change something in the CSS for the menu bar or what? Thanks for your help! :D

-Kerr

harrierdh
Jan 19th, 2010, 08:04 PM
You do need to modify your css. You didn't post any code or a link to your site so it's pretty hard to help out. No telling what Spry is doing. Probably using relative positioning.

kerrminator
Jan 19th, 2010, 08:24 PM
So, here's the entire CSS. I tried changing a couple things, but it didn't do what I need it to so I changed it back....


ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
}

ul.MenuBarActive
{
z-index: 1000;
}

ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 8em;
float: left;
}

ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
}

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}

{
width: 230px;
white-space: nowrap;
}

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: 1px solid #CCC;
}

ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #660000;
padding: 0.5em 0.75em;
color: #FFFFCC;
text-decoration: none;
font: verdana;
}

ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #9A0000;
color: #FFF;
}

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #9A0000;
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%;
}

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%;
}


ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
}

{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
}

harrierdh
Jan 19th, 2010, 09:07 PM
That's not enough code for me to help out. Maybe this will help. You need to post all the code. Here is another hint. Get Firefox, then get Firebug. With Firebug you can change css styles on the fly. You just right click anywhere on the web page and click Inspect Element. That will drill you right into the HTML and CSS.

http://www.bluerobot.com/web/css/center1.html

kerrminator
Jan 19th, 2010, 09:29 PM
I have firefox, but I'm wondering, I think what you're talking about is similar to in Opera where you can right click on the page, click source and then go into the code. Anyway, if posting this code helps then great, otherwise I'll just leave it aligned left for now. :-P Thanks much!

<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
background-color: #660000;
}
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style5 {
font-family: "Copperplate Gothic Bold";
font-size: 16px;
color: #660000;
}
.style6 {font-size: 10px}
.style7 {font-size: 12px; }
-->
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style8 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
}
-->
</style>
</head>

<body>
<table width="1000" border="1" align="center" cellpadding="6" cellspacing="0" bordercolor="#000000" bgcolor="#FFFFCC">
<tr>
<th scope="col"><span class="style5">Mohawk Valley Trading Company</span></th>
</tr>
<tr align="center">
<td><div align="center">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Home</a> </li>
<li><a href="#">Honey</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Raw Honey</a>
<ul>
<li><a href="#" class="MenuBarItemSubmenu">Adirondack Wildflower Honey</a>
<ul>
<li><a href="#">Autumn Wildflower Honey</a></li>
<li><a href="#">Summer Wildflower Honey</a></li>
</ul>
</li>
<li><a href="#">Blueberry Blossom Honey</a></li>
<li><a href="#">Apple Blossom Honey</a></li>
<li><a href="#">Orange Blossom Honey</a></li>
<li><a href="#">Buckwheat Honey</a></li>
</ul>
</li>
<li><a href="#">Maple Syrup</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">Tiles</a>
<ul>
<li><a href="#" class="MenuBarItemSubmenu">Stone Tile</a>
<ul>
<li><a href="#">Travertine Tile</a></li>
<li><a href="#">Soapstone Tile</a></li>
<li><a href="#">Slate Tile</a></li>
<li><a href="#">Granite Tile</a></li>
<li><a href="#">Limestone Tile</a></li>
<li><a href="#">Marble Tile</a></li>
<li><a href="#">Onyx Tile</a></li>
</ul>
</li>
<li><a href="#">Ceramic Tile</a></li>
</ul>
</li>
</ul>
<span class="style4"></span></div></td>
</tr>
<tr>
<td><!-- TemplateBeginEditable name="H1" -->
<div align="center" class="style8">
<h1>H1</h1>
</div>
<!-- TemplateEndEditable --></td>
</tr>
<tr>
<td><span class="style4" bgcolor="#FDFFDC#FDFFDC#FDFFDC#FDFFDC"><!-- TemplateBeginEditable name="main-body" -->main-body<br />
<br />
<br />
<br />
<br />
<!-- TemplateEndEditable --></span></td>
</tr>
</table>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

harrierdh
Jan 19th, 2010, 11:24 PM
I couldn't get it to center either. There is too much relative and absolute positioning going on.

Since you have a fixed page with, I did get this to work.

<td><div style="margin-left: 17%">
<ul id="MenuBar1" class="MenuBarHorizontal">

Excavator
Jan 20th, 2010, 12:15 AM
Hello kerrminator,
Using CSS you will need 3 things to center an element like your menu:

a DocType Declaration
an element with a width
that elements right/left margins set to auto

Tables are different though. Positioning may not help either.

In your CSS, make your styling for .MenuBarHorizontal look like this:


ul.MenuBarHorizontal {
width: 660px;
margin: 0 auto;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
}


When posting code here, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.

kerrminator
Jan 21st, 2010, 02:18 PM
Thanks! I got it to work finally by changing the width and setting the margin to auto. :-) Oh and thanks for the mention about the code tags....I didn't realize how to do that. :o