Recently i have been trying to convert measurements like this:
<div style="left: 15; top: 15; width: 740; height: 405; position: absolute">
into percent measurements like: (this is just an example not real measurements)
<div style="left: 5%; top: 5%; width: 90%; height: 80%; position: absolute">
Im trying to do this because the page im working on looks great in 800 x 600 but terrible in other resolutions(rather shrunk).
Ive tried dividing the width by 8 and the height by 6 to get the % measurements,
but it wont work, could someone please tell me how i can succeed in converting these measurements.
PS. Here's the page im working on if anyones intrested.
<!-- m --><a class="postlink" href="http://au.geocities.com/ck_net_2004/hm.htm">http://au.geocities.com/ck_net_2004/hm.htm</a><!-- m -->
Thanks in advance for any help.hey, cool that you're posting that, I was going to ask for exactly the same thing..
I'll add to your question, then..
what about the people with a panoramic resolution ?
Imagine you set the width of an element as a precentage of the width of the screen. Now, imagine the user has a strange resolution such as 1024 x 3000 ( just some random values, hey ! ), what do you do ?
Your site will look weird, no ?
I'd like to make a site with percentage, too, but I have images... and I fear for them... is it possible to specify only according to the height of the screen, and then get the 4:3 resolution, like : assuming it's 768. the width is 1024 and not some strange 2000 panoramic thing ?
Then, do you set the positions as absolute or relative ?
mmm... lots of questions here, but I think those have to be considered, because more and more people use panoramic screens ( I even thought of buying one myself... for notebooks, those are the best, I think ! )
Any help will be greatly appreciated.
ck_net_2004, I hope you don'^t mind me posting in your thread, but as I said, I was going to ask exactly the same thing, so it might be better if we join with our trials and solutions....
Here is my website, if you want to have a look at how messy it will be to transform everything in percentages...
Enfants de l'?(<!-- m --><a class="postlink" href="http://enfantsdelo.free.fr/map.php">http://enfantsdelo.free.fr/map.php</a><!-- m -->)
thanks for your suggestions and your help !
Ness
Hi Ness_du_Frat, of course i dont mind you posting here the more people who post the more others will pay atention and pehaps answer.
I never thought about that, but not many people have 16:9 Screen Ratios so i guess for now it doesn't matter much.
But you could write a Javascript code to check onload if the Screen Resolution ratio is 4:3 if not then restyle the elements on the page to a style that suits a 16:9 monitor.
By the way nice site.people do tend to have more and more 16:9 screens. All the new notebooks are 15.4", and that's panoramic.
Moreover, it's not only a matter of having a widescreen or not.
Think of all the people having those tons of toolbars, or even the tabs in firefox... or the dock in Macintosh... all those little things, which will ruin the design even more if it's in percentage...
Because there is one thing people might not realise at first, is that if your SCREEN resolution is 768x1024, your browser's one certainly ain't.
I mean, I work for a 768x1024 resolution, which is the most commonly used, and my site is 600px height. I don't know about the width, because it's no use to me, but from what I remember about making my personnal site ( NesS's World (<!-- m --><a class="postlink" href="http://nesssworld.free.fr">http://nesssworld.free.fr</a><!-- m -->) ), the width is around 920 to 940 px, not at all 1024.
And THAT change on every computer.
What I'd like to have here is somebody who really DID the percentage thing on his site, and I'd like to see the result on several computers.
The more I think about it, the more I think I'll just make a 768x1024 resa, and a 1280x1024 one too, maybe.
But then, you have to use cookies to remember the user's choice on everypage... baaaaaah, too much work, and if the user inactivated the cookies, and javascript, then you get something even uglier than the 768x1024 resa in the other screens resa.
What I suggest is to make a site that's ok in all browsers...
But again, I'll surely come back on the thread, and add my contribution if I can... And of course, if we can come up with a cool solution, crss computer comptabile, then I'll go for it. Definately. It's so much easier than defining ten different style sheets... ( I have 7 already... 5 for the colors, 1 for the main layout, 1 for the inner pages layout... 300 lines each... yeah, I'm crazy. And even more when you consider the site is about 100 pages... )CK how do you want it to look like?
I would use a fixed width menu bar down the left hand side, either floated or absolutely positioned, then apply a margin-left of slightly greater width to my main content div.
You can see that in action on one of my old sites ( <!-- m --><a class="postlink" href="http://www.tollgatesecurity.co.uk/residential.php">http://www.tollgatesecurity.co.uk/residential.php</a><!-- m --> )
Ness, your's is a lot more tricky.
I would absolutely position your top header text, so wherever the main column is it is slightly out of it.
Then I would do the same as I suggested with CK's but with slight modifications.
create a centralised main content div, 90% or less wide.
Put your menu inside it, and float it left.
Put left and right margins on your text inside the content div (using another div), and set the centered div background to be the image on the right. You could also use it as the body background.
Your content text would then use up all of the screen that was left.l
Do those make sense? I can provide some sample code for them if you like.@ Ness
If you're going to make different sites for the different resolutions, Set 800*600 to be default, (centered in a div) as it fits most monitors. In a 800*600 monitor it will completely fill the screen, so the centering div is ignored, otherwise if the resolution is bigger, It will just leave 'whitespace' around the layout. Which will also make your 800*600 layout look beter at higher resolutions.
www.vladdy.net/demos/elementsizing.htmlMmm... thanks for all the suggestions, but I know my design well, and I know what it would take to make it with percentages, or to center it...
Actually, I'll leave it like that. In a 800x600, the website is not so beautiful, but it's ok in 768x1024 with tab navigation on FF and the dock in mac os x ( so, ,additional things above and below the site ). And of course, it looks good in 1024x1280, because the background is stretched out.
If I position the layout and center it, then, I'll have to position everything relative to that new div, right ?
Maybe I'll try that...
But again, will it look better than having it on the left side ? My design allows stretching on the right without too much ugliness... Anyway, it's worth giving it a try.
My main problem is that when the site is in a big screen res, it looks small. so a good thing would be to use percentages for the height only, as I cannot touch the width ( too complicated with the menu ). But then, of course, I can resize the frame-like div so that people have more space to read everything. And position the 5 circles relatively to that...
it's getting tight... I'm sure I'll need help very soon !!!Thanks for all the replys,
DaveSW have you seen the page im trying to convert,
if not take a quick look here: <!-- m --><a class="postlink" href="http://au.geocities.com/ck_net_2004/hm.htm">http://au.geocities.com/ck_net_2004/hm.htm</a><!-- m -->
is it possible to convert the measurements (width, height and top, left) on this page into percentages, if so how?
Knowing its designed for 800x600, couldn't i do some kind of math to figure out the percentages?OK, that question wasn't directed to me, but I guess converting them into percentages is more a matter of trial and errors than one of maths.
As I said earlier, 800x600 is the user's screen, not the space available for navigation. Therefore, it all depends on which toolbars and stuff the user has on the browser. The more he has, the less space will be available.
I think the best thing would be mixing the two solutions.
DJsAC has suggested centering the layout. That's a nice solution. You could define some things in your layout that could be stretched out vertically and horizontally without ruining your design, and with those values, you could use the percentage.
I'll try that in the next few days with my website ( unless I find a good reason not to, in whichever case I'll post it here ) and tell you if it's worth the work, and if it really does look good....
<div style="left: 15; top: 15; width: 740; height: 405; position: absolute">
into percent measurements like: (this is just an example not real measurements)
<div style="left: 5%; top: 5%; width: 90%; height: 80%; position: absolute">
Im trying to do this because the page im working on looks great in 800 x 600 but terrible in other resolutions(rather shrunk).
Ive tried dividing the width by 8 and the height by 6 to get the % measurements,
but it wont work, could someone please tell me how i can succeed in converting these measurements.
PS. Here's the page im working on if anyones intrested.
<!-- m --><a class="postlink" href="http://au.geocities.com/ck_net_2004/hm.htm">http://au.geocities.com/ck_net_2004/hm.htm</a><!-- m -->
Thanks in advance for any help.hey, cool that you're posting that, I was going to ask for exactly the same thing..
I'll add to your question, then..
what about the people with a panoramic resolution ?
Imagine you set the width of an element as a precentage of the width of the screen. Now, imagine the user has a strange resolution such as 1024 x 3000 ( just some random values, hey ! ), what do you do ?
Your site will look weird, no ?
I'd like to make a site with percentage, too, but I have images... and I fear for them... is it possible to specify only according to the height of the screen, and then get the 4:3 resolution, like : assuming it's 768. the width is 1024 and not some strange 2000 panoramic thing ?
Then, do you set the positions as absolute or relative ?
mmm... lots of questions here, but I think those have to be considered, because more and more people use panoramic screens ( I even thought of buying one myself... for notebooks, those are the best, I think ! )
Any help will be greatly appreciated.
ck_net_2004, I hope you don'^t mind me posting in your thread, but as I said, I was going to ask exactly the same thing, so it might be better if we join with our trials and solutions....
Here is my website, if you want to have a look at how messy it will be to transform everything in percentages...
Enfants de l'?(<!-- m --><a class="postlink" href="http://enfantsdelo.free.fr/map.php">http://enfantsdelo.free.fr/map.php</a><!-- m -->)
thanks for your suggestions and your help !
Ness
Hi Ness_du_Frat, of course i dont mind you posting here the more people who post the more others will pay atention and pehaps answer.I never thought about that, but not many people have 16:9 Screen Ratios so i guess for now it doesn't matter much.
But you could write a Javascript code to check onload if the Screen Resolution ratio is 4:3 if not then restyle the elements on the page to a style that suits a 16:9 monitor.
By the way nice site.people do tend to have more and more 16:9 screens. All the new notebooks are 15.4", and that's panoramic.
Moreover, it's not only a matter of having a widescreen or not.
Think of all the people having those tons of toolbars, or even the tabs in firefox... or the dock in Macintosh... all those little things, which will ruin the design even more if it's in percentage...
Because there is one thing people might not realise at first, is that if your SCREEN resolution is 768x1024, your browser's one certainly ain't.
I mean, I work for a 768x1024 resolution, which is the most commonly used, and my site is 600px height. I don't know about the width, because it's no use to me, but from what I remember about making my personnal site ( NesS's World (<!-- m --><a class="postlink" href="http://nesssworld.free.fr">http://nesssworld.free.fr</a><!-- m -->) ), the width is around 920 to 940 px, not at all 1024.
And THAT change on every computer.
What I'd like to have here is somebody who really DID the percentage thing on his site, and I'd like to see the result on several computers.
The more I think about it, the more I think I'll just make a 768x1024 resa, and a 1280x1024 one too, maybe.
But then, you have to use cookies to remember the user's choice on everypage... baaaaaah, too much work, and if the user inactivated the cookies, and javascript, then you get something even uglier than the 768x1024 resa in the other screens resa.
What I suggest is to make a site that's ok in all browsers...
But again, I'll surely come back on the thread, and add my contribution if I can... And of course, if we can come up with a cool solution, crss computer comptabile, then I'll go for it. Definately. It's so much easier than defining ten different style sheets... ( I have 7 already... 5 for the colors, 1 for the main layout, 1 for the inner pages layout... 300 lines each... yeah, I'm crazy. And even more when you consider the site is about 100 pages... )CK how do you want it to look like?
I would use a fixed width menu bar down the left hand side, either floated or absolutely positioned, then apply a margin-left of slightly greater width to my main content div.
You can see that in action on one of my old sites ( <!-- m --><a class="postlink" href="http://www.tollgatesecurity.co.uk/residential.php">http://www.tollgatesecurity.co.uk/residential.php</a><!-- m --> )
Ness, your's is a lot more tricky.
I would absolutely position your top header text, so wherever the main column is it is slightly out of it.
Then I would do the same as I suggested with CK's but with slight modifications.
create a centralised main content div, 90% or less wide.
Put your menu inside it, and float it left.
Put left and right margins on your text inside the content div (using another div), and set the centered div background to be the image on the right. You could also use it as the body background.
Your content text would then use up all of the screen that was left.l
Do those make sense? I can provide some sample code for them if you like.@ Ness
If you're going to make different sites for the different resolutions, Set 800*600 to be default, (centered in a div) as it fits most monitors. In a 800*600 monitor it will completely fill the screen, so the centering div is ignored, otherwise if the resolution is bigger, It will just leave 'whitespace' around the layout. Which will also make your 800*600 layout look beter at higher resolutions.
www.vladdy.net/demos/elementsizing.htmlMmm... thanks for all the suggestions, but I know my design well, and I know what it would take to make it with percentages, or to center it...Actually, I'll leave it like that. In a 800x600, the website is not so beautiful, but it's ok in 768x1024 with tab navigation on FF and the dock in mac os x ( so, ,additional things above and below the site ). And of course, it looks good in 1024x1280, because the background is stretched out.
If I position the layout and center it, then, I'll have to position everything relative to that new div, right ?
Maybe I'll try that...
But again, will it look better than having it on the left side ? My design allows stretching on the right without too much ugliness... Anyway, it's worth giving it a try.
My main problem is that when the site is in a big screen res, it looks small. so a good thing would be to use percentages for the height only, as I cannot touch the width ( too complicated with the menu ). But then, of course, I can resize the frame-like div so that people have more space to read everything. And position the 5 circles relatively to that...
it's getting tight... I'm sure I'll need help very soon !!!Thanks for all the replys,
DaveSW have you seen the page im trying to convert,
if not take a quick look here: <!-- m --><a class="postlink" href="http://au.geocities.com/ck_net_2004/hm.htm">http://au.geocities.com/ck_net_2004/hm.htm</a><!-- m -->
is it possible to convert the measurements (width, height and top, left) on this page into percentages, if so how?
Knowing its designed for 800x600, couldn't i do some kind of math to figure out the percentages?OK, that question wasn't directed to me, but I guess converting them into percentages is more a matter of trial and errors than one of maths.
As I said earlier, 800x600 is the user's screen, not the space available for navigation. Therefore, it all depends on which toolbars and stuff the user has on the browser. The more he has, the less space will be available.
I think the best thing would be mixing the two solutions.
DJsAC has suggested centering the layout. That's a nice solution. You could define some things in your layout that could be stretched out vertically and horizontally without ruining your design, and with those values, you could use the percentage.
I'll try that in the next few days with my website ( unless I find a good reason not to, in whichever case I'll post it here ) and tell you if it's worth the work, and if it really does look good....