NickTheGreat
Members
-
Joined
-
Last visited
Reputation Activity
-
NickTheGreat got a reaction from PSS65 in I need a CSS Genius to help!looking at my earlier post... I realized that wouldn't work, as the inner div would also be transparent.
My solution was to make the white div overlap the dark, semi-tranparent div, by using z-index:
#idiv { z-index:2 } #odiv { z index:1 }
I decided to make a cheap re-creation of the link given on my website:
Copy Page
Here's the code:
<html> <head> <style type="text/css"> #odiv { border-radius:7.5px; display-block; height:200px; width:400px; background-color:#000; opacity:0.3; padding:10px; z-index: 1; position:absolute; } #idiv { background-color:#fff; display:block; border-radius:7.5px; height:200px; width:400px; opacity:10; border:20px; z-index: 2; position: absolute; margin:10px; } #iidiv{ height:53px; border-bottom:1px solid gray; widht:100%; background-image:url("./gradient.png"); color:#464646; font-weight:bold; font-family:arial; text-align:center; padding-top:7px; } ddiv { width:100%; height:100%; text-align:center; color:#464646; } </style> </head> <body style="background-image: url('http://psdvibe.com/wp-content/uploads/2009/06/wood2.jpg')"> <div id="odiv"> </div> <div id="idiv"> <div id="iidiv"> <p>Are you sure?</p> </div> <div id="ddiv"> </div> </div> </body> </html>
The "gradient.png" can be found here:
http://www.thenickmatyas.webs.com/gradient.png
-
NickTheGreat got a reaction from PSS65 in I need a CSS Genius to help!1. I would use a div within another div
css:
#odiv { display:block; background-color:#000000; opacity:0.5; width:___px; height:___px; border-radius3px; } #idiv { background-color:#ffffff; border-radius3px; // style stuff here } #iidiv { color:#464646; font-weight:bold; background-image: url('link to a img with a #FFFFFF to #DFDFDF gradient') <--- this is for the top inner box }
html:
<div id="odiv"> <!--- the dark, semi transparent, outer div. ---/> <div id="idiv"> <!--- the mostly white inner div ---/> <div id="iidiv"><!--- the white and light gray gradient div ---/> </div> </div> </div>
The comments aren't done right, and additional width/height/text/padding+margin styling probably will be required, but that should be the jist of it. Hope this helps
