473,714 Members | 2,479 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

z-index problem

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:absolu te? 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
11 6443
*Oliver* <ol**********@w eb.de>:

<body>
<div class="one"><im g src="./1.gif" /></div>
Why the 'div'?
<div class="two"><ta ble 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
Christoph Paeper <ch************ **@nurfuerspam. de> wrote:
*Oliver* <ol**********@w eb.de>:

<body>
<div class="one"><im g 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"><ta ble 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
Christoph Paeper schrieb:
*Oliver* <ol**********@w eb.de>:

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

Why the 'div'?


As said by other member, i'm using strict
<div class="two"><ta ble 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
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.

--
Gus
Jul 21 '05 #5
*Oliver* <ol**********@w eb.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
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
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
Oliver wrote:
<snip>

position:static ; didn't help, change anything


Evidently, since it's the default positioning! Try
position: relative
Jul 21 '05 #9
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: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.

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

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
2478
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 remember the exact error and I'm on Linux/Mozilla at the moment, but I think it had a problem with the object model?!? The slideshow has a stack of div tags and the buttons are used to change the z-order. Each div contains two other divs: one with a...
22
10354
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 scann all items/elements on the page for a z-index? Thanks, Wouter
8
2568
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 an alternative to pop-up windows in a web page. The code I have works (sort of). The problem is that I can move these layers around when I move the mouse slowly, however, if I move it fast the web browser looses track of the motion and leaves the...
6
6980
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 dropdownlis is above my div element. I try to set zIndex style for div but no result. Can someone help me with that problem! tnx
2
4571
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 divs on IE and no problem, but on firefox if I do the same, some divs just got hidden without notice. try clicking variably on different divs and it will happen... How do I make this stable? ----------------------------- <HTML> <HEAD>...
2
3153
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 then the calender gone actually i want if i click outside off the calender then it should me removed ..How kan i do this ... Pls inform me as early as possible .. I am waiting for ur quick replay ...Here i attached the source code .... <!DOCTYPE...
7
1944
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 and the next and previous buttons are added again and again. Please help meto solve the problem. The full html and javascript are attached for your conviniet. HTML ------- <HTML> <HEAD> <META http-equiv="Content-Language" content="en-us">
1
22452
Claus Mygind
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 division on the screen. I want to use a mouseover to bring the back division to the front. It seems I can get all the style properties to work except for zindex
1
2366
by: fgualda87 | last post by:
Hey I'm using this tooltip which uses prototype 1.6.1.js /* * Copyright (c) 2006 Jonathan Weiss <jw@innerewut.de> * * Permission to use, copy, modify, and distribute this software for any * purpose with or without fee is hereby granted, provided that the above * copyright notice and this permission notice appear in all copies. * * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
0
8713
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9318
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
9079
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
1
6638
isladogs
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 presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5961
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4467
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4730
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3160
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2528
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.