Welcome to WebmasterWorld Guest from 54.144.80.75

Forum Moderators: not2easy

Message Too Old, No Replies

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

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

New User

joined:Sept 18, 2013
posts:30
votes: 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...]
2:35 pm on Jan 4, 2014 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 948
votes: 4


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
9:33 pm on Jan 4, 2014 (gmt 0)

New User

joined:Sept 18, 2013
posts:30
votes: 0


that works, what did you do? was it just change the opaque to rgba?
9:39 pm on Jan 4, 2014 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 948
votes: 4


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


birdbrain
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members