HTML and CSS

z-index with images

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Sep 2009

Posts: 7

Reputation: optikali is an unknown quantity at this point

Solved Threads: 0

optikali

Offline

Newbie Poster

z-index with images

Oct 12th, 2009

I am trying to put up a rope border (border.png) on the sides of my center box of text. Text will work with z-index properly, but the border just will not show. Any ideas?

style.css =

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

* {margin:0px;padding:0px;top:0px;left:0px;}
body{
	text-align: center;
	background: #000000;
}
#central{
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	position: relative;
	width: 777px;
	text-align: left;
	background-color: #FFFFFF;
}
#contentborderside{
	margin-top: 252px;
	position: absolute;
	width: 800px;
	background: #FFFFFF url("border.png");
	z-index:1;
}
#content{
	margin-top: 252px;
	position: absolute;
	width: 500px;
	background:#c9a87f;
	z-index:-1;
}

HTML =

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horseback Adventures</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="central">
 
	<div id="contentborderside">
		<p>There should be a rope on either side of this!</p>
	</div>
 
	<div id="content">
		<h1>Why won't the image show?</h1>
		<p>Try as I might I can't get the z-index to work for my border ='( </p>
		<p>Any ideas?</p>
	</div>
 
	</div>
</body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horseback Adventures</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="central">
	
	<div id="contentborderside">
		<p>There should be a rope on either side of this!</p>
	</div>
		
	<div id="content">
		<h1>Why won't the image show?</h1>
		<p>Try as I might I can't get the z-index to work for my border ='( </p>
		<p>Any ideas?</p>
	</div>

	</div>
</body>

The image is attached.

Thank you!
-optikali

Attached Thumbnails

•

Join Date: Jun 2008

Posts: 348

Reputation: Troy III will become famous soon enough

Solved Threads: 42

Troy III

Offline

Posting Whiz

Oct 12th, 2009

•

Originally Posted by optikali

I am trying to put up a rope border (border.png) on the sides of my center box of text. Text will work with z-index properly, but the border just will not show. Any ideas?

style.css =
Help with Code Tags

(Toggle Plain Text)
* {margin:0px;padding:0px;top:0px;left:0px;}
body{
	text-align: center;
	background: #000000;
}
#central{
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	position: relative;
	width: 777px;
	text-align: left;
	background-color: #FFFFFF;
}
#contentborderside{
	margin-top: 252px;
	position: absolute;
	width: 800px;
	height:900px;
	background: #FFFFFF url("border.png");
	z-index:1;
}
#content{
	margin-top: 252px;
	position: absolute;
	width: 500px;
	background:#c9a87f;
	z-index:-1;
}
* {margin:0px;padding:0px;top:0px;left:0px;} body{ text-align: center; background: #000000; } #central{ margin-right: auto; margin-left: auto; margin-top: 10px; position: relative; width: 777px; text-align: left; background-color: #FFFFFF; } #contentborderside{ margin-top: 252px; position: absolute; width: 800px; height:900px; background: #FFFFFF url("border.png"); z-index:1; } #content{ margin-top: 252px; position: absolute; width: 500px; background:#c9a87f; z-index:-1; }
HTML =
Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horseback Adventures</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="central">
 
	<div id="contentborderside">
		<p>There should be a rope on either side of this!</p>
	</div>
 
	<div id="content">
		<h1>Why won't the image show?</h1>
		<p>Try as I might I can't get the z-index to work for my border ='( </p>
		<p>Any ideas?</p>
	</div>
 
	</div>
</body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Horseback Adventures</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="central"> <div id="contentborderside"> <p>There should be a rope on either side of this!</p> </div> <div id="content"> <h1>Why won't the image show?</h1> <p>Try as I might I can't get the z-index to work for my border ='( </p> <p>Any ideas?</p> </div> </div> </body>
The image is attached.

Thank you!
-optikali