Help with a text alignment

[FONT=verdana][SIZE=2][COLOR=#000000]Ok, I have a menu (that I did not build, that I got from a template) that I cannot seem to figure out how to center the text in, and it’s driving me crazy.

I have done the validation, and debugged it as much as I can, but I’m not a css guru, so I was hoping someone here can help me. I feel like I’ve tried everything.

So you can see the menu at [/COLOR][/SIZE][/FONT]www.eliteoutfittersutah.com/new[FONT=verdana][SIZE=2][COLOR=#000000]. The menu at the top I am desperate to center. I have been able to modify everything else through the css, but just can’t seem to get the text alignment centered. I have checked the js files as well, but don’t think it’s in there. I think it just might be missing a tag? Any help would be GREATLY appreciated.

The lavalamp.css is as follows:

[/COLOR][/SIZE][/FONT]

.lavaLampWithImage {
position: relative;
height: 68px;
width: 1018px;
overflow: hidden;
background-image: url(../images/navbg.png);
background-repeat: no-repeat;
background-position: top;
padding-top: 15px;
padding-left: 0px;
    }
        .lavaLampWithImage li {
          float: left;
          list-style: none;
        }
          .lavaLampWithImage li.back {
            background: url("../images/lava.png") no-repeat right -34px;
            width: 9px; height: 34px;
            z-index: 8;
            position: absolute;
          }
            .lavaLampWithImage li.back .left {
              background: url("../images/lava.png") no-repeat top left;
              height: 34px;
              margin-right: 9px; /* 7px is the width of the rounded shape */
            }
          .lavaLampWithImage li a {
            font: 17px arial;
font-weight: bold;
            text-decoration: none;
            color: #FFFFFF;
            outline: none;
            text-align: center;
            top: 7px;
            text-transform: uppercase;
            letter-spacing: 0;
            z-index: 10;
            display: block;
            float: inherit;
            height: 34px;
            position: relative;
            overflow: hidden;
            margin: 0 12px;  
          }
            .lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
              border: none;
            }[FONT=verdana][SIZE=2][COLOR=#000000]  [/COLOR][/SIZE][/FONT]

Other than jquery.com, I don’t know of any particular resource, but there is a SitePoint book called jQuery from Novice to Ninja which I just did a request for the free chapters of it, as I have to deal with some jQuery nonsense as well. There’s a basic beginner’s tut at jQuery.com and there are lots of sites with little bloggy articles about doing some one particular thing in jQuery all over the place.

Re the template: maybe go back to how it was when you first got it, and check in IE.

Normally any changes you make to some code, you already have all your browsers open and when you make a change, check check check. That way, some single little issue won’t get the chance to grow into a bigger one in some browser you missed.

Don’t feel bad about having trouble with templates: because they are made to be customised, they are always more complicated code than if you were building it yourself by hand. I know CSS pretty well (my opinion of course) but I have trouble messing with templates myself, because there’s always some other code somewhere else that’s interfering or getting interfered with by my code. So I would expect them to be harder for a newbie.

Yeah, I knew the code was messed up, but didn’t realize it was that messed up. That’s what I get for using a template right? I just don’t know enough about css, other than basic css to know how bad it was, but you gave me a good insight there, and I think I may need to spend a little time with a css course maybe. Problem is now I just realized that the whole layout is messed up in IE (I use Firefox), just when I thought I almost had it, I am back at square one, and I know even less about JQuery than I do css, so now I am really screwed! Man, I need to go back to school! :frowning:

Thank you SO much for your help! I really appreciate your time! Do you know any good JQuery resources where I could figure out why it’s all messed up in IE?

Thanks again!

Ok, so I tried a couple things, unsuccessfully of course. So the nav is in the styles.css file and is:

#nav {
    height: 90px;
}

I tried adding a text-align:center; but that didn’t work. Any ideas???

This SHOULD work…but of course I can’t test it…hope it helps.

Remember to replace the #nav ID too seen at the top here:

#nav {
height: 90px;
width: 1018px;
overflow: hidden;
background-image: url(…/images/navbg.png);
background-repeat: no-repeat;
background-position: top;
}

.lavaLampWithImage {
height: 68px;
display: block;
margin: 0 auto;
width: auto;
padding-top: 15px;
padding-left: 0px;
}
.lavaLampWithImage li {
float: left;
list-style: none;
}
.lavaLampWithImage li.back {
background: url(“…/images/lava.png”) no-repeat right -34px;
width: 9px; height: 34px;
z-index: 8;
position: absolute;
}
.lavaLampWithImage li.back .left {
background: url(“…/images/lava.png”) no-repeat top left;
height: 34px;
margin-right: 9px; /* 7px is the width of the rounded shape */
}
.lavaLampWithImage li a {
font: 17px arial;
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: inherit;
height: 34px;
position: relative;
overflow: hidden;
margin: 0 12px;
}
.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
border: none;
}

Close, Ryan.


.lavaLampWithImage {
height: 68px;
display: block;
margin: 0 auto;
width: auto; <---
padding-top: 15px;
padding-left: 0px;
}

The margin: 0 auto won’t do any centering here though, because blocks only center with automargins if you give them an explicit width that’s less that their container’s. “width: auto” on a static block means “stretch out to fill all space until you are 100% wide”. Can’t center 100% width.

The menu doesn’t look centered because the li’s are floated left inside a container that’s much much bigger then they are put together. If the li’s must be floated (instead of set to display: inline) then indeed putting them inside another, smaller box and centering it would make it look centered.

Thanks guys! I am appreciating the help. Yours didn’t work Ryan, but Stomme I actually did try to center those li’s in the page itself, with no luck. You sound like you know what you’re talking about, could you elaborate on maybe how I might do that? What I did was replace <li> with <li align=“center”> but that didn’t work. How else could I do that? I think I know what you’re talking about, I just don’t know how to fix it. This is the code from the php page:

<ul class="lavaLampWithImage" id="1">
        <li class="current"><a href="index.php">Home</a></li>
        <li><a href="cougar.php">Cougar</a></li>
        <li><a href="bear.php">Bear</a></li>
        <li><a href="elk.php">Elk</a></li>
        <li><a href="deer.php">Deer</a></li>
        <li><a href="moose.php">Moose</a></li>
        <li><a href="sheep.php">Big Horn Sheep</a></li>
        <li><a href="schedule.php">Schedule A Hunt</a></li>
        <li><a href="contact.php">Contact Us</a></li>
      </ul>

Thanks again guys for your help, you rock!

Ryan was on the right track, although there are actually two ways you could do this.

Your div id=“nav” is the full width of that brown background image. So it makes most sense to have that box hold the background image, instead of the ul holding it.

Then, as Ryan had, use automargins on the ul to center it— however this will only center the ul if you set a width on it. Usually when doing something like this, I temporarily give the box I’m centering an ugly red background colour, so I can see how wide to set it. It needs to be just wide enough to hold all the li’s in a single row.

The other way to do this is much easier, but I don’t know if you plan on having dropdowns? If there are no dropdowns, try this:


.lavaLampWithImage {
  list-style: none;
  width: 1018px;
  min-height: 68px;
  padding-top: 15px 0 0 0;
  text-align: center;
  background: url(../images/navbg.png) top center no-repeat;
}
* html .lavaLampWithImage {height: 68px;} /*this is for IE6*/

.lavaLampWithImage li {
  display: inline;
}
.lavaLampWithImage a {
  font: bold 17px arial, sans-serif;
  text-decoration: none;
  color: #fff;
  outline: none;
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0 12px;
}

Something like that, but it’s hard to tell because the images aren’t showing on your site. If the li’s must be blocks then we could try display: inline-block but for now I’m avoiding it just because it’s a bit more code for IE6 and 7.

I tried adding a text-align:center; but that didn’t work. Any ideas???

You gotta understand, text-align only affects inline elements… and floats aren’t inlines, they’re blocks. You also can’t put text-align on an inline itself: inlines can’t have dimensions like height or width, so they can’t center themselves… instead, only their block parents can center them.
So putting text-align: center on a box filled with floats won’t do anything. But, if the li’s are set to display: inline, then they will listen to text-align sitting on the ul.
That align=“center” in your HTML also shouldn’t be there, though it might actually be doing something you want in IE… IE incorrectly allows stuff like “text-align” to align blocks. Just know that no other browser does this, and it’s a bug of IE’s.

If it ends up that the li’s or the anchors must be able to have a height, width, or vertical margins in order to hold a background image, you can make either of them display: inline-block, but if you do that, you’ll need some extra code for IE6 and 7, and Firefox 2 (as there are current browsers who use the same engine as FF2). Inline-blocks can react to text-align like inlines do, but they can have set dimensions like blocks if you want.

Though on your site it’s looking centered to me now.

I think your code is more complicated than it needs to be, and also you don’t give good feedback for hover or focus (you removed the outline from all anchors in the menu so keyboarders can’t even see which link they are on… so I’d make the text change colour and do something else, and set that for both :hover and :focus). You have a lot of positioning in there… for a simple menu like this, you shouldn’t need to “position” anything.