I have an ul (div id "boxes") list I want to place over a div with an image inside (div id "red_boxes"), but it it being placed behind the image for some reason. Can anyone help with why? Here is my code:
HTML Code:
<!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><style>
* {
margin: 0;
padding: 0;
}
body {
background: #000000;
color: #FFFFFF;
/*background: url(red_back2.png) #000000 top repeat-x;*/
font-size: 62.5%;
font-family: Helvetica, sans-serif;
}
ul#nav {
height:504px;
width:780px;
background: url(main-img2.jpg) no-repeat;
}
img {
border: none;
}
ul#nav li a {
display: block;
float: left;
width: 73px;
margin-left: 14px;
}
ul#nav li {
list-style: none;
}
ul#boxes li {
list-style: none;
float: left;
width: 150px;
margin-left: 35px;
margin-top: -100px;
}
div#logo {
height: 71px;
width: 324px;
float: left;
}
div#page-wrap {
width: 800px;
margin: 0 auto;
}
div#red_back {
background: url(images/red_back.png) repeat-x;
height: 269px;
margin-top: -269px;
margin-left: -25px;
}
div#red_boxes {
width: 800px;
height: 269px;
margin-top: 163px;
}
#headline-img {
height: 26px;
margin-left: 600px;
margin-top: -188px;
}
</style></head><body><div id="page-wrap"><div id="logo"><a href="index.html"><img src="logo.jpg" alt="A1 Quality Corp" /></a></div><ul id="nav"><li><a href="home.html"><img src="images/home_selected.png" alt="Home" /></a></li><li><a href="about.html"><img src="images/about.png" alt="About" /></a></li><li><a href="services.html"><img src="images/services.png" alt="Services" /></a></li><li><a href="contact.html"><img src="images/contact.png" alt="Contact" /></a></li></ul><div id="headline-img"><a href="#"><img src="images/headline_img.jpg" alt="Learn More" /></a></div><div id="red_boxes"><img src="images/red_boxes2.png" alt="" /></div><ul id="boxes"><li><p>Whether you live in an apartment, a residential home or a condominium, the possibility of water damage is very real. Even offices and commercial buildings are subject to water damage, especially damage due to faulty pipes, leakages or flooding. Water damage is indeed a very serious issue, especially if the water is contaminated with sewage or chemicals. What should you do if you are faced with water damage to your home or office? First, assess the situation, and then begin the task of cleaning up.</p></li><li><p>Have you recently been facing respiratory problems such as wheezing or difficulty breathing? Do your burning, watery eyes worry you? Have you found that skin irritation, pains and aches are becoming regular problems for you? If the answer to any of these questions is yes, then you should consider hiring a mold removal company to conduct a mold inspection. </p></li><li><p>Water damage cleanup must be undertaken immediately when floods, faulty pipes or water leaks afflict your home or office. Such water-related catastrophes can cause extensive damage to furnishings and flooring, particularly carpeting. The effects of unchecked water seeping through walls and floors and damaging furniture and upholstery can be devastating. Hardwood floors and walls can become rotten and begin to decay due to water damage. Water damage requires swift action, and beginning the cleanup process right away is vital.</p></li><li><p>Carpets are perhaps the most aesthetically important objects that you can add to your apartment. Carpets come in many varieties and a wide range of prices, from cheap to very expensive. Unfortunately, there are also many ways in which carpets can get stained. Usually, you treat these stains as soon as they turn up, or you leave it in the hands of professional cleaners. But doing it on your own has its merits, as it tends to be much more affordable.</p></li></ul></div><!-- END PAGE-WRAP--><div id="red_back"></div></body></html>
Well, I managed to get it working, although I'm not sure if it's the right CSS way or not. I added a z-index and positioned the ul absolutely and now it's working. Is this right?
