z-index problem

**Christoph Paeper** · Jul 21 '05, 12:33 AM

Re: z-index problem

*Oliver* <oliver_summa@w eb.de>:
[color=blue]
>
> <body>
> <div class="one"><im g src="./1.gif" /></div>[/color]

Why the 'div'?
[color=blue]
> <div class="two"><ta ble class="content" >.....</table></div>[/color]

Why the 'div'?
[color=blue]
> </body>
>
> body {background-image: url(./bg.gif);}
> .one {
> position: absolute;
> top:214px;
> z-index:1;
> }
> .two {z-index:100;}[/color]

".two" is not positioned ('static'), thus 'z-index' does not apply.
[color=blue]
> .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.[/color]

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

**Harlan Messinger** · Jul 21 '05, 12:33 AM

Re: z-index problem

Christoph Paeper <christoph.paep er@nurfuerspam. de> wrote:
[color=blue]
>*Oliver* <oliver_summa@w eb.de>:
>[color=green]
>>
>> <body>
>> <div class="one"><im g src="./1.gif" /></div>[/color]
>
>Why the 'div'?[/color]

If he's using Strict, the IMG *has* to be in a block. You can't have
inline elements directly inside the body.
[color=blue]
>[color=green]
>> <div class="two"><ta ble class="content" >.....</table></div>[/color]
>
>Why the 'div'?[/color]

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.

**Oliver** · Jul 21 '05, 12:33 AM

Re: z-index problem

Christoph Paeper schrieb:[color=blue]
> *Oliver* <oliver_summa@w eb.de>:
>[color=green]
>>
>> <body>
>> <div class="one"><im g src="./1.gif" /></div>[/color]
>
>
> Why the 'div'?[/color]

As said by other member, i'm using strict[color=blue]
>[color=green]
>> <div class="two"><ta ble class="content" >.....</table></div>[/color]
>
>
> Why the 'div'?[/color]

Just for testing purposes. I said i tried it first without it and
thought maybe it helps[color=blue]
>[color=green]
>> </body>
>>
>> body {background-image: url(./bg.gif);}
>> .one {
>> position: absolute;
>> top:214px;
>> z-index:1;
>> }
>> .two {z-index:100;}[/color]
>
>
> ".two" is not positioned ('static'), thus 'z-index' does not apply.[/color]

position:static ; didn't help, change anything
[color=blue]
>[color=green]
>> .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.[/color]
>
>
> 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}
>[/color]

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?

**Gus Richter** · Jul 21 '05, 12:33 AM

Re: z-index problem

Oliver wrote:[color=blue]
> 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?[/color]

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:scro ll 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

**Christoph Paeper** · Jul 21 '05, 12:33 AM

Re: z-index problem

*Oliver* <oliver_summa@w eb.de>:[color=blue]
> Christoph Paeper schrieb:
>[color=green]
>> ".two" is not positioned ('static'), thus 'z-index' does not apply.[/color]
>
> position:static ; didn't help, change anything[/color]

Of course not, that is what it is already by default. I should have been
more verbose, probably.
[color=blue][color=green][color=darkred]
>>> 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,[/color]
>>
>> Why don't you put it into 'background' of the 'table' then?[/color]
>
> Because the table is samller than where the image should appear.[/color]

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

**devniall@gmail.com** · Jul 21 '05, 12:34 AM

Re: z-index problem

Oliver wrote:
[color=blue][color=green][color=darkred]
> >> .two {z-index:100;}[/color]
> >
> >
> > ".two" is not positioned ('static'), thus 'z-index' does not apply.[/color]
>
> position:static ; didn't help, change anything
>[/color]

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

--
niall

**devniall@gmail.com** · Jul 21 '05, 12:34 AM

Re: z-index problem

Oliver wrote:
[color=blue][color=green][color=darkred]
> >> .two {z-index:100;}[/color]
> >
> >
> > ".two" is not positioned ('static'), thus 'z-index' does not apply.[/color]
>
> position:static ; didn't help, change anything
>[/color]

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

--
niall

**Paul** · Jul 21 '05, 12:34 AM

Re: z-index problem

Oliver wrote:
<snip>[color=blue]
>
> position:static ; didn't help, change anything
>[/color]

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

**Oliver** · Jul 21 '05, 12:34 AM

Re: z-index problem

Gus Richter schrieb:[color=blue]
> Oliver wrote:
>[color=green]
>> 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?[/color]
>
>
> 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:scro ll 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.
>[/color]
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

**Gus Richter** · Jul 21 '05, 12:34 AM

Re: z-index problem

Oliver wrote:[color=blue]
> Gus Richter schrieb:
>[color=green]
>> Oliver wrote:
>>[color=darkred]
>>> 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?[/color]
>>
>>
>>
>> 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:scro ll 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.
>>[/color]
> 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[/color]

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

--
Gus

**Oliver** · Jul 21 '05, 12:34 AM

Re: z-index problem

Gus Richter schrieb:[color=blue]
> Oliver wrote:
>[color=green]
>> Gus Richter schrieb:
>>[color=darkred]
>>> 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:scro ll 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.
>>>[/color]
>> 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[/color]
>
>
> I'm glad you were able to make sense out of my ramblings. ;-)
>[/color]
Was kinda hard, but after reading it 10 times it made sense. ;)

z-index problem

z-index problem

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment