Menu
I have created a background image(backgroundImage) using a div with an opacity. The backgroundImage div goes in the allservices div which too is done. put simply within the allservices container there is a background image, however, within the allservices div there are four sub categories(resid, commoff, stud, and colldeliv) which I don’t want any opacity in. Are there any ways of removing the opacity effect from these sub categories. The only way i can think of think at the moment is using jquery’s remove class. I know this can be done when using images, you just assign the image an id but how does this operate with divs and can be done?
Markup follows below:
<html xmlns=”
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title></title>
<style type=”text/css”>
html, body{margin:0; padding:0;}
#contentcontainer{margin:0 auto; margin-top:15px; height:936px; width:915px;}
#servicescontainer{margin-top:5px; margin-left:15px; height:926px; width:885px;}
#allservices{margin-top:3px; margin-left:10px; height:920px; width:865px;}
div#backgroundImage{margin-top:2.5px; background-image:url(somepicture.jpg); height:915px; width:865px; opacity:0.75; filter:alpha(opacity=75);}
#resid{margin:0 5px 0 5px; margin-top:2.5px; height:247px; width:855px;}
#commoff{margin:0 5px 0 5px; margin-top:5px; height:273px; width:855px;}
#stud{margin:0 5px 0 5px; margin-top:5px; height:180px; width:855px;}
#colldeliv{margin:0 5px 0 5px; margin-top:5px; height:200px; width:855px;}
#infobox{margin-left:22px; padding-top:20px; height:100px; width:865px;}
p.sub-title{font-family:”Lucida Calligraphy”,Times,serif; font-style:italic; font-size:16px;}
p.contenttext{padding-left:5.5px; padding-right:5.5px; font-family:Arial,Helvetica,sans-serif; font-size:13px;}
</style>
</head>
<body>
<div id=”contentcontainer”>
<div id=”servicescontainer”>
<div id=”allservices”>
<div id=”backgroundImage”>
<div id=”resid”>
<center><p class=”sub-title”>this div’s title</p></center>
<p class=”contenttext”>
Some random text for this div
</p>
</div>
<div id=”commoff”>
<center><p class=”sub-title”>this div’s title</p></center>
<p class=”contenttext”>
Some random text for this div
</p>
</div>
<div id=”stud”>
<center><p class=”sub-title”>this div’s title</p></center>
<p class=”contenttext”>
Some random text for this div
</p>
</div>
<div id=”colldeliv”>
<center><p class=”sub-title”>this div’s title</p></center>
<p class=”contenttext”>
Some random text for this div
</div>
</div> /*Closing div for the backgroundImage
</div> /*Closing div for the allservices
</div> /*Closing div for the servicescontainer
</div> /*Closing div for the contentcontainer
</body>
</html>
also within the CSS style the following are underlined in red: background-image:url(somepicture.jpg), opacity, and 75. onmouseover dreamweaver says Error parsing style[Microsoft Internet Explorer 5.0], by my understanding this means those styles are not compatible with IE5. Are there any ways around this?
Any idea, solutions, tips, and point outs of errors are much appreciated