Z index problem

	Home Register Search Help Login

Sponsors
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Z index problem

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Z index problem

Page: [1]

paul rayner

Posts: 232
Joined: 3/15/2001
From: yeppoon, qld, aus
Status: offline

Z index problem - 9/12/2009 2:40:56

I'm trying to get an image to float in (over the top) of a banner div.

You can see the mess I've made of it here.

My CSS looks like this:

#banner {
background-image:url(images/filler.png);
background-repeat:;
height: 150px;

}
#banner h1 {
	font: 80px Tahoma, Helvetica, Arial, Sans-Serif;
	text-align: left;
	color: #993300;
	text-shadow: 0px 2px 3px #555;
	
	margin-right: 50px;

}
#banner img {
z-index: 2;
float: right;
margin-top:0px;
}

The html looks like this:

<body>
<div id="container">
  <div id="banner">
    <h1> St Paul's College</h1><img src="images/big brother.png" alt="big_bro" />
  </div>

To clarify - i know the image is bigger than the banner div. I would like to make it hang over the div to give a 3D kind of look.
I thought that would be possible by using the Z index.

Look forward to your advice.

_____________________________

" In theory, there is no difference between theory and practice. But, in practice, there is!"


Tailslide Posts: 6758 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: Z index problem - 9/12/2009 3:03:51 For z index to work you need the item to be absolutely positioned. And in turn for that to work you need to add position:relative to the containing div (i.e. #banner). You can't use float and AP so you'd use right:0; top:10px (for example). You probably won't even need z index if you absolutely position that image. _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to paul rayner)

paul rayner

Posts: 232
Joined: 3/15/2001
From: yeppoon, qld, aus
Status: offline

RE: Z index problem - 9/12/2009 3:58:53

Thanks Tailside.
I added to the image div:

position:absolute;
top: 10px;
right: 100px;

What do I need to add to the containing div, just:

position: relative;

Is that all? And what does that do?

_____________________________

" In theory, there is no difference between theory and practice. But, in practice, there is!"

(in reply to Tailslide)


Tailslide Posts: 6758 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: Z index problem - 9/12/2009 16:36:38 When you use position absolute you must add co-ordinates e.g. left:10px; top:10px. The page will assume that means 10px down and right from the top left of the viewport. If that's what you want, great, Usually though you need the element to be 10px down and 10px right of a div that it sits in. To get that effect you must add position:relative to the div the AP element sits in. _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to paul rayner)


paul rayner Posts: 232 Joined: 3/15/2001 From: yeppoon, qld, aus Status: offline	RE: Z index problem - 9/13/2009 2:42:00 Thanks Tailslide always helpful!!!!! Cheers _____________________________ " In theory, there is no difference between theory and practice. But, in practice, there is!" (in reply to Tailslide)

Page: [1]

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Z index problem

Page: [1]

Jump to: 1

New Messages	No New Messages
Hot Topic w/ New Messages	Hot Topic w/o New Messages
Locked w/ New Messages	Locked w/o New Messages

Post New Thread

Reply to Message

Post New Poll

Submit Vote

Delete My Own Post

Delete My Own Thread

Rate Posts