Block, inline-block, margin 0 auto;

HTML & CSS
1

I try to figure out a way to construct a layout for a menu as you can see in the picture below:

The Image represent a 100% width layout. Where the black bar extends over the full 100% width and the grey bar Is Illustrating the menu width: 960px! You could say make a wrapper; width: 100%; background: black; and within that wrapper the menu: width: 960px; background: grey; margin: 0 auto; But I don’t want the black background to appear under the menu, since I would like to work with a transparant :hover effect for the menu items. I tried it with display: inline-block, using three divs, but that wasn’t working. What would be the best way to make this work?

Thank you in advance.

2

Since you have a gray background on the wrapper, the black won’t show through. So if you want the gray background to show behind, say, floated LIs, then set the UL to overflow: hidden;

Do you want the gray color behind the links?

3

The <li’s> will have the background (Grey) a you see it. On :hover thoughs they will be 50% transparant. I thought of having three divs within the wrapper. The middle one width: 960px and the two on each side. But I can’t define a width for the two side ones as you understand and I don’t want to set a background for the wrapper either, because than the hover won’t work since then the background from the wrapper is behind the <li’s> as well! This is what I thought:


* {
	margin: 0;
	padding: 0;
}

html,
body {
	width: 100%;
	height: 100%;
}

body {
	font-size: 100%;
}

#menu_bar {
	width: 100%;
	display:inline-block;
	position: fixed;
	left: 0;
	top: 20px;
	clear: both;
}

.menu_side {
	height: 60px;
	background: #000;
	float: left;
	overflow: hidden;
	display: inline-block;
}

#menu {
	width: 960px;
	margin: 0 auto;
	overflow: hidden
}

#menu li {
	height: 60px;
	float: left;
}

#menu li a {
	height: 60px;
	display: block;
	padding: 8px 28px 0 8px;
	background: url(images/menu_item.gif) 0 0 repeat-x;
	color: #FFF;
	text-decoration: none;
	font-size: 1.14em;	
}

#menu li a:hover,
#menu li a:focus {
	background-position: 0 -60px;
}



<div id="menu_bar">

  <div class="menu_side">Hallo</div>

  <ul id="menu">
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
  </ul>

  <div class="menu_side"></div>

</div>

But that isn’t working. I hope though that this decribes the situation a bit better.

4

HI,

You could do something like this assuming a fixed height.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
    height: 100%;
    margin:0;
    padding:0;
}
body {
    font-size: 100%;
}
#menu_bar {
    width: 100%;
    position: fixed;
    left: 0;
    top: 20px;
    clear: both;
    height:60px;
}
#menu {
    width: 960px;
    margin: 0 auto;
    padding:0;
    overflow: hidden;
    background:#ccc;
    opacity:0.5;
    list-style:none;float:left;
}
* html #menu{float:left;margin:0 -1px 0 0}
*+html #menu{float:left;margin:0 -1px 0 0}

#menu li {
    display:inline;
}
#menu li a{
    height: 60px;
    float: left;
    margin:0 20px 0 0;
    background:red;
    padding:0 20px;
    line-height:60px;
}
#menu li a:hover,#menu:hover{background:transparent;}
.menu_l, .menu_r {
    float:left;
    height:60px;
    width:50%;
}
.menu_l {
    margin:0 -480px 0 0;
}
.menu_r {
    margin:0 0 0 -480px;
    float:right;
}
.menu_l b, .menu_r b {
    display:block;
    background:#000;
    height:60px;
}
.menu_l b {
    margin:0 480px 0 0;
}
.menu_r b {
    margin:0 0 0 480px;
}
</style>
</head>
<body>
<div id="menu_bar">
    <div class="menu_l"><b></b></div>
    <div class="menu_r"><b></b></div>
    <ul id="menu">
        <li><a href="#">home</a></li>
        <li><a href="#">about</a></li>
    </ul>
</div>
</body>
</html>
5

Works great Paul :tup: You’re realy a CSS wonder :slight_smile: