Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

CSS: position: relative

how to questions...

1:45 pm on Dec 7, 2001 (gmt 0)

Full Member

10+ Year Member

joined:Nov 5, 2001
votes: 0

I currently have a page design that uses absolute positioning and z-indexing to set my background images. What I would like to do is create a table, containg the same layout my page has, that centers itself in the page. I believe this can be done using relative positioning. Any ideas how I would work this out?

Bear with me, here is the css:

img.top { z-index: 2; }
img.bottom { z-index: 1; }
img.top2 { z-index: 4; }
img.pos1 { position:absolute; top:0; left:160; }
img.pos2 { position:absolute; top:0; left:0; }
img.pos3 { position:absolute; top:150; left:0; }
img.pos4 { position:absolute; top:220; left:0; }
img.cursor { cursor:hand; }

here is the HTML snippet that refers to these classes:

<img class="top pos1" src="Title.gif" height="158" width="558" alt="Blue gila Web design" />
<img class="top pos2" src="GilaLogo.gif" width="160" height="150" alt="GilaLogo.gif (12K)" />
<img alt="BlueCurve.gif (8K)" src="BlueCurve.gif" class="bottom pos2" height="600" width="398" />
<img alt="menu.gif (1K)" src="menu.gif" class="top2 pos3 cursor" height="70" width="150" onclick="show_hide()" />
<img alt="BlueDot.gif (1K)" src="BlueDot.gif" class="top2 pos4" height="200" width="60" />


9:34 pm on Dec 7, 2001 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
votes: 0

pcguru, I'd like to help, but I'm just plain confused about what you're asking. The double classes for your image tags [e.g. class="bottom pos2"]have me especially confounded.

What I thought you were asking was how to place images in positions that are identical to the same images that are in the background. Is that it?

9:52 pm on Dec 7, 2001 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 4, 2001
votes: 12

A couple of things... first you're not specifying the units (i.e. px, etc..) in your CSS. Some browsers (any standards compliant browser, in fact) will ignore it because of this.

Second, what you want to do is not going to work as long as you're using acutal numbers for your positioning... You need to be using percentages in order for it to work with all browsers.

Other than that, I don't see a problem... Just position the table using CSS. Either that or, using percentages, get the images centered and let the table center itself using (this one'll blow you away, they actually programmed it right into the HTML language) align="center"


Hope that helps

1:03 am on Dec 8, 2001 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 4, 2001
votes: 7


I think pcguru333 actually combined two different clases in one.

pcguru333 - You can't combine classes. You will have to define each one:

img.pos1 { position:absolute; top:0px; left:160px; z-index: 2; }

And yes, you need to use either pixels or percentages for the distance or some browsers will ignore it. Try the HTML and CSS validators at [w3c.org....]

12:31 am on Dec 9, 2001 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 4, 2001
votes: 12

typo in my post... meant to say that you need to use percentages so that it will work for all screen resolutions... you can't center something in pixels.
2:02 pm on Dec 10, 2001 (gmt 0)

Full Member

10+ Year Member

joined:Nov 5, 2001
votes: 0

I see that I am missing my px on the positioning.

Also let me clarify. The code above is not centered it is positioned absolutely. I want to change this. I want to center the content in a specific height and width to keep the images and their layout intact and unchanged.

Can I do this with or without a table using CSS?

To address the multiple classes being referenced. I have yet to read anywhere that says you can or cannot do this. I would like to become more informed. If you can reference multiple classes it saves time and coding. BTW I have only checked my page in IE5 but the CSS is working perfectly in that browser.

If we can ignore my code (the good the bad and the ugly) and if someone can tell me how to keep my content (text and images) centered in a page without changing the layout using CSS, then please help. Thank you.

PS I will validate the page once I am home. I still have a problem that I mentioned in an earlier post where the w3c.org doesn't display properly and the links do not work (page cannot be displayed error) I have yet to discover the cause for this either