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>
<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
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;
}
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>
<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
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;
}