z-index with images

Thread Solved

Join Date: Sep 2009
Posts: 7
Reputation: optikali is an unknown quantity at this point 
Solved Threads: 0
optikali optikali is offline Offline
Newbie Poster

z-index with images

 
0
  #1
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 =
HTML and CSS Syntax (Toggle Plain Text)
  1. * {margin:0px;padding:0px;top:0px;left:0px;}
  2. body{
  3. text-align: center;
  4. background: #000000;
  5. }
  6. #central{
  7. margin-right: auto;
  8. margin-left: auto;
  9. margin-top: 10px;
  10. position: relative;
  11. width: 777px;
  12. text-align: left;
  13. background-color: #FFFFFF;
  14. }
  15. #contentborderside{
  16. margin-top: 252px;
  17. position: absolute;
  18. width: 800px;
  19. background: #FFFFFF url("border.png");
  20. z-index:1;
  21. }
  22. #content{
  23. margin-top: 252px;
  24. position: absolute;
  25. width: 500px;
  26. background:#c9a87f;
  27. z-index:-1;
  28. }

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

The image is attached.

Thank you!
-optikali
Attached Thumbnails
border.png  
Reply With Quote Quick reply to this message  
Join Date: Jun 2008
Posts: 348
Reputation: Troy III will become famous soon enough Troy III will become famous soon enough 
Solved Threads: 42
Troy III's Avatar
Troy III Troy III is offline Offline
Posting Whiz
 
1
  #2
Oct 12th, 2009
Originally Posted by optikali View Post
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 =
HTML and CSS Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Horseback Adventures</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <link href="style.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <body>
  9. <div id="central">
  10.  
  11. <div id="contentborderside">
  12. <p>There should be a rope on either side of this!</p>
  13. </div>
  14.  
  15. <div id="content">
  16. <h1>Why won't the image show?</h1>
  17. <p>Try as I might I can't get the z-index to work for my border ='( </p>
  18. <p>Any ideas?</p>
  19. </div>
  20.  
  21. </div>
  22. </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.
Reply With Quote Quick reply to this message  
Join Date: Sep 2009
Posts: 7
Reputation: optikali is an unknown quantity at this point 
Solved Threads: 0
optikali optikali is offline Offline
Newbie Poster
 
0
  #3
Oct 12th, 2009
/me smacks his forehead

oh wow... thanks haha!
Reply With Quote Quick reply to this message  
Join Date: Jun 2008
Posts: 348
Reputation: Troy III will become famous soon enough Troy III will become famous soon enough 
Solved Threads: 42
Troy III's Avatar
Troy III Troy III is offline Offline
Posting Whiz
 
0
  #4
Oct 12th, 2009
well, you may mark this threat as solved than.
Reply With Quote Quick reply to this message  
Reply

This thread has been marked solved.
Perhaps start a new thread instead?
Message:



Similar Threads
Other Threads in the HTML and CSS Forum


Views: 420 | Replies: 3
Thread Tools Search this Thread



Tag cloud for HTML and CSS
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC