15 replies [Last post]
JS1981
Offline
Regular
Arkansas
Last seen: 9 years 9 weeks ago
Arkansas
Timezone: GMT-7
Joined: 2011-04-05
Posts: 20
Points: 25

I have tried researching myself for a while on how to do this before posting, but I have not been able to find a solution without shrinking the length of the menu bar, which I do not want to do. All centering commands I have found involve an actual menu length and then setting the margin to auto. However, this does not seem to work with a menu that does not have a width stated. I may be misreading on how to do things, but so far, I have had no luck with this. I will post both the code for the page, and also the css code. If needed, I can also post the website this is on, but did not want to post without someone asking, for fear of it looking like spam.

Here is the html code for my page for the menu.

This part goes in the head
<link text-align:center rel="stylesheet" href="menu/menu_style.css" type="text/css" />

This part goes in the body

<div align="center" class="menu bubplastic horizontal aqua">
	<ul>
		<li class="highlight"><span class="menu_r"><a href="index.html" target="_self"><span class="menu_ar">Home</span></a></span></li>
<li ><span class="menu_r"><a href="games.html" target="_self"><span class="menu_ar">Games</span></a></span></li>
		<li><span class="menu_r"><a href="forum/index.php" target="_self"><span class="menu_ar">Forum</span></a></span></li>
		<li><span class="menu_r"><a href="about.html" target="_self"><span class="menu_ar">About Us</span></a></span></li>
<li><span class="menu_r"><a href="photos.html" target="_self"><span class="menu_ar">Photos</span></a></span></li>
		<li><span class="menu_r"><a href="join.html" target="_self"><span class="menu_ar">Join JLan</span></a></span></li>
		<li><span class="menu_r"><a href="friends.html" target="_self"><span class="menu_ar">Friends</span></a></span></li>
	</ul>
	<br class="clearit" />
</div>

Now here is the css code

.clearit {
	margin: 0;
	padding: 0;
	height: 0;
	clear: both;
}
 
/* BUBBLE PLASTIC HORIZONTAL MENU */
 
.bubplastic.horizontal {
	width: 100%;
	height: 27px;
	margin: 0;
	padding: 0;
	background: #000000 url(images/bg-bubplastic.gif) top left repeat-x;
}
.bubplastic.horizontal ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bubplastic.horizontal ul li {
	float: left;
	margin: 0;
	padding: 0;
	background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
}
 
.bubplastic.horizontal ul li a {
	display: block;
	height: 27px;
	padding-left: 35px;
	float: left;
	text-transform: uppercase;
	font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
	font-size: 70%;
	color: #FFFFFF;
	text-decoration: none;
}
 
.bubplastic.horizontal ul li a span.menu_ar {
	display: block;
	float: left;
	height: 22px;
	padding-top: 5px;
	padding-right: 35px;
	background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat;
	cursor: pointer;
}
/* END BUBBLE PLASTIC HORIZONTAL MENU */
 
 
 
/* BUBBLE PLASTIC VERTICAL MENU */
 
.bubplastic.vertical {
	width: 250px;
	margin: 0;
	padding: 0;
	display: block;
}
.bubplastic.vertical ul {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bubplastic.vertical ul li {
	display: block;
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
}
 
.bubplastic.vertical ul li a {
	display: block;
	margin: 0;
	width: 100%;
	padding-left: 35px;
	text-transform: uppercase;
	font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
	font-size: 70%;
	color: #FFFFFF;
	text-decoration: none;
	background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
}
 
.bubplastic.vertical ul li a span.menu_ar {
	display: block;
	margin: 0;
	width: 100%;
	height: 22px;
	padding-top: 5px;
	padding-right: 35px;
	background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat;
	cursor: pointer;
}
/* END BUBBLE PLASTIC VERTICAL MENU */
 
 
 
/* AQUA HOVER */
.bubplastic.aqua ul li a:hover,
.bubplastic.aqua ul li.highlight a {
	background: transparent url(images/bg-bubplastic-h-aqua.gif) top left no-repeat;
}
.bubplastic.aqua ul li a:hover span.menu_ar,
.bubplastic.aqua ul li.highlight a span.menu_ar {
	background: transparent url(images/bg-bubplastic-h-aqua.gif) top right no-repeat;
}
 
 
/* BLUE HOVER */
.bubplastic.blue ul li a:hover,
.bubplastic.blue ul li.highlight a {
	background: transparent url(images/bg-bubplastic-h-blue.gif) top left no-repeat;
}
.bubplastic.blue ul li a:hover span.menu_ar,
.bubplastic.blue ul li.highlight a span.menu_ar {
	background: transparent url(images/bg-bubplastic-h-blue.gif) top right no-repeat;
}
 
 
/* GRAY HOVER */
.bubplastic.gray ul li a:hover,
.bubplastic.gray ul li.highlight a {
	background: transparent url(images/bg-bubplastic-h-gray.gif) top left no-repeat;
}
.bubplastic.gray ul li a:hover span.menu_ar,
.bubplastic.gray ul li.highlight a span.menu_ar {
	background: transparent url(images/bg-bubplastic-h-gray.gif) top right no-repeat;
}
 
 
/* LIME HOVER */
.bubplastic.lime ul li a:hover,
.bubplastic.lime ul li.highlight a {
	background: transparent url(images/bg-bubplastic-h-lime.gif) top left no-repeat;
}
.bubplastic.lime ul li a:hover span.menu_ar,
.bubplastic.lime ul li.highlight a span.menu_ar {
	background: transparent url(images/bg-bubplastic-h-lime.gif) top right no-repeat;
}
 
 
/* ORANGE HOVER */
.bubplastic.orange ul li a:hover,
.bubplastic.orange ul li.highlight a {
	background: transparent url(images/bg-bubplastic-h-orange.gif) top left no-repeat;
}
.bubplastic.orange ul li a:hover span.menu_ar,
.bubplastic.orange ul li.highlight a span.menu_ar {
	background: transparent url(images/bg-bubplastic-h-orange.gif) top right no-repeat;
}
 
 
/* PINK HOVER */
.bubplastic.pink ul li a:hover,
.bubplastic.pink ul li.highlight a {
	background: transparent url(images/bg-bubplastic-h-pink.gif) top left no-repeat;
}
.bubplastic.pink ul li a:hover span.menu_ar,
.bubplastic.pink ul li.highlight a span.menu_ar {
	background: transparent url(images/bg-bubplastic-h-pink.gif) top right no-repeat;
}
 
 
/* PURPLE HOVER */
.bubplastic.purple ul li a:hover,
.bubplastic.purple ul li.highlight a {
	background: transparent url(images/bg-bubplastic-h-purple.gif) top left no-repeat;
}
.bubplastic.purple ul li a:hover span.menu_ar,
.bubplastic.purple ul li.highlight a span.menu_ar {
	background: transparent url(images/bg-bubplastic-h-purple.gif) top right no-repeat;
}
 
 
/* RED HOVER */
.bubplastic.red ul li a:hover,
.bubplastic.red ul li.highlight a {
	background: transparent url(images/bg-bubplastic-h-red.gif) top left no-repeat;
}
.bubplastic.red ul li a:hover span.menu_ar,
.bubplastic.red ul li.highlight a span.menu_ar {
	background: transparent url(images/bg-bubplastic-h-red.gif) top right no-repeat;
}
 
#test li {
	display: block;
	border: solid 1px red;
}

JS1981
Offline
Regular
Arkansas
Last seen: 9 years 9 weeks ago
Arkansas
Timezone: GMT-7
Joined: 2011-04-05
Posts: 20
Points: 25

Have I posted this in the

Have I posted this in the wrong forum?

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 18 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

Have you validated your code?

Have you validated your code?

JS1981
Offline
Regular
Arkansas
Last seen: 9 years 9 weeks ago
Arkansas
Timezone: GMT-7
Joined: 2011-04-05
Posts: 20
Points: 25

Well I decide to shorten the

Well I decide to shorten the width and make it centered that way. But now there is an issue with one of the browsers. It shows up fine in Mozilla Firefox and Google Chrome, however, Internet Explorer for some strange reasons wraps my menu. Any ideas?

The website is http://www.jonesborolan.malwarehitman.com if you want to see what I am talking about. Load it up in IE and you will see it knocks the last menu selection down to the next line.

Here are the new modified codes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
  <head>
  <link text-align:center rel="stylesheet" href="menu/menu_style.css" type="text/css" />
    <meta charset="utf-8">
    <meta name="created" content="Wed, 13 Apr 2011 06:24:47 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>Welcome to Jonesboro Lan's Home - Let the fragging begin!</title>
<center><img border="0" src="games_original.jpg"></center>
    <style type="text/css">
div.ex
{
width:720px;
padding:10px;
border:1px solid black;
margin:0px;
background-color:#BEBEBE
}
</style>
  </head>
  <body background="background/a8.jpg">
 
<div align="center" class="menu bubplastic horizontal aqua">
	<ul>
		<li class="highlight"><span class="menu_r"><a href="index.html" target="_self"><span class="menu_ar">Home</span></a></span></li>
<li ><span class="menu_r"><a href="games.html" target="_self"><span class="menu_ar">Games</span></a></span></li>
		<li><span class="menu_r"><a href="forum/index.php" target="_self"><span class="menu_ar">Forum</span></a></span></li>
		<li><span class="menu_r"><a href="about.html" target="_self"><span class="menu_ar">About Us</span></a></span></li>
<li><span class="menu_r"><a href="photos.html" target="_self"><span class="menu_ar">Photos</span></a></span></li>
		<li><span class="menu_r"><a href="join.html" target="_self"><span class="menu_ar">Join JLan</span></a></span></li>
		<li><span class="menu_r"><a href="friends.html" target="_self"><span class="menu_ar">Friends</span></a></span></li>
	</ul>
	<br class="clearit" />
</div>
 
  <P>
  <BR>
<center><div align="left" class="ex"><UL>
<li><font size="4">Recognize any of the games above?</font></li>
<li><font size="4">Enjoy hearing the grunts of people next to you as you kill them?</font></li>
<li><font size="4">Do you spend every second of your free time putting bullets into enemies?</font></li>
<li><font size="4">Are you the master of your own online universe?</font></li></ul>
<P><B><font color="red" align="left" size="4">Well look no further! You have found your home right here!  We are a group of game loving fragging people who meet once a month for our blood addictions.</font></B>
  </div></center>
 
  </body>
</html>

And here is the css code

.clearit {
	margin: 0;
	padding: 0;
	height: 0;
	clear: both;
}
 
/* BUBBLE PLASTIC HORIZONTAL MENU */
 
.bubplastic.horizontal {
	width: 781px;
	height: 27px;
	margin: 0 auto;
	text-align:center
	padding: 0;
	background: #000000 url(images/bg-bubplastic.gif) top left repeat-x;
}
.bubplastic.horizontal ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bubplastic.horizontal ul li {
	float: left;
	margin: 0;
	padding: 0;
	background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
}
 
.bubplastic.horizontal ul li a {
	display: block;
	height: 27px;
	padding-left: 35px;
	float: left;
	text-transform: uppercase;
	font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
	font-size: 70%;
	color: #FFFFFF;
	text-decoration: none;
}
 
.bubplastic.horizontal ul li a span.menu_ar {
	display: block;
	float: left;
	height: 22px;
	padding-top: 5px;
	padding-right: 35px;
	background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat;
	cursor: pointer;
}
/* END BUBBLE PLASTIC HORIZONTAL MENU */
 
 
 
/* BUBBLE PLASTIC VERTICAL MENU */
 
