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
I have a flash banner on top.....
which must line up EXACTLY with the side nav bar......
I would like the top 'frame' height to be static, but the
width to be variable....
I would like the side nav bar width to be static, and the
height to be variable
and finally....the main conent 'frame' to be variable relative to the other two 'frames' and subject to browser size
I use 'frames' though I really mean divs...
Am I explaining this okay?
Can anyone provide a little insight?
I get the top two 'frames' done okay, but then
there is no way to do the final 'frame' that I am aware of, other than by doing absolute positioning from left and top, then doing height width as a %....but this doesn't quite cut it....
Still boggled here.....
Why not post what you have, in very simplified context and we'll all have a look?
Better off making a new thread by the way as this is going off on a bit of a tangent now ;)
Nick
Got a couple of sites I can go visit with my ancient NS 4.79, on a
turtle rural connection @ 40,000 bps to see what all the fuss is
about? :-}
Hooroo
JP
How about dynamic pages and liquid layout? I have stayed with fixed width because my pages are all dynamically generated. I get some funky looking pages in liquid mode.
Anybody doing dynamically generated liquid pages?
Nick
I seriously doubt it
I would think that the liquid sites would be more volatile as they are rendered from different operating systems/browsers.....
This thread has inspired me to go back to the liquid drawing board!
Here are some points you might like to consider:
Nick
<added> to clarify, I've never had layout trouble that seemed to have anything to do with the dynamic generation aspect of things. I'm weaning myself off layout tables, and that still sometimes confuses me, though once things are right it makes things come out looking better. Thanks to all the folks on here who have helped me with those questions.</added>
Firstly.....one site I almost have converted.....When I do the layout (using nick's handy dandy simplified 3 col layout).....initially the template looks very good. When I apply the template to all my pages the 'content div' does not space (padding?) to the left....i.e. it overlaps the left column nav bar. I can't quite understand this, and I have too many pages to not do this with a template.....any help here?
Secondly....On my other site I am trying to set up the divs with an 'overflow:auto' so that only the content div scrolls in a somewhat 'frames-esque' fashion, and I can't get the right and bottom 'content frame' scrollbars to line up flush.
Lastly....On my pages I would like to find a good way to keep my 'footers' that I have on every page....how do you do this effectively with css? SSI? I've never done them before, but from what I've read this seems like probably the best way. Any help here would be appreciated as well.
If I work these out, I'll be sure to send or post the code, or the site links for those interested.
Here's a couple of popular sites that talk about liquid layout:
[glish.com ]
[alistapart.com ]
But to be honest, you'll do very well if you just use Nick_W's code from msg #53 above!
Thanks for the links ... look good.
"liquid layout" = CSS to homogenise browser/screen
resolution? Sigh ... :#-}
Once I've updated all my sites to basic CSS, I'll be
looking at my stats carefully to see which I can start
mucking around on with "liquid layout" based on browser
type.
Hooroo
JP
I'm still looking for some nice looking fluid layouts - many have been suggested but none of them look great visually.
They all look VERY similar, very plain and very plain text chucked in a couple columns.
There has imho to be an optimal width for the site, other widths will then look different, perhaps less than optimal... depends..
I design sites aiming just below the 800 x 600 mark, this way users with small rez screens get a "full screen" users with high rez get some space which looks fine till you get really high screen rez.
Even if I used fluid design I would still get the same problem up to say 1024 it would look fine - once you get above that it all goes a bit woozy.
So whats the point?
Personally I never browse with my window greater than about 1024 because its easier to read text that way, I don't want to feel like I'm at Wimbledon!
Also, if you use wordwrap then that is'nt fluid - its fixed.
Also, if you use wordwrap then that is'nt fluid - its fixed
No, the text still is resizeable. The best 'fluid layouts' are a mixture of fixed and fluid elements.
Going 100% fluid is kind of like doing without layout all together. Although it is quite acheivable...
Nick
I am determined to get my sites swapped over to style sheets, but still havin' some issues.
I know for me the code
padding-left: 125px;
helped a lot, as I never realized that you don't HAVE to set a fixed height and width nor top & left positioning....can you tell me how a div defaults if those properties aren't assigned?
Also....I think in my case....(as I mentioned)...and probably many others....that a frames type of layout would be most useful and beneficial......does anyone know any code similiar to this that could be used as a starting point?
[bluerobot.com...]
Frames like: Can't be done. Support is way to low.
Nick
#left {position: absolute; left: 0%; width: 20%; }
#content {
position: relative;
left: 20%;
width: 60%;
}
#right {
position: absolute;
left: 80%;
top: 122px;
width: auto;
}
I tweaked a few things, so that is not exactly how his was, but the basic idea, the way I understand it, is that "left" and "right" are position: absolute, while "content" is set to: position: relative.
How well does the code in msg #53 work in NN4.x?
It doesn't ;) You've gotta be prepared to drop NN4 if you wanna run that layout.
Saying that, I find the clean code, nice look and very small filesize is worth the 1% of my users that get an un-styled page.
Might not do it for a client site but for me I'm all : "sod 'em!"
Nick
I just got the code to work and applied it to all
150+ pages on the site.....
It works beautifully, and I externally linked the .js and .css that was formally in the <head> of my pages.....
It bumped the 'meat' of my pages up quite a bit, and I think it should improve the download time quite a bit.
Anyhow....many thank you's
Nick
