Question regarding percent and em's Options

[wacssabe]

Hi all this is my first post. I'm in a trouble. I've started in html and css with some tutorials, and i've finally read the specifications (html 4 / css 2/3). But i can't figure out how to make my page full compatible with every screen in the market. After making the web, i viewed it in my netbook and it looked horrible: div's overlapped by huge letters, footers won't stick on the very bottom of the page but in the bottom of my screen, even when page is longer.

All of this together made me think about scaling. I know a page can scale in units of percents and in em's (in addition to pixels, and many others which don't help).

-Percents: percents aren't related to the real mesures of the container, but the visible part of it. If i set a height 100% in a page of twice my screen height, the header will fill just my screen. If i scroll down, the background isn't there anymore. Beside, if an absolute positioning bottom:0;right:0; is set in a footer div, as i said it will stick just in the bottom of MY screen, not in the web's end.

When i resize the size of the window, div's resize good, but not letters nor pics, which get smaller, but not actually as they should so everything fits well. Letters will soon be bigger than those div's containing them, so again i get overlappings and so on.
In addition, if i resize just text (view->size in FF), letters will enlarge, but not the divs, so i get the same overlapping problem.

-Em's. In the other hand, there's em's. If I resize all the widths in em's, included div's lengths, when i resize font size, it all looks good, but if
resolution of the screen is large, it will look really small, so anybody
who visits my page will be forced to resize font size, besides that page won't fill the full width of the page, because of measures not being given in screen percents. A real pain for many people (me included).

Please, what can i do? I really need help in this, as i've found nothing at all. Many thanks in advance.

[Frederiek]

You might want to read some more on Elastic design at:
ALA article: Elastic Design
Creating Elastic Layouts with the em Unit

See also: http://www.d.umn.edu/itss/support/Training...ss.html#elastic

And on footers that stick to either the bottom of the viewport or of the page:
The Man in Blue: footerStickAlt

[pandy]

Not all that sure what you try to do, but I don't think that to make everything look the same, be proportionally the same, on a wide array of displays is necessarily a good thing.

[wacssabe]

Hi and many thanks both Fred and Pandy. Pandy, i just try to reach the most resolution/size screens available. Fred i read specially the first three links over and over, and while now i have a much better idea of how width styles and positioning work, i'm not absolutely sure (actually, now i'm more confused) about my page layout.

My new question: what's supposed to be best, a full-liquid page that when resizing the browser window it resizes completely so it fits any screen? (i myself hate 4:3 layouts not adapted to my wide screen), or an em's design which will accept any font size, but will look very ugly (two scroll bars) to any small netbook display (8'9"), iphone and other net gadgets which can't display the full width and height of my em's sized page, besides the non-wide and bigger screens than mine? (I use only wide screens, both notebook and desktop, so my page is arranged from this view).

I wonder too what do people preffer. I know some people like to work with many open windows at once, so for example they have two browser windows each one occupying half the screen space. What they'd like, the page resizing so they can have a full view (althoug too small to read, so increasing font size will be necessary), or the same layout and a parcial view plus scroll bars? I've seen too pages with liquid
when resizing the window, but eventually scroll bars appear when further resizing would make text overlapping. You can appreciate last optin at http://www.csszengarden.com and decreasing the browser window.

I'm considering a hybrid of percent and em's so the page fills the whole screen but overlappings don't happen when increasing font size or resizing browser window. I'm not sure how it may work, this idea just came an hour ago.

Please, could you comment this options? Many many thanks, i love this forum. Greetings.

[Christian J]

When i resize the size of the window, div's resize good, but not letters nor pics, which get smaller, but not actually as they should so everything fits well. Letters will soon be bigger than those div's containing them, so again i get overlappings and so on.

You can use em to make narrow container widths adjust to the text size. In wide containers text lines will wrap rather than spill out of the container, then you might use "width: auto" or percent (if the width is large enough even in small windows). There's also the "min-width" property, but browser support varies (otherwise maybe one could use say a min-width in em and a width in percent).

If you float some elements they'll jump down below rather than being squeezed by each other in narrow windows.

In addition, if i resize just text (view->size in FF), letters will enlarge, but not the divs, so i get the same overlapping problem.

If the DIV width is specified in em it should resize along with the text. BTW in IE7 and Opera you can zoom the whole page.

-Em's. In the other hand, there's em's. If I resize all the widths in em's, included div's lengths, when i resize font size, it all looks good, but if
resolution of the screen is large, it will look really small, so anybody
who visits my page will be forced to resize font size,

If you use a default font size (100% for ordinary text) the visitor may already have configured his browser text size to taste.

This is indeed a tricky subject so it's hard to give specific advice without real example pages.

Some general design philosophy: http://westciv.com/style_master/house/good_oil/not_paper/

[Darin McGrew]

I recommend that you use my default font size, and my default browser width, no matter which of my browsing environments I'm using.

Yes, my browser window is often taller than it is wide. Yes, I avoid full-screen browser windows (except on my mobile browser).

[wacssabe]

Hi, thanks again for recommendations. I've had some problems with my hosting. I have a simple philosophy on css: the more people can see ok the web, the better. And that includes, as one section says at the text you link (Christian), those who need bigger font size to view well the page. Besides, i know that too long lines won't look good, so it's not a good idea to make text columns full liquid. They should have a max em width, as well as one minimum em width, so even if font size is expanded further than normal, it won't ever overflow the div container. I'll be back to tell you how it works. Thanks !

[pandy]

Text won't overflow, it'll wrap.

Watch out for those recommendations about max nn words per line. It comes from the print world where readers can't resize the pages. Some want longer lines and some want shorter. But that can't be done in print. It can on the web. Don't stop that from happening.

[wacssabe]

Hey boys... :**** I love myself and yours too!! I did it! I did it! Thank you sooooooooooooooo much. I feel like having made a son, it's my little web Thanks thanks thankssssss.

[pandy]