for mscir....others looking for help on desiging basic layout with css

[Richard]

www.1-large-world.com/samples/sample1.html

This shows my concept of using a container box for your entire page, then
including a sidebar, header, body, and footer.
Which is the basic layout design of most simple sites.

This approach does not break, and allows for flexibility.
Need a 3 column layout? No problem.
Add another division as your container for which ever divisions you want to
seperate from the 3rd column.
Use float:left in that container.
Add your column.

www.1-large-world.com/samples/sample2.html

 

[mscir]

www.1-large-world.com/samples/sample1.html

This shows my concept of using a container box for your entire page, then
including a sidebar, header, body, and footer.
Which is the basic layout design of most simple sites.

This approach does not break, and allows for flexibility.
Need a 3 column layout? No problem.
Add another division as your container for which ever divisions you want to
seperate from the 3rd column.
Use float:left in that container.
Add your column.

www.1-large-world.com/samples/sample2.html

Thanks Richard, interesting examples. I'm just now looking at tableless
layouts, always used tables before. I played around with the values and
was wondering if you could tell me why the column with the header,
mymain and footer divs extends slightly farther down the page than the
sidebar div (about the thickness of the border line or slightly more)?

..big1 {width: 100%; height: 2000px; border: none; background:gold;}
..sidebar {width: 20%; height: 2000px; border: solid black; float:left;}
..header {width: 100%; height: 80px; border: solid green;}
..mymain {width: 100%; height: 1900px; border: solid red;}
..footer {width: 100%; height: 20px; border: solid blue;}

 

[Richard]

Thanks Richard, interesting examples. I'm just now looking at tableless
layouts, always used tables before. I played around with the values and
was wondering if you could tell me why the column with the header,
mymain and footer divs extends slightly farther down the page than the
sidebar div (about the thickness of the border line or slightly more)?

.big1 {width: 100%; height: 2000px; border: none; background:gold;}
.sidebar {width: 20%; height: 2000px; border: solid black; float:left;}
.header {width: 100%; height: 80px; border: solid green;}
.mymain {width: 100%; height: 1900px; border: solid red;}
.footer {width: 100%; height: 20px; border: solid blue;}

..big1 should be the only one as a 100% width.
All others should be slightly less.
Same for the height if used.
This allows for the borders which are always there but not visible unless
you define a color other than the body of the division.
So with your 3 totals, you probably have something like 2,006 pixels instead
of 2,000.
Instead of 1900, use say like 1890 or so.
Then you'll have a little gap at the bottom instead of over run.

 

[kchayka]

Thanks Richard, interesting examples.

Please, don't even consider using any example Richard comes up with. He
doesn't have a grasp of even basic CSS priciples, so resorts to kludges
and hacks in a futile attempt to make something work. It's crap.

I'm just now looking at tableless
layouts, always used tables before.

You would do well to study better examples. Here is a place to start:
<URL:http://nemesis1.f2o.org/templates.php>

 

[Richard]

Please, don't even consider using any example Richard comes up with. He
doesn't have a grasp of even basic CSS priciples, so resorts to kludges
and hacks in a futile attempt to make something work. It's crap.

The two items I show here are valid examples.
They are based upon the same coding found at many of the online well known
tutorials.
What specifically does not agree with you?

 

[mscir]

Please, don't even consider using any example Richard comes up with. He
doesn't have a grasp of even basic CSS priciples, so resorts to kludges
and hacks in a futile attempt to make something work. It's crap.


You would do well to study better examples. Here is a place to start:
<URL:http://nemesis1.f2o.org/templates.php>

Very impressive site!

Thanks,
Mike

 

[kchayka]

The two items I show here are valid examples.

Valid code doesn't mean it is _good_ code. I can't remember anything
you've ever posted that was a _good_ example.

What specifically does not agree with you?

Start at "height:3000px" and go from there.

 

[informant]

The two items I show here are valid examples.
They are based upon the same coding found at many of the online well known
tutorials.
What specifically does not agree with you?

Have you ever understood when they told you, Bullis?


Path:
sn-us!sn-xit-05!sn-xit-09!supernews.com!news.maxwell.syr.edu!pln-e!spln!dex!
extra.newsguy.com!newsp.newsguy.com!news4
From: "Richard" <[email protected]>
Newsgroups: alt.html
Subject: Re: for mscir....others looking for help on desiging basic layout
with css
Date: Thu, 8 Apr 2004 10:18:28 -0500
Organization: http://newsguy.com
Lines: 21
Message-ID: <[email protected]>
References: <[email protected]>
<[email protected]>
<[email protected]>
NNTP-Posting-Host: p-451.newsdawg.com
X-Priority: 3
X-MSMail-Priority: Normal
X-Newsreader: Microsoft Outlook Express 6.00.2800.1106
X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2800.1106
Xref: sn-us alt.html:456378

 

[Richard]

Please, don't even consider using any example Richard comes up with. He
doesn't have a grasp of even basic CSS priciples, so resorts to kludges
and hacks in a futile attempt to make something work. It's crap.

You would do well to study better examples. Here is a place to start:
<URL:http://nemesis1.f2o.org/templates.php>

I checked out a few of the examples and every one broke down in IE when
screen size was not at max.
That is the purpose of the main container. So the the internal divisions do
not break down.
http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM_B.mhtml
This one though, is the same basic layout I use and it does not break down.