By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,723 Members | 1,655 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,723 IT Pros & Developers. It's quick & easy.

Layered DIVs & Background Images

P: 2
Hi -

So, I had this working perfectly, then had a small crash (the transmitter for my wireless mouse occassionally freaks out my MacBook Pro) and when I rebooted and opened up my file the two layered DIVs I had were no longer showing up correctly. I had this going fine for several hours -- it wasn't a happy accident I forgot to save. I'm totally mystified on this one.

Here's the summary: I want #container to be under #containerbranch, so that the background image of #containerbranch will be laying on top of the background image of #container. The property I was playing with when i had the crash was the width of the #maincontainer div in the CSS file. But, I'm not really sure why that would affect the DIVs ability to layer?

It is very possible that I changed something by accident, but I have been over and over this and I can find anything.

I would so greatly appreciate any help anyone could offer.

I've tried playing with the z-index and the positing of both the DIVs that I am trying to layer to no avail. I'm really not sure how the float property would be in play here. I tried it both ways - when the DIV that should be in front (#containerbranch) is float:left, it obscures #container. I would think that neither DIV would need to have a float set since they are both at 100% width and height?

All the best and I hope everyone is having a great night. I do apologize if this is a very simple problem and I am just missing something obvious.

(I'm testing both in Dreamweaver as well as Safari for Mac and Firefox for Mac.)

Thank you!
tt



Here's the full CSS file, which has been validated by W3C validator:

Expand|Select|Wrap|Line Numbers
  1. @charset "UTF-8";
  2. body {
  3. background-color : #fffee3;
  4. font-family : "Trebuchet MS", Tahoma, Verdana;
  5. font-size : 0.9em;
  6. height : 100%;
  7. }
  8.  
  9. #maincontainer {
  10. width : 750px;
  11. height : 100%;
  12. padding : 0;
  13. margin-left : auto;
  14. margin-right : auto;
  15. }
  16.  
  17. #header {
  18. width : 100%;
  19. height : auto;
  20. padding : 0;
  21. margin : 0;
  22. }
  23.  
  24. #container {
  25. width : 100%;
  26. height : 100%;
  27. padding : 0;
  28. margin : 0;
  29. background-image : url(_images/right_bg_img.png);
  30. background-repeat : repeat-y;
  31. background-position : right 0%;
  32. background-color : #aec580;
  33. }
  34.  
  35. #containerbranch {
  36. width : 100%;
  37. height : 100%;
  38. padding : 0;
  39. margin : 0;
  40. background-image : url(_images/right_branch.png);
  41. background-repeat : no-repeat;
  42. background-position : bottom right;
  43. position : relative;
  44. z-index : 2;
  45. }
  46.  
  47. #subheader {
  48. width : 100%;
  49. float : left;
  50. margin-top : 0;
  51. }
  52.  
  53. #leftsidebar {
  54. width : 100px;
  55. float : left;
  56. margin : 0;
  57. padding : 0;
  58. }
  59.  
  60. #content {
  61. width : 340px;
  62. float : left;
  63. margin-right : 0;
  64. }
  65.  
  66. #footer {
  67. width : 100%;
  68. height : auto;
  69. padding-top : 3px;
  70. padding-bottom : 1px;
  71. background-color : #746f77;
  72. font-size : 0.7em;
  73. text-align : center;
  74. color : #fffee3;
  75. clear : both;
  76. }
  77.  
  78. .massageimg {
  79. position : relative;
  80. left : 60px;
  81. }
And the HTML file:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Untitled Document</title>
  6. <link href="main.css" rel="stylesheet" type="text/css" />
  7. <!--[if lt IE 7.]>
  8. <script defer type="text/javascript" src="pngfix.js"></script>
  9. <link href="oldIE.css" rel="stylesheet" type="text/css" />
  10. <![endif]-->
  11. </head>
  12. <body>
  13. <div id="maincontainer">
  14.  
  15. <div id="header"><img style="position:relative; left: 10px; z-index: 4;" src="_images/head_robinname.gif" alt="Robin Hollister" /></div>
  16.   <div id="container">
  17.    <div id="containerbranch">
  18.           <div id="subheader">
  19.               <img src="_images/head_massage.gif" alt="Massage Therapy - LMBT# 6540" width="351" height="38" class="massageimg" />
  20.         </div>
  21.  
  22.         <div id="leftsidebar">
  23.           <p>&nbsp;</p>
  24.           <p>&nbsp;</p>
  25.           <p>&nbsp;</p>
  26.           <p>&nbsp;</p>
  27.           <p>LEFT SIDE BAR</p>
  28.         </div>
  29.  
  30.         <div id="content">
  31.  
  32.           <p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida,
  33.             diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas
  34.             pede nibh eget odio. Proin tincidunt, velit vel porta elementum,
  35.             magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam
  36.             iaculis. Fusce et ipsum et nulla tristique facilisis. Donec eget
  37.             sem sit amet ligula viverra gravida. Etiam vehicula urna vel turpis.
  38.             Suspendisse sagittis ante a urna. Morbi a est quis orci consequat
  39.             rutrum. Nullam egestas feugiat felis. Integer adipiscing semper ligula.
  40.             Nunc molestie, nisl sit amet cursus convallis, sapien lectus pretium
  41.             metus, vitae pretium enim wisi id lectus.</p>
  42.           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi
  43.             commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
  44.             pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse
  45.             id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.
  46.             Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere
  47.             sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper,
  48.             lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum.
  49.             Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero
  50.             cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit
  51.           a, eros.</p>
  52.           <p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida,
  53.             diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas
  54.             pede nibh eget odio. Proin tincidunt, velit vel porta elementum,
  55.             magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam
  56.             iaculis. Fusce et ipsum et nulla tristique facilisis. Donec eget
  57.             sem sit amet ligula viverra gravida. Etiam vehicula urna vel turpis.
  58.             Suspendisse sagittis ante a urna. Morbi a est quis orci consequat
  59.             rutrum. Nullam egestas feugiat felis. Integer adipiscing semper ligula.
  60.             Nunc molestie, nisl sit amet cursus convallis, sapien lectus pretium
  61.             metus, vitae pretium enim wisi id lectus.</p>
  62.     </div>
  63.    </div>
  64.   </div>
  65.  
  66.   <div id="footer"><?php include("_source/footer.php"); ?></div>
  67. </div>
  68. </body>
  69. </html>
Jan 28 '08 #1
Share this Question
Share on Google+
2 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Add to your css:
html{height:100%}

See if that helps but I don't have time to see if that's what you need right now.
Jan 28 '08 #2

P: 2
Thank you Howard!

I think that did it! I'm not sure why it was working earlier when I didn't have this in there, but it's working now!

Many many thanks!
tt



Add to your css:
html{height:100%}

See if that helps but I don't have time to see if that's what you need right now.
Jan 28 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.