If there's anyone that can help, I'd appreciate any suggestions with this issue: I created my site with an elastic layout, using all measurements in ems. However, the layout gets distorted when a user zooms in or out. The nav bar gets completely messed up, and on firefox when the option "zoom text only" is checked off, the entire site gets messed up.
Anyone have any idea what can be the problem? The url to the site is www.newstylesignsusa.com
suavedesign 0 Junior Poster in Training
cfajohnson 7 Shell scripter and author
Use percentages, not ems (except as max-width or min-width).
suavedesign 0 Junior Poster in Training
What should be in percentages? Everything including padding, margins, etc? And is there a way to figure out the exact percentage from px or ems? Thanks
suavedesign 0 Junior Poster in Training
The 1000px min-width had no effect. Any other suggestions? Which elements should I change to percentages?
teedoff 3 Posting Pro
The 1000px min-width had no effect. Any other suggestions? Which elements should I change to percentages?
Hmmm it did when I tried it.
Did you replace the width:100%; on the body tag with min-width: 1000px;? I just tried it again and it works. When I resize the browser and drag the right border to the left making the page smaller and smaller, the nav bar doesnt float the last tab underneath. Everything seems to work fine after changing that one style.
cfajohnson 7 Shell scripter and author
You do not, indeed cannot, know the width of your viewers' browser windows.
One viewer may have a window that it 20 ems wide; another may be 100 ems.
If you want to have 5 objects side by side across the entire browser window, you need to give their widths as a percentage:
width: 20%;(Or perhaps a little less to allow for padding, margins and borders.)
teedoff 3 Posting Pro
Thats why a standard practice is to design pages around 960 or 1024 that will accomodate MOST browsers and users screen resolutions.
Of course you can set your page to be 100% of whatever the users screen is set at, but if you dont design whats INSIDE that 100% wide element, then your page will surely break.
I would suggest making a back up copy of your site, then start playing around with all the em measurements, changing them one at a time to pixels or percentages. Each oen you change, check that its working properly. It will be a tedious process, but I think you will definately learn alot from this procedure. Good luck
cfajohnson 7 Shell scripter and author
I haven't had a monitor as narrow as 1024 for more than 8 years! Pages that narrow look silly, particularly on my current 1920px monitor.
I always use fluid designs that fit whatever width the viewer uses.
teedoff 3 Posting Pro
Statistics show that there are MANY ppl using screen resolutions of 1024x768 and even lower. For a web designer to build sites that dont exclude those users, 20% as of the beginning of the year, we have to abide by certain standards.
Not saying to build all your sites with a set width of 960px, but you cant build sites just because you have a 50" plasma hooked up to your pc either.
Ecommerce sites especially need to reach as broad a range of users as possible, which is why by todays standards, most ppl design for no more than 1024 res. Of course you can style it to stretch according to available user screen res, but that wasnt the initial question was it.
cfajohnson 7 Shell scripter and author
That is my point. There are people using browser windows (screen resolution is irrelevant) of all sizes. Designing for one size doesn't work. Use a fluid design that works for everyone.
The original problem is solved by using a flexible design.
suavedesign 0 Junior Poster in Training
teedof:
when I changed width:100% to min-width:1000px and I zoom in and out of my browser- (IE and firefox) the nav bar still gets distorted! Also, when using firefox, if "zoom text-size only" is checked off in view, then the entire layout goes completely haywire.
Do you think the only solution for me right now is to play around with the measurements like you said?
Thanks for trying to help...
suavedesign 0 Junior Poster in Training
cfajohnson:
The percentage is relative to the entire browser, or the element that is containing it? (I.e. An element inside a main wrapper div is 20% of the entire browser, or 20% of main wrapper div?)
Thanks
JRM 107 Practically a Master Poster
cfajohnson:
The percentage is relative to the entire browser, or the element that is containing it? (I.e. An element inside a main wrapper div is 20% of the entire browser, or 20% of main wrapper div?)
Thanks
nested divs are relative to the closest outer div only, i believe.
teedoff 3 Posting Pro
Suave, you should do some reading here. This site explains how to design sites in fixed, fluid, and elastic styles with some links to good examples of each type. It also has the pros and cons of each type.
I guess there's no quick tip to tell you how to fix this short of someone else fixing your layout for you, which I'm sure you want to do yourself.
As JRM said, elements nested inside other elements, divs within a div, are relative to the containing div. Think of it like a box, which is what its called, that has a certain dimension to it. Anything you place within that box must be small enough to fit. Here is a good explaination of the box model. Hope that helps.
suavedesign 0 Junior Poster in Training
Thanks for all your help, guys! I succeeded in fixing the nav bar, and now it looks fine when you zoom in or out. But a (big) problem still remains:
The entire website layout goes completely haywire when: On IE- you change "text size", and on Firefox- you check off "zoom text size only". The problem must have to do with text size, but how do I fix it??
Thanks in advance!
almostbob 866 Retired: passive income ROCKS
ems are user defined, they are the width of the M in the users basefont
screen layout in % , font in em
the window is always 100% wide regardless of size
suavedesign 0 Junior Poster in Training
Almostbob,
are you saying that I should leave font sizes in em, and use percents for layout?
almostbob 866 Retired: passive income ROCKS
well it works for everybody else
cfajohnson 7 Shell scripter and author
ems are user defined, they are the width of the M in the users basefont
screen layout in % , font in em
the window is always 100% wide regardless of size
An em is the height of the current font. If the current font is 18px, 1em is 18px.
almostbob commented: amazing, conflicts with every resource -1
almostbob 866 Retired: passive income ROCKS
An em is the height of the current font. If the current font is 18px, 1em is 18px.
if you are going to suggest that someone has made an error in their definition,you should get it right,, http://en.wikipedia.org/wiki/Em_(typography)
An em is a unit of measurement in the field of typography. This unit defines the proportion of the letter width and height with respect to the point size of the current font. Originally the unit was derived from the width of the capital "M" in the currently used typeface.[1] This unit is not defined in terms of any specific typeface, and thus is the same for all fonts at a given point size.[2] So, 1 em in a 16 point typeface is 16 points. Note that this term is not an acronym or initialism and is pronounced the same as the letter it refers to, the letter "M".
cfajohnson 7 Shell scripter and author
The definition I gave is as it applies to web pages. See http://www.w3.org/TR/CSS21/syndata.html#length-units:
em: the 'font-size' of the relevant font
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.