HTML in percentage and not in pixels

  • kanexpo2
  • Graduate
  • Graduate
  • No Avatar
  • Joined: Oct 19, 2006
  • Posts: 112
  • Status: Offline

Post September 10th, 2008, 4:31 am

Hi,

My website is created in pixels, width=980px for example for the full width of the page.

I would like to change it to percentage so it holds the same ratios in any resolution, how would i calculate that? or how to proceed on that?

example: table width=9px, instead of that how do i know what percentage the table must be?

Is there just simple math behind this?

Thanks for any help

kanexpo
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post September 10th, 2008, 4:31 am

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post September 10th, 2008, 4:50 am

well, the whole container will be 100% ... and that would make up the screen ... so you'll just have to work it out I guess ... except if you want to work out each thing on its own, so lets say that block that you had was 9px and you know that the whole container is 980px so the way to work out the percentage of the screen that it takes up would be as follows: (9/980) * 100 ... 0.918.. but please not that you can only add integers, so it has to be rounded up to 1% width ...
Let's leave all our *plum* where it is and go live in the jungle ...
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post September 10th, 2008, 5:03 am

If you use percentage based measurements, the browser will figure out how much space is available.

Code: [ Select ]
#container{width:50%;}


If you're looking to perform mathematical calculations, you'll have to wait. The CSS3 spec does include a calculation function, but this hasn't been implemented in all browsers.

http://www.w3.org/TR/css3-values/#calc
- dM
  • wanna kill
  • Beginner
  • Beginner
  • User avatar
  • Joined: Sep 08, 2008
  • Posts: 36
  • Status: Offline

Post September 17th, 2008, 2:42 am

HI

I have a link. that will surely help you. link

thanks
  • Maisara-WD
  • Novice
  • Novice
  • No Avatar
  • Joined: Sep 16, 2008
  • Posts: 15
  • Status: Offline

Post September 17th, 2008, 2:36 pm

First of all.. the best width for the page to suit all resolutions is 780px. and the best percentage is 65 - 80 %.

Mathimaticly.. to calculate the percentage of a value:

we work with the scissors method, substitute the real values for the following rule:

Part/whole = percentage/100

The value we want to get is "percentage".

the known value is 100.

the whole is (let's assume it with the width 800px "for the lowest resolution" and subtract 20px for the scroll bar, to be 780px)

the part is the value u wanna know it's percentage.. assume it's 10px (that's the rule, u can apply it whenever u want on any values)

let's do it: (part * 100) / Whole = the percentage
The result is: (10 * 100) / 780 = 1000 / 780 = 0.78%.

That's it...

I hope that helps...

Best Wishes.......
  • martinsejas123
  • Novice
  • Novice
  • User avatar
  • Joined: Sep 17, 2008
  • Posts: 17
  • Status: Offline

Post September 18th, 2008, 8:57 am

I concur with Maisara-WD, the best width for the page to suit all resolutions is 780px. In fact, it tends to be default width for most pages.

Good luck with that kanexpo2!

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 87 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.