Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Senior Member
    Join Date
    Apr 2005
    Location
    Hatfield, England
    Posts
    855
    Member #
    9790
    I am having some CSS trouble.. what is happening is that the absolutely positioned #ribbon element is covering what is in my header. Header contains logo and company name. I have tried to use z-index to correct this. However z-index isn't helping. The only difference I see is if I set #ribbon to -1 it vanishes.

    Does anyone know what is going on? Does anyone have a solution to this?

    Code:
    #ribbon {
    	width:100%;
    	height:76px;
    	position:absolute;
    	top:20px;
    	background:url(images/headerbg.jpg) repeat-x;
    	z-index:-1;
    }
    
    #page {
    	width:800px;
    	}
    
    /* Header */
    
    #header {
    	padding: 0px;
    	margin:0px;
    	height: 76px; 
    	width: 800px;
    	z-index:2;
    	}
    
    #headerimg {
    	background:url(images/logo.jpg) no-repeat;
    	margin:0 0 0 40px;
    	height:68px;
    	z-index:3;
    	}
    	
    #headerimg h1 {	
    	margin:0px;
    	padding:25px 10px 0 80px;
    	font-size:24px;
    	text-align:left;
    	z-index:3;
    }
    HTML

    Code:
    <div id="ribbon"></div>
    <div id="page">
    
    <div id="header">
    	<div id="headerimg">
    		<h1><a href="http://localhost/wordpress/">Company Name</a></h1>
    		<div class="description"></div>
    	</div>
    
    </div>

  2.  

  3. #2
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Not real sure about this because I can't see it an play with it (is there a live version you can link to?) but I'm inclined to want to put the ribbon inside the header div. Or maybe it has something with the absolute positioning?
    Shani

    I have an eye for detail like you'd never believe.

  4. #3
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Yeah, the thing is, absolutely positioned elements are automatically in higher stacking order than statically positioned elements. As DCScene said, if you put the ribbon inside the same div as the header, you can then position the containing div relatively, then position the header and ribbon absolutely, and then use z indices appropriately.

  5. #4
    Senior Member
    Join Date
    Apr 2005
    Location
    Hatfield, England
    Posts
    855
    Member #
    9790
    The problem is that I need it to stretch across the entire width of my page. the page div has a width of 800px. This is why I have it at the top of my page.

    Even if I set the position to relative I still have the same problem.

    Unfortunately it is on my computer and is somewhat incomplete.

  6. #5
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Simply upload it as a mockup somewhere, and we'll probably get to your problem 10x faster (firebug rocks!).
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:56 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com