2
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
- @charset "UTF-8";
- body {
- background-color : #fffee3;
- font-family : "Trebuchet MS", Tahoma, Verdana;
- font-size : 0.9em;
- height : 100%;
- }
- #maincontainer {
- width : 750px;
- height : 100%;
- padding : 0;
- margin-left : auto;
- margin-right : auto;
- }
- #header {
- width : 100%;
- height : auto;
- padding : 0;
- margin : 0;
- }
- #container {
- width : 100%;
- height : 100%;
- padding : 0;
- margin : 0;
- background-image : url(_images/right_bg_img.png);
- background-repeat : repeat-y;
- background-position : right 0%;
- background-color : #aec580;
- }
- #containerbranch {
- width : 100%;
- height : 100%;
- padding : 0;
- margin : 0;
- background-image : url(_images/right_branch.png);
- background-repeat : no-repeat;
- background-position : bottom right;
- position : relative;
- z-index : 2;
- }
- #subheader {
- width : 100%;
- float : left;
- margin-top : 0;
- }
- #leftsidebar {
- width : 100px;
- float : left;
- margin : 0;
- padding : 0;
- }
- #content {
- width : 340px;
- float : left;
- margin-right : 0;
- }
- #footer {
- width : 100%;
- height : auto;
- padding-top : 3px;
- padding-bottom : 1px;
- background-color : #746f77;
- font-size : 0.7em;
- text-align : center;
- color : #fffee3;
- clear : both;
- }
- .massageimg {
- position : relative;
- left : 60px;
- }
Expand|Select|Wrap|Line Numbers
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
- <link href="main.css" rel="stylesheet" type="text/css" />
- <!--[if lt IE 7.]>
- <script defer type="text/javascript" src="pngfix.js"></script>
- <link href="oldIE.css" rel="stylesheet" type="text/css" />
- <![endif]-->
- </head>
- <body>
- <div id="maincontainer">
- <div id="header"><img style="position:relative; left: 10px; z-index: 4;" src="_images/head_robinname.gif" alt="Robin Hollister" /></div>
- <div id="container">
- <div id="containerbranch">
- <div id="subheader">
- <img src="_images/head_massage.gif" alt="Massage Therapy - LMBT# 6540" width="351" height="38" class="massageimg" />
- </div>
- <div id="leftsidebar">
- <p> </p>
- <p> </p>
- <p> </p>
- <p> </p>
- <p>LEFT SIDE BAR</p>
- </div>
- <div id="content">
- <p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida,
- diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas
- pede nibh eget odio. Proin tincidunt, velit vel porta elementum,
- magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam
- iaculis. Fusce et ipsum et nulla tristique facilisis. Donec eget
- sem sit amet ligula viverra gravida. Etiam vehicula urna vel turpis.
- Suspendisse sagittis ante a urna. Morbi a est quis orci consequat
- rutrum. Nullam egestas feugiat felis. Integer adipiscing semper ligula.
- Nunc molestie, nisl sit amet cursus convallis, sapien lectus pretium
- metus, vitae pretium enim wisi id lectus.</p>
- <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi
- commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
- pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse
- id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.
- Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere
- sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper,
- lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum.
- Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero
- cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit
- a, eros.</p>
- <p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida,
- diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas
- pede nibh eget odio. Proin tincidunt, velit vel porta elementum,
- magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam
- iaculis. Fusce et ipsum et nulla tristique facilisis. Donec eget
- sem sit amet ligula viverra gravida. Etiam vehicula urna vel turpis.
- Suspendisse sagittis ante a urna. Morbi a est quis orci consequat
- rutrum. Nullam egestas feugiat felis. Integer adipiscing semper ligula.
- Nunc molestie, nisl sit amet cursus convallis, sapien lectus pretium
- metus, vitae pretium enim wisi id lectus.</p>
- </div>
- </div>
- </div>
- <div id="footer"><?php include("_source/footer.php"); ?></div>
- </div>
- </body>
- </html>
