CSS Depth - Text over Image? [Archive]

View Full Version : CSS Depth - Text over Image?

StigC

September 5th, 2007, 11:33 AM

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

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?

ratherblue

September 5th, 2007, 01:12 PM

Z-index only works on elements that have been positioned.

example: position:absolute

StigC

September 5th, 2007, 01:36 PM

Well I've tried using position:absolute on the various elements but it ruins the layout.

The three columns (and the percentage position) gets all messed up...

It seems like, if I use position:absolute the the three column layout gets overridden...

ratherblue

September 5th, 2007, 01:44 PM

Did you try 'floating' the links over the div, instead?

StigC

September 5th, 2007, 01:50 PM

Did you try 'floating' the links over the div, instead?

Hey ratherblue - I really appreciate your help.

I'm not sure what you mean. All I know of float: .. is.. uhmmm... I thought it was used to make text wrap around and image.. I haven't heard of floating above another element.
But as I said, I'm a CSS noob.

ratherblue

September 5th, 2007, 02:01 PM

Ahhh, OK. Well, for starters, I think you are going about the site a little bit backwards.

Instead of doing:
<div id="imgleft">
<img src="headerbox_L.png"/>
<img src="box2_L.png"/>
</div>

You should:
1) combine those two images to 1 big image.
2) Remove <div id="imgleft"></div>
3) Add to your CSS in #mainleft:
background-image: url('combined_img.png');
background-repeat: none;

StigC

September 5th, 2007, 02:13 PM

Thanks!

I've actually started going down that route myself. :)

But I was going to drop the right image and just keep the left image and add it in the body tag.
But with your reply I see a way I can't get it all! hehe! :D

I will let you know how it turns out!

And thank you again!

Stig

ratherblue

September 5th, 2007, 02:20 PM

Good luck :)

StigC

September 5th, 2007, 02:26 PM

Hmmm - it isn't really working putting them in the #mainleft / #mainright div tags.
(in the CSS).

The left side is working like a mask - IE the image shows up behind text ( <p> ) only..

The right side doesn't show up at all...

CSS must be the most frustrating language ever written.
It looks deceptively simple, and yet it behaves in very strange ways.
Why can't CSS be Actionscript?? :hurt:

ratherblue

September 5th, 2007, 02:35 PM

Did you update the site? I loaded it and it looks the same as before

StigC

September 5th, 2007, 02:38 PM

updated!
http://www.flashback-live.dk/css/home_2ndlayout.html

StigC

September 5th, 2007, 02:40 PM

Updated CSS:

#mainright {
text-align: right;
width:33%;
float:left;
margin-top: 50px;
background-image:url(NuHeadR.png);
background-attachment:fixed;
background-repeat:no-repeat;

}

#maincenter {
width:34%;
float:left;
margin-top: 50px;
font-family: Arial, Helvetica, sans-serif;

}
#mainleft {
text-align: left;
width:33%;
float:left;
background-image:url(NuHead.png);
background-attachment:fixed;
background-repeat:no-repeat;

}

ratherblue

September 5th, 2007, 02:45 PM

You dont need this (unless of course you really want it to look that way when you scroll):
background-attachment:fixed;

And the reason why the image is getting cut off, is because #mainleft has no 'height' defined. Add:
height: 700px;.

StigC

September 5th, 2007, 03:25 PM

http://www.flashback-live.dk/css/home_2ndlayout.html

Updated!

Okay, almost there!

Now I can get both images to show.. But the right one won't align to the top... In Firefox at least...

Will you help me with this last bit?
I really appreciate your help!

CSS:

body {
font-family: Arial, Helvetica, sans-serif;
text-align:center;
background-color:#FFFFFF;
color: #FFFFFF;
padding: 0;
margin: 0;

}
#mainright {
text-align: right;
width:33%;
height: 450px;
float:left;
background-image:url(NuHeadR.png);
background-repeat:no-repeat;
background-position:top-right;
background-attachment:fixed;

}

#maincenter {
width:34%;
float:left;
margin-top: 50px;
font-family: Arial, Helvetica, sans-serif;

}
#mainleft {
text-align: left;
width:33%;
height: 500px;
float:left;
background-image:url(NuHead.png);
background-attachment:fixed;
background-repeat:no-repeat;

}

Thanks once again!

ratherblue

September 5th, 2007, 05:36 PM

looking at it now

ratherblue

September 5th, 2007, 05:40 PM

on #mainright you need to change your css to:
background-position:right top;

Also, I am not sure why you have background-attachment:fixed. It makes the page look very weird when you scroll down.

StigC

September 6th, 2007, 09:41 AM

Hey ratherblue!

Thank you so much, that worked perfectly.

Well I don't think I need the background 'fixed' since - on my resolution at least - the pages aren't big enough to scroll.. Maybe I'll keep it to annoy people who keep their resolution at 800x600 px, hehe! :bandit:

Well - you can see the (nearly) finished layout here:
http://www.flashback-live.dk (http://www.flashback-live.dk/) (Will make a decent splash page later).
And if you're bored, you can always translate the page with one of those beta google translators. Always a lot of fun. - It's in Danish, btw. :)

Thanks!!!

Stig