homepage Welcome to WebmasterWorld Guest from 54.167.244.71
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

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




msg:4635049
 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




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

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




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

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

birdbrain




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

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


birdbrain

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved