Welcome to WebmasterWorld Guest from 54.146.239.96

Forum Moderators: not2easy

Message Too Old, No Replies

How to make a div thats inside another div opaque if container isn't?

     

TheIceman5

12:48 pm on Jan 4, 2014 (gmt 0)



I have a big div that is partially transparent, inside this I have another div that I do not want to be transparent in any way but cant figure it out, anyone let me know what im doing wrong?
[jsfiddle.net...]

birdbrain

2:35 pm on Jan 4, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi there TheIceman5,

try it like this...


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>rgba example</title>

<style>
body {
background-image:url(http://fastrackdesign.com.au/coolum/images/1-bedroom-gallery/coolum-seaside-coolum-beach-2-bedroom.jpg);
background-size:100% 100%;
background-attachment:fixed;
}
.maincontent {
margin:300px 0 16px;
padding-bottom:16px;
border-top:1px solid #bc3133;
background-color:rgba(219,235,249,0.6);
}
.content_box1 {
width:93%;
padding:1px 10px 3px;
margin:10px auto 0;
border-radius:5px;
background-color:#05bb74;
font-size:16px;
color:#fff;
text-align:justify;
}
.content_box2 {
width:93%;
padding:1px 8px 3px 10px;
margin:15px auto;
border-radius:5px;
background-color:#92cafc;
font-size:14px;
color:#000;
text-align:justify;
}
</style>

</head>
<body>

<div class="maincontent">

<div class="content_box1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae
faucibus felis.
</p>
</div>

<div class="content_box2">
<p>Lorem ipsum</p>
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
</div>

</div>

</body>
</html>


birdbrain

TheIceman5

9:33 pm on Jan 4, 2014 (gmt 0)



that works, what did you do? was it just change the opaque to rgba?

birdbrain

9:39 pm on Jan 4, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi there TheIceman5,
yes, that and a few minor code adjustments. ;)


birdbrain
 

Featured Threads

Hot Threads This Week

Hot Threads This Month