Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

How do I center this darn javascript menu?


  • Please log in to reply

#1
stearmandriver

stearmandriver

    Member

  • Member
  • PipPip
  • 67 posts
Hey guys,

This is just a family site I've been using to A: post kid pics without having to constantly mail them all over the country, and B: practice some web design, just as a hobby. It was originally created in Frontpage before I knew anything about CSS, then re-tooled with CSS (but still messily as it was a learning experience). I'm make excuses for the code you're about to see. :)

Anyway, I have this javascript drop-down menu in the page header. Like my title says, this thing will center in IE, but not Firefox or Netscape (it aligns left), and it is giving me fits! It's not really important on this site, but I would really like to understand what's heppening.

I've googled around, and every time I see another technique for centering things, I add it to this menu. The thing's nested inside of like 5 different centering attributes now... and still doesn't work. I was hoping someone could take a look and tell me why? I'm sure it's easy for someone who knows what they're doing.

Site: www.thesuligoys.com

Pertinent HTML:
<div align ="center">

<div class="menu">
<a href="index.htm">
<img border="0" src="images/SuligoysLogo.gif" width="382" height="130" alt="The Suligoys"></a>
<div class="menubar">
<div class="genericcenter">
<script SRC="NEWSuligoysMenu.js"></SCRIPT>
<NOSCRIPT>
<FONT COLOR=#632D06><a href="http://www.thesuligo...&nbsp;|&nbsp;<a href="http://www.thesuligo...&nbsp;|&nbsp;<a href="http://www.thesuligo...&nbsp;|&nbsp;<a href="http://www.thesuligo...&nbsp;|&nbsp;<a href="http://www.thesuligo...&nbsp;|&nbsp;<a href="http://www.thesuligo...&nbsp;|&nbsp;<a href="http://www.thesuligo...&nbsp;|&nbsp;<a href="http://www.thesuligo...inks</a></FONT>
</NOSCRIPT>
</div>
</div>
</div>
</div>


CSS:

.menu {
background: Black;
border: 2px groove #FFFFCC;
text-align: center;
height: 157px;
}

.menubar {

height: 24px;
border: 1px outset;
background: url(images/menuback.gif) repeat;
}

.genericcenter {
margin-right: auto;
margin-left: auto;
}

The no-script links center, but not the menu when javascript is enabled.

Thanks for looking!
  • 0

Advertisements


#2
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Try wrapping menu with this style:
#menu_center { width: 80.5%; height: 20px; margin: 0 auto; }

body:
<div id="menu_center">
<div class="menu">
<div class="menubar">

...MENU...

</div>
</div>
</div>

I also removed
<div class="genericcenter"> </div>
from body and styling from CSS file.

You might want to check out CSSplay Menus to find a much better menu. The one you have generates table codes that contains so many code errors.
  • 0

#3
stearmandriver

stearmandriver

    Member

  • Topic Starter
  • Member
  • PipPip
  • 67 posts
Thanks for the reply. Gotta sleep now but I will try it tomorrow.

Thanks for the link to CSS Play too. I'll check them out. I've been meaning to replace the whole menu with a CSS-only menu that just messes with visibility to show different sections, but... it's on my to-do list. ;-) Your link will definitely come in handy for examples though.

Can I ask why your #menu_center id will work? Looks like you specified a width for the menu. Is that the key?

Thanks much...
Joe

Edited by stearmandriver, 29 December 2007 - 09:04 PM.

  • 0

#4
B-mon

B-mon

    New Member

  • Member
  • Pip
  • 1 posts

Try wrapping menu with this style:

#menu_center { width: 80.5%; height: 20px; margin: 0 auto; }

body:
<div id="menu_center">
<div class="menu">
<div class="menubar">

...MENU...

</div>
</div>
</div>

I also removed
<div class="genericcenter"> </div>
from body and styling from CSS file.

You might want to check out CSSplay Menus to find a much better menu. The one you have generates table codes that contains so many code errors.



I've been having the same problem with the site I'm working on (manatee-group.com) and I tried this, but it's not working.


Could I have linked it improperly?

this is in the <html> for the doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR...D/xhtml11.dtd">

and this is a link to my css that contains that line that you posted for the css (posted in the <head> section):


<link rel="stylesheet" type="text/css"
href="menu_center_001.css" />


this is the rest of it (I removed the other div tags that stearmandriver was using):

<div id="menu_center">
<script type="text/javascript" language="javascript1.2" src="http://www.manatee-g...u.js"></script>
</div>


I changed it back to the original and removed the css for now as they weren't doing anything.
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP