Member Avatar for NickRx

This is what I want my outcome to look like http://teh-shepherd.webege.com/

Tried changing to css, but i cant get positioning done right

<div id="nofade" align="center">
<b>block 1</b>
</div>			
<div id="fade80">
</div>
<div id="nofade" align="center">
<b>block 2</b>
</div>			
<div id="fade40">
</div>
#nofade {
position:static;
background-color:transparent;
position:absolute;
z-index:3;
}

#fade40 {
position: absolute;
top: 50%;
left: 0;
padding: 10px; 
background-color:#000000;
opacity:0.4;
filter:alpha(opacity=40);
z-index:2;

}

#fade80 {
position: absolute;
top: 50%;
left: 0;
padding: 10px; 
Width:100%; height:20%;
background-color:#000000;
opacity:0.4;
filter:alpha(opacity=40);
z-index:2;
}

thats what i have, any input would be appreciated

Edited by NickRx because: n/a
  • 3 Contributors
  • 3 Replies
  • 81 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Asiic

Recommended Answers

All 3 Replies

Member Avatar for macneato

Let me guess, the vertical positioning is the hard part?

I would recommend using javascript. Here is a simple jquery plugin that should do it for you.

Member Avatar for NickRx

Nah I got the vertical position done with css, the part I'm having trouble with is placing the divs like tables to make a box, I'm new to using just divs and no tables

Member Avatar for Asiic

I am not entirely sure what you are asking for, but i'm assuming this code will help. Hope it works

CSS:

<style>
html, body { 
width: 100%;
height: 100%;
margin: 0;
padding: 0;
color: #ffffff;
background-image:url(http://g1-wallpapers.com/albums/userpics/10004/space-planets-snow.jpg);
	}
#container {
position: relative;
top: 20%;
margin: 0 auto;
width: 50%;
height: 100px;
	}
#fade40 {
width: 100%;
height: 80%;
background-color: #000000;
opacity:.4;
filter: alpha(opacity=40);
z-index:2;
	}
#fade80 {
width:100%; 
height:20%;
background-color:#000000;
opacity:.8;
filter: alpha(opacity=80);
z-index:2;
	}
</style>

HTML:

<body>
<div id="container">
	<div id="fade80">Header</div>	
	<div id="fade40">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac orci lacus, et vestibulum massa. Sed rutrum elit erat. Nullam euismod imperdiet gravida. </div>
</div>
</body>
</html>
commented: Exactaly what I needed :) Thanks man +1
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.