homepage Welcome to WebmasterWorld Guest from 54.226.21.57
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS Menu Centering
lookingatit

5+ Year Member



 
Msg#: 3927274 posted 2:48 pm on Jun 5, 2009 (gmt 0)

Hi All,

I'm trying to get a css menu to center in the middle. I've got it working in Firefox and in IE but not at the same time any help before I loose all my hair much apreciated.

This works in firefox

#menuContainer6 {
padding:0 auto;
margin:0 auto;
list-style:none;
width:798px;
height:180px;
position:absolute;
top:0;
background-image: url(boats.jpg) fixed center;
left:0;
right:0;

}

This works in IE

#menuContainer6 {
padding:0 auto;
margin:0 auto;
list-style:none;
width:798px;
height:180px;
position:absolute;
top:0;
background-image: url(boats.jpg) fixed center;
left:0 auto;
right:0 auto;

}

Only difference is the auto on the left and right for IE.

Any Help?

 

londrum

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3927274 posted 6:49 pm on Jun 5, 2009 (gmt 0)

'left' and 'right' are only supposed to take one value, so the auto is probably having no effect anyway. IE is probably disregarding those rules entirely because they are invalid.

the problem might be with the container that the menu is in, rather than the menu itself. is it maybe positioned absolutely? try sticking positon:relative on them both, and making sure that the container the menu is in is strecthing right across the page.

swa66

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3927274 posted 7:52 pm on Jun 5, 2009 (gmt 0)

Try a conditional comment, easiest fix for IE needing stuff differently.

Your standards complaint CSS: do validate it
[jigsaw.w3.org...]

The thing IE6 version gets wrong is that it doesn't support setting both left and right of the same element.

An alternative to absolutely position something in the center instead of the invalid syntax is to first set one side to 50%, and then move back the margin by half of the width.

e.g.

<style type="text/css">
#menuContainer6 {
padding:0; /* padding doesn't do auto */
margin:0 auto;
list-style:none;
width:798px;
height:180px;
position:absolute;
top:0;
background: url(boats.jpg) no-repeat center;
/* background img only takes the URL, fixed isn't
what you are looking for in most cases */
left:0;
right:0;
}
</style>
<!--[if IE 6]>
<style type="text/css">
/* lack of support for setting both left and right at the same time */
#menuContainer6 {
left: 50%;
right: auto;
margin-left: -399px; /* half the width */
}
</style>
<![endif]-->

lookingatit

5+ Year Member



 
Msg#: 3927274 posted 10:03 am on Jun 8, 2009 (gmt 0)

Thank you for taking a look, unfortunately these fixes have not worked.

Limes1

5+ Year Member



 
Msg#: 3927274 posted 8:57 pm on Jun 22, 2009 (gmt 0)

Hi I have the same situation, I have installed a CSS code in my site and it works fine, but I'd like to center the menu in the web page, it has sub menus too, here is the code that I have, any help on fixing this please?

@charset "UTF-8";
/* CSS Document */

.droplinebar{
overflow: hidden;
}

.droplinebar ul{
margin: 0;
padding: 0;
float: left;
width: 100%;
font: bold 13px Arial;
background: #242c54 url(bluedefault.gif) center center repeat-x; /*default background of menu bar*/
}

.droplinebar ul li{
display: inline;
}

.droplinebar ul li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
}

.droplinebar ul li a:visited{
color: white;
}

.droplinebar ul li a:hover, .droplinebar ul li .current{ /*background of main menu bar links onMouseover*/
color: white;
background: transparent url(blueactive.gif) center center repeat-x;
}

/* Sub level menus*/
.droplinebar ul li ul{
position: absolute;
z-index: 100;
background: #303c76; /*sub menu background color */
visibility: hidden;
}

/* Sub level menu links style */
.droplinebar ul li ul li a{
font: normal 13px Verdana;
padding: 6px;
padding-right: 8px;
margin: 0;
border-bottom: 1px solid navy;
}

.droplinebar ul li ul li a:hover{ /*sub menu links' background color onMouseover */
background: #242c54;
}

Thanks

swa66

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3927274 posted 10:00 pm on Jun 22, 2009 (gmt 0)

@limes1: since you float your main menu, there's no centering.

Try to rebuild it without floating.

The easiest to center it is to get the first level display:inline , (not floated) and then apply text-align:center on the parent.

The tricky bit is to then get the drop downs working cross-browser.

Limes1

5+ Year Member



 
Msg#: 3927274 posted 10:44 pm on Jun 22, 2009 (gmt 0)

Thanks for your reply

The problem is that I copied the code and pasted it into my site and then I just changed the names of the buttons and the links and works fine, I have medium knowledge about HTML but no CSS at all, that's why I'm here. You say that maybe the drop downs will not work properly if the code is changed, I just want the menus to look nicely centered, but if the code change affect the functionality then I will not change it, what do you think? Regards.

TenTonJim

10+ Year Member



 
Msg#: 3927274 posted 1:40 am on Jun 27, 2009 (gmt 0)

It is probably the absolute positioning.

Try assigning it at left:50% (sets left edge to the center of the page) and then applying a negative left margin that is half the width of the div or whatever container you are using...

width:798px;
left:50%;
margin-left:-399px;/*half of 798*/

This should work in all browsers without any conditionals needed.

[edited by: TenTonJim at 1:42 am (utc) on June 27, 2009]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved