Centering in any resolution - dealing with absolute position elements - CSS forum at WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Centering in any resolution - dealing with absolute position elements

emptiness

11:05 pm on Aug 3, 2004 (gmt 0)

My pages are prepared to be shown in a 800x600 resolution, but when a user access the site using a higher resolution I want the pages to be centered in the screen.

I tryied to do this using a table with % width. I works fine, but I have a problem with layers. If I set the layers position to "absolute" they doesn't move with the rest of the page's text. If I set the layers position to "relative" they move with the rest of the page's text, but a big empty space shows up where the layer's code is.

Also, is there a way to achieve this page's resolution adaptation in all site at once? maybe through css?.

Thanks a lot.

httpwebwitch

4:20 am on Aug 4, 2004 (gmt 0)

your content here

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

photon

12:46 pm on Aug 4, 2004 (gmt 0)

Here's a CSS way to keep your content dead centre [wpdfd.com].

emptiness

5:13 pm on Aug 4, 2004 (gmt 0)

If I use a layer to put all the content and nest the other layers inside of it, the page shows centered in any resolution. It works, but it looks all messed up in dreamweaver, making imposible for me to work on the pages.

If I use a table with % width I still have the problem with the layers, wich doesn't look centered. All the content shows centered, but the layers (that I use for some menus) doesn't. You can imagine how bad the pages looks with this option.

I guess the layers doesn't center because they're set to "absolute", so I try to set them to "relative". The problem with this is that a blank space shows up in page, a blank space in the exact position where the layer's code is.

I don't know what to do. Any ideas?. Anybody have worked with "relative" position in layers previously?.

Thanks a lot

vkaryl

5:52 pm on Aug 4, 2004 (gmt 0)

Download a trial copy of a different editor, and see if it shows the same "soup" that dw does. You could try TopStylePro, or Homesite (not sure it has a free trial though), or access some of the threads around here (in the WYSIWYG and Text Code Editors forum) which go into other editors.

The main thing is that it shows properly on your site. You can even just do tweaks by opening the pages in notepad....

[OH! Welcome to Webmaster World!]

SuzyUK

6:05 pm on Aug 4, 2004 (gmt 0)

DW has definitely got problems displaying advanced CSS, especially positioning, but it doesn't affect how it should display in browsers once uit's uploaded if it's the right code ;)

I would test the page in some browsers to make sure you are getting what you're looking for and then you could just work with the uncentered design in DW view knowing it'll be alright on the net.

the easiest way to center would be to place one wrapper div (layer) around the whole design, give it the width, then set it's margin: 0 auto; and then if you make it position: relative you can then position other div's inside this using absolute or relative positioning.
(IE quirks won't center using this method but see below for it's solution too )

eg:

<body>
<div id="wrapper"> everything else inside here </div>
</body>

CSS:
body {text-align: center;} /* for IE5.x */

#wrapper {
text-align: left; /* reset above */
position: relative;
margin: 0 auto;
width: 760px; /* or whatever */
}

Suzy