SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Block, inline-block, margin 0 auto;

    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.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by donboe View Post
    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.
    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. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code CSS:
    * {
    	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;
    }

    Code HTML4Strict:
    <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.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You could do something like this assuming a fixed height.

    Code:
    <!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. #5
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works great Paul You're realy a CSS wonder
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •