Z-Index Question.

**welsh** · 12-01-2005 07:41 PM

Hey, ive got an image that is:

position: absolute

and i want text to appear ontop of it. so i set the <div> property of the text style to z-index: 1 then the image to z-index: 0. is but the text wont show through. But its not working. Any suggestions for me to get it to show through? Below is my html and style code.

HTML CODE

HTML Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
<link type="text/css" rel="stylesheet" href="style.css">

<title>Welsh Web Design</title>><style type="text/css">

</style></head>

<body>

  <img class="head" src="images/header.jpg" alt="Header">
  <img class="topnav" src="images/topnav.jpg" usemap="#topnav" style="border-style:none" alt="Header">
  <img class="leftnav1" src="images/menu-nav.jpg" alt="Header">
  <img class="leftnav2" src="images/menu-feature.jpg" alt="Header">
  <img class="leftnav3" src="images/menu-links.jpg" alt="Header">
  <img class="contentboxhead" src="images/contentbox-head.jpg" alt="Header">
  <img class="contentboxmiddle" src="images/contentbox-middle.jpg" alt="Header">
  <img class="contentboxbottom" src="images/contentbox-bottom.jpg" alt="Header">
  <img class="bottom" src="images/bottom.jpg" alt="Header">
  
  <div class="contentbox">Test Test Test Test Test Test Test Test Test Test Test Test </div>
</body>

</html>

CSS CODE

HTML Code:

body {
background-color: #3a3a3a;
}

img.head {
position: absolute;
top: 0;
left: 0;
}

img.topnav {
position: absolute;
top: 127;
left: 0;
}

img.bottom {
position: absolute;
top: 577;
left: 0;
}

img.leftnav1 {
position: absolute;
top: 144;
left: 0;
}

img.leftnav2 {
position: absolute;
top: 308;
left: 0;
}

img.leftnav3 {
position: absolute;
top: 444;
left: 0;
}

img.contentboxhead {
position: absolute;
top: 144;
left: 184;
}

img.contentboxmiddle {
position: absolute;
top: 191;
left: 184;
z-index: 0;
}

img.contentboxbottom {
position: absolute;
top: 527;
left: 184;
}

div.contentbox {
margin-left: 185;
margin-top: 191;
width: 335;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
z-index: 1;
}

**thewebman** · 12-01-2005 08:13 PM

try making a <div> and giving it the background image that you want using CSS: background: url(yourpic.gif) no-repeat; then put your text in the <div>.

Example:

<style>
div {
background: url(yourpic.gif) no-repeat;
}
</style>

<div>
text text text
</div>

Thread: Z-Index Question.

Thread Tools

Display

Z-Index Question.

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions