www.webdeveloper.com
Results 1 to 2 of 2

Thread: Z-Index Question.

  1. #1
    Join Date
    Oct 2005
    Posts
    843

    Z-Index Question.

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

  2. #2
    Join Date
    Nov 2005
    Location
    127.0.0.1
    Posts
    329
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles