New Topic/Question
Reply
I'm just learning we design and I was hoping I could get some help. Im trying to achieve the look in the picture I attached. The top piece is labeled header in my code, and the other one is center. I tried to center the #center and use margin and padding to position it but I was unable. In addition, when I did use those. The area opaque layer around my text greatly increased in size and shifted down, which confused me. I don't want to use relative positioning because it does not scale nicely. Here is the code I am working with.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
#header
{
padding:5%;
width:90%;
color:black;
position:relative;
background-color:white;
float:left;
opacity:0.6;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-moz-box-shadow: 3px 6px 4px #000;
-webkit-box-shadow: 6px 3px 4px #000;
box-shadow: 3px 6px 4px #000;
}
#header2
{
padding:20px;
width:100%;
color:#FFFFFF;
position:relative;
float:left;
margin-left:20px;
overflow:hidden;
}
#header2 .transparency
{
opacity:0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
background-color:#000000;
width:340px;
height:1500px;
position:absolute;
top:0px;
left:0px;
z-index:-1;
}
#center
{
padding:25%;
width:50%;
height:20%;
color:black;
background-color:white;
float:center;
opacity:0.6;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-moz-box-shadow: 3px 6px 4px #000;
-webkit-box-shadow: 6px 3px 4px #000;
box-shadow: 3px 6px 4px #000;
}
#center2
{
padding:20px;
width:50%;
color:#FFFFFF;
position:;
float:center;
margin-left:20px;
overflow:hidden;
}
#center2 .transparency
{
opacity:0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
background-color:#000000;
width:200px;
height:500px;
position:absolute;
top:0px;
left:0px;
z-index:-1;
}
.content
{
position:relative;
}
.content, .shadow {
position: relative;
bottom: 4px;
right: 4px;
}
html {
background: url(assets/img/swap/kayaks_2.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
</style>
</head>
<!-- container one starts -->
<div id="header">
<h1>Children inherit the opacity</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean gravida. Sed blandit, neque non adipiscing sagittis, tortor nisi consequat eros, a posuere sem augue sit amet nibh. Morbi at leo. Vestibulum porta, eros id congue molestie, leo eros facilisis neque, at ullamcorper nisi mauris non quam. Suspendisse vel erat vel nulla molestie egestas. In sit amet mauris quis eros elementum semper. Curabitur suscipit molestie nibh. In euismod ligula vel diam pharetra feugiat. Morbi suscipit fermentum elit. Curabitur imperdiet urna eu sapien.
</div>
<body>
<!-- container one ends -->
<div id="center">
<h1>Center Piece</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean gravida. Sed blandit, neque non adipiscing sagittis, tortor nisi consequat eros, a posuere sem augue sit amet nibh. Morbi at leo. Vestibulum porta, eros id congue molestie, leo eros facilisis neque, at ullamcorper nisi mauris non quam. Suspendisse vel erat vel nulla molestie egestas. In sit amet mauris quis eros elementum semper. Curabitur suscipit molestie nibh. In euismod ligula vel diam pharetra feugiat. Morbi suscipit fermentum elit. Curabitur imperdiet urna eu sapien.
</div>
</body>
</html>
The page is also live at http://nathansass.com/page_3.html
thanks,
Nathan
MultiQuote
| 