/    Sign up×
Community /Pin to ProfileBookmark

Using CSS while maintaining correct and proportionate distances between objects

Copy linkTweet thisAlerts:
Nov 29.2002

Hi all, I’ve lots of questions regarding this topic.

First, regarding EM. Would it be proportionate to the page or just the default font size? If say I put

[code]
<style type=”text/css”>
body { font-size:20px; }
</style>
[/code]

Will a default “EM” be set to 20 pixels? I’m not sure of what it means. Thus, would using EM to size objects and fonts be wise?

Second, how do you ensure that objects appear of correct proportion to the browser window size? Using percentages seems to work for [b]sizes[/b], but what about distances?? Positioning objects using percentages sounds strange to me. What about using “position:relative”?

Thirdly, will usage of “universal” sizes like CM or IN (inches) work better for this case?

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@StefanNov 29.2002 — [i]Originally posted by Xeenslayer [/i]

Hi all, I've lots of questions regarding this topic.

First, regarding EM. Would it be proportionate to the page or just the default font size? If say I put

<i>
</i>&lt;style type="text/css"&gt;
body { font-size:20px; }
&lt;/style&gt;


Will a default "EM" be set to 20 pixels? I'm not sure of what it means. Thus, would using EM to size objects and fonts be wise?
[/QUOTE]

Traditionally em = the size of the (capital) letter 'M'.

Depending on how the actual font "looks like" 1 em might not be exactly 20px.

However 1 em will always be the same size "as the font". Thus setting a size for a box in em will make the box shrink and grow if the user changes the page default fontsize.

So yes, it's often advantageous to use em (or ex = size of 'x') when making layout since it enabels the layout to "scale with the fontsize".

In general however I would advice against using font-size specified in pixels. There is a bug in IE that makes it impossible for eg a visiually impared user to change font-size if you specify it in pixel.

Usually a better suggestion is simply to rely on that the user is bright enough to specify their own preferd fontsize that works well in their specific situation. By using font-sizes in % and keeping the page main content as size 100% and wroking with em or ex sizes where apropriate, you usually get a solution that works the best in most situations for your visitors.


Second, how do you ensure that objects appear of correct proportion to the browser window size? Using percentages seems to work for [b]sizes[/b], but what about distances?? Positioning objects using percentages sounds strange to me. What about using "position:relative"?
[/QUOTE]

That's a bit complex to answer. Every page solution need to be looked at specifically to decide what works the best.

Generally though, if you eg specify a width of 80%, also specifying margins, paddings, positioning etc in % is probably a good idea also.

However there's no ultimate solution that works the best in all cases.


Thirdly, will usage of "universal" sizes like CM or IN (inches) work better for this case?[/QUOTE]

No, using absolute lenght units like inches is a very bad idea on a monitor, becuse there is simply no wayfor you to know how large an "inch" will look like on someone elses screen (OS, monitor, resolution etc will affect this to a large degree).

However if you are trying to make a .CSS for how a page should look on a printed paper, cm and inches are very good measures.

While it doesn't work well in the "electronic world", on a printed paper an inch really IS an inch.
Copy linkTweet thisAlerts:
@XeenslayerauthorDec 02.2002 — By using font-sizes in % and keeping the page main content as size 100% and wroking with em or ex sizes where apropriate, you usually get a solution that works the best in most situations for your visitors. [/QUOTE]

It is difficult to achieve what you have said (for me at least). I am not quite sure when to use EM and EX since these vary with the user's default font size (like you have said). I have tried experimenting and found that because of this problem, it can be difficult to position things due to a change in font sizes. I would love to know how percentages for positioning can be used smoothly with EM/EX for font sizes.

Font sizes in percentage? An example please?
Copy linkTweet thisAlerts:
@StefanDec 02.2002 — [i]Originally posted by Xeenslayer [/i]

[B]It is difficult to achieve what you have said (for me at least). I am not quite sure when to use EM and EX since these vary with the user's default font size (like you have said). I have tried experimenting and found that because of this problem, it can be difficult to position things due to a change in font sizes.

[/QUOTE]



Depends on how you build your page. Usually you should eg never position:absolute anything into an area where normal content "lives", only to outside margins.

If you do that positioning works just fine.

Eg



<body style="margin-left:10ex">

<div style="position:absolute; top:10px; left:2ex; width:6ex;"></div>

Font sizes in percentage? An example please? [/B][/QUOTE]

font-size:100%

font-size:150%

font-size:75%

By default on windows font-size: 100% = 16px = 13pt

(Of cource pt should never be used on screen, it's just stated for comparative reasons.)
Copy linkTweet thisAlerts:
@XeenslayerauthorDec 03.2002 — So by giving font sizes a percentage, are we also giving it a fixed size?

eg.

font-size:50% = 8px;

font-size:150% = 24px?
Copy linkTweet thisAlerts:
@StefanDec 03.2002 — [i]Originally posted by Xeenslayer [/i]

[B]So by giving font sizes a percentage, are we also giving it a fixed size?



eg.

font-size:50% = 8px;

font-size:150% = 24px? [/B][/QUOTE]

Yes, until the user changes the default fontsize of cource.

The important thing though is that the relative size between different sections will remain the same (eg something with font-size:50% will be 1/3rd the size of 150% even if eg the default usersize is 20px instead of 16px )
Copy linkTweet thisAlerts:
@JudyDec 03.2002 — I don't know a lot about ccs, javascript, or anything else for that matter.

But I've managed to put together a website that looks pretty much the way I want it to in my browser (I.E.) The javascripts I use are cut & paste, tho' I've managed to make a few changes so that they'll do what I need.

I know nothing about "objects", "methods," etc. The successful changes I've made in scripts are the result of a lot of guesswork and persistence!

I've asked questions on several different forums, and the answers I've received were usually 'way over my head...Here's my problem:

My site is dog related. Most of the people who visit don't even know as much as I do about screen resolutions, etc! They aren't going to make any changes in their settings to accomodate my site.

As more and more people are using larger monitors and higher resolutions, I would like to re-design my site so that it looks as good at higher resolutions as it does at 600 x 800.

I would think that using percentages rather than absolute sizes might be the answer. My site has a lot of images, and many pages have multiple slideshows in InLine Frames.

I don't even know where to start!

Would one of you mind taking a look at my site, and giving me some suggestions?

Here's a link:

[URL=http://www.regardless-shorthairs.com]Regardless Shorthairs[/URL]
Copy linkTweet thisAlerts:
@StefanDec 04.2002 — [i]Originally posted by Judy [/i]

I don't even know where to start!
[/QUOTE]

Well I would start with fixing all the HTML errors so you have a firm base to stand on onto which you can apply your CSS and JavaScript.

Eg something like this will start you of in the right direction


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta http-equiv="Content-Script-Type" content="text/javascript">

<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style title="Default" media="screen" type="text/css">

body {background:black url(Xmas/Xmas_Page1.jpg) 50% 50% no-repeat;}

</style>

</head>

<body>


</body>

</html>

Also, as you add markup to your page you can do a basic check for if what you do is correct or not by visiting this page

http://validator.w3.org
×

Success!

Help @Xeenslayer spread the word by sharing this article on Twitter...

Tweet This
about: ({
version: 0.1.9 — BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...