CSS Depth - Text over Image?

programming web dev
1

Hey All!

I really hope you can help me out here, as I’m going quite nuts over this css business.
This is my first attempt at grasping CSS (besides playing around with my myspace page).

I’m having trouble with z-index.

Basically I’m trying to do a fluid three column layout. I’ve made some images that I want to act as background. They are not in the body tag, as they are 4 different slices positioned on each side of the screen. (Making the layout resizable… Know what I mean?)

Basically i want to put some links on top of the images, but it seems I fail at every try.
I’ve been looking through tutorials on z-index and I can’t seem to find anything that works.

I’ve tried splitting things up in different div tags - also tried having both images and content in the same left/right div tag.

Here’s what it looks like so far: http://www.flashback-live.dk/css/home.html

As you can see, the links go beneath the images…

I really hope someone can help me out.

Here’s my code:

<!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>Flashback-live.dk -</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
    text-align:center;
    background-color:#FFFFFF;
    font-family: monospace;
    font-size: 10px;
    color: #FFFFFF;
    padding: 0;
    margin: 0;
    }
#mainright {
        text-align: right;
        width:33%;
        float:left;
        }
#imgright {
        z-index: 1;    
        }
#maincenter {
        width:34%;
        float:left;
        margin-top: 50px;
        }
#mainleft {
        text-align: left;
        width:33%;
        float:left;
        }
#imgleft {
        z-index: 1;    
        }
h1 {    
        font-weight: bold;
        font-size: 14px;
        text-align: center;
        }
p {        font-size: 12px;
        text-align: justify;
        margin: 2px 10px 10px 10px;
        color:#222222;
        padding: 10px;
        }
#contentright { z-index: 2;
        margin: 60px 25px;
        position:absolute;        
    }
#contentleft { z-index: 2;
        margin: 60px 25px;
        position:absolute;
    }
a:link {
        color:#333333;
        font-size:12px;
        letter-spacing: 2px;
        padding: 5px;
        }
a:hover {color:#000000;
        font-size:12px;
        letter-spacing: 4px;
        padding: 5px;
        }
a:visited {color:#CCCCCC;
        font-size:    12px;
        padding: 5px;
        }
</style>
</head>
<body>

<div id="mainleft">
<div id="imgleft"
<img src="headerbox_L.png" />
<img src="box2_L.png" />
</div>
<div id="contentleft">
<a href="http://www.flashback-live.dk/simpleview/galleri.html" target="_blank">Galleri</a>
</div>
</div>

<div id="maincenter">
<h1>Velkommen til Flashback-live.dk</h1>
<p>
</p>
</div>
<div id="mainright">
<div id="imgright">
<img src="headerbox_R.png" />
<img src="box2_R.png" />
</div>
<div id="contentright">
<a href="mailto:somemail@mail.com">Booking / Mail</a><br>
<a href="mailto:flashback@flashback-live.dk">Webmaster / Mail</a>
</div>
</div>
</body>
</html>

Thank you very much!
Stig

[edit:]I didn’t put the images in the body, because of positioning and so forth (and it being 4 separate images) - but maybe there’s a way to do what I would like to, doing it as background-image? - and still making the layout resize with the browser?[/edit]