Forums

inspirilizationist

So I just made some changes to a website for the header and I am trying to figure out how I can keep the menu centered now that my header is 100% width of page which was a necessary change for the look of the site. I am currently centering the logo and menu with margin-left which at my full screen size of 1920px and it looks fine, but if I shrink the browser window or if you view from a different screen resolution, blah! I have read around on some tutorials online, but am obviously missing something. Unfortunately, I am waiting for a reply from the owner who just changed the hosting account login info so I cannot show you the changes live online, but here is the code...

After the necessary changes__

  #header {
width: 100%px;
height: 98px;
margin: auto;
background:url(images/menu_bg.png) no-repeat left top;  
  }

  #logo {
float: left;
height: 79px;
width: 160px;
background-image:url(images/x2_radio_logo.png);   
margin-left: 550px;
margin-top: 6px;      
  }

  #menu {
float: left;
width: 650px;
height: 90px;
overflow:hidden;
      position:relative;
margin-left: 13px; 
  }

  #menu li {
display: inline;
text-align: center;
  }

  #menu a {
display: block;
float: left;
height: 55px; 
padding: 35px 35px 0px 0px;
letter-spacing: -1px;
text-decoration: none;
text-align: center;
text-transform: lowercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: normal;
color: #000000; 
  }

  #menu a:hover, #menu .active a {  
color: #999999;
text-shadow: 2px 0px 10px #000000;
      filter: dropshadow(color=#000000, offx=2, offy=0); 
  }

Thanks for and advice!

Watson90

You have put in the example above

#header {
width: 100%px;
height: 98px;
margin: auto;

The width is either a fixed pixel size or a percentage, you can't specify both. In your case just get rid of the px,

Also center the the navigation by putting margin: 0px auto; instead of just margin: auto;

It would be to your advantage if you put your example into CodePen.

Senff

Hard to say what you have right now (with the code displaying as above) but I would strongly advise against using margin-left to center something. That will work on one resolution and not work on others.

Instead, you might want to try giving it an absolute position (where the wrapping div has a width of 100% and has relative positioning), position it left at 50% and then give it a negative margin that's HALF of the menu width.

A bit like this method: http://codepen.io/senff/pen/qcHEt

Paulie_D

@Senff...that will work but you have to set a menu width...and if you're going to do that then...

As I see it he has a logo and menu on the same level (as both are floated left) so he really needs to add a wrapper to these.

The margin: auto property will now work as he has set his logo and menu to have specific widths / margins and the width of the wrapper can be calculated.

http://codepen.io/anon/pen/xeEbz

inspirilizationist

Okay, thanks all. I tried Paulie-D's suggestion and it works, but now my header menu text attributes are not all functioning correct. It looks correct in CodePen except for the last link on right does not fit in provided space, but it fits fine in the browser. Those links look different in browsers though, strange. The font size is about half what it should be and when you hover over the links, an underline now appears? Everything else looks correct. Once again, I must be missing something. Thanks again for you help!

http://codepen.io/anon/pen/fFrlA

Senff

I think that's because your .menu is set to a fixed width of 650 pixels, which is not enough to hold all 6 menu items.

inspirilizationist

No, that was fine, still do not know why Codepen was having an issue with that as the browsers displayed it fine. I found the problem with the font attributes being incorrect. I needed to change the "header a:{" to "header a:links{" since all the text in the header wrapper were links, did not have to do this before putting them in a wrapper.

Once again thanks for all the help!

treehouse : what would you like to learn today?

Forums

[Solved] Trouble with centering menu using float