Positioning problem

[Martin]

I have a graphic that I want to be centered in the page. On top of
that graphic, I want to place several links which are, themselves,
small graphics. For the link graphics, I'm using the Position property
to locate them where they need to be. EG:

<a style="position:absolute; left:500; top:120;" href="MyURL.htm">
<img border="0" src="/WebGraphics/LabelFirstFloor.gif"></a>

This works great as long as the user's screen resolution is set the
same as mine. Anything different and the links aren't where they need
to be.

It's my understanding that the "position: absolute" property is
supposed to position an item relative to the top left corner of its
container - or, if there is no container, the page.

So, I put everything in a table (one column - one row), but the
positioning is still not right at different resolutions.

Any suggestions as to how I can get this to work?

 

[David Dorward]

I have a graphic that I want to be centered in the page. On top of
that graphic, I want to place several links which are, themselves,
small graphics. For the link graphics, I'm using the Position property
to locate them where they need to be. EG:

<a style="position:absolute; left:500; top:120;" href="MyURL.htm">

You appear to have lost some units there. Try the CSS validator.

<img border="0" src="/WebGraphics/LabelFirstFloor.gif"></a>

You appear to have lost the alt attribute, which is especially important for
links where the image is the only content. Try the HTML validator.

This works great as long as the user's screen resolution is set the
same as mine. Anything different and the links aren't where they need
to be.

It's my understanding that the "position: absolute" property is
supposed to position an item relative to the top left corner of its
container - or, if there is no container, the page.

So, I put everything in a table (one column - one row)

Eugh. Just use a div.

, but the positioning is still not right at different resolutions.

You have to establish the div (which should replace the table - you aren't
working with tabular data) as a containing block by setting position:
anything-but-static on it. Typically this will be position: relative.

 

[Davmagic .Com]

From: (e-mail address removed) (Martin)
I have a graphic that I want to be centered
in the page. On top of that graphic, I want
to place several links which are,
themselves, small graphics. For the link
graphics, I'm using the Position property
to locate them where they need to be. EG:
<snip>

Use a tables layout, much easier... something like this:

<center><table cellspacing="0" cellpadding="0" border="0">
<tr><td><img1></td><td><img2></td><td><img3></td></tr>
<tr><td colspan="3"><img(main)></td></tr>
</table></center>

link all your images in the code...

Ignore all the flak about not using tables for layout or not using the
<center> tag... or try <table align="center" ....> but it's not
supported on all browsers...

Table Layout: http://davmagic.com/PAGES47.html

Web Design, Magic, Painting, Junking, More
http://www.davmagic.com
Paint A House
http://www.paintahouse.com
NOTE: This emailbox is CLOSED do NOT reply!!!

 

[Steve Pugh]

I have a graphic that I want to be centered in the page. On top of
that graphic, I want to place several links which are, themselves,
small graphics. For the link graphics, I'm using the Position property
to locate them where they need to be. EG:

<a style="position:absolute; left:500; top:120;" href="MyURL.htm">

500 what? 120 what? Non-zero lengths in CSS must be given units.

<img border="0" src="/WebGraphics/LabelFirstFloor.gif"></a>

This works great as long as the user's screen resolution is set the
same as mine. Anything different and the links aren't where they need
to be.

It's my understanding that the "position: absolute" property is
supposed to position an item relative to the top left corner of its
container - or, if there is no container, the page.

Only if the container is positioned.

Any suggestions as to how I can get this to work?

Set position: relative; on the container.

Steve

 

[Martin]

OK - got it working. Thanks.

I used a <DIV>. I had tried that first, but couldn't get it to center
the main graphic. That's when I tried the table.

As you can tell, I don't know much about HTML.

Thanks again.

 

[Karl Groves]

Use a tables layout, much easier... something like this:

*plonk*

 

[Mitja]

Use a tables layout, much easier... something like this:

<center><table cellspacing="0" cellpadding="0" border="0">
<tr><td><img1></td><td><img2></td><td><img3></td></tr>
<tr><td colspan="3"><img(main)></td></tr>
</table></center>

link all your images in the code...

Ignore all the flak about not using tables for layout or
not using the <center> tag...

That's cute

 

[brucie]

in post: <

Use a tables layout, much easier...

only if you're already in the "tables" mindset. if you do insist on
using tables at least transfer everything else over to css.

 

[Webcastmaker]

only if you're already in the "tables" mindset. if you do insist on
using tables at least transfer everything else over to css.

Sweeter words have never been spoken...

 

[Davmagic .Com]

From: (e-mail address removed) (brucie)
Use a tables layout, much easier...
only if you're already in the "tables"
mindset. if you do insist on using tables at
least transfer everything else over to css.

Yeah, I kinda have done that.... to an extent.... but only in my Design
Series pages.... I don't feel much "pressure" from browsers to do
more...

Web Design, Magic, Painting, Junking, More
http://www.davmagic.com
Paint A House
http://www.paintahouse.com
NOTE: This emailbox is CLOSED do NOT reply!!!