well, i have ALWAYS (besides tables) used fixed layouts, and now I am understanding that my site isn't accessible to everyone...
i usually kept the #container to 750px to compensate for 800x600 and up...
but now, using ems, i realize that the user can change the browser's text size, and the text and it's parent element (usually a div) will also grow/shrink to fit...
my question (as i don't know much of fluid/liquid designs) is how do i limit the user scrolling to a larger size forcing horizontal scroll?
and see... i used a 1152x864 IE setup to design a test page at "normal" browser text size, and at "largest" it was pretty close to being off the page, but at 800x600 it was WAY too big...
being relative, i don't know how to limit "user's text size" and resolution for that matter to prevent horizontal scroll...
i guess my attempt would be nice to see: <!-- m --><a class="postlink" href="http://www.accessjdm.com/test.php">http://www.accessjdm.com/test.php</a><!-- m -->
i believe it was zeldman who said text shouldn't be more than 4 inches... well, if so, then 4 inches in what browser and what resolution? i don't get that either...
i'd really like some help on this... thanks a lot!
<!-- w --><a class="postlink" href="http://www.vladdy.net/demos/elementsizing.html">www.vladdy.net/demos/elementsizing.html</a><!-- w --> discusses different liquid and not so liquid layout options.
If Zeldman said about text and 4 inches he was wrong. If you use a projector to have a website shown on a 6x6 feet screen on a wall do you apply that "rule" as well? The text column width should be comfortable to read and that is defined by the number of letters in a line, which you can approximate by em unit.
If you leave the paragraph font size at 1em and size all your text block widths in ems - your site will be as liquid as it gets.
Also I'm not a big fan of navigation jumping down when the browser gets too narrow - it breaks the layout and it is confusing. You want to design so that at 800x600 and "factory" browser font size setting your layout stays intact. If someone has even narrower browser window, horizontal scrollbar IMHO is better than runaway navigation blockso on a 800x600 make it so that the largest available user browser text size will keep everything on the page? im still lost on how to keep everything on the page horizontally...
your link doesn't work... it says page not found, and your root domain (.net) doesn't work because i am not authorized...Not largest available - on Gecko you can "Ctrl"+"+" forever - but the default one, "Medium" setting on IE and whatever Gecko comes preset with.
P.S. Link fixedthat's where i'm lost... people say use ems but like your link #nav and #pics use px to keep a constant width...
???I actually created an em-based layout already for my old college newspaper: Central Michigan Life (<!-- m --><a class="postlink" href="http://www.cm-life.com/">http://www.cm-life.com/</a><!-- m -->). Feel free to rip as much code as you like. I found that putting all the columns in a wrapper DIV and setting it's width in ems is ideal. Then you could use em-widths for column sizes and source-ordered columns (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/ordered-floats.html">http://www.positioniseverything.net/ordered-floats.html</a><!-- m -->), or percentage column widths and negative margins (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/negativemargins/">http://www.alistapart.com/articles/negativemargins/</a><!-- m -->).
If you need a footer that spans the entire width of the layout, use floats. If you don't need a footer across the entire page, use absolute positioning. The wrapper DIV in that case would need to be positioned relatively.
In any case, using auto left and right margins will center the wrapper DIV on the screen horizontally. You can prevent standards browsers from bumping it off screen in larger text sizes by giving the wrapper DIV left and right borders and set the color to transparent.
And Re: JDM71488 about the #nav and #pics being sized in pixels ?Those boxes probably just contain objects of a fixed pixel size, like images, so why have those objects resize with the text?
i usually kept the #container to 750px to compensate for 800x600 and up...
but now, using ems, i realize that the user can change the browser's text size, and the text and it's parent element (usually a div) will also grow/shrink to fit...
my question (as i don't know much of fluid/liquid designs) is how do i limit the user scrolling to a larger size forcing horizontal scroll?
and see... i used a 1152x864 IE setup to design a test page at "normal" browser text size, and at "largest" it was pretty close to being off the page, but at 800x600 it was WAY too big...
being relative, i don't know how to limit "user's text size" and resolution for that matter to prevent horizontal scroll...
i guess my attempt would be nice to see: <!-- m --><a class="postlink" href="http://www.accessjdm.com/test.php">http://www.accessjdm.com/test.php</a><!-- m -->
i believe it was zeldman who said text shouldn't be more than 4 inches... well, if so, then 4 inches in what browser and what resolution? i don't get that either...
i'd really like some help on this... thanks a lot!
<!-- w --><a class="postlink" href="http://www.vladdy.net/demos/elementsizing.html">www.vladdy.net/demos/elementsizing.html</a><!-- w --> discusses different liquid and not so liquid layout options.If Zeldman said about text and 4 inches he was wrong. If you use a projector to have a website shown on a 6x6 feet screen on a wall do you apply that "rule" as well? The text column width should be comfortable to read and that is defined by the number of letters in a line, which you can approximate by em unit.
If you leave the paragraph font size at 1em and size all your text block widths in ems - your site will be as liquid as it gets.
Also I'm not a big fan of navigation jumping down when the browser gets too narrow - it breaks the layout and it is confusing. You want to design so that at 800x600 and "factory" browser font size setting your layout stays intact. If someone has even narrower browser window, horizontal scrollbar IMHO is better than runaway navigation blockso on a 800x600 make it so that the largest available user browser text size will keep everything on the page? im still lost on how to keep everything on the page horizontally...
your link doesn't work... it says page not found, and your root domain (.net) doesn't work because i am not authorized...Not largest available - on Gecko you can "Ctrl"+"+" forever - but the default one, "Medium" setting on IE and whatever Gecko comes preset with.
P.S. Link fixedthat's where i'm lost... people say use ems but like your link #nav and #pics use px to keep a constant width...
???I actually created an em-based layout already for my old college newspaper: Central Michigan Life (<!-- m --><a class="postlink" href="http://www.cm-life.com/">http://www.cm-life.com/</a><!-- m -->). Feel free to rip as much code as you like. I found that putting all the columns in a wrapper DIV and setting it's width in ems is ideal. Then you could use em-widths for column sizes and source-ordered columns (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/ordered-floats.html">http://www.positioniseverything.net/ordered-floats.html</a><!-- m -->), or percentage column widths and negative margins (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/negativemargins/">http://www.alistapart.com/articles/negativemargins/</a><!-- m -->).
If you need a footer that spans the entire width of the layout, use floats. If you don't need a footer across the entire page, use absolute positioning. The wrapper DIV in that case would need to be positioned relatively.
In any case, using auto left and right margins will center the wrapper DIV on the screen horizontally. You can prevent standards browsers from bumping it off screen in larger text sizes by giving the wrapper DIV left and right borders and set the color to transparent.
And Re: JDM71488 about the #nav and #pics being sized in pixels ?Those boxes probably just contain objects of a fixed pixel size, like images, so why have those objects resize with the text?