Centering a horizontal menu. — OZONE Asylum, home of the Mad Scientists

XML - XSL - XSLT - XHTML - CSS - DOM

Centering a horizontal menu.

This page's ID: 11058

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Well, both good tutorials. And I've got a working centered menu now. But I still can't standardize the size of the box around each link, and I cannot put a four sided border around each individual box. I'm also getting a weird bug when I do some formatting to the #menu div. It is forcing a div above it that is aligned to the right to come off of the right side of the page a few pixels and adding a horizontal scroll bar no matter what size the window is. I'll post the code, and if someone can host an image for me I'll take a screen shot. [Edit: Send me an email at adamray@tamu.edu or hit me on AIM with StngNeleh for the screeny.] [code] body{ font-family: Tahoma, Verdana, Arial, Helvetica, Sans-Serif; margin: 0px; background-image: url(images/header_tile.jpg); background-repeat: repeat-x; background-color: #FFFFFF; color: #000000; } #header{ position: absolute; top: 50px; width: 100%; } #headerleft{ position: absolute; left: 0px; top: 0px; z-index: -1; } #headertitle{ text-align: center; z-index: 1; } #headerright{ position: absolute; right: 0px; top: 0px; z-index: -1; } #menu { position: absolute; top: 192px; font-size: 15px; line-height: 22px; font-weight: bold; background-color: #a5a5a5; border-top: 3px solid #851d30; border-bottom: 3px solid #851d30; } #menu ul{ list-style: none; margin: 0px; padding: 0px; text-align: center; width: 100%; margin: 2px; } #menu ul li{ display: inline; } #menu ul li a{ text-decoration: none; padding: 1em; margin: 10px; background-color: #851D30; color: #a5a5a5; } #menu ul li a:hover { background-color: #FBD76F; color: #a5a5a5; } [/code] and html: [code] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"> <meta name="Author" content="Robert Adam Ray"> <meta name="Keywords" content="Aggie Bonfire, Bonfire, Texas A and M, Bonfire Coalition, Students, BCS, BC, "> <meta name="Description" content="Bonfire Coalition for Students"> <title>Bonfire Coalition for Students - Main</title> <!--Style--> <link rel="stylesheet" type="text/css" href="stylestuff.css"> </head> <body id="body"> <!--Header--> <div id="header"> <div id="headerleft"> <img src="images/header_left1.jpg" alt="" /> </div> <div id="headertitle"> <img src="images/header_title.jpg" alt="" /> </div> <div id="headerright"> <img src="images/header_right1.jpg" alt="" /> </div> </div> <!--Menu--> <div id="menu"> <ul> <li><a href="1.html">Main</a></li> <li><a href="1.html">News Archive</a></li> <li><a href="1.html">Members</a></li> <li><a href="1.html">Heritage</a></li> <li><a href="1.html">FAQ</a></li> <li><a href="1.html">Contact</a></li> </ul> </div> </body> </html> [/code] [This message has been edited by SPyX (edited 09-27-2003).] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu