homepage Welcome to WebmasterWorld Guest from 54.227.182.191
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
CSS: position: relative
how to questions...
pcguru333




msg:1177775
 1:45 pm on Dec 7, 2001 (gmt 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" />

Thanks
Dan

 

tedster




msg:1177776
 9:34 pm on Dec 7, 2001 (gmt 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?

IanKelley




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

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

Marshall




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

tedster,

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....]

IanKelley




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

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.

pcguru333




msg:1177780
 2:02 pm on Dec 10, 2001 (gmt 0)

OK...
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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved