Question

I’m trying to turn a layout I designed into a webpage in HTML+CSS.

The layout looks like this:
image

I want the central black div (with fixed width) to be centered while the menu should stay to its left and fill the entire left side of the screen, as shown above.

The problem is that I can’t figure out how to style the menu to fill the entire left side to get the mouse-over effect shown in the image.

Thank you very much.

Answer 1

You do it by letting the menu fill the entire width, and positioning the black logo element on top of it.

<div id="menu">
  <div id="centered_wrapper">
    <div id="logo"></div>
  </div>
  <ul>
    <li><a href="#">&gt; home</a>
    <li><a href="#">&gt; azienda</a>
    <li><a href="#">&gt; lavorazioni</a>
    <li><a href="#">&gt; contattaci</a>
  </ul>
</div>

With CSS something like this:

body, html {
  margin: 0; 
  background: #494848;
}
#menu {
  margin-top: 150px;
  height: 250px;
  background: #3a3a3a;
}
#menu ul {
  margin: 0;
  padding: 140px 0 0;
}
#menu li {
  margin: 0;
  list-style: none;
  padding: 5px;
}
#menu li:hover {
  background: #4c4c4c;
}
#menu li a {
  display: block;
  width: 550px;
  margin: 0 auto;
  color: #fff;
  text-decoration: none;
}
#centered_wrapper {
  width: 0;
  margin: 0 auto;
  position: relative;
}
#logo {
  position: absolute;
  height: 250px;
  width: 350px;
  margin-left: -175px; // half of width
  background: #000;
  z-index: 1;
}

You’ll notice that the :hover-effect of the menu items will also be shown on the right hand side. This you fix by applying a non-repeating background image, positioned 50% on the horizontal axis. Half of the image transparent, half of the image as the hover effect. With sufficient length.

#menu li:hover {
    background: url(hover_effect.png) repeat-y 50% 0;
}