.bubplastic.vertical {
	width: 250px;
	margin: 0;
	padding: 0;
	display: block;
}
.bubplastic.vertical ul {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bubplastic.vertical ul li {
	display: block;
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
}
 
.bubplastic.vertical ul li a {
	display: block;
	margin: 0;
	width: 100%;
	padding-left: 35px;
	text-transform: uppercase;
	font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
	font-size: 70%;
	color: #FFFFFF;
	text-decoration: none;
	background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
}
 
.bubplastic.vertical ul li a span.menu_ar {
	display: block;
	margin: 0;
	width: 100%;
	height: 22px;
	padding-top: 5px;
	padding-right: 35px;
	background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat;
	cursor: pointer;
}
/* END BUBBLE PLASTIC VERTICAL MENU */
 
 
 
/* AQUA HOVER */
.bubplastic.aqua ul li a:hover,
.bubplastic.aqua ul li.highlight a {
	background: transparent url(images/bg-bubplastic-h-aqua.gif) top left no-repeat;
}
.bubplastic.aqua ul li a:hover span.menu_ar,
.bubplastic.aqua ul li.highlight a span.menu_ar {
	background: transparent url(images/bg-bubplastic-h-aqua.gif) top right no-repeat;
}
 
 
/* BLUE HOVER */
.bubplastic.blue ul li a:hover,
.bubplastic.blue ul li.highlight a {
	background: transparent url(images/bg-bubplastic-h-blue.gif) top left no-repeat;
}
.bubplastic.blue ul li a:hover span.menu_ar,
.bubplastic.blue ul li.highlight a span.menu_ar {
	background: transparent url(images/bg-bubplastic-h-blue.gif) top right no-repeat;
}
 
 
/* GRAY HOVER */
.bubplastic.gray ul li a:hover,
.bubplastic.gray ul li.highlight a {
	background: transparent url(images/bg-bubplastic-h-gray.gif) top left no-repeat;
}
.bubplastic.gray ul li a:hover span.menu_ar,
.bubplastic.gray ul li.highlight a span.menu_ar {
	background: transparent url(images/bg-bubplastic-h-gray.gif) top right no-repeat;
}
 
 
/* LIME HOVER */
.bubplastic.lime ul li a:hover,
.bubplastic.lime ul li.highlight a {
	background: transparent url(images/bg-bubplastic-h-lime.gif) top left no-repeat;
}
.bubplastic.lime ul li a:hover span.menu_ar,
.bubplastic.lime ul li.highlight a span.menu_ar {
	background: transparent url(images/bg-bubplastic-h-lime.gif) top right no-repeat;
}
 
 
/* ORANGE HOVER */
.bubplastic.orange ul li a:hover,
.bubplastic.orange ul li.highlight a {
	background: transparent url(images/bg-bubplastic-h-orange.gif) top left no-repeat;
}
.bubplastic.orange ul li a:hover span.menu_ar,
.bubplastic.orange ul li.highlight a span.menu_ar {
	background: transparent url(images/bg-bubplastic-h-orange.gif) top right no-repeat;
}
 
 
/* PINK HOVER */
.bubplastic.pink ul li a:hover,
.bubplastic.pink ul li.highlight a {
	background: transparent url(images/bg-bubplastic-h-pink.gif) top left no-repeat;
}
.bubplastic.pink ul li a:hover span.menu_ar,
.bubplastic.pink ul li.highlight a span.menu_ar {
	background: transparent url(images/bg-bubplastic-h-pink.gif) top right no-repeat;
}
 
 
/* PURPLE HOVER */
.bubplastic.purple ul li a:hover,
.bubplastic.purple ul li.highlight a {
	background: transparent url(images/bg-bubplastic-h-purple.gif) top left no-repeat;
}
.bubplastic.purple ul li a:hover span.menu_ar,
.bubplastic.purple ul li.highlight a span.menu_ar {
	background: transparent url(images/bg-bubplastic-h-purple.gif) top right no-repeat;
}
 
 
/* RED HOVER */
.bubplastic.red ul li a:hover,
.bubplastic.red ul li.highlight a {
	background: transparent url(images/bg-bubplastic-h-red.gif) top left no-repeat;
}
.bubplastic.red ul li a:hover span.menu_ar,
.bubplastic.red ul li.highlight a span.menu_ar {
	background: transparent url(images/bg-bubplastic-h-red.gif) top right no-repeat;
}
 
#test li {
	display: block;
	border: solid 1px red;
}

Vashin
Vashin's picture
Offline
Regular
Brisbane, Australia
Last seen: 9 years 23 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2011-05-07
Posts: 48
Points: 48

IE sometimes adds extra

IE sometimes adds extra padding (1 or 2 pixels, usually). Try reducing the padding between each menu item by that amount and see if it knocks it back into place. If this doesn't solve it let me know and I'll test the code.

Please read the rules of CSSCreator before your next post. Following the rules and posting within the guidelines will enable members to assist you much more accurately than if you don't which not only saves us time, but gives you your answers faster.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 18 weeks 5 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

Verschwindende wrote: Have

Verschwindende wrote:

Have you validated your code?

Will you at least try?

JS1981
Offline
Regular
Arkansas
Last seen: 9 years 9 weeks ago
Arkansas
Timezone: GMT-7
Joined: 2011-04-05
Posts: 20
Points: 25

Vashin - I will try that,

Vashin - I will try that, Thanks!

Verschwindende - I am not sure what you mean by validating? Where do I post this to validate? As I didn't want to be double posting on the forum.

JS1981
Offline
Regular
Arkansas
Last seen: 9 years 9 weeks ago
Arkansas
Timezone: GMT-7
Joined: 2011-04-05
Posts: 20
Points: 25

Vashin - Well it does solve

Vashin - Well it does solve the wrapping problem of IE, however, it adds a little extra padding to the right on Firefox. Which makes it unappealing. I have uploaded the results to show you what I mean on the site.

Vashin
Vashin's picture
Offline
Regular
Brisbane, Australia
Last seen: 9 years 23 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2011-05-07
Posts: 48
Points: 48

I think the extra spacing on

I think the extra spacing on the right is simply because the list isn't extending to the full width you have provided. Instead of using padding to center the list items, let's give the list items a width since we're using fixed widths already.

All the list items have a span with a class of menu_ar, so we can remove the spans from the code, and in the CSS. Now change the .bubplastic.horizontal ul li a in the CSS to:

.bubplastic.horizontal ul li a
        {
            float: left;
            display: block;
            width: 109px;
            height: 22px;
            padding-top: 5px;
            text-transform: uppercase;
            font-family: "Helvetica Neue", Helvetica, "Microsoft Sans Serif", Arial, Sans-Serif;
            font-size: 70%;
            color: #fff;
            text-align: center;
            text-decoration: none;
        }

Also, the width of .bubplastic.horizontal can be reduced now to:

width: 763px;

This worked for me using your existing code and the above changes in the latest versions of Chrome, Firefox and IE8. If it didn't work for you please let me know.

Now, to validation, Smile. Validation is checking whether your code complies with the W3C specifications for accessible web design, as well as compliance to established coding standards. The W3C have a tool that you can use for validation. I took the liberty of putting your web address through the validator to save you this step, just be sure to bookmark the previous link for future use as it is extremely useful.

Here is your validation result.

Please read the rules of CSSCreator before your next post. Following the rules and posting within the guidelines will enable members to assist you much more accurately than if you don't which not only saves us time, but gives you your answers faster.

JS1981
Offline
Regular
Arkansas
Last seen: 9 years 9 weeks ago
Arkansas
Timezone: GMT-7
Joined: 2011-04-05
Posts: 20
Points: 25

I just copied and pasted what

I just copied and pasted what you put, and my menu is looking rather bad now. Its all blocked up. I will start validation soon as well, but going to play with the values of the css menu first. See if I can find another way to fix this. By the way, I do appreciate the help, so please don't take what I am saying bad, just trying to describe what is going on.

JS1981
Offline
Regular
Arkansas
Last seen: 9 years 9 weeks ago
Arkansas
Timezone: GMT-7
Joined: 2011-04-05
Posts: 20
Points: 25

Just had an idea pop in my

Just had an idea pop in my head that I think might fix the problem. Put all the code as I originally had it, but put the menu inside of an invisible table that is slightly wider and taller, like by maybe a few pixels. Going to try that in a bit and see if that works.

JS1981
Offline
Regular
Arkansas
Last seen: 9 years 9 weeks ago
Arkansas
Timezone: GMT-7
Joined: 2011-04-05
Posts: 20
Points: 25

Well that didn't work. It

Well that didn't work. It still breaks. Starting to become extremely aggravating.

JS1981
Offline
Regular
Arkansas
Last seen: 9 years 9 weeks ago
Arkansas
Timezone: GMT-7
Joined: 2011-04-05
Posts: 20
Points: 25

Just recently tried the

Just recently tried the original coding before any mods on IE 6 and IE 7, and they both look right. Finding a machine or person who has IE 8 to test it on there. I am starting to believe its a glitch in IE 9 that is causing my problem.

Vashin
Vashin's picture
Offline
Regular
Brisbane, Australia
Last seen: 9 years 23 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2011-05-07
Posts: 48
Points: 48

Hmm...

JS1981 wrote:

I just copied and pasted what you put, and my menu is looking rather bad now. Its all blocked up.

Strange that the code didn't work, I was using your CSS and HTML unaltered except for the classes I merged together and had no header image.

JS1981 wrote:

Just recently tried the original coding before any mods on IE 6 and IE 7, and they both look right. Finding a machine or person who has IE 8 to test it on there. I am starting to believe its a glitch in IE 9 that is causing my problem.

Possibly. I have IE8 so I will test your website now and let you know in here how it goes.

Regarding the website test in IE8, the navigation items are broken. In IE8, Chrome and Firefox. They no longer stretch to the width of you initially had and are not vertically aligned. Would you like me to make you a clean example of your navigation (meaning 'barebones'; no images but valid and 100% working XHTML and CSS) so you only need to put the gradient into it and style the text and such however you want? It would be easier for you to modify in future as well as build upon if you make dropdown menus and such. Just a thought.

Please read the rules of CSSCreator before your next post. Following the rules and posting within the guidelines will enable members to assist you much more accurately than if you don't which not only saves us time, but gives you your answers faster.

JS1981
Offline
Regular
Arkansas
Last seen: 9 years 9 weeks ago
Arkansas
Timezone: GMT-7
Joined: 2011-04-05
Posts: 20
Points: 25

I will give it a try, but I

I will give it a try, but I have just verified my problem is with ie 9. There is a glitch in it that is causing my menu to mess up. Works fine on 6-7-8 but not 9. Going to change it back to original now. Thanks

Vashin
Vashin's picture
Offline
Regular
Brisbane, Australia
Last seen: 9 years 23 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2011-05-07
Posts: 48
Points: 48

No problem. IE9 is already

No problem. IE9 is already famous for breaking websites but if you make your website of completely W3C-compliant XHTML you should be on the right track.

If you have any further questions feel free to ask.

Please read the rules of CSSCreator before your next post. Following the rules and posting within the guidelines will enable members to assist you much more accurately than if you don't which not only saves us time, but gives you your answers faster.