Forum Moderators: open
I'm a big beleiver in the concept of liquid design but, I know many of you prefer to code to fixed width/font criteria.
I prefer the liquid approach because I think it allows your pages to adapt to whatever the user is using. That may be a 1024x768 high rez monitor on a PC or it maybe 800x600 with a whole bunch of toolbars further diminishing screen real estate.
Whatever the case, a liquid layout will adapt to it.
I'm sure some of you disagree, let's here your thoughts...
Nick
#left
#content
#right
in your html flow it might run like this:
content
left
right
then at the bottom you put another div:
#footer
If you just put #footer last in the code flow it may well be overlapped by other div's because when you absolutly position something you take it out of the normal 'flow' of the document and place it.....absolutely!
So the footer get's overlapped as the footer runs in the 'normal' flow.
Remember, this only applies to absolutely postioned divs before the footer...
Nick
of course you are right: i was assuming "liquid" layout.
(all relative positioned divs)
since we are on the topic of relative footers,
...
why is it that mozilla doesn't put in a scroll bar for relative positioned divs? As in, if a relative positined div goes off the bottom of the screen, no scroll bar comes up...
is there a way to fix this?
Unfortunately, this seems to put a vertical scrollbar on whether you need it or not.
but where were u suggesting it be? body? because I want the big scroll bar to show up
Well my homepage is set to this page in question ... you can see for yourself if you open it in mozilla, and IE, that IE shows the bottom of the page (which is an applet) in its entirety, but Mozilla doesn't
yes the applet at the very bottom is very gimpy.. just click all over it... and you will get the color picking to work in it. If you scroll all the way down in IE, its obvious that IE is shwoing the bottom of the applet, but mozilla wont show it.
"strange"
That said, I'm hardly the CSS expert that some people around here are, so ymmv.
Floated content divs too
then a clear: both Footer div..
guess I'm a liquid layout person too then!
thanks for clarifying
Suzy
Nick
It works pretty well too.
Also, could anybody show me a site ( GREAT SITE) that is totally controled by CSS? I mean, the whole layout.
Thanks!
I'm working an some liquid layouts for a couple of sites. I've noticed that I've had to build 3 stylesheets; 1 for IE, 1 for NN and 1 for Opera, in order for the pages to position correctly.
Did I miss something somewhere that would enable me to create only one and have it work for all 3 browsers?
Secondly I am using a 3 column format with a header and footer. I've noticed that I have to use <br>'s in order to ensure that the #footer appears far enough below the #content. Is there a way to get around that?
Thanks.
You'll never get the 3 column to work in NN4 aswell as all the more modern browsers but there is no reason why you'd need seperate sheets for IE and Opera.
I use 3 column CSS layouts all the time and only ever build one sheet, wiht additional sheets for importing for specific sections of a site...
As for the <br />'s on your #footer, there's a far more elegant solution:
[pre]
#footer {
margin-top: 10em;
}
[/pre]
Nick
IMO, I thought NN was displaying the page better then IE and OP. It seemed to fit the content to page better. Also the margins between the text appeared "neater", but maybe it's just my eyes.
I'll try the "em" idea.
Oh by the way has anyway tried NN7, we brought the page up and NN7 and
it was BAD, really BAD. I was just wonder if anyone else has tried NN7?
Maybe my designs are simpler though, I'm a simple kinda guy (according to Mrs Nick_W ;))
Important note:
We've talked alot about liquid CSS layouts but no one has mentioned that the liquid concept can be implemented with <shudder>TABLES</shudder>....
Liquid layout just means, well, fluid layout. It doesn't neccessarily mean CSS
Nick
Using em, did the trick, now I wonder if I change the attributes on the margins for the #content and #right to em, if that will fix the
problem of having 3 style sheets? What do you think?
Thanks
Nick
em I use when I'm relating spacing (margins, padding etc) to the text...it doesn't matter then how they interpret it, it'll be fairly similar
% I use for large scale stuff that relates to overall page size and for scaling fonts up and down for emphasis...as long as one looks out for inherited scaling, then this seems to generally be OK
px has a place only when relating something to a fixed image...or to do extremely thin borders
CAVEAT: I've largely avoided all use of absolute positioning...which is apparently one of the things that can get really messy
[pre]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Bare bones 3 column CSS layout</title>
<style type="text/css">
#leftpanel {
position: absolute;
top: 140px; /* resize these bits to liking */
left: 0;
width: 200px; /* works best with fixed width right - left divs*/
}
#rightpanel {
position: absolute;
top: 140px; /* resize these bits to liking */
right: 0;
width: 200px; /* works best with fixed width right - left divs*/
}
#content {
position: absolute;
top: 140px;
padding-left: 220px; /* 20px to play with */
padding-right: 220px; /* 20px to play with */
}
</style>
</head>
<body>
<h1>Bare bones 3 column CSS layout</h1>
<!-- Content here -->
<div id="content">
<p>You can put your content here, under the space for a header, or
you can re-arrange the divs in the html to put your right or left
column first.</p>
</div>
<!-- Right column here -->
<div id="rightpanel">
<p>This is a good place to pop nice optimized text into, especially
if your #content div is full of images and little text. I like to
put an 'editors note' here: Just an excuse to squeeze optimized
copy into the html flow without bothering the user ;-)</p>
</div>
<!-- Left navigation etc -->
<div id="leftpanel">
<p>Links, come last, presuming your 'header' has a 'main sections'
navigation with regular text links this is just fine for SE's and
magic for optimization.</p>
</div>
</body>
</html>
[/pre]
You'll see the diferences immediately I think, this, once 'prettified' holds up very well acroos damn near anything except NN4....
Nick
Also, could anybody show me a site ( GREAT SITE) that is totally controled by CSS? I mean, the whole layout.
I don't know about GREAT, but my SITE <see profile> is totally CSS and liquid. I really love the idea of CSS for layout and use it for most new projects, though I have to say not all types of layout are achievable with CSS-P: where you have a mixture of liquid (browser-size-dependent), amount-of-text-dependent and fixed-pixel measurements together things can get very hairy.
sparrow wrote:
Did I miss something somewhere that would enable me to create only one and have it work for all 3 browsers?
It is possible to hide rules from different browsers within a stylesheet. The two main reasons for this are (a) to hide problematic styles from Evil Netscape 4, and (b) to fix the Box Model bug in IE5/Win. Though personally I prefer to avoid the Box Model bug by avoiding specifying a 'width' on the same element as a 'padding' or 'border' (except in the cases where a few pixels either way doesn't matter anyway).
How to hide a rule from N4, taking advantage of an N4 bug in comment parsing ("The Caio hack"):
/*/*/ selector { properties } /* not N4 */
How to make a rule for N4 only (my reversal of Caio's hack):
/*/*/ /*/ selector { properties } /* N4 */
How to get around the Box Model bug ("Simplified Box Model Hack"):
selector { padding: 50px; }selector { width: 500px; } /*/*/
selector { width: 400px; }
selector { \width: 500px; }
selector { w\idth: 400px; } /* */
(The first 'width' in this is for N4, the second for Opera 5 and any other browser that does not
understand backslash escapes, the third for IE5/Win, the last for Standards browsers (IE/Mac,
Mozilla, Opera, Konqueror).
I don't know what's up with your site, but generally speaking Mozilla/Netscape 7 has the
most accurate rendering of any browser.
BTW the script that makes min-width and co. work on IE/Win can be
found at <sorry, no personal URLs> Setting
a width in %, with min- and max-widths in 'em' can be very effective.
[edited by: tedster at 4:17 pm (utc) on Oct. 8, 2002]
However, people with very high rez monitors normally resize the window to a more 800x600 looking size. I don't have any hard data to back this up but I've heard it from many reliable sources over the last couple of years and have seen it first hand on more than one occasion.
However, people with very high rez monitors normally resize the window to a more 800x600 looking size. I don't have any hard data to back this up but I've heard it from many reliable sources over the last couple of years and have seen it first hand on more than one occasion.
I - personally - browse with my window full open... I did this even when I was at 1600x1200. It seems, however, that I'm in the minority. I still prefer liquid designs though.
It matters not a bit if / how you web designers browse sites .. it only matters how the target clients of the site will / do browse them ..
An issue I think should be added is size of clickable navigation elements
.. assuming they are text based and are allowed to resize with other text this issue can be reduced I think but the difference in the physical size of a pixel (in actual mm or Inches) between the largest screen res and smallest seems to be getting greater which means the challenge is also increasing. Acrobat documents resize all elements which is great for their applications but html does not.
For those editing images and wanting good results, try optimising an image in a 1600x screen then looking at the output file in 640x480 I guarantee it wont look as clean ..
With tables there is a * identifier to convey this....
I thought possibly telling the <nav div> to use 100% width, but this seems to only tell it to use 100% + 150 px.
Do I use absolute? relative?
Any insight would be greatly appreciated.
You can adapt that layout very well to what you need ;)
Nick
