Welcome to Dream.In.Code
Become an Expert!

Join 149,755 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 2,454 people online right now. Registration is fast and FREE... Join Now!




layers help

 
Reply to this topicStart new topic

layers help, z-index what?

Sneblot
11 Feb, 2007 - 09:13 PM
Post #1

D.I.C Head
**

Joined: 9 Feb, 2007
Posts: 245


My Contributions
What I want to do is make my web site look like this :- Attached Image and was hopeing I could do it in CSS so that i wouldnt have to write out the code each time.
I have been looking it up on html.net and w3schools.com and have come across z-indexing this to me sounds like it would do what I want but every time I try it doesn't seem to work.

Here is some example code from html.net

CODE
#ten_of_diamonds {
    position: absolute;
    left: 100px;
    bottom: 100px;
    z-index: 1;
}

#jack_of_diamonds {
    position: absolute;
    left: 115px;
    bottom: 115px;
    z-index: 2;
}


If this is the right way to go about it how does #ten_of_diamonds refer to the image?

Also here is my code so you can see what going wrong.

CODE
body {
    background-repeat: repeat-x;
    background-attachment: fixed;
    background-image: url(../images/background.jpg);
    background-position: center;
    z-index:1;
}    
#overlay {
    position: absolute;
    z-index:2;
}


User is offlineProfile CardPM
+Quote Post

capty99
RE: Layers Help
11 Feb, 2007 - 10:33 PM
Post #2

the real kya
Group Icon

Joined: 26 Apr, 2001
Posts: 9,253



Thanked: 16 times
Dream Kudos: 550
My Contributions
didn't understand the jack of diamonds references.

normally i got my background set up,
then on top of that,
a new div,
and then just define that background in the css also.

User is offlineProfile CardPM
+Quote Post

Sneblot
RE: Layers Help
11 Feb, 2007 - 10:39 PM
Post #3

D.I.C Head
**

Joined: 9 Feb, 2007
Posts: 245


My Contributions
YAY cheers dude finaly worked it out only thing is I wanted the div background to have rounded courners but somehow they are being cut off dose anyone know how to change this?

heres the CSS code
CODE

body {
    background-repeat: repeat-x;
    background-attachment: fixed;
    background-image: url(../images/background.jpg);
    background-position: center;
}    
div {
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-image:url(../images/overlay.gif);
    background-position:center;
}
font {
    font:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    font-style:normal;
    font-size-adjust:inherit;
}


and heres the other stuff

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="style/test.css" />
</head>    
<center>
<body>
<div style="width:410px; height:750px;" align="center">
<table cellspacing="2" width="410px" height="100" cellpadding="0" border="0">
<tr>
<td>
</td>
</tr>
</table>
</div>
</body>
</center>
</html>


No need sorted it out had it the div background down as fixed when it needed to be scroll. GET IN

[mod edit] code tags use the [ and ], not < and >.

This post has been edited by hotsnoj: 12 Feb, 2007 - 05:44 AM
User is offlineProfile CardPM
+Quote Post

omoimasuyo
RE: Layers Help
20 Feb, 2007 - 08:22 AM
Post #4

D.I.C Head
Group Icon

Joined: 19 Oct, 2006
Posts: 60


Dream Kudos: 50
My Contributions
As to the z-index question, I know exactly what you are trying to do. For the z-index to work, I find that starting at the z-index:11; and going up from there works best.

So just redo your code using z-index:11 and z-index:12 respectively and you should be fine.
User is offlineProfile CardPM
+Quote Post

skyhawk133
RE: Layers Help
20 Feb, 2007 - 08:44 AM
Post #5

Head DIC Head
Group Icon

Joined: 17 Mar, 2001
Posts: 15,262



Thanked: 61 times
Dream Kudos: 1650
Expert In: Web Development

My Contributions
Why 11?
User is offlineProfile CardPM
+Quote Post

Arbitrator
RE: Layers Help
23 Feb, 2007 - 12:04 AM
Post #6

D.I.C Regular
Group Icon

Joined: 26 Jan, 2005
Posts: 492



Thanked: 2 times
My Contributions
No absolute positioning or z-indexing is required for this… Just make the gradient the main background; stick two div elements into the page with widths equal to the white part into the source; apply the middle part (a slice that includes the middle and sides) as a vertically-repeating background of the outer div; and apply the top part of the white (the corners and part between them) as a non-repeat background at the top of the inner div. Finally, center the div elements. Layout complete.
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic
Time is now: 1/8/09 05:59AM

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month