YtAnd Posted December 14, 2009 Report Share Posted December 14, 2009 The site I am building is at http://tiny.cc/vbw71. My problem: The text box is covering up the bottom of the flower image. There are two header images: headerA which is the real header, and header B, which is the problem. Header B contains the bottom of the flower image and actually some of it is showing. It is a background image on the div called "forHeaderB" that I made just for that reason. More specifically: If I put a bunch of s in the code between "forHeaderB" and the text box, the rest of the image shows. So I figure its back there somewhere. I tried to set the Z-index of the "forHeaderB" div to 55 and everything else to 0, but it's still hiding back there. Any thoughts? I am floating the nav to the left and the content to the right, so would rather not get into absolute positioning unless absolutely necessary. (I tried creating a box with a transparent top and the cut-off part DOES show through, but it's just a CSS nightmare because all the rest of the boxes' tops will do the same thing and be more obvious.) Quote Link to comment Share on other sites More sharing options...
Andrea Posted December 15, 2009 Report Share Posted December 15, 2009 Z-index isn't set in pixels. http://www.w3schools.com/Css/pr_pos_z-index.asp Also, setting your height at 5000px will likely lead to issues - 5000px makes for a very long page, and every page on your site will be different. Usually, you get away with not setting a height and letting the content determine what is needed. Quote Link to comment Share on other sites More sharing options...
YtAnd Posted December 15, 2009 Author Report Share Posted December 15, 2009 Okay, I updated those issues on the page (making the z-index plain old "55") and the problem still stands. Any other ideas? Quote Link to comment Share on other sites More sharing options...
Wickham Posted December 15, 2009 Report Share Posted December 15, 2009 (edited) It should be possible to put headerB1.gif on top of boxtop.gif with position: relative and z-index but I decided to put in a normal image with position: absolute and deleted the background-image:- #forHeaderB { width:775px; /*background-attachment: scroll;*/ /*background-image: url(../images/headerB1.gif);*/ /*background-repeat:no-repeat;*/ /*background-position: 0px 482px!important;*/ /*z-index: 55;*/ overflow:hidden; } .box { position: relative; /*added*/ width:535px; background: url(../images/boxtop.gif) no-repeat top left; margin:0; padding-left:0px; padding-bottom:0px; padding-top:5px; border:0; text-align:center; } #box1 { position: absolute; top: 0; left: 0; width: 775px; height: 85px; margin-left: -220px; } and the body markup:- ................... Here's all the stuff in the box. ............... OR here's the z-index method (don't mix with the above):- #forHeaderB { position: relative; width:775px; background-image: url(../images/headerA.jpg); background-repeat:no-repeat; background-position: 0 0;/* !important;*/ background-attachment: scroll; /*z-index: 55;*/ overflow:hidden; } #header { position: absolute; z-index: 55; /*float:left;*/ top: 482px; left: 0; width:775px; height:85px;/*482px;*/ background-image:url(../images/headerB.gif); background-repeat:no-repeat; background-position: 0px 0px; background-attachment:scroll; overflow:hidden; } #content_n_nav { margin-top: 482px; float:left; width:775px; overflow:hidden; } .box { position: relative; z-index: 1; width:535px; background: url(../images/boxtop.gif) no-repeat top left; margin:0; padding-left:0px; padding-bottom:0px; padding-top:5px; border:0; text-align:center; } No edits or extra normal image in your htm file needed. Note that the background-images of #forheaderB and #header have been swapped. Edited December 15, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
YtAnd Posted December 15, 2009 Author Report Share Posted December 15, 2009 Wow, I'm really impressed. I stuck with the z-index method because that makes the most sense to me right now, but will study the "normal image" strategy too. I'm so grateful for your help, Wickham. Happy holidays! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.