Stylesheets - noob - starting with the overall container layout

Author

noob - starting with the overall container layout - fluid columns

hansBKK

2007-07-06, 3:50 am

I am learning, so please be gentle with me. And unfortunately I don't
have an available web location to post examples, doing everything
locally at present. Suggestions for a free "clean" example posting
location would be welcome; or should I just post example file contents
here with my questions?

I would like to use CSS-only coding as much as possible in my design,
but at this stage am not willing to figure out all the cross-browser
hacks, so I am willing for now to use tables in a very limited way, e.g.
to keep the blocks in my content columns from jumping around.

90% of the visitors to our site use IE, as does all my employer's
management, but I still plan to design primarily to standards, tweaking
the presentation aspects in Firefox and only adapting for IE as
necessary for basic presentation and functionality (at least as little
tweaking as my bosses will stand for).

OK, on to my actual questions, brought on because of IE's lack of
support for min/max width:

I would like to be able to create a fluid page layout, but not
completely fill up the viewport; I'd like a bit of background showing
all around a coherent box with a border containing all the other page
components.

There will be a three-column area between the header and footer -
navigation in the left sidebar, content in the middle and extras in the
right side-bar.

I want to size the sidebars with a "fixed" width, but I believe I should
use "em" so if the visitor re-sizes the text they will expand
proportionally - good idea?

The middle content area should be fluid when the visitor reduces the
width of their viewport, (and here's the meat of my question) but only
to a point, I want a minimum and maximum width for this middle column
without having to get into advanced CSS hacking.

Minimum because I want to stop it collapsing before the design falls
apart - do I need to use a spacer gif for this? (yuck) This minimum size
will be set so that if a visitor only has an 800px viewport (with
default browser settings), just a little bit of the right column will
show; I just want them to know it's there and then scroll right if they
want to check it out - non-essential "featured content" teasers, who's
logged in, recent posts, popular articles, etc.

On the other hand, when the visitor has an enormously wide hi-res screen
I don't want to end up with my content paragraphs all ending up as one
long line - in other words, the middle column should not expand past a
certain point. I'm thinking maybe an invisible "meta" container
enclosing my "real" container that serves as an outside horizontal
boundary beyond which the visible page will not expand.

Sorry this was so long-winded, I'll stop now.

Obviously my overall question is "how do I accomplish this" - I'm not
expecting finished code, but general recommendations and/or links to
example pages that accomplish this (without bizarre CSS tricks) would be
greatly appreciated.

Andrew Gillett

2007-07-06, 3:50 am

hansBKK wrote:
> ... Suggestions for a free "clean" example posting
> location would be welcome ...

I find pages.google.com quite good for this kind of thing. You can ignore their "Page Creator" program and just upload your html and css files. Sorry I can't help much with your actual questions...

Andrew

hansBKK

2007-07-06, 3:50 am

Andrew Gillett wrote:
> hansBKK wrote:
>
> I find pages.google.com quite good for this kind of thing. You can
> ignore their "Page Creator" program and just upload your html and css
> files. Sorry I can't help much with your actual questions...

Not at all Andrew, that was one of my "actual" questions <g>

Very helpful thanks; I'll check it out.

In my initial playing around this looks like one of those things that
may be much easier using table-based layout - I was prepared to have a
single-row table containing my content columns within an internal div,
but having one structuring my whole page is just so blechh - sigh. . .

hansBKK

2007-07-06, 6:16 am

hansBKK wrote:
> I would like to be able to create a fluid page layout, but not
> completely fill up the viewport; I'd like a bit of background showing
> all around a coherent box with a border containing all the other page
> components.
>
> There will be a three-column area between the header and footer -
> navigation in the left sidebar, content in the middle and extras in the
> right side-bar.
>
> I want to size the sidebars with a "fixed" width, but I believe I should
> use "em" so if the visitor re-sizes the text they will expand
> proportionally - good idea?
>
> The middle content area should be fluid when the visitor reduces the
> width of their viewport, (and here's the meat of my question) but only
> to a point, I want a minimum and maximum width for this middle column
> without having to get into advanced CSS hacking.
>
> Minimum because I want to stop it collapsing before the design falls
> apart - do I need to use a spacer gif for this? (yuck) This minimum size
> will be set so that if a visitor only has an 800px viewport (with
> default browser settings), just a little bit of the right column will
> show; I just want them to know it's there and then scroll right if they
> want to check it out - non-essential "featured content" teasers, who's
> logged in, recent posts, popular articles, etc.
>
> On the other hand, when the visitor has an enormously wide hi-res screen
> I don't want to end up with my content paragraphs all ending up as one
> long line - in other words, the middle column should not expand past a
> certain point. I'm thinking maybe an invisible "meta" container
> enclosing my "real" container that serves as an outside horizontal
> boundary beyond which the visible page will not expand.

OK, I've uploaded "version .01" of my html/css file here:

http://hansbkk.googlepages.com/layout00a01.html

I've noticed a couple of bizarre (to me) cross-browser issues already:

In Firefox, the right side of the div #block-shb-0 is overflowing its
containing div #logo, as is #primary within #menu.

No such problem with IE

However in IE the right-hand side of #content-container isn't lining up
with #menu and #logo above - no such problem in Firefox.

Side question - anyone know of a Firebug equivalent for IE6?

Christian Kirsch

2007-07-06, 6:16 am

Am 06.07.2007 10:04 schrieb hansBKK:

> Side question - anyone know of a Firebug equivalent for IE6?

Not really. There is, I think, one commercial product. And you can use
the "script debugger" that is part of one of the older MS office
packets. At least it stops at the exact line of javascript code that
IE findes offending.

In addition there's some kind of toolbar for IE 7 from MS (not sure
about IE6), but that's a far cry from Firebug.

Google should help.
--
Christian

Wes Groleau

2007-07-06, 6:19 pm

As one noob to another, perhaps you should start with a free borrowed
design that is not too complicated.

I downloaded and installed the Nucleus CMS [http://www.nucleuscms.org]
(tried a couple of other blogging/CMS tools, but this was simpler.
My modifications of the default "skin" are at http://Lang-Learn.us/
and their website offers a large number of skins.

http://www.freecsstemplates.org offers many non-complex layouts
at no charge (Creative Commons)

http://www.alistapart.com offers a lot of web design advice, with
samples and how-tos. (But I will admit that I'm trying to use an
idea from there now and it's not going smoothly.)

Another simple design you're welcome to "save source" and modify
is http://www.NorthwestAllenTrails.org

--
Wes Groleau

Guidelines for judging others:

1. Don't attribute to malice that which
can be adequately explained by stupidity.

2. Don't attribute to stupidity that which
can be adequately explained by ignorance.

3. Don't attribute to ignorance that which
can be adequately explained by misunderstanding.

Ben C

2007-07-06, 6:19 pm

On 2007-07-06, hansBKK <aww01.100.hansbkk@spamgourmet.com> wrote:
[...]
> http://hansbkk.googlepages.com/layout00a01.html
>
> I've noticed a couple of bizarre (to me) cross-browser issues already:
>
> In Firefox, the right side of the div #block-shb-0 is overflowing its
> containing div #logo, as is #primary within #menu.

You've given it width: 100%, which makes its content area 100% the width
of its container. Add its padding, borders and margins, and it's a
little bit wider.

> No such problem with IE

I'm surprised IE's box model is still that badly wrong from the point of
view of the CSS specification. Are you talking about IE6?

Wes Groleau

2007-07-06, 6:19 pm

Ben C wrote:
> You've given it width: 100%, which makes its content area 100% the width
> of its container. Add its padding, borders and margins, and it's a
> little bit wider.

I've run into browsers that thought 100% meant the width of the screen
no matter what the window width was. :-)

--
Wes Groleau

A UNIX signature isn't a return address, it's the ASCII equivalent
of a black velvet clown painting. It's a rectangle of carets
surrounding a quote from a literary giant of weeniedom like
Heinlein or Dr. Who.
-- Chris Maeda

Ha, ha, Dr. ..... Who's Chris Maeda?
-- Wes Groleau

Ben C

2007-07-06, 10:16 pm

On 2007-07-06, Wes Groleau <groleau+news@freeshell.org> wrote:
> Ben C wrote:
>
> I've run into browsers that thought 100% meant the width of the screen
> no matter what the window width was. :-)

It does sometimes mean "width of the viewport" since the top-level
containing block is the viewport.

dorayme

2007-07-07, 3:19 am

In article <f6kt2u$rus$1@aioe.org>,
hansBKK <aww01.100.hansbkk@spamgourmet.com> wrote:

> OK, I've uploaded "version .01" of my html/css file here:
>
> http://hansbkk.googlepages.com/layout00a01.html

Some misc remarks:

This is a bad start:

body {

....
font-size: .8em;
....
}

Either simply remove it or use font-size: 100%;

You can specify different font sizes later if you must.

Next, no point in you using <!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional..., use 4.01 Strict.

Get rid of all the javascript for the moment till you sort out
your problems.

In your css, you can use shorthand like

border: 2px solid #000;

instead of 3 separate instructions every time.

Get rid of the "meta container". this is not needed for the sort
of design you would like. Get rid of the sub footer because it is
too silly. A footer is a footer and that is the end of the
matter. <g>

Get rid of sidebar left and right completely. Let the magic of
tables do the work for you. You want the 3 col table to span the
big container that you want a nice border around and canvas
sowing. Fine. Give the container a bit of top margin. Your footer
will ensure it needs no special bottom margin. Give the conatiner
aut side widths and a width of about 90% but a max-width of say
1400px, and leave it at that. Don't fuss. let your 3col table
have a width of 100% (of the main container) and leave the specs
for widths of cells alone. Instead, just be sensible about what
you pout in the side bars. A list of navigation links that are
sensibly short is fine and won't take up width space
unnecessarily. leave the width. The width of the left cell will
take carew of itself. Ditto the other 2 cells. The main middle
one will simply have content and a goodly bit of it so it will
take up the lions share mostly anyway. Put a bit of real content,
like a few paras of text in the middle cell and forget all about
all the stuff you are doing and you will see what i mean.

Sorry, but this sort of thing:

<div class="block block-block" id="block-block-5">

is plain crazy confusing. Simplify all. In fact get rid of nearly
all your ids and classes and html.

(I was down to just css and all was looking simpler and better
already:

body {margin: 0;padding: 0;}

#container {
margin: auto;
border: 3px solid black;
padding: 5px;
width: 90%;
max-width:1400px;
}

#logo, #menu, #content-container, #footer {
border: 2px solid #000;
margin: 5px;
padding: 5px;
}

table {width:100%;}

td {border: 1px dotted #000;}

)

--
dorayme

Wes Groleau

2007-07-07, 3:19 am

Ben C wrote:
> On 2007-07-06, Wes Groleau <groleau+news@freeshell.org> wrote:
>
> It does sometimes mean "width of the viewport" since the top-level
> containing block is the viewport.

Wider than the browser window? Makes no sense.
I thought CSS was invented by smart guys.

The one I was talking about was an older version of Netscape.
Tables specified at 100% were the width of the screen. Make
the browser full-screen and you still have to scroll the width
of the frame and scrollbar.

--
Wes Groleau
"Ideas are more powerful than guns,
We would not let our enemies have guns;
why should we let them have ideas?"
-- Jozef Stalin

Ben C

2007-07-07, 6:16 am

On 2007-07-07, Wes Groleau <groleau+news@freeshell.org> wrote:
> Ben C wrote:
>
> Wider than the browser window? Makes no sense.
[...]
> The one I was talking about was an older version of Netscape.
> Tables specified at 100% were the width of the screen. Make
> the browser full-screen and you still have to scroll the width
> of the frame and scrollbar.

I'm a bit confused now.

The browser window is the viewport, and that's all the browser knows
about. Surely it has no idea how big your monitor is.

Width: 100% often means set the width to the width of the viewport. If
the element has horizontal padding, borders or margins, you will get
scrollbars, no matter how large you make the viewport.

But if I understand right, you're saying a table at 100% in this version
of Netscape meant "the size of the monitor". So if the viewport was
quite small, I had to scroll a lot, and if it was maximized, only a bit?
In other words the table was sized with respect to the monitor itself,
not with respect to the browser window?

Wes Groleau

2007-07-07, 6:20 pm

Ben C wrote:
> The browser window is the viewport, and that's all the browser knows
> about. Surely it has no idea how big your monitor is.

I would think most windowing systems would have a screen-size
function in their API. It was obvious that Netscape had some
way of finding out.

> Width: 100% often means set the width to the width of the viewport. If

That's what it should have meant.

> the element has horizontal padding, borders or margins, you will get
> scrollbars, no matter how large you make the viewport.

But I was referring to the browser's scrollbars.

> But if I understand right, you're saying a table at 100% in this version
> of Netscape meant "the size of the monitor". So if the viewport was
> quite small, I had to scroll a lot, and if it was maximized, only a bit?
> In other words the table was sized with respect to the monitor itself,
> not with respect to the browser window?

Exactly. A royal pain, as in one case, the table was in my own website,
which had both width and margins on the body to keep the text column to
a readable width. But when I put in a table intended to be "100%" of
its container, Netscape put the left edge on the margin, and put the
other edge off the screen.

Same version of Netscape used _content_semantics_ for CSS inheritance:
Instead of H1, H2, H3, etc. inheriting from the body (or other
container), H2 inherited from the H1 that preceded it in the HTML.

To get around that, I had to list every element that I might use,
including BODY and then specify almost everything for all of them.

And then list them again for variations.

But that was many years ago, and I doubt many instances of that
version are still in use. I know the stylesheet that conquered it
is still in use, though I am working now on moving that content to
a newer design.

--
Wes Groleau

Trying to be happy is like trying to build a machine for which
the only specification is that it should run noiselessly.
-- unknown

Bergamot

2007-07-07, 6:20 pm

Wes Groleau wrote:
>
> Same version of Netscape used _content_semantics_ for CSS inheritance...
>
> But that was many years ago, and I doubt many instances of that
> version are still in use.

It's irrelevant now, anyway. Those old versions of NS have been dead and
buried for a long time. Even if someone out there is still using such an
antique browser, you can bet money they have a lot more problems than
your little web site.

--
Berg

Jonathan N. Little

2007-07-07, 6:20 pm

Ben C wrote:
> On 2007-07-07, Wes Groleau <groleau+news@freeshell.org> wrote:
> [...]
>
> I'm a bit confused now.
>
> The browser window is the viewport, and that's all the browser knows
> about. Surely it has no idea how big your monitor is.

Well actually it does via the 'screen' object:

<script type="text/javascript">

var buf='<p>The monitor width=' + screen.width;
buf+=' and height=' + screen.height + '</p>';

document.write(buf);

</script>

But when you made an element's width or height 100% the largest value
would be with respect to the viewport. If you wanted the monitor width
or height you had to use JavaScript to resize to the screen screen.width
& screen.height values. Many annoying vintage 90's websites resize the
browser window to dominate the visitor's desktop.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Wes Groleau

2007-07-07, 10:15 pm

Jonathan N. Little wrote:
> But when you made an element's width or height 100% the largest value
> would be with respect to the viewport. If you wanted the monitor width
> or height you had to use JavaScript to resize to the screen screen.width

I had no Javsascript and I did not want the monitor width.
It was plain and simple bugs in the browser. But it's gone
now anyway.

--
Wes Groleau

Even if you do learn to speak correct English,
whom are you going to speak it to?
-- Clarence Darrow

Jonathan N. Little

2007-07-08, 3:15 am

Wes Groleau wrote:
> Jonathan N. Little wrote:
>
> I had no Javsascript and I did not want the monitor width.
> It was plain and simple bugs in the browser. But it's gone
> now anyway.
>

My comments where in response to Ben's statement that "The browser
window is the viewport, and that's all the browser knows about. Surely
it has no idea how big your monitor is." which is not true because the
browser had the "screen" object which contained the display's pixel
dimensions.

What your situation was, we have no idea. You posted no direct
information other than

<paraphrase>

I have a problem with something I wrote...its the browsers fault...solved

</paraphrase>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

hansBKK

2007-07-12, 3:16 am

I know I'm top-posting, but please bear with me for just a moment. Also,
is it OK to reply to multiple people with one message? Replies to Ben C
and Wes Groleau follow the main one to dorayme below, delimited with a
------------------

I plan to try a few different ways to emulate min-max compliance in IE,
but wanted to get feedback on the layout elements of my core CSS-based
design first. I've posted a new (and much simplified) version of my
prototype here:

http://hansbkk.googlepages.com/

Just click on "version .02"; for people seeing this post out of context
the background information, what I'm trying to accomplish and a link to
the complete thread via gg are all available there, hence my presumption
that this bit of top-posting isn't too eeevil.

Thanks to all in advance.

OK back to our regularly scheduled discussion on "version .01"

dorayme wrote:

> body {
> font-size: .8em;
> Either simply remove it or use font-size: 100%;
> You can specify different font sizes later if you must.

> use 4.01 Strict.

> Get rid of all the javascript for the moment till you sort out
> your problems.

> Get rid of the sub footer because it is
> too silly. A footer is a footer and that is the end of the
> matter. <g>

OK to all

> In your css, you can use shorthand like border: 2px solid #000;

Thanks, but I plan to have all my color-related information grouped
together in my production version, so I'm using the separate properties
to make it easier to break them out later.

> Get rid of the "meta container". this is not needed for the sort
> of design you would like.

Any divs I end up not needing I'll take out of the final, but I've found
it easier to experiment by having two wrappers - I'm not necessarily
using them for layout, although one "IE min-max" workaround does require
it (to be discussed later).

> Get rid of sidebar left and right completely. Let the magic of
> tables do the work for you.

I've decided to try to do a CSS-only layout to start with, mostly for my
learning process but also to satisfy the now-deeply-implanted
anti-table-designs indoctrination I've absorbed.

I will do a hybrid (minimal table) version for comparison's sake, and
may well end up going that route in production. Thanks for your advice
on laying that out.

> canvas sowing
What does this mean?

> Don't fuss.
Sorry, my personality makes that impossible <g>

> have a width of 100% (of the main container) and leave the specs
> for widths of cells alone. Instead, just be sensible about what
> you put in the side bars.

This will end up being driven by a CMS, so I won't have complete control
over content except for editing after the fact. I need to make the
design as bulletproof as possible.

> Sorry, but this sort of thing:
> <div class="block block-block" id="block-block-5">
> is plain crazy confusing. Simplify all.

This kind of stuff gets generated by the CMS, but I've taken it out of
my prototyping for now to make it easier to scan.

> #container {
> max-width:1400px;
> }

I'm currently looking at ways to get IE to behave - suggestions?

------------------

Ben C wrote:
>
> I'm surprised IE's box model is still that badly wrong from the point of
> view of the CSS specification. Are you talking about IE6?

Yes, my organisation has no current plans to use IE7, and only a very
small group of our outside visitors do, so I'm ignoring it for the
moment until I have time to experiment with the "multiple standalone
IE's" solutions out there.

------------------

Wes Groleau wrote:
> As one noob to another, perhaps you should start with a free borrowed
> design that is not too complicated.

Thanks Wes, I've been taking a few different designs apart, but I want
to build up my own from the ground up using what I learn from them. I'm
trying to make sure there isn't anything in my design I don't
understand, which is why I'm starting out just isolating out the overall
"container layout" issues.

> http://www.freecsstemplates.org offers many non-complex layouts
> at no charge (Creative Commons)

Thanks, looks like some great stuff there, others' suggestions and
pointers welcome as well.

dorayme

2007-07-12, 10:18 pm

In article <f74g3v$e98$1@aioe.org>,
hansBKK <aww01.100.hansbkk@spamgourmet.com> wrote:

> dorayme wrote:
>
> What does this mean?
>
A typo, sorry: "canvas showing" (you mentioned something that
suggested you wanted the look of having navigation and content
boxes outside of which is a background showing).

>
> I'm currently looking at ways to get IE to behave - suggestions?
>
Regarding max-width, IE 7 supports this. As for less than 7, in
the post I was replying to where we were considering n col table
layout, I would say not to worry, IE less than 7 will still see a
perfectly wholesome version without max width, there being few
people with huge browser widths and IE less than 7 and fewer by
the day.

--
dorayme