Log in

View Full Version : 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



#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
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



#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:

/*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:

<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. :D

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:


#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
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. :D

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 (http://www.howtocreate.co.uk/fixedPosition.html)for IE 6, but I'd be inclined to just leave it as-is in IE 6.
Kevin824
03-23-2008, 04:49 PM
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)
http://wkevin.com/img/iemenu.jpg

Firefox: (not so correct)
http://wkevin.com/img/ffmenu.jpg
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
Kevin824
04-16-2008, 07:40 AM
Medyman
However still more work to do does not work in Firefox.
Keith

I never got an answer for this.
http://www.dynamicdrive.com/forums/showpost.php?p=135902&postcount=7
Can it be fixed in Firefox?
Medyman
04-16-2008, 12:54 PM
Either set a defined height for the modernbricksmenu div (the container) or perhaps just adding clear:both to the line's CSS would work.
Kevin824
04-17-2008, 11:03 AM
Sorry to keep bugging you with this, but it's driving me bonkers.

Here is my current css file:


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

#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 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

#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;
}

#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*/
}

Either set a defined height for the modernbricksmenu div (the container) or perhaps just adding clear:both to the line's CSS would work.
clear: both; is already on the #modernbricksmenuline. Would that be correct?
As far as the defined height for the modernbricksmenu div, is that done in the css file or the html?
(don't shoot me ;) )
Kevin824
04-17-2008, 11:29 AM
I got it!


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

Thanks all!
Medyman
04-17-2008, 12:11 PM
Great! Glad you got it working :)