CSS q, laying out some images in a table/<td> relative to upper corner of cell.

Trying to line up a tic-tac-toe board type grid of images using style=
tags to <img > inside a table TD
but it's not working, I get more like a set of steps, can I get an
explanation of what's wrong with this and how to do it correctly?:

<table border="1">
<tr>

<td valign="top" align="left">

<!-- following should line up as a grid, look like a staircase -->
<img src=here.gif style="{position:relative;top:6px;left:36px;}">
<img src=here.gif style="{position:relative;top:6px;left:139px;}">
<img src=here.gif style="{position:relative;top:6px;left:242px;}">
<img src=here.gif style="{position:relative;top:87px;left:36px;}">
<img src=here.gif style="{position:relative;top:87px;left:139px;}">
<img src=here.gif style="{position:relative;top:87px;left:242px;}">
<img src=here.gif style="{position:relative;top:168px;left:36px;}">
<img src=here.gif style="{position:relative;top:168px;left:139px;}">
<img src=here.gif style="{position:relative;top:168px;left:242px;}">

</td>
</tr>
</table>


For this example it's a grid but I have 7 other patterns I have to lay
up with this not all of them can be expressed with a grid pattern.

any help is appreciated.

dropdeadster (AT) gmail (DOT) com wrote:

!-- following should line up as a grid, look like a staircase --
img src=here.gif style="{position:relative;top:6px;left:36px;}"
img src=here.gif style="{position:relative;top:6px;left:139px;}"

[snip]

a) Take out the {} from the style attribute.
b) Add " around the value of the src attribute.
c) Add alt="" to every img tag, or fill in an appropriate alternative
text, like alt="picture of the moon".
d) You don't want to use position:relative for this.
Perhaps position:absolute? Depends on what you want. If you don't give
any style at all, they may already line up like you want.

For this example it's a grid but I have 7 other patterns I have to lay
up with this not all of them can be expressed with a grid pattern.

Depending on the patterns, you may need position:absolute for that.
To position them relative to the border of the td, give the td
position:relative, and each image position:absolute.

any help is appreciated.

You're welcome.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: The Clash - Louie Louie

Els wrote:

....

For this example it's a grid but I have 7 other patterns I have to lay
up with this not all of them can be expressed with a grid pattern.

Depending on the patterns, you may need position:absolute for that.
To position them relative to the border of the td, give the td
position:relative, and each image position:absolute.

interestingly (kidding) this works with IE and not Mozilla, Opera, etc
if I made the <td style="position:absolute;"> it seems ok but only if I
have 1 <td>

if I try to put 2 <td>s like this in one <tr> (or 2 <tr>s with 1 <tb>
in each) like this they are totally stacked on top of one another.

I can not use :absolute on it's own (outside tables) as when the window
is resized the items are no longer in the table. entire page is in
<center> tags now this all worked before when it was just left-weighted
(no <center>)

I might have to completely scrap this and start from scratch

thanks

Now playing: The Clash - Louie Louie

I didn't realize the Clash did a version of Louie Louie

dropdeadster (AT) gmail (DOT) com wrote:

Els wrote:

...

For this example it's a grid but I have 7 other patterns I have to lay
up with this not all of them can be expressed with a grid pattern.

Depending on the patterns, you may need position:absolute for that.
To position them relative to the border of the td, give the td
position:relative, and each image position:absolute.

interestingly (kidding) this works with IE and not Mozilla, Opera, etc
if I made the <td style="position:absolute;"> it seems ok but only if I
have 1 <td

if I try to put 2 <td>s like this in one <tr> (or 2 <tr>s with 1 <tb
in each) like this they are totally stacked on top of one another.

No, if you give both <td>s position:relative (not absolute!), then the
contents of each should stay inside of it.

I can not use :absolute on it's own (outside tables) as when the window
is resized the items are no longer in the table. entire page is in
center> tags now this all worked before when it was just left-weighted
(no <center>)

It would work if you gave the container that's around the lot (the
most outer element that gets centered), position:relative.

If none of the elements has position, the viewport is what all the
absolute positioned elements are getting their position from. Which is
why the page can move to the right (when making the window wider),
while the elements that you gave position:absolute, stay put.

I might have to completely scrap this and start from scratch

You might wanna show a url so we can more clearly point out what could
be the solution :-)

Now playing: The Clash - Louie Louie

I didn't realize the Clash did a version of Louie Louie

You learn something new everyday ;-)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Els wrote:

[sniiiiip]

You might wanna show a url so we can more clearly point out what could
be the solution :-)

I would have if I could but the page in question was for a site that
isn't public yet and only available on an internal network. I couldn't
duplicate it outside the network as I only have apache servers and this
was an IIS/ASP page and even if I could, I am forbidden to.

HOWEVER I got this working, eventually, a completely different way*, so
all worked out in the end.

Thank you for your help.

* using walter zorn's drag drop js and hacking in a few lines.

Now playing: The Clash - Louie Louie

I didn't realize the Clash did a version of Louie Louie

You learn something new everyday ;-)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/