Member Avatar for 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 =

* {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 =

<!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

border.png 41.57 KB
  • 2 Contributors
  • 3 Replies
  • 219 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by Troy III

Recommended Answers

All 3 Replies

Member Avatar for Troy III

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 =

* {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 =

<!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

Some little dumb mistake I'm sure...
p.s.: check the little thingy in red inside your code, That's what's missing here.

Member Avatar for optikali

/me smacks his forehead

oh wow... thanks haha!

Member Avatar for Troy III

well, you may mark this threat as solved than.

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.