Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Dec 2006
    Posts
    417
    Thanks
    168
    Thanked 1 Time in 1 Post

    Z-index and CSS formatting Issue

    Hi, I am trying to make a horizontal bar display across the browser when the user hovers over a menu element.

    Code:
    <div id="monthleft">
    <ul>
     <li>Month</li>
     <li><a href="#">jan</a></li>
     <li><a href="#">feb</a></li>
     <li><a href="#">mar</a></li>
     <li><a href="#">apr</a></li>
     <li><a href="#">may</a></li>
    </ul>
    </div>

    The CSS:

    Code:
    #monthleft {
      display: block;
      z-index: 4;
      position: absolute;
      left: 15px;
      right: 0;
      top: 160px;
      bottom: 0;
      width: 50px;
      border: 1px solid blue;
    }
    #monthleft ul {
      padding-left:5px;
      left: 0;
      margin-left: 0;
    }
    
    #monthleft ul li{
      height: 30px;
      list-style: none;
    }
    #monthleft ul li a{
      z-index: 4;
    }
    #monthleft ul li a:hover {
      color: #000;
      background: #EBBD2B;
      opacity: 0.6;
      -moz-opacity: 0.6;
      filter: alpha(opacity=60);
    }

    Right now you can see it in action here:

    http://www.gabbr.com/js/viewer/cmedata/index.html

    If you hover over the "Year" menu at the top of the page you will see the orange vertical bar display. I am trying to do the same thing with the two menus on the left expect when hovering the orange bar is horizontal.

    As you can see it isn't working.

    Can someone suggest what I am doing wrong?

  • #2
    New Coder
    Join Date
    Nov 2009
    Location
    Portland Oregon
    Posts
    33
    Thanks
    0
    Thanked 6 Times in 6 Posts
    Hello,

    I added the a width and display:block to the following, and I think it's doing what you want...

    Code:
    #monthleft ul li a:hover {
      color: #000;
      background: #EBBD2B;
      opacity: 0.6;
      -moz-opacity: 0.6;
      filter: alpha(opacity=60);
    
     width: 500px;
     display: block;
    }

  • Users who have thanked dougnbr for this post:

    Bobafart (05-28-2010)

  • #3
    Regular Coder
    Join Date
    Dec 2006
    Posts
    417
    Thanks
    168
    Thanked 1 Time in 1 Post
    Thanks for the tip. I appreciate it.

    Updated link:

    http://www.gabbr.com/js/viewer/cmedata/index.html

    I am trying to format it so that the orange bar when hovering over Month extends to the far left and the far right of the screen. I tried a width:-15px to extend the hover bar to the far left edge of the screen but that does nothing. I also tried a width:100% to make it extend to the right edge of the screen but that also doesn't work.

    The other disturbing thing is that the hover orange horizontal month bar doesnt show up in Chrome. But it works in Firefox. Which CSS tags are invalid for Chrome?

  • #4
    New to the CF scene
    Join Date
    May 2010
    Posts
    7
    Thanks
    0
    Thanked 1 Time in 1 Post
    Heya

    You're having an issue making the hover block 100% because you have a set width of 50px for the #monthleft div and it's positioned absolute. So when you give the "a" tag a width of 100% , it will inherit the 50px of the #monthleft div. So you set it like this.
    Code:
    #monthleft {
      display: block;
      margin-left: 15px;
      border: 1px solid blue;
    }
    That automatically gives the month div a width of 100%.

    By the way, It's considered good practice to use z-index with positioning. For it not showing up in Chrome, FF, add the code below. This will make the hover consistent across all browsers:
    Code:
    #monthleft ul li a{
      display:block;
    }
    Since the month div has no float or positioning, the "dayleft" and "rightcontent" will flow below the month div, so you have to position them. So I came up with this finally:

    Code:
    <style type="text/css">
    
    body 
    { margin-top: 0;
      margin-bottom: 0;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
    }
    
    #header {
      margin: 20px;
      padding: 10px;
      height: 100px;
      font-size: 64px;
    }
    
    #yearmenu {
      display: block;
      z-index: 5;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 200px;
    }
    #yearmenu ul li {
      float: left;
      width: 58px;
      list-style: none;
      padding: 20px 0;
    }
    #yearmenu ul li a{
      display: block;
      position: absolute;
      top: 0;
      z-index: 5;
      bottom: 0;
      padding: 10px;
    }
    #yearmenu ul li a:hover {
      color: #000;
      background: #EBBD2B;
      opacity: 0.6;
      -moz-opacity: 0.6;
      filter: alpha(opacity=60);
    }
    
    #monthleft {
      display: block;
      margin-left: 15px;
      border: 1px solid blue;
    }
    #monthleft ul {
      display: block;
      padding-left:5px;
      margin-left: 0;
    }
    
    #monthleft ul li{
      height: 30px;
      list-style: none;
    }
    #monthleft ul li a{
      display:block;
    }
    #monthleft ul li a:hover {
      display: block;
      color: #000;
      background: #EBBD2B;
      opacity: 0.6;
      -moz-opacity: 0.6;
      filter: alpha(opacity=60);
      width: 100%;
      left: 0;
      right: 0;
      height: 30px;
    }
    
    #dayleft {
      position: absolute;
      top: 160px;
      left: 80px;
      width: 50px; 
      bottom: 0;
      border: 1px solid red;
    }
    #dayleft ul {
      padding-left:5px;
      left: 0;
      margin-left:0;
    }
    
    #dayleft ul li {
      height: 30px;
      list-style: none;
    }
    #dayleft ul li a{
      z-index: 3;
    }
    #dayleft ul li a:hover {
      color: #000;
      background: #EBBD2B;
      opacity: 0.6;
      -moz-opacity: 0.6;
      filter: alpha(opacity=60);
    }
    
    #rightcontent {
    	position:absolute;
    	top: 160px;
    	left: 145px;
    }
    </style>

  • Users who have thanked bluecube for this post:

    Bobafart (05-29-2010)

  • #5
    Regular Coder
    Join Date
    Dec 2006
    Posts
    417
    Thanks
    168
    Thanked 1 Time in 1 Post
    Thanks Bluecube. That was awesome. I made some changes to #dayleft as well to give the same effect to it.

    Updated changes are here:
    http://www.gabbr.com/js/viewer/cmedata/index1.html

    The only problem I am having now is that I cannot get the orange hover bar to extend off the left of the screen for either #dayleft or for #monthleft. It extends all the way to the right margin of the screen but not the left. The problem is the margin-left: 15px; in #monthleft and margin-left: 80px; in #dayleft. But I cannot get rid of these since I require them for the letter spacing.

    Any advice?

  • #6
    New to the CF scene
    Join Date
    May 2010
    Posts
    7
    Thanks
    0
    Thanked 1 Time in 1 Post
    Give the selector #monthleft ul li a:hover a left margin.

    Code:
    #monthleft ul li a:hover {
    position: absolute;
    padding-left: 21px;
    left: -80px;
      display: block;
      color: #000;
       z-index: 3; 
      background: #EBBD2B;
      opacity: 0.6;
      -moz-opacity: 0.6;
      filter: alpha(opacity=60);
      width: 100%;
      left: 0;
      right: 0;
      height: 30px;
      margin-left:15px; /* Whatever width you want it to be */
    }


  •  

    Posting Permissions

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