Absolute Positioning Woes ( CSS )

[h09]

Hey guys, I'm having some problems with absolute positioning. To get a quick idea of what's wrong, view my progress so far on a high resolution ( it looks normal the higher you go ), and then on 800 x 600:

rankitnow.com/mkc/index.htm

You'll notice on the low RES, everything is set off to the right, and you have to actually horizontally scroll to the right to get to the content. I tried converting this to tables but with little success. Has anybody any ideas? Is there a way to do things relatively to compensate for the resolution that the person is using, rather than absolute? Maybe I'm missing something simple here ... thanks for the help guys, take it easy.

-- Dan

 

[gohankid77]

You could create several pages at different resolutions. Then use some JavaScript to detect a user's resolution and swap the page for the one that looks right at his/her resolution. For the JavaScript part, you can post in the JavaScript forum or wait here.

Another solution would be to skip the JavaScript and have the user choose his/her resolution using links so the proper page could be used.

opinion {
inline-styles: are-messy;
internal-stylesheets: waste-space;
external-stylesheets: are-bliss;
}

 

[h09]

Thanks, I know that inline ones are messy, and I plan on making it external it's just that when I go through the creative process I kind of jumble things together then sort out the mess for the final product.

 

[gohankid77]

Heh... That's my signature...

opinion {
inline-styles: are-messy;
internal-stylesheets: waste-space;
external-stylesheets: are-bliss;
}

 

[Vragabond]

All your elements are positioned 200 or more pixels from the left, so it is expected why they are floating where they are. It is less apparent on the higher resolutions when 200px takes up less of the screen. The way left works is that it retains the original size of the block element, just shifts it to the left. If you want to make your content graciously shrink at smaller resolutions use margin-left instead.

 

[gohankid77]

That is why I'm a Technical User rather than a Programmer.

opinion {
inline-styles: are-messy;
internal-stylesheets: waste-space;
external-stylesheets: are-bliss;
}

 

[h09]

Well what I do is give the elements the property of "position: absolute" and shift them around manually in Dreamweaver. That is why margin-left is being used. Mind giving me a quick example with margin-left? Unfamiliar with that one. Thanks.

Oh ya, so, should I position the elements in 800x600? I did it in my standard, high RES. Thanks bro.

-- Dan

 

[h09]

Sorry, can't edit my post -- I meant to say that is why margin-left ISN'T being used.