Centering Web Page

[rmullis]

Let me apologize in advance, if there is a simple answer to this. I am just beginning this web "stuff".

I have started developing several web pages with ProfoundUI and RPG. I have noticed that the web pages all display to the left on my wide screen monitor. I would like the pages to display in the center of my monitor, or anyone elses monitor regardless of size. Is there a way to define a web page, such that it will display in the center of the monitor automatically, regardless of monitor size?

[rmullis]

Just to clarify, I meant to say "center horizontally".

[David]

All PUI screen content renders into an HTML <div> element with id "pui" in your "start.html" page. This page is located here if you want to have a look:

/www/profoundui/htdocs/profoundui/userdata/html/start.html

By default, the div is not given any fixed width so centering is not possible. So the first thing you need to do is pick a width for it, and then you can center it by adding automatic left and right margins.

This can all be done with CSS. Try adding this code to a CSS file:

div#pui {

width: 800px;
height: 800px;
margin: 0px auto 0px auto;
border: 1px solid black;

}

You can drop the file in this directory (or any sub-directory, you can even create sub-directories):

/www/profoundui/htdocs/profoundui/userdata/custom

Profound UI reads through that directory and all sub-directories and automatically links in any CSS files found.

The above CSS code will:

1. Give the "pui" div a fixed size -- you'll want to adjust this to get it how you want it.

2. Center the div using automatic left and right margins.

3. Give it a black border. I put this on just so that you can visualize where the div is on the page as it's otherwise invisible. Once you have it where you want, you'd probably want to take the border off.

Once you have visualized the div, you'll notice that your PUI screen content renders relative to the upper left corner of the div. So an elemnt that is "one inch" from the top left of the designer window will appear "one inch" from the top left of that div.

[rmullis]

I was hoping there was away to center the screen, regardless of the user's monitor resolution, but it looks as if you have to set a max height and width. This defeats the purpose of not having to worry about the user's monitor settings/resolution.

[David]

Yes, you do have to pick a fixed size to center content in a web browser. You will always have to worry (somewhat) about the user's display resolution if you want to center.

This would be set as your minimum target resolution. Users with lower resolution will get scroll bars, users with higher resolution will get extra space around the edges of the centered area. Either way, though, it will center if there is room for it.

[Bruno97]

Hi David,

There is a important issue to centering web pages when using grid with movable columns :
As you start dragging a column, an arrow appears to show you where you are going to drop it. But the arrow actually does not appear at the right place ! It is shifted to the right with the left margin value !

Hope you understand my English...

Bruno

[Bruno97]

This has been fixed by the 5.0.1 release.