Re: [css-d] How to construct a 3 Column layout to a centered Page Layout

[Kevin J Pledger]

Hi Georg,

Thank you very much for your reply. I guess its more experimentation along
with frustration till eventually it will fall into place.

I have read your own website extensively and come away with a sore head,
just seeing how much you can do with CSS.

Kind Regards,

Kevin J. Pledger

-Original Message-
From: Gunlaug Sørtun [mailto:[EMAIL PROTECTED] 
Sent: Sunday, January 14, 2007 17:53 PM
To: Kevin J Pledger
Cc: Css-D Lists
Subject: Re: [css-d] How to construct a 3 Column layout to a centered Page
Layout

Kevin J Pledger wrote:
> I have read extensively articles, looked at code and looked at the 
> websites others are building who are on this list.  I am used to doing 
> everything in tables, but CSS looks more interesting but so much to 
> learn for a newbie.

CSS has a pretty steep learning curve compared to HTML tables.

> Guess I am trying to walk before I crawl in the CSS world.

Guess that's a natural human reaction. Happens all the time :-)

It is impossible to make  look like
 without changing both the CSS and
source-code radically. Two different methods are used.

For a start: the former is based on 'absolute positioning' and the the
latter is based on 'float'. 'A:P' layout-methods pretty much excludes
'float' as layout-methods in such a case.

> How can I using the present code specify a minimum height for the left 
> / right content area's.

The minimum height would be 100% of the tallest column, for all columns.
That's easy with CSS in all browsers that supports 'CSS tables'...
<http://www.w3.org/TR/CSS21/tables.html>
...but someone forgot to tell MSIE about that part of CSS - so we have to
fake it one way or another...
<http://www.gunlaug.no/tos/moa_11.html>
<http://www.positioniseverything.net/articles/onetruelayout/>
<http://www.alistapart.com/articles/fauxcolumns/>

> I still don't quite understand the difference between wrapper / 
> container and the use of float in the code. I try to experiment and 
> get frustrated.

The built-in flexibility/complexity of CSS based layouts compared to 'HTML
table', may be frustrating. HTML tables behave and appears one way
- with only a few variations, while CSS can make most element-combinations
behave and appear in a multitude of ways - and can also simulate HTML tables
to perfection when needed. The only real limitation with CSS design is lack
of support in browsers, where especially IE (all versions) is weak.

In  #wrapper and #container are just
IDs they've used on two different container-divs, since they style them to
do different things. That's the flexibility of CSS again.

- The 'float' property makes #wrapper expand (stretch in height) to contain
#content and the two side-floats; #navigation and #extra. That's in part how
the 'equal height columns' appearance is created in that layout.
Floats and normal in-flow elements can be contained this way, but 'absolute
positioned' elements, like you use in your page, can not.

> What would be a good book for me to go and buy to use as reference and 
> online references, besides this list.

I can't recommend any books on CSS since I haven't read any - yet.

I _can_ recommend the 'CSS 2.1' specification...
<http://www.w3.org/TR/CSS21/>
...and especially the 'Visual formatting model'...
<http://www.w3.org/TR/CSS21/visuren.html>
...since everything anyone needs to know about CSS - in order to start
designing with it, is contained there.

'Web Design References' with 'Cascading Style Sheets' and all the other
stuff, may also help...
<http://www.d.umn.edu/itss/support/Training/Online/webdesign/>

regards
Georg
--
http://www.gunlaug.no


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to construct a 3 Column layout to a centered Page Layout

[Gunlaug Sørtun]

Kevin J Pledger wrote:
> I have read extensively articles, looked at code and looked at the 
> websites others are building who are on this list.  I am used to 
> doing everything in tables, but CSS looks more interesting but so 
> much to learn for a newbie.

CSS has a pretty steep learning curve compared to HTML tables.

> Guess I am trying to walk before I crawl in the CSS world.

Guess that's a natural human reaction. Happens all the time :-)

It is impossible to make  look like
 without changing both the CSS and
source-code radically. Two different methods are used.

For a start: the former is based on 'absolute positioning' and the the
latter is based on 'float'. 'A:P' layout-methods pretty much excludes
'float' as layout-methods in such a case.

> How can I using the present code specify a minimum height for the 
> left / right content area's.

The minimum height would be 100% of the tallest column, for all columns.
That's easy with CSS in all browsers that supports 'CSS tables'...

...but someone forgot to tell MSIE about that part of CSS - so we have
to fake it one way or another...




> I still don't quite understand the difference between wrapper / 
> container and the use of float in the code. I try to experiment and 
> get frustrated.

The built-in flexibility/complexity of CSS based layouts compared to
'HTML table', may be frustrating. HTML tables behave and appears one way
- with only a few variations, while CSS can make most
element-combinations behave and appear in a multitude of ways - and can
also simulate HTML tables to perfection when needed. The only real
limitation with CSS design is lack of support in browsers, where
especially IE (all versions) is weak.

In  #wrapper and #container are
just IDs they've used on two different container-divs, since they style
them to do different things. That's the flexibility of CSS again.

- The 'float' property makes #wrapper expand (stretch in height) to
contain #content and the two side-floats; #navigation and #extra. That's
in part how the 'equal height columns' appearance is created in that layout.
Floats and normal in-flow elements can be contained this way, but
'absolute positioned' elements, like you use in your page, can not.

> What would be a good book for me to go and buy to use as reference 
> and online references, besides this list.

I can't recommend any books on CSS since I haven't read any - yet.

I _can_ recommend the 'CSS 2.1' specification...

...and especially the 'Visual formatting model'...

...since everything anyone needs to know about CSS - in order to start
designing with it, is contained there.

'Web Design References' with 'Cascading Style Sheets' and all the other
stuff, may also help...


regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to construct a 3 Column layout to a centered Page Layout

[Michael Stevens]

I've read, enjoyed, and learned from both "Head First HTML with CSS & HTML"
and "CSS Mastery". CSS Mastery assumes you know a good chunk of CSS while
the Head First book will teach you the "correct" way to code X/HTML using
CSS and gives you the "correct" usage of tables. If you already know some
HTML the Head First book is a good refresher HTML course while including the
"correct" way to use CSS.

Mike

-Original Message-
What would be a good book for me to go and buy to use as reference and
online references, besides this list.
 
Kevin

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] How to construct a 3 Column layout to a centered Page Layout

[Kevin J Pledger]

Hi All,
 
I have a page here that at present looks okay in FF 2.x / IE7 don't have
other browsers on which to check.
 
I have read extensively articles, looked at code and looked at the websites
others are building who are on this list.  I am used to doing everything in
tables, but CSS looks more interesting but so much to learn for a newbie.
Guess I am trying to walk before I crawl in the CSS world.
 
http://www.alistapart.com/
http://glish.com/css/7.asp
 
My first attempt at CSS (code copied from 7.asp, refined to what I want) is
here and have validated the CSS, the html is not strict to a tag in  but not worried about that.
 
www.oneyed.com/mt
www.oneyed.com/mt/scripts/css/mt_layout_1.css
 
The current layout I have is okay for what I want to do at present, but how
can I format this current page using CSS to look similar to this layout
(www.oneyed.com/mt/LayoutGala07.html) without breaking everything and still
using the same CSS code I have at present. 
 
How can I using the present code specify a minimum height for the left /
right content area's.
 
I still don't quite understand the difference between wrapper / container
and the use of float in the code. I try to experiment and get frustrated.
What would be a good book for me to go and buy to use as reference and
online references, besides this list.
 
Thanks in advance for any help and pointers.
 
Kind Regards,

Kevin 
 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/