z-index problem - HTML / CSS

Oliver

hello there,
i'm having a problem with the z-index.
when i set the value it's not moving the object into the background as i
want it.

the site is something like this (this here is simplified)

<body>
<div class="one">
<img src="./1.gif" />
</div>

<div class="two">
<table class="content">
.....
</table>
</div>
</body>
while the css is like this:

body {
background-image: url(./bg.gif);
}

..one {
position: absolute;
left:0px;
top:214px;
z-index:1;
}

..two {
z-index:100;
}

..content {
background-color:#fff;
}
I'm having only trouble with this one image that's always in front, but
i want it to be behind the table, that's why i added another div around
the table, but it didn't help either.
Does it have todo with the position:absolute? Or is it breaking appart,
as i have more elements in the table?

The reason why i want todo it like this is, that the background image is
a pattern, but this one image should only be once in there, not multiple
times.

Anyone an idea where i'm doing something wrong here?

Jul 21 '05 #1

Subscribe Post Reply

6424

Christoph Paeper

*Oliver* <ol**********@web.de>:

<body>
<div class="one"><img src="./1.gif" /></div>
Why the 'div'?
<div class="two"><table class="content">.....</table></div>
Why the 'div'?
</body>

body {background-image: url(./bg.gif);}
.one {
position: absolute;
top:214px;
z-index:1;
}
.two {z-index:100;}
".two" is not positioned ('static'), thus 'z-index' does not apply.
.content {background-color:#fff;}

The reason why i want todo it like this is, that the background image is
a pattern, but this one image should only be once in there, not multiple
times.

Why don't you put it into 'background' of the 'table' then? Set
'background-position' and 'background-repeat' accordingly. That would
result in something like

<body><table class="content">.....</table></body>

body {background-image: url(./bg.gif)}
.content {background: white url(./1.gif) 0 214px no-repeat}

--
"It is better to know some of the questions than all of the answers."
James Thurber

Jul 21 '05 #2

Harlan Messinger

Christoph Paeper <ch**************@nurfuerspam.de> wrote:

*Oliver* <ol**********@web.de>:

<body>
<div class="one"><img src="./1.gif" /></div>
Why the 'div'?

If he's using Strict, the IMG *has* to be in a block. You can't have
inline elements directly inside the body.

<div class="two"><table class="content">.....</table></div>

Why the 'div'?

Right, not necessary for validity.
--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.

Jul 21 '05 #3

Oliver

Christoph Paeper schrieb:

*Oliver* <ol**********@web.de>:

<body>
<div class="one"><img src="./1.gif" /></div>

Why the 'div'?

As said by other member, i'm using strict
<div class="two"><table class="content">.....</table></div>

Why the 'div'?

Just for testing purposes. I said i tried it first without it and
thought maybe it helps
</body>

body {background-image: url(./bg.gif);}
.one {
position: absolute;
top:214px;
z-index:1;
}
.two {z-index:100;}

".two" is not positioned ('static'), thus 'z-index' does not apply.

position:static; didn't help, change anything

.content {background-color:#fff;}

The reason why i want todo it like this is, that the background image
is a pattern, but this one image should only be once in there, not
multiple times.

Why don't you put it into 'background' of the 'table' then? Set
'background-position' and 'background-repeat' accordingly. That would
result in something like

<body><table class="content">.....</table></body>

body {background-image: url(./bg.gif)}
.content {background: white url(./1.gif) 0 214px no-repeat}

Because the table is samller than where the image should appear.
The image should always be on the very left of the screen, while the
table is centered to the screen. Thus i can't put that image into the
background of the table.
Thanks anyhow, u have another idea?

Jul 21 '05 #4

Gus Richter

Oliver wrote:

Because the table is samller than where the image should appear.
The image should always be on the very left of the screen, while the
table is centered to the screen. Thus i can't put that image into the
background of the table.
Thanks anyhow, u have another idea?

You have a positioned image partially obscurred by an overlapping table
and the image is greater than the table itself. The position of the
image and that of the table are required to remain as is. The image is
required to extend into the table as a background image of the table.

The solution here is to keep the image which is partially hidden by the
table, use the same image as a background image in the table and
position this background image such that it seems that it is one image
extending into the table are. The idea is that if the background image
is moved outside of (beyond) the table border, that portion will not be
visible. Since the background image applied to the table is
background-attachment:scroll by default, the reference is to the top and
left edges of the table. So by applying negative values to
background-position for the background image of the table until it abuts
seamlessly with the other identical image will result in what seems to
be one complete image.
i.e. background: white url(./1.gif) no-repeat -??px -/+??px;

If the requirement is to have the image portion outside of table to also
be a background image, then place the table inside a div and apply the
image also as a background image to the div using the same declaration
as for the table but with different positive background-position values.
It may also be necessary to position the div itself depending on the
need. In anticipation of further difficulties, it may also be necessary
to place the table within another immediate div in order to position the
table.

The concept is simple - the solution and explanation longer than I
expected or I went into too much detail and hopefully did not confuse.

--
Gus

Jul 21 '05 #5

Christoph Paeper

*Oliver* <ol**********@web.de>:

Christoph Paeper schrieb:
".two" is not positioned ('static'), thus 'z-index' does not apply.

position:static; didn't help, change anything

Of course not, that is what it is already by default. I should have been
more verbose, probably.

The reason why i want todo it like this is, that the background
image is a pattern, but this one image should only be once in there,

Why don't you put it into 'background' of the 'table' then?

Because the table is samller than where the image should appear.

Well, 'background-position' accepts negative values, too, or maybe
"background-attachment: fixed" suits your need, elsewise you probably do
need that containing 'div' (in theory you could assign the images to
'html' and 'body' instead).

--
"Right way turning, Listen we are learning.
Head's full of noise, Chicken's got no choice.
Heads are rollin', Chicken blood is stolen.
The rest of the chicken wants a picke-nicken" Guano Apes - We use the Pain

Jul 21 '05 #6

devniall

Oliver wrote:

.two {z-index:100;}

".two" is not positioned ('static'), thus 'z-index' does not apply.

position:static; didn't help, change anything

I think he may have meant to say "position: relative;" or "position:
absolute;".

--
niall

Jul 21 '05 #7

devniall

Oliver wrote:

.two {z-index:100;}

".two" is not positioned ('static'), thus 'z-index' does not apply.

position:static; didn't help, change anything

I think he may have meant to say "position: relative;" or "position:
absolute;".

--
niall

Jul 21 '05 #8

Paul

Oliver wrote:
<snip>

position:static; didn't help, change anything

Evidently, since it's the default positioning! Try
position: relative

Jul 21 '05 #9

Oliver

Gus Richter schrieb:

Oliver wrote:
Because the table is samller than where the image should appear.
The image should always be on the very left of the screen, while the
table is centered to the screen. Thus i can't put that image into the
background of the table.
Thanks anyhow, u have another idea?

You have a positioned image partially obscurred by an overlapping table
and the image is greater than the table itself. The position of the
image and that of the table are required to remain as is. The image is
required to extend into the table as a background image of the table.

The solution here is to keep the image which is partially hidden by the
table, use the same image as a background image in the table and
position this background image such that it seems that it is one image
extending into the table are. The idea is that if the background image
is moved outside of (beyond) the table border, that portion will not be
visible. Since the background image applied to the table is
background-attachment:scroll by default, the reference is to the top and
left edges of the table. So by applying negative values to
background-position for the background image of the table until it abuts
seamlessly with the other identical image will result in what seems to
be one complete image.
i.e. background: white url(./1.gif) no-repeat -??px -/+??px;

If the requirement is to have the image portion outside of table to also
be a background image, then place the table inside a div and apply the
image also as a background image to the div using the same declaration
as for the table but with different positive background-position values.
It may also be necessary to position the div itself depending on the
need. In anticipation of further difficulties, it may also be necessary
to place the table within another immediate div in order to position the
table.

The concept is simple - the solution and explanation longer than I
expected or I went into too much detail and hopefully did not confuse.

hey,
ok i did manage to get it right. i used a surroundig div tag for the
table and added a background with the gif and used background-position.
Thanks for your help

Jul 21 '05 #10

Gus Richter

Oliver wrote:

Gus Richter schrieb:
Oliver wrote:
Because the table is samller than where the image should appear.
The image should always be on the very left of the screen, while the
table is centered to the screen. Thus i can't put that image into the
background of the table.
Thanks anyhow, u have another idea?

You have a positioned image partially obscurred by an overlapping
table and the image is greater than the table itself. The position of
the image and that of the table are required to remain as is. The
image is required to extend into the table as a background image of
the table.

The solution here is to keep the image which is partially hidden by
the table, use the same image as a background image in the table and
position this background image such that it seems that it is one image
extending into the table are. The idea is that if the background image
is moved outside of (beyond) the table border, that portion will not
be visible. Since the background image applied to the table is
background-attachment:scroll by default, the reference is to the top
and left edges of the table. So by applying negative values to
background-position for the background image of the table until it
abuts seamlessly with the other identical image will result in what
seems to be one complete image.
i.e. background: white url(./1.gif) no-repeat -??px -/+??px;

If the requirement is to have the image portion outside of table to
also be a background image, then place the table inside a div and
apply the image also as a background image to the div using the same
declaration as for the table but with different positive
background-position values. It may also be necessary to position the
div itself depending on the need. In anticipation of further
difficulties, it may also be necessary to place the table within
another immediate div in order to position the table.

The concept is simple - the solution and explanation longer than I
expected or I went into too much detail and hopefully did not confuse.

hey,
ok i did manage to get it right. i used a surroundig div tag for the
table and added a background with the gif and used background-position.
Thanks for your help

I'm glad you were able to make sense out of my ramblings. ;-)

--
Gus

Jul 21 '05 #11

Oliver

Gus Richter schrieb:

Oliver wrote:
Gus Richter schrieb:
Oliver wrote:

Because the table is samller than where the image should appear.
The image should always be on the very left of the screen, while the
table is centered to the screen. Thus i can't put that image into
the background of the table.
Thanks anyhow, u have another idea?

You have a positioned image partially obscurred by an overlapping
table and the image is greater than the table itself. The position of
the image and that of the table are required to remain as is. The
image is required to extend into the table as a background image of
the table.

The solution here is to keep the image which is partially hidden by
the table, use the same image as a background image in the table and
position this background image such that it seems that it is one
image extending into the table are. The idea is that if the
background image is moved outside of (beyond) the table border, that
portion will not be visible. Since the background image applied to
the table is background-attachment:scroll by default, the reference
is to the top and left edges of the table. So by applying negative
values to background-position for the background image of the table
until it abuts seamlessly with the other identical image will result
in what seems to be one complete image.
i.e. background: white url(./1.gif) no-repeat -??px -/+??px;

If the requirement is to have the image portion outside of table to
also be a background image, then place the table inside a div and
apply the image also as a background image to the div using the same
declaration as for the table but with different positive
background-position values. It may also be necessary to position the
div itself depending on the need. In anticipation of further
difficulties, it may also be necessary to place the table within
another immediate div in order to position the table.

The concept is simple - the solution and explanation longer than I
expected or I went into too much detail and hopefully did not confuse.

hey,
ok i did manage to get it right. i used a surroundig div tag for the
table and added a background with the gif and used background-position.
Thanks for your help

I'm glad you were able to make sense out of my ramblings. ;-)

Was kinda hard, but after reading it 10 times it made sense. ;)

Jul 21 '05 #12

Similar topics

Mozilla & IE object model differences?

by: Greg | last post by:

The following code works fine on Mozilla but generates an error* on IE, when the button calling the function is pressed and the slideshow is either on the first slide or last slide. * I can't...

Javascript

Get hi-est zIndex on the page

by: DJ WIce | last post by:

Hi, I'm looking for a script to get the hi-est z-index on a page. I want my javascript menu to be always on top of the page (moves along on top when you scroll down). Does anyone know how to...

Javascript

Draggable layers problem (IE only)

by: rdlebreton | last post by:

Hi, Folks! I've been trying to develop my own version of these draggable layers and I have been limiting myself to IE6...for now. I have looked at some other examples to get ideas of creating...

Javascript

DIV problem

by: Kekec | last post by:

Hi! I have some zindex problem with DIV on my webform I have several asp:dropdownlist controls and in some case i want to show div in middle of that form but when I show that div every...

ASP.NET

problem with Firefox 2.0 behavior with this script

by: reynoldlariza | last post by:

Can somebody please help me, i tried playing around with IE6 and Firefox 2.0 browser for setting zIndexes and hide & show of divs. It seems to work to both. I tried repeatedly clicking on different...

Javascript

Problem in Event Handling

by: sorobor | last post by:

dear sir .. i am using cakephp freamwork ..By the way i m begener in php and javascript .. My probs r bellow I made a javascript calender ..there is a close button ..when i press close button...

Javascript

Problem with a carousel

by: raknin | last post by:

Hi I have a carousel script. I want to load the carousel with a new set of pictures every time I press a button. The problem that I have that the script append the new pictures to the olds one...

Javascript

Using javaScript to set style zIndex

by: Claus Mygind | last post by:

How come I can set this style element document.getElementById("popTime").style.left = "0px"; but not this document.getElementById("freqJobDiv").style.zIndex = "20"; I have two nested...

Javascript

problem with tool tip prototype

by: fgualda87 | last post by:

Javascript

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA