Navication Issues

[Thumper]

OK...I need some help here. I'm trying to get my navigation menu to have [Login/Register] on the left and then the links "Home / Forums" in the center. However, it's putting it just a bit over to the right. It's enough that people can tell it's not in the center. I could really use some help here.

Here is the HTML

><div id="TopLink">
 <ul>
  <li>[<a href="modules.php?name=Your_Account&redirect=index" class="top">Login</a>/<a href="modules.php?name=Your_Account&op=new_user">Register</a>]
  </li>
 </ul>
<a href="index.php" id="home">Home</a><b>|</b>
<a href="modules.php?name=Forums" id="topics">Forums</a><b>|</b>
</div>

And here is the CSS

>#TopLink {padding: 0.2em 0 0.1em; background: #FD0304; white-space: nowrap; overflow: hidden; width: 800px; margin-left: auto; margin-right: auto;}
#TopLink a {padding:0.45em 0.5em 0.2em;
 text-decoration: none; font-weight: bold; font-variant: small-caps;
 color: #161220;}
html>body #TopLink a {padding: 0.2em 0.5em 0.2em;text-decoration: none; font-weight: bold; font-variant: small-caps;
 color: #161220;}
#TopLink a:hover {background: transparent; color: #C0C0C0;}
#TopLink b {display: none !important;}
#home a {color: #161220; background: transparent;}
#topics a, { background: transparent; color: #161220;}
#TopLink ul {
list-style: none;
margin: 0;
margin-right: -200px;
padding: 0;
}

#TopLink li {
float: left;
margin: 0;
padding: 0;
}

[owatagal]

Do you have a link to the page? I have a hunch, but it depends on the information in the rest of the style sheet. It would also help if I could see the page (because I'm visual that way).

[Thumper]

Do you have a link to the page? I have a hunch, but it depends on the information in the rest of the style sheet. It would also help if I could see the page (because I'm visual that way).

<{POST_SNAPBACK}>

http://www.havocoffroad.com It's the navigation in the red menu bar

[owatagal]

It looks to me like the links are centering themselves in the space that is left after the login/register list goes up. To center them on the screen itself, you need to find a way to convince them that an equal amount of space is taken up on the right side as the UL takes up on the left.

 

Whatever you do, I think you're going to have to give your UL a specified width. And then you can try adding right-padding to just the last item in your other menu to mimick that width.

 

The markup would look something like adding:

 

#Toplink ul {

width: 200px;

text-align: left;

margin: 0;

padding: 0;

list-style: none;

}

#contact {

padding-right: 200px;

}

 

If you need the ul set wider, set the #contact padding wider as well. That might work.

 

You're going to have to play around with it a bit, I think. And I'm not sure what your -200px margin on the UL is doing right now--it looks like it's just there to keep the list from centering? it's better to use something like text-align: left; and a set width in that case, I think.

 

I hope this will work, anyway.

[Thumper]

Thanks for taking a look. I'm going to try these when I get home tonight. The -200px margin was an attempt at 11:30 last night. I forgot to take it out when it didn't make any changes. I think the right padding is a going to be the way. I'll post here when I try it and let y'all know if it worked.

[Thumper]

alright! Thanks for the suggestion. It lead me down the right path. What I ended up doing was changing the width from 800px to 600px and padding-right: 200px

>#TopLink {padding: 0.2em 0 0.1em; background: #FD0304; width: 600px; margin-left: auto; margin-right: auto;
padding-right: 200px;}

[Thumper]

Well, I didn't check it in IE. It looked good in Firefox. I'll have to make a few changes for IE later.

[TCH-Bruce]

I looked at it in IE and it looks like this:

[owatagal]

Yeah, IE figures out the total width of a box differently than everyone else, which is why I was thinking the 200px padding should add on to the last link and not the TopLink. But that wouldn't work, because there was more than 200px there anyway.

 

You can do a hack on IE box model widths, if you want--just search for IE and box model hacks and you'll see any number of answers. The code below is a different type of hack--basically, adding an empty paragraph to the right site of the menu which can balance out the UL on the left. It's not elegant, it's not perfectly semantic code, but it works. You'll notice there's no link formatting or anything--you'll need to work this code back into your original.

 

>The CSS:

#TopLink {
width: 800px;
}
#TopLink ul, #TopLink li {
padding: 0;
margin: 0;
list-style: none;
display: block;
}
#flleft {
float: left;
width: 200px;
text-align: left;
}
#centered {
margin: 0 auto;
}
#centered li {
display: inline;
}
p.sham {
float: right;
width: 200px;
}

And the HTML:

<div id="TopLink">
<ul id="flleft">
<li>[<a href="modules.php?name=Your_Account&redirect=index" class="top">Login</a>/<a href="modules.php?name=Your_Account&op=new_user">Register</a>]</li>
</ul>

<p class="sham"> </p>

<ul id="centered">
<li><a href="index.php" id="home">Home</a><b>|</b></li>
<li><a href="modules.php?name=Forums" id="topics">Forums</a><b>|</b></li>
<li id="last"><a href="modules.php?name=Contact_Us" id="contact">Contact Us</a><b>|</b></li>
</ul>

</div>

 

I put your other set of links in a list as well, but that's my personal semantic preference. You could probably play with it and get it back to just <a> links. The sham p-tag does need to appear before the centered UL in the code, because it floats over the top. If you put it after, it drops on the next line in some browsers.

 

I tested in Netscape, Firefox, and IE on Mac. Since it works on IE on Mac, you should be ok on PC. Or at least at a point where you can fiddle with it.

 

If this is a PHP page, you could turn the sham-p into something real, like

 

><p class="sham"> Today is <?php echo date('d-m-Y'); ?>

 

 

Anyway, hope that helps some.

[Thumper]

OK! I think I finally got it working in IE and firefox. Give me some feedback and let me know if it checks out in your browser.

[owatagal]

All Mac browsers --

 

In Firefox I see the home/forums/contact links right-aligned, in white boxes, with a grey background when I hover. The login/register is lined up sort of under the big red O (not flush with left margin, not centered in the red link area) and is just black text.

 

In Netscape and Safari the right links look the same but the login/register is floating up and is actually OVER the big red O and some of that header' back ground image. They aren't in the red bar at all. They're also hard to see.

 

In IE, the white boxes on the right menu items only come down about half way, and the register/login links are just gone. I don't know where they went.

 

I'd get you screenshots, but I've forgotten what the shortcut keys are.

[Thumper]

The only problem I've seen so far with IE or Firefox is when the flash banner is displayed the "login/register" or "logged in as..." goes down and on top of the menu/modules links. I think most of our members use IE so for now unless any big problems are found, I'm going to leave it alone and work on some other details. Thanks for the info.