Help me understand Box Model and CSS

Can someone explain how to start using CSS for layout? For example I used to
use "Tables". I could visualize a table and the columns and cells. If I wanted
a banner image at the top of the page I would just create a table and load my
image into it.

Now I understand I need to rethink everything and use CSS to design my web
page, but I can't visualize it the same with CSS as tables. How or where do I
start? I have a manual and they talk about "the box model" for CSS. Can this be
used like a table? If I could just visualize this, then I could make some
headway. Do any of you have any tips or methods that have helped you figure out
CSS layout?

Thanks

I have a manual and they talk about "the box model" for CSS. Can this be
used like a table?

CSS is about the opposite of Tables in terms of how to 'visualize' the
layout.

With tables, you make the lay out, then add the HTML and images inside that.

With CSS, you create the HMTL. Then you re-arrange it and add the images
with CSS.

The box model describes the concept of various css attributes:

http://redmelon.net/tstme/box_model/

The box model is not actually used to layout a page.

The reason to understand it is that you need to understand the various
attributes it talks about, as well as understand how IE <=6 screwed it up
(so you have to accomodate IE's broken box model at times)

Do any of you have any tips or methods that have helped you figure out
CSS layout?

If you're just starting, I'd work with an existing page layout built in CSS.
If you know you want, for instance, a 3-column layout with a footer, google
'css 3-column layout' to find some sample CSS files to work off of.

-Darrel

Here is a very basic CSS2 centered page layout, with two floated boxes which
could be used as columns.
http://alt-web.com/CSS2-Centered-Page.html


--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com


"Comp. 792" <webforumsuser (AT) macromedia (DOT) com> wrote

Can someone explain how to start using CSS for layout? For example I used
to
use "Tables". I could visualize a table and the columns and cells. If I
wanted
a banner image at the top of the page I would just create a table and load
my
image into it.

Now I understand I need to rethink everything and use CSS to design my
web
page, but I can't visualize it the same with CSS as tables. How or where
do I
start? I have a manual and they talk about "the box model" for CSS. Can
this be
used like a table? If I could just visualize this, then I could make some
headway. Do any of you have any tips or methods that have helped you
figure out
CSS layout?

Thanks

[q]Originally posted by: Newsgroup User
CSS is about the opposite of Tables in terms of how to 'visualize' the
layout.
With tables, you make the lay out, then add the HTML and images inside that.
With CSS, you create the HMTL. Then you re-arrange it and add the images
with CSS.
-Darrel
[/q]

Thanks Darrel, you said you create the HTML , then rearrange it and add the
images. Could you explain? So do I just create a new page and then type my text
in the screen and then add "div" tags? How do I add an image? It just seems
like there's no real rhyme or reason as to how to start. Here's what I want to
do:

http://www3.telus.net/~jessum/

For example before I created a table and then placed a banner image inside of
it and made the table. Easy!
How would I recreate this site using CSS?

Thanks

Looking at your example page here is what I see from a CSS/HTML perspective:
1. A wrapper container, usually a div, that contains the whole page. I
center that wrapper (Probably assigned an ID of wrapper) by making the left
& right margins "auto"
2. Within that wrapper I have a header div (#header) containing the top or
header image. I make the image itself the background for #header and assign
explicit width & height in pixels. That way I can make "My Website" actual
text, tag it with h1 and position it using top & left margins.
3. I have a #nav div with and explicit width and float it left. I give it a
right margin to push the "This is my new..." away.
4. "This is my new website..." is in a 3rd div (#content) also floated left
but I don't give it a width, allowing it to fill all the space to the right
of #nav.
5. Finally, I have another div (#footer) with no float but a clear:all. This
gives me a place for the full width background image to achieve the rounded
corners.

My explanation is not pixel perfect and may be off a bit but should give you
a starting point.

--

Walt


"Comp. 792" <webforumsuser (AT) macromedia (DOT) com> wrote

[q]Originally posted by: Newsgroup User
CSS is about the opposite of Tables in terms of how to 'visualize' the
layout.
With tables, you make the lay out, then add the HTML and images inside
that.
With CSS, you create the HMTL. Then you re-arrange it and add the images
with CSS.
-Darrel
[/q]

Thanks Darrel, you said you create the HTML , then rearrange it and add
the
images. Could you explain? So do I just create a new page and then type my
text
in the screen and then add "div" tags? How do I add an image? It just
seems
like there's no real rhyme or reason as to how to start. Here's what I
want to
do:

http://www3.telus.net/~jessum/

For example before I created a table and then placed a banner image inside
of
it and made the table. Easy!
How would I recreate this site using CSS?

Thanks