| Author |
 Topic  |
|
|
spectre
Novice
USA
8 Posts |
 Posted - 01 Nov 2003 : 13:17:26
|
Since the most popular resolutions are 800 x 600 and 1024 x 768, I
am designing my website to look good in both resolutions.
My question is, is there a way to design the page in 800 width so it looks good in 800 x 600. Then, when the resolution switches to
1024 x 768, the page will automatically CENTER it in the middle?
I was looking in the MAIN PAGE SETTINGS MENU to see, but I'm not sure if a CENTER ENTIRE PAGE IN WINDOW option is available.
Thanks for the help,
Spectre
|
Edited by - on |
|
|
s.dav
Site Admin
Italy
3364 Posts |
Posted - 03 Nov 2003 : 12:23:10
|
quote:
Originally posted by spectre
Since the most popular resolutions are 800 x 600 and 1024 x 768, I
am designing my website to look good in both resolutions.
My question is, is there a way to design the page in 800 width so it looks good in 800 x 600. Then, when the resolution switches to
1024 x 768, the page will automatically CENTER it in the middle?
I was looking in the MAIN PAGE SETTINGS MENU to see, but I'm not sure if a CENTER ENTIRE PAGE IN WINDOW option is available.
Thanks for the help,
Spectre
Unfortunately, this is the biggest limit for a CSS page.
All objects are disposed in right place by 2 coords (top and left).
I can't say to HTML "center these object!" 
You can do it by hand using a super evolved DHTML page moving all objects when page is resized. [2 H:.(]
|
Regards, Davide |
Edited by - on |
 |
|
|
pogowolf
Novice
USA
1 Posts |
Posted - 08 Nov 2003 : 06:07:06
|
Hi, I found this on the net that might be useful for solveing your Center problems:
Liquidizing
What is liquidizing?
It's a technique used to make a webpage work with any screen resolution by moving the object to the correct coordinates depending on the client's screen resolution. This is not needed for the average site where you could use the <center>, tables etc to achieve this. However if you would like a bar at the right side or the bottom of the screen this might be useful. It could also be used to centralize absolute positioned objects or to stretch the an object over the entire window.
ie4 = (document.all)?true:false;
ns4 = (document.layers)?true:false;
This is the browser detection code, I prefer using a function check instead of a agent check sine it's less code and works better.
window.onload = calcPos;
window.onresize = calcPos;
When the window is resized (and loaded) we want it to get the size and then position the objects.
function calcPos() {
if (ie4 || ns4) {
windowWidth = (ie4)?document.body.clientWidth:window.innerWidth;
windowHeight = (ie4)?document.body.clientHeight:window.innerHeight;
logoLeft = windowWidth - 100;
logoTop = windowHeight - 50;
posObj('Logo',logoLeft,logoTop);
}
}
Here's the cross browser code that detects the window size and the code in red calculates the new position for an object and update it's position. In this sample the object referred to as Logo will be positioned with it's left side 100 pixels from the right border and it's top 50 pixels from the bottom. Assuming that the objects size is 100*50 pixels it would be positioned in the lower right corner of the window.
function posObj(objName,objLeft,objTop) {
if (ie4) { objMove = document.all[objName].style;}
else if (ns4) { objMove = document.layers[objName]; }
objMove.left = objLeft; objMove.top = objTop;
}
This function takes 3 arguments, object name, Left Position and Top Position and then moves the object to the given position.
Thats it, the code above has been tested and works in ie4+ and ns4+, if you got any questions feel free to e-mail me.
Author: Emil A Eklund
|
Edited by - on |
|
|
|
n/a
deleted
492 Posts |
Posted - 08 Nov 2003 : 09:47:16
|
Seems very useful !!!
Thank you pogowolf !!!
and WELCOME!!! |
Ciao Ciao De.  |
Edited by - on |
|
|
|
Pelle
Super User
Italy
275 Posts |
Posted - 08 Nov 2003 : 13:01:02
|
Welcome pogowolf!
|
Pelle. |
Edited by - on |
|
|
|
spectre
Novice
USA
8 Posts |
Posted - 11 Nov 2003 : 23:13:24
|
Thanks for the help Pogowolf. I'm definitely going to have to e-mail you for more help!
For example, if you go to www.yahoo.com, if you are in 800 x 600 yahoo's page is perfectly centered in the window. Then, if you switch to 1024 x 768, it also is centered perfectly in the window.
That's how I'd like my webpage to be.
Thanks so much for the help,
Spectre
|
Edited by - on |
|
|
|
spectre
Novice
USA
8 Posts |
Posted - 15 Nov 2003 : 04:22:40
|
Actually, a couple of days ago I downloaded Web Studio 3.0 for a test run of the program. While I don't like it nearly as much as I do your web editor (I mean that honestly, I like yours much better), still, the Web STudio 3.0 can center a page in window.
For example, I created a page 780 x 1000 pixels big. IN 800 x 600 mode, the page is centered. When I switch to 1024 cx 768, the page is still centered perfectly in window.
I really wish your great editor could do this also...... thanks!
Spectre
|
Edited by - on |
|
|
|
s.dav
Site Admin
Italy
3364 Posts |
Posted - 15 Nov 2003 : 11:51:38
|
Hello spectre, I've not seen Web STudio 3.0 yet.
I don't know if it can create HTML using relative or only absolute position but I think that in new version I can think to permit to create a "centered" page. |
Regards, Davide |
Edited by - on |
|
|
|
Commsman
Practical
United Kingdom
40 Posts |
Posted - 18 Dec 2003 : 11:07:52
|
It would be easiest if you could embed all the page elements within one DIV - then apply the DHTML centering functions to that DIV - and all the DIVs within this would take their positioning relative to this.
That might be fairly easy to implement as part of Dynamic HTML Editor. |
Edited by - on |
|
|
|
s.dav
Site Admin
Italy
3364 Posts |
Posted - 18 Dec 2003 : 11:31:12
|
quote:
Originally posted by Commsman
It would be easiest if you could embed all the page elements within one DIV - then apply the DHTML centering functions to that DIV - and all the DIVs within this would take their positioning relative to this.
That might be fairly easy to implement as part of Dynamic HTML Editor.
I must do some tests... |
Regards, Davide |
Edited by - on |
|
|
|
Pelle
Super User
Italy
275 Posts |
Posted - 18 Dec 2003 : 14:31:31
|
Welcome Commsman!
Thanks for the triks!
|
Pelle. |
Edited by - on |
|
|
| |
Topic |
|
Centering a page in 1024 x 768 resolution
