Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 67

Sep 1st, 2010

Css Positioning

Expand Post »

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

HTML and CSS Syntax (Toggle Plain Text)
<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>
<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>

HTML and CSS Syntax (Toggle Plain Text)

#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

Last edited by NickRx; Sep 1st, 2010 at 3:51 pm.

Similar Threads

Newbie CSS Positioning problem IE in HTML and CSS
DIV Layout Positioning in HTML and CSS
CSS positioning problems in HTML and CSS
css positioning questions in HTML and CSS
css positioning in HTML and CSS

NickRx

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

14 posts
since Jan 2010

Permalink

Sep 2nd, 2010

Re: Css Positioning

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.

macneato

Reputation Points: 46

Solved Threads: 48

Posting Pro in Training

Offline

410 posts
since Jun 2007

Permalink

Sep 3rd, 2010

Re: Css Positioning

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

NickRx

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

14 posts
since Jan 2010

Permalink

Sep 4th, 2010

CSS and DIV

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

CSS:

HTML and CSS Syntax (Toggle Plain Text)
<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>
<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:

HTML and CSS Syntax (Toggle Plain Text)
<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>
<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>

Asiic

Reputation Points: 11

Solved Threads: 0

Newbie Poster

Offline

4 posts
since Sep 2010

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: Image uploading

Next Thread in HTML and CSS Forum Timeline: Replacing Flash movie with QuickTime movie in a website

DaniWeb Message

Cancel Changes

User Name
Password