Hi,

I'm trying to mimic a layout of images given to me as a singe
graphic. I'm using CSS to position the images, and I'm getting them
where I want them, but the page is leaving space where they would
have been without the css and is causing scrollbars to show up when
all there is to scroll to is a blank page.

I initially tried this starting with a table layout and tweaking the
css ( http://epigraph.org/trials/csspositi...trations1.html -
I left the border visible so you can see what's happening) then
ditched the table but still the space is "reserved". (
http://epigraph.org/trials/csspositi...trations2.html - Here
I'm just using one div to center the content on the page (oops. which
I notice now isn't working... and then including the images broken
up with br's where I would have had a new table row.)

Does anyone know how I can introduce these images so that they don't
claim so much "original" space? (I was hoping I could start them all out
in one position and css-position them from there - not sure how to approach.)

Thanks,

Amy

? "but still the space is "reserved"" ?
? "don't claim so much "original" space?" ?

Any chance you could explain your layout requirements in literal terms ? It's rather difficult to grasp what your talking about.

Sure.

I started out by putting my images into a table. If you were to look at the page as those images lay out in that table, they take up a certain amount of space.

Then I used css relative positioning to put the images where I wanted them.

The images are now in the desired positions, but *the locations where they would have been without css* are behaving as though something is there. That is, even though the images display in an area that fits entirely on my screen without scrolling, scrollbars still appear because the page is still alotting for the space where the images originally fell, for those images, even though they no longer display there.

If you look at my first link, I left the table border on so you can see what's happening. The images are forcing the table cells to be a certain size, and the page (in particular, it's geometric size, with the associated scrollbars) is being determined by that (now partly vacant) table.

I want the page to end when there is no more content to display, so I'm looking for a different approach.

[Edit: on the second try, I didn't use the table, but just contained the whole thing in a div - same problem, plus I can't get that one to center.]

Well, there's a few things I would try; it's a bit late and I don't wanna test this myself. However, I'm not entirely sure what you mean by wanting the page to end when there is no more content to display. The size of the users' browser window will determine how the content will display, not the content itself, nor your coding (unless you present in a chromeless window).

1. Use a doctype
2. .class {width: 770?;} Dont use "770", 770 what?, edit in "width: 770px;"
3. body {
padding: 15px 0px 0px;
}

The size of the users' browser window will determine how the content will display, not the content itself,

No, the content does have *some* contribution on how it will display.

For example: I've uploaded a page with a single image file containing all the graphics, laid out ahead of time in photoshop. http://epigraph.org/trials/csspositi...trations0.html

Here, when you get to the bottom of the jpg, you're at the bottom of the page. The browser won't act as though there's more to see, which there isn't, so all is good. This is what I'm going for. (Yes, I understand that if you have a big window, there'll be lots of black space below. What I'm getting at is that if you don't, the browser doesn't throw scrollbars at you suggesting there to be more content.)

But I want to do this with separate image files. Thus the attempt with a table and css positioning http://epigraph.org/trials/csspositi...trations1.html and later the similar attempt without tables: http://epigraph.org/trials/csspositi...trations2.html

Both of these differ from the illustrations0 page in that these pages are seen by the browser to be longer (up and down. actually slight width issue as well.) because of the spaces where the html (before affected by css positioning) expects the images to be.

This difference exists while the size of the user's browser window is held constant.

You seem to be missing my point here in general. I left the borders on on the table to illustrate what's happening, and I think it's pretty clear. If you finally see what I'm talking about, great, but otherwise, please don't feel like you need to keep responding. My concern is that it looks as though I'm getting help with my problem (because of the number of replies) when really we're just harping on semantics. I do need to resolve this and am hoping someone who can help actually reads the thread.

That's a problem I've run into before when using relative positioning, I know exaclty what you are talking about.

One way to get around that is to use divisions to group your elements together, then use absolute positioning to get them where they need to be on the page.

Or just go with a table layout and use CSS padding and margins to tweak the positions.

Here is a site that I built just to try absolute positioning: EXE 10001's Website

And here is the style sheet for that page:EXE10001s_style.css

The borders are created by stretching a 2 pixel square image.

Thanks GrayKard,

You got me to go look up some stuff on absolute positioning. I've read the rules before, but in this panic I somehow got it into my head that it's measured from the edge of the window instead of the container it's in.

As described in http://www.stopdesign.com/articles/absolute/ I'm now doing this by putting everything in a table (I still can't seem to center a div) and then absolute positioning from there. Also what you said, except for my centering problem. I put a div inside the table to hold everything.

A couple things I noticed, in case anyone else is reading:

On my first try, I actually had the opposite problem. The table didn't take up any space, and the images now don't even really "claim" the space they're in. So there were *no* scrollbars, even if there was more material below the bottom edge of the browser window. (seen here http://epigraph.org/trials/csspositi...trations4.html with table border showing to illustrate. size your window way down to see the problem.)

What I ended up doing was defining the dimensions of the containing table to fit the contents. Now the scrollbars appear only when they should. (http://epigraph.org/trials/csspositi...trations3.html - I'm sure I'm still doing some things wrong in this process, and I'm interested in hearing about any of the details in that if anyone feels like suggesting any. Keep in mind, though, this is just a page to get this one aspect to do what I want it to. The rest of the details of the page are missing to keep the clutter down for the discussion.)

Thanks again!

ps GrayKard: cute cats!