Question

I can’t get my menu and logo centered. Here is the page URL: http://weebuild1.yolasite.com/

As you can see, the logo and menu aren’t centered. They are all the way to the right. I tried putting margins and stuff and it will not center.

Menu / Logo CSS:

#header2 h1 { /*Logo*/
  display:block;
  float:left;
  width:320px;
  height:125px;
  background:url('resources/images/logo.jpg') no-repeat 0 0;
  text-indent:-10000px;
}
/*#header2 h1 a:hover {
  background:url('resources/images/logo.jpg') no-repeat 0 -125px;
}*/
#header2 h1 span.bg_fade { /*Logo hover*/
   position: absolute;
   top: 0;
   left: 0;
   height: 125px;
   width: 320px;
   background:url('resources/images/logo.jpg') no-repeat 0 -125px;
}
#header2 ul { /*Menu*/
  display:block;
  float:right;
  width:640px;
  height:125px;
  background:url('resources/images/menu.jpg') no-repeat 0 0;
  list-style:none;
}
#header2 ul li { /*Menu part*/
  display:block;
  float:left;
  height:125px;
  text-indent:-10000px;
}
#logo-nav {
  margin-right:10px;
}
#home {
  width:160px;
}
#about {
  width:137px;
}
#work {
  width:129px;
}
#contact {
  width:210px;
}
#header2 ul li a {
  display:block;
  width:100%;
  height:100%;
  outline: 0 !important;
  -moz-outline-style: 0 !important;
  -webkit-outline: 0 !important;
  -webkit-outline-style: 0 !important;
}
#home a:hover {
  background:url('resources/images/menu.jpg') no-repeat 0 -125px;
}
#about a:hover {
  background:url('resources/images/menu.jpg') no-repeat -160px -125px;
}
#work a:hover {
  background:url('resources/images/menu.jpg') no-repeat -297px -125px;
}
#contact a:hover {
  background:url('resources/images/menu.jpg') no-repeat -426px -125px;
}

Menu / Logo HTML:

<div id="header2" style="height:465px;">
    <div id="logo-nav" style="float:left;margin:0;">
      <h1><a href="index.php">WeeBuild Web Design</a></h1>

    <ul id="nav">

      <li id="home"><a href="index.php" title="Click here to go to our homepage.">Home</a></li>

      <li id="about"><a href="about.php" title="Learn more about us.">About</a></li>

      <li id="work"><a href="work.php" title="Check out some of the work we've done.">Work</a></li>

      <li id="contact"><a href="contact.php" title="Any questions? Click here to contact us.">Contact</a></li>

   </ul>
    </div>

Any ideas on how to get it to center?

Answer 1

It’s not actually the header that is scewed… Theres a few elements that mess up the layout

First in the html theres a style tag on the div with the id #logo-nav.

Looks like this:

style="float:left;margin:0;"

Should be this:

style="margin:0 auto;"

That will perfectly center the logo and menu. The menu pushes against the far right side of the container on that page and the logo to the left.

Then in the CSS for the footer theres this class

#footer {
  clear:both;
  width:955px;
  border-top:1px dashed #094e64;
}

Should be

#footer {
  clear:both;
  border-top:1px dashed #094e64;
}

It now correctly takes up 100% of its parent container.

Then back to the html, wrap #boxContainer, #leftCol and #newsletter in a div.

Give that div a fixed width, matching exactly the horizontal space of the wrapped elements.

Put margin: 0 auto; as a style on that div.

Everything should be centered now.

As a tip: the reason it got scewed because you use too much markup for some stuff on the page (you have like a bazillion wrappers/containers) and too little for other layout stuff (the actual content div doesn’t contain any other grouping divs, you put spacing inbetween elements using brs)