Centering Modernbricks menu

**Kevin824** · 03-20-2008, 07:36 PM

Hello. Newbie trying to figure out why I can't center the horizontal modernbricks menu. (currently, no matter what I try, it's always left) Any help would be appreciated.
Kevin-

Code:

#modernbricksmenu{
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

#modernbricksmenu ul{
font: bold 11px Arial;
margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

#modernbricksmenu li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

#modernbricksmenu a{
float: left;
display: block;
color: white;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
text-decoration: none;
letter-spacing: 1px;
background-color: black; /*Default menu color*/
border-bottom: 1px solid white;
}

#modernbricksmenu a:hover{
background-color: gray; /*Menu hover bgcolor*/
}

#modernbricksmenu #current a{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/
border-color: #D25A0B; /*Brown color theme*/
}

#modernbricksmenuline{
clear: both;
padding: 0;
width: 100%;
height: 5px;
line-height: 5px;
background: #D25A0B; /*Brown color theme*/
}

**boogyman** · 03-21-2008, 03:41 PM

welcome to the forums. please review our posting policies and regulations located in "The Lounge" Section especially in regards to #8 (computer code)

with just your css I would suggest something like

Code:

#modernbricksmenu {
     margin: 0 auto;
     width: 100%;
     text-align:center;
}
#modernbricksmenu ul {
     text-align: left;
}

however without seeing your html code I cannot be certain that is the proper alignment sequence

**Kevin824** · 03-21-2008, 06:37 PM

Originally Posted by boogyman

welcome to the forums. please review our posting policies and regulations located in "The Lounge" Section especially in regards to #8 (computer code)

with just your css I would suggest something like

Code:

#modernbricksmenu {
     margin: 0 auto;
     width: 100%;
     text-align:center;
}
#modernbricksmenu ul {
     text-align: left;
}

however without seeing your html code I cannot be certain that is the proper alignment sequence

Thanks for the welcome and I apologize for "jumping the gun".
I tried what you suggested with no luck.
Here is the CSS:

Code:

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#modernbricksmenu{
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

#modernbricksmenu ul{
font: bold 11px Arial;
margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

#modernbricksmenu li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

#modernbricksmenu a{
float: left;
display: block;
color: white;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
text-decoration: none;
letter-spacing: 1px;
background-color: black; /*Default menu color*/
border-bottom: 1px solid white;
}

#modernbricksmenu a:hover{
background-color: gray; /*Menu hover bgcolor*/
}

#modernbricksmenu #current a{ /*currently selected tab*/
background-color: #0000FF; /*Brown color theme*/ 
border-color: #0000FF; /*Brown color theme*/ 
}

#modernbricksmenuline{
clear: both;
padding: 0;
width: 100%;
height: 5px;
line-height: 5px;
background: #0000FF; /*Brown color theme*/ 
}

/* By default (td, body..) use verdana in black. */
body, td, th , tr
{
	color: #000000;
	font-size: 14pt;
	font-family: verdana, sans-serif;
}

/* The main body of the entire site. */
body
{
	background-color: #E5E5E8;
	margin: 0px;
	padding: 12px 30px 4px 30px;
}

h1 { 

font-family: Georgia, "Times New Roman", Times, serif; 

font-size: 28px; 

color: #FF0000; 
}

And here is the HTML on my home page:

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Kevin's Space</title>
<link href="wkev.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="modernbricksmenu">
<ul>
<li id="current"><a href="wkevindex.htm" title="Home">Home</a></li>
<li><a href="wkevpizza.htm" title="pizza">My Pizza</a></li>
<li><a href="wkevsheba.htm" title="sheba">My Siberian Husky</a></li>
<li><a href="wkevmusic.htm" title="music">My Music</a></li>	
<li><a href="http://www.wkevin.com/gefsboard" title="gefs">Google Earth Flight Simulator Forum</a></li>
<li><a>kevinw@wkevin.com</a></li>
</ul>
</div>

<div id="modernbricksmenuline">&nbsp;</div>

<div align="center">
<h1>Kevin's Space</h1>
<p>Myself and Sheba in Lancaster, New Hampshire, 2005</p>
<img src="kevshebanh.jpg">
</div>

</body>
</html>

My website is http://wkevin.com

I can live with it the way it is now but I would like to be able to center the menu.
Thanks for your time. This place is a wealth of information!

**Medyman** · 03-23-2008, 02:56 AM

Hi Kevin...

It's quite easy to center the modernbricks menu. In fact, I see this question posted a lot. I'm surprised boogyman hasn't memorized the solution by now, lol.

Anyway, there are three CSS "code blocks" that you'll need to change.

First, the very first CSS style: #modernbricksmenu
To the end of that block text-align:center;. This will align the elements within this div to the center. Since this is exactly what we want, makes sense!

Now, if you look at the page, nothing should have changed. That's because the anchor elements (links) are floated to the left.

So, next find the #modernbricksmenu a style block. Within that block, find the float (float: left;) and delete it.

Since that same block also has display:block, all of the anchor elements will be on the their own line. To fix this, replace display: block; with display: inline-block;.

Now, we're getting close. The menu should be in the center (kind of). If you actually measure, you'll notice a 40 pixel offset from the center. To fix this, delete the margin-left: 40px; /*margin between first menu item and left browser edge*/ line from the #modernbricksmenu ul{ style block.

That's it...2 deletions, 1 addition, and a change.

The changes should look something like this:

Code:

#modernbricksmenu
{
	padding: 0;
	width: 100%;
	background: transparent;
	voice-family: "\"}\"";
	voice-family: inherit;
	text-align:center;
}

#modernbricksmenu ul
{
	font: bold 11px Arial;
	margin:0;
	padding: 0;
	list-style: none;
}

#modernbricksmenu a
{
	display: inline-block;
	color: white;
	margin: 0 1px 0 0; /*Margin between each menu item*/
	padding: 5px 10px;
	text-decoration: none;
	letter-spacing: 1px;
	background-color: black; /*Default menu color*/
	border-bottom: 1px solid white;
}

**Kevin824** · 03-23-2008, 05:23 AM

Originally Posted by Medyman

Hi Kevin...

It's quite easy to center the modernbricks menu. In fact, I see this question posted a lot. I'm surprised boogyman hasn't memorized the solution by now, lol.

MM,
My patience has been rewarded. I spent quite a bit of time searching for the answer to this problem. Your reply was precisely what I was looking for. I use Firefox and I also tried it using IE6. There is a difference between the 2, specifically, the blue line. It works great in IE6, (go figure) but not so in Firefox, but I can live with that. Now, I'm wondering if the menu itself can be set fixed at the top of the page, always in view.
Thanks a bunch,
Kevin

**Medyman** · 03-23-2008, 04:41 PM

MM,
There is a difference between the 2, specifically, the blue line.

What, specifically, is the difference?

Now, I'm wondering if the menu itself can be set fixed at the top of the page, always in view.

It can be, with position:fixed. Unfortunately, IE 6 doesn't support fixed positioning, IE 7 and FF do however.

You can create a workaround for IE 6, but I'd be inclined to just leave it as-is in IE 6.

**Kevin824** · 03-23-2008, 04:49 PM

Originally Posted by Medyman

What, specifically, is the difference?

In IE, The top of the line that runs under the legth of the menu, is in fact, under the menu, by about 2px. It's continuous, as it should be. In Firefox, the bottom of the line lines up with the bottom of the menu blocks. In other words, the line appears to be behind the boxes.
Edit to show what I mean:
IE: (correct)

Firefox: (not so correct)

**keithwjones** · 03-25-2008, 06:20 PM

Medyman

Thanks for that - this also works on CSS Indent Menu

Just need to do first 2 steps.

However still more work to do does not work in Firefox.

Also trying to work out how to even up the size of the boxes. Have 2 lines of boxes and their sizes goes by length of word

Keith

Now aslo added display: inline-block; gives better size.

Keith