CSS Positioning in FP2003

R

Robb B

I am using FP 2003, and I want a three column layout using CSS. I have it set
up (you can view the sample at www.cbcwichita.org/csspage.shtml) using CSS
now, but there's a problem. I want to have variable length pages, with the
page length (height) equal to the height of the center column. That way the
background color on each of my side columns will stretch as far down the page
as the center column text/images go. If I can set it up this way, then I can
use a dynamic web template for my page layout; otherwise I would have to
manually configure the height for each column in every page (Yikes!). Any
suggestions on how to implement variable height columns using CSS. I'm
wondering if the problem is that the "height" property is not inheritable. If
that's the problem, what can I do to fix that? If it's not, what is my
solution? Thanks for your help.
 
M

Murray

Why focus on doing it the hard way?

Make that center section a table with the left and the right column having
the background colors and the center column having the contents.
 
R

Robb B

Because I'm using the filter:alpha(opacity) property in CSS for the
background colors and shading, which, as far as I can tell, I can't do in the
tables. Is there a place to get quick-loading backgrounds with gradients like
the ones at www.cbcwichita.org/csspage.shtml? I'm open to using a table, but
I've heard the hype about how much better and faster CSS is, so I was trying
to go that route.

Thanks,
Robb
 
N

Nicholas Malone

You do this with backgrounds, although a gradient background could be tough
to get lined up.
You need to set up a "shell" div to contain everything. The header, footer,
everything is inside this shell.

margin: 0px auto; to make sure it centers in all displays.
width: 760 px; to avoid the horizontal scroll
background-image: url('images/something.jpg');

In your case, the white area (Welcome to the Internet home...) would be a
float left div that has its own background and sets the overall page length.

The right side isn't its own div. Rather, the green is something.jpg showing
through. The text blocks (date, Service Times, etc.) are then in their own
small divs floating right.

So, if you wanted three columns in three colors, you would make
something.jpg with the left and right colors, then the center div/column
would have its own background. To center that div in the shell use width:
lessthan760px; margin: 0px auto;

And, hey, learning CSS is both fun and interesting. All layout tables must
be banished! Don't give in to the dark side!

That said, download Netscape and look at your site. It needs some help. You
need a "clear" div above the footer.

clear:both; to keep the footer text below the content
font: 1px/1px monospace; to make the div only 1px high
 
S

Steve Easton

Filters and transitions are "Internet Explorer only."


--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed............
........................with a computer
 
M

Murray

IE/PC only.

--
Murray

Steve Easton said:
Filters and transitions are "Internet Explorer only."


--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed............
.......................with a computer
 
R

Robb B

Thanks for your advice. I'm working on implementing this now, and I have
created jpegs of the gradients (which work in Netscape, which I also
downloaded), so it should be cross-browser compatible. I agree about tables -
they take too long to load and are the design method of the past...

Robb
 
M

Murray

I agree about tables -
they take too long to load and are the design method of the past...

Mostly urban legend. If a table works for your design, use it. A table
itself does not take too long to download. A complex table (i.e., one
containing many nested tables and lots of col- and rowspans) leads to a page
loaded with table tags, and that can give you a heavy code load, and a long
browser render. Such tables are poorly designed.

The real truth is this. It is not necessary to use tables as a layout tool
in most cases now that CSS positioning is as well supported as it is. It is
not required that you use CSS, although doing so will usually make your
pages much lighter weight, and much easier to maintain. If you understand
HTML tables and how they work, you can use both to good advantage.
 
S

Stefan B Rusynko

While I agree with you that in the hands of a knowledgeable user, the use of CSS and absolute positioning (instead of tables) for
layout can be effectively done for most browsers
- unfortunately too many users do not take the time to learn what is the right way to do it and understand what works and why (or
why not)

That's why you will find that unless the user indicates some level of understanding of html/css and cross browser design, many of us
will recommend sticking w/ tables
- especially for beginners or WYSIWYG users




| > I agree about tables -
| > they take too long to load and are the design method of the past...
|
| Mostly urban legend. If a table works for your design, use it. A table
| itself does not take too long to download. A complex table (i.e., one
| containing many nested tables and lots of col- and rowspans) leads to a page
| loaded with table tags, and that can give you a heavy code load, and a long
| browser render. Such tables are poorly designed.
|
| The real truth is this. It is not necessary to use tables as a layout tool
| in most cases now that CSS positioning is as well supported as it is. It is
| not required that you use CSS, although doing so will usually make your
| pages much lighter weight, and much easier to maintain. If you understand
| HTML tables and how they work, you can use both to good advantage.
|
|
| --
| Murray
|
| | > Thanks for your advice. I'm working on implementing this now, and I have
| > created jpegs of the gradients (which work in Netscape, which I also
| > downloaded), so it should be cross-browser compatible. I agree about
| > tables -
| > they take too long to load and are the design method of the past...
| >
| > Robb
| >
| > "Nicholas Malone" wrote:
| >
| >> You do this with backgrounds, although a gradient background could be
| >> tough
| >> to get lined up.
| >> You need to set up a "shell" div to contain everything. The header,
| >> footer,
| >> everything is inside this shell.
| >>
| >> margin: 0px auto; to make sure it centers in all displays.
| >> width: 760 px; to avoid the horizontal scroll
| >> background-image: url('images/something.jpg');
| >>
| >> In your case, the white area (Welcome to the Internet home...) would be a
| >> float left div that has its own background and sets the overall page
| >> length.
| >>
| >> The right side isn't its own div. Rather, the green is something.jpg
| >> showing
| >> through. The text blocks (date, Service Times, etc.) are then in their
| >> own
| >> small divs floating right.
| >>
| >> So, if you wanted three columns in three colors, you would make
| >> something.jpg with the left and right colors, then the center div/column
| >> would have its own background. To center that div in the shell use
| >> width:
| >> lessthan760px; margin: 0px auto;
| >>
| >> And, hey, learning CSS is both fun and interesting. All layout tables
| >> must
| >> be banished! Don't give in to the dark side!
| >>
| >> That said, download Netscape and look at your site. It needs some help.
| >> You
| >> need a "clear" div above the footer.
| >>
| >> clear:both; to keep the footer text below the content
| >> font: 1px/1px monospace; to make the div only 1px high
| >>
| >>
| >> "Robb B" wrote:
| >>
| >> > I am using FP 2003, and I want a three column layout using CSS. I have
| >> > it set
| >> > up (you can view the sample at www.cbcwichita.org/csspage.shtml) using
| >> > CSS
| >> > now, but there's a problem. I want to have variable length pages, with
| >> > the
| >> > page length (height) equal to the height of the center column. That way
| >> > the
| >> > background color on each of my side columns will stretch as far down
| >> > the page
| >> > as the center column text/images go. If I can set it up this way, then
| >> > I can
| >> > use a dynamic web template for my page layout; otherwise I would have
| >> > to
| >> > manually configure the height for each column in every page (Yikes!).
| >> > Any
| >> > suggestions on how to implement variable height columns using CSS. I'm
| >> > wondering if the problem is that the "height" property is not
| >> > inheritable. If
| >> > that's the problem, what can I do to fix that? If it's not, what is my
| >> > solution? Thanks for your help.
|
|
 
M

Murray

Well, I never said anything other than that, did I? 8)

Use tables until you don't need to. That's what I was trying to say at
least.

Start by using CSS for your styles. As you use it, you will learn better
methods and expand your understanding.

My issue was with the specific comment I included in my post.
 
S

Stefan B Rusynko

I saw your use either comment
My general comment was aimed more at your general statement:
"It is not necessary to use tables as a layout tool in most cases now that CSS positioning is as well supported as it is."

CSS is only "supported well" if it is done correctly, and that takes some knowledge of how / why it works and doesn't work. Users
need to understand that before they go off and use it

IMHO
Just posting just corrections to poorly used CSS absolute positioning (by apparently a user that does not understand how to use CSS
correctly or is trying to do it all in the WYSIWYG), may not help the user understand that they need to learn how to do it right
before they rely on it for a site layout (who will correct it next time?)
The old proverb of "Teach a man how to fish"



| Well, I never said anything other than that, did I? 8)
|
| Use tables until you don't need to. That's what I was trying to say at
| least.
|
| Start by using CSS for your styles. As you use it, you will learn better
| methods and expand your understanding.
|
| My issue was with the specific comment I included in my post.
|
| --
| Murray
|
| | > While I agree with you that in the hands of a knowledgeable user, the use
| > of CSS and absolute positioning (instead of tables) for
| > layout can be effectively done for most browsers
| > - unfortunately too many users do not take the time to learn what is the
| > right way to do it and understand what works and why (or
| > why not)
| >
| > That's why you will find that unless the user indicates some level of
| > understanding of html/css and cross browser design, many of us
| > will recommend sticking w/ tables
| > - especially for beginners or WYSIWYG users
| >
| > --
| >
| > _____________________________________________
| > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| > "Warning - Using the F1 Key will not break anything!" (-;
| > To find the best Newsgroup for FrontPage support see:
| > http://www.net-sites.com/sitebuilder/newsgroups.asp
| > _____________________________________________
| >
| >
| > | > | > I agree about tables -
| > | > they take too long to load and are the design method of the past...
| > |
| > | Mostly urban legend. If a table works for your design, use it. A table
| > | itself does not take too long to download. A complex table (i.e., one
| > | containing many nested tables and lots of col- and rowspans) leads to a
| > page
| > | loaded with table tags, and that can give you a heavy code load, and a
| > long
| > | browser render. Such tables are poorly designed.
| > |
| > | The real truth is this. It is not necessary to use tables as a layout
| > tool
| > | in most cases now that CSS positioning is as well supported as it is.
| > It is
| > | not required that you use CSS, although doing so will usually make your
| > | pages much lighter weight, and much easier to maintain. If you
| > understand
| > | HTML tables and how they work, you can use both to good advantage.
| > |
| > |
| > | --
| > | Murray
| > |
| > | | > | > Thanks for your advice. I'm working on implementing this now, and I
| > have
| > | > created jpegs of the gradients (which work in Netscape, which I also
| > | > downloaded), so it should be cross-browser compatible. I agree about
| > | > tables -
| > | > they take too long to load and are the design method of the past...
| > | >
| > | > Robb
| > | >
| > | > "Nicholas Malone" wrote:
| > | >
| > | >> You do this with backgrounds, although a gradient background could be
| > | >> tough
| > | >> to get lined up.
| > | >> You need to set up a "shell" div to contain everything. The header,
| > | >> footer,
| > | >> everything is inside this shell.
| > | >>
| > | >> margin: 0px auto; to make sure it centers in all displays.
| > | >> width: 760 px; to avoid the horizontal scroll
| > | >> background-image: url('images/something.jpg');
| > | >>
| > | >> In your case, the white area (Welcome to the Internet home...) would
| > be a
| > | >> float left div that has its own background and sets the overall page
| > | >> length.
| > | >>
| > | >> The right side isn't its own div. Rather, the green is something.jpg
| > | >> showing
| > | >> through. The text blocks (date, Service Times, etc.) are then in
| > their
| > | >> own
| > | >> small divs floating right.
| > | >>
| > | >> So, if you wanted three columns in three colors, you would make
| > | >> something.jpg with the left and right colors, then the center
| > div/column
| > | >> would have its own background. To center that div in the shell use
| > | >> width:
| > | >> lessthan760px; margin: 0px auto;
| > | >>
| > | >> And, hey, learning CSS is both fun and interesting. All layout tables
| > | >> must
| > | >> be banished! Don't give in to the dark side!
| > | >>
| > | >> That said, download Netscape and look at your site. It needs some
| > help.
| > | >> You
| > | >> need a "clear" div above the footer.
| > | >>
| > | >> clear:both; to keep the footer text below the content
| > | >> font: 1px/1px monospace; to make the div only 1px high
| > | >>
| > | >>
| > | >> "Robb B" wrote:
| > | >>
| > | >> > I am using FP 2003, and I want a three column layout using CSS. I
| > have
| > | >> > it set
| > | >> > up (you can view the sample at www.cbcwichita.org/csspage.shtml)
| > using
| > | >> > CSS
| > | >> > now, but there's a problem. I want to have variable length pages,
| > with
| > | >> > the
| > | >> > page length (height) equal to the height of the center column. That
| > way
| > | >> > the
| > | >> > background color on each of my side columns will stretch as far
| > down
| > | >> > the page
| > | >> > as the center column text/images go. If I can set it up this way,
| > then
| > | >> > I can
| > | >> > use a dynamic web template for my page layout; otherwise I would
| > have
| > | >> > to
| > | >> > manually configure the height for each column in every page
| > (Yikes!).
| > | >> > Any
| > | >> > suggestions on how to implement variable height columns using CSS.
| > I'm
| > | >> > wondering if the problem is that the "height" property is not
| > | >> > inheritable. If
| > | >> > that's the problem, what can I do to fix that? If it's not, what is
| > my
| > | >> > solution? Thanks for your help.
| > |
| > |
| >
| >
|
|
 
M

Murray

I could also say that tables are only supported well if done correctly, too.
How many posts a day do you see here from people with tables done
incorrectly?
that takes some knowledge of how / why it works and doesn't work. Users
need to understand that before they go off and use it

Well, you get no argument from me on this. Any tool requires that you have
some knowledge of it before you can use it well.
The old proverb of "Teach a man how to fish"

Isn't that what we are all trying to do here? 8)

--
Murray

Stefan B Rusynko said:
I saw your use either comment
My general comment was aimed more at your general statement:
"It is not necessary to use tables as a layout tool in most cases now that
CSS positioning is as well supported as it is."

CSS is only "supported well" if it is done correctly, and that takes some
knowledge of how / why it works and doesn't work. Users
need to understand that before they go off and use it

IMHO
Just posting just corrections to poorly used CSS absolute positioning (by
apparently a user that does not understand how to use CSS
correctly or is trying to do it all in the WYSIWYG), may not help the user
understand that they need to learn how to do it right
before they rely on it for a site layout (who will correct it next time?)
The old proverb of "Teach a man how to fish"



| Well, I never said anything other than that, did I? 8)
|
| Use tables until you don't need to. That's what I was trying to say at
| least.
|
| Start by using CSS for your styles. As you use it, you will learn
better
| methods and expand your understanding.
|
| My issue was with the specific comment I included in my post.
|
| --
| Murray
|
| | > While I agree with you that in the hands of a knowledgeable user, the
use
| > of CSS and absolute positioning (instead of tables) for
| > layout can be effectively done for most browsers
| > - unfortunately too many users do not take the time to learn what is
the
| > right way to do it and understand what works and why (or
| > why not)
| >
| > That's why you will find that unless the user indicates some level of
| > understanding of html/css and cross browser design, many of us
| > will recommend sticking w/ tables
| > - especially for beginners or WYSIWYG users
| >
| > --
| >
| > _____________________________________________
| > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| > "Warning - Using the F1 Key will not break anything!" (-;
| > To find the best Newsgroup for FrontPage support see:
| > http://www.net-sites.com/sitebuilder/newsgroups.asp
| > _____________________________________________
| >
| >
| > | > | > I agree about tables -
| > | > they take too long to load and are the design method of the
past...
| > |
| > | Mostly urban legend. If a table works for your design, use it. A
table
| > | itself does not take too long to download. A complex table (i.e.,
one
| > | containing many nested tables and lots of col- and rowspans) leads
to a
| > page
| > | loaded with table tags, and that can give you a heavy code load, and
a
| > long
| > | browser render. Such tables are poorly designed.
| > |
| > | The real truth is this. It is not necessary to use tables as a
layout
| > tool
| > | in most cases now that CSS positioning is as well supported as it
is.
| > It is
| > | not required that you use CSS, although doing so will usually make
your
| > | pages much lighter weight, and much easier to maintain. If you
| > understand
| > | HTML tables and how they work, you can use both to good advantage.
| > |
| > |
| > | --
| > | Murray
| > |
| > | | > | > Thanks for your advice. I'm working on implementing this now, and
I
| > have
| > | > created jpegs of the gradients (which work in Netscape, which I
also
| > | > downloaded), so it should be cross-browser compatible. I agree
about
| > | > tables -
| > | > they take too long to load and are the design method of the
past...
| > | >
| > | > Robb
| > | >
| > | > "Nicholas Malone" wrote:
| > | >
| > | >> You do this with backgrounds, although a gradient background
could be
| > | >> tough
| > | >> to get lined up.
| > | >> You need to set up a "shell" div to contain everything. The
header,
| > | >> footer,
| > | >> everything is inside this shell.
| > | >>
| > | >> margin: 0px auto; to make sure it centers in all displays.
| > | >> width: 760 px; to avoid the horizontal scroll
| > | >> background-image: url('images/something.jpg');
| > | >>
| > | >> In your case, the white area (Welcome to the Internet home...)
would
| > be a
| > | >> float left div that has its own background and sets the overall
page
| > | >> length.
| > | >>
| > | >> The right side isn't its own div. Rather, the green is
something.jpg
| > | >> showing
| > | >> through. The text blocks (date, Service Times, etc.) are then in
| > their
| > | >> own
| > | >> small divs floating right.
| > | >>
| > | >> So, if you wanted three columns in three colors, you would make
| > | >> something.jpg with the left and right colors, then the center
| > div/column
| > | >> would have its own background. To center that div in the shell
use
| > | >> width:
| > | >> lessthan760px; margin: 0px auto;
| > | >>
| > | >> And, hey, learning CSS is both fun and interesting. All layout
tables
| > | >> must
| > | >> be banished! Don't give in to the dark side!
| > | >>
| > | >> That said, download Netscape and look at your site. It needs
some
| > help.
| > | >> You
| > | >> need a "clear" div above the footer.
| > | >>
| > | >> clear:both; to keep the footer text below the content
| > | >> font: 1px/1px monospace; to make the div only 1px high
| > | >>
| > | >>
| > | >> "Robb B" wrote:
| > | >>
| > | >> > I am using FP 2003, and I want a three column layout using CSS.
I
| > have
| > | >> > it set
| > | >> > up (you can view the sample at
www.cbcwichita.org/csspage.shtml)
| > using
| > | >> > CSS
| > | >> > now, but there's a problem. I want to have variable length
pages,
| > with
| > | >> > the
| > | >> > page length (height) equal to the height of the center column.
That
| > way
| > | >> > the
| > | >> > background color on each of my side columns will stretch as far
| > down
| > | >> > the page
| > | >> > as the center column text/images go. If I can set it up this
way,
| > then
| > | >> > I can
| > | >> > use a dynamic web template for my page layout; otherwise I
would
| > have
| > | >> > to
| > | >> > manually configure the height for each column in every page
| > (Yikes!).
| > | >> > Any
| > | >> > suggestions on how to implement variable height columns using
CSS.
| > I'm
| > | >> > wondering if the problem is that the "height" property is not
| > | >> > inheritable. If
| > | >> > that's the problem, what can I do to fix that? If it's not,
what is
| > my
| > | >> > solution? Thanks for your help.
| > |
| > |
| >
| >
|
|
 
S

Stefan B Rusynko

I agree




| I could also say that tables are only supported well if done correctly, too.
| How many posts a day do you see here from people with tables done
| incorrectly?
|
| > that takes some knowledge of how / why it works and doesn't work. Users
| > need to understand that before they go off and use it
|
| Well, you get no argument from me on this. Any tool requires that you have
| some knowledge of it before you can use it well.
|
| > The old proverb of "Teach a man how to fish"
|
| Isn't that what we are all trying to do here? 8)
|
| --
| Murray
|
| | >I saw your use either comment
| > My general comment was aimed more at your general statement:
| > "It is not necessary to use tables as a layout tool in most cases now that
| > CSS positioning is as well supported as it is."
| >
| > CSS is only "supported well" if it is done correctly, and that takes some
| > knowledge of how / why it works and doesn't work. Users
| > need to understand that before they go off and use it
| >
| > IMHO
| > Just posting just corrections to poorly used CSS absolute positioning (by
| > apparently a user that does not understand how to use CSS
| > correctly or is trying to do it all in the WYSIWYG), may not help the user
| > understand that they need to learn how to do it right
| > before they rely on it for a site layout (who will correct it next time?)
| > The old proverb of "Teach a man how to fish"
| > --
| >
| > _____________________________________________
| > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| > "Warning - Using the F1 Key will not break anything!" (-;
| > To find the best Newsgroup for FrontPage support see:
| > http://www.net-sites.com/sitebuilder/newsgroups.asp
| > _____________________________________________
| >
| >
| > | > | Well, I never said anything other than that, did I? 8)
| > |
| > | Use tables until you don't need to. That's what I was trying to say at
| > | least.
| > |
| > | Start by using CSS for your styles. As you use it, you will learn
| > better
| > | methods and expand your understanding.
| > |
| > | My issue was with the specific comment I included in my post.
| > |
| > | --
| > | Murray
| > |
| > | | > | > While I agree with you that in the hands of a knowledgeable user, the
| > use
| > | > of CSS and absolute positioning (instead of tables) for
| > | > layout can be effectively done for most browsers
| > | > - unfortunately too many users do not take the time to learn what is
| > the
| > | > right way to do it and understand what works and why (or
| > | > why not)
| > | >
| > | > That's why you will find that unless the user indicates some level of
| > | > understanding of html/css and cross browser design, many of us
| > | > will recommend sticking w/ tables
| > | > - especially for beginners or WYSIWYG users
| > | >
| > | > --
| > | >
| > | > _____________________________________________
| > | > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| > | > "Warning - Using the F1 Key will not break anything!" (-;
| > | > To find the best Newsgroup for FrontPage support see:
| > | > http://www.net-sites.com/sitebuilder/newsgroups.asp
| > | > _____________________________________________
| > | >
| > | >
| > | > | > | > | > I agree about tables -
| > | > | > they take too long to load and are the design method of the
| > past...
| > | > |
| > | > | Mostly urban legend. If a table works for your design, use it. A
| > table
| > | > | itself does not take too long to download. A complex table (i.e.,
| > one
| > | > | containing many nested tables and lots of col- and rowspans) leads
| > to a
| > | > page
| > | > | loaded with table tags, and that can give you a heavy code load, and
| > a
| > | > long
| > | > | browser render. Such tables are poorly designed.
| > | > |
| > | > | The real truth is this. It is not necessary to use tables as a
| > layout
| > | > tool
| > | > | in most cases now that CSS positioning is as well supported as it
| > is.
| > | > It is
| > | > | not required that you use CSS, although doing so will usually make
| > your
| > | > | pages much lighter weight, and much easier to maintain. If you
| > | > understand
| > | > | HTML tables and how they work, you can use both to good advantage.
| > | > |
| > | > |
| > | > | --
| > | > | Murray
| > | > |
| > | > | | > | > | > Thanks for your advice. I'm working on implementing this now, and
| > I
| > | > have
| > | > | > created jpegs of the gradients (which work in Netscape, which I
| > also
| > | > | > downloaded), so it should be cross-browser compatible. I agree
| > about
| > | > | > tables -
| > | > | > they take too long to load and are the design method of the
| > past...
| > | > | >
| > | > | > Robb
| > | > | >
| > | > | > "Nicholas Malone" wrote:
| > | > | >
| > | > | >> You do this with backgrounds, although a gradient background
| > could be
| > | > | >> tough
| > | > | >> to get lined up.
| > | > | >> You need to set up a "shell" div to contain everything. The
| > header,
| > | > | >> footer,
| > | > | >> everything is inside this shell.
| > | > | >>
| > | > | >> margin: 0px auto; to make sure it centers in all displays.
| > | > | >> width: 760 px; to avoid the horizontal scroll
| > | > | >> background-image: url('images/something.jpg');
| > | > | >>
| > | > | >> In your case, the white area (Welcome to the Internet home...)
| > would
| > | > be a
| > | > | >> float left div that has its own background and sets the overall
| > page
| > | > | >> length.
| > | > | >>
| > | > | >> The right side isn't its own div. Rather, the green is
| > something.jpg
| > | > | >> showing
| > | > | >> through. The text blocks (date, Service Times, etc.) are then in
| > | > their
| > | > | >> own
| > | > | >> small divs floating right.
| > | > | >>
| > | > | >> So, if you wanted three columns in three colors, you would make
| > | > | >> something.jpg with the left and right colors, then the center
| > | > div/column
| > | > | >> would have its own background. To center that div in the shell
| > use
| > | > | >> width:
| > | > | >> lessthan760px; margin: 0px auto;
| > | > | >>
| > | > | >> And, hey, learning CSS is both fun and interesting. All layout
| > tables
| > | > | >> must
| > | > | >> be banished! Don't give in to the dark side!
| > | > | >>
| > | > | >> That said, download Netscape and look at your site. It needs
| > some
| > | > help.
| > | > | >> You
| > | > | >> need a "clear" div above the footer.
| > | > | >>
| > | > | >> clear:both; to keep the footer text below the content
| > | > | >> font: 1px/1px monospace; to make the div only 1px high
| > | > | >>
| > | > | >>
| > | > | >> "Robb B" wrote:
| > | > | >>
| > | > | >> > I am using FP 2003, and I want a three column layout using CSS.
| > I
| > | > have
| > | > | >> > it set
| > | > | >> > up (you can view the sample at
| > www.cbcwichita.org/csspage.shtml)
| > | > using
| > | > | >> > CSS
| > | > | >> > now, but there's a problem. I want to have variable length
| > pages,
| > | > with
| > | > | >> > the
| > | > | >> > page length (height) equal to the height of the center column.
| > That
| > | > way
| > | > | >> > the
| > | > | >> > background color on each of my side columns will stretch as far
| > | > down
| > | > | >> > the page
| > | > | >> > as the center column text/images go. If I can set it up this
| > way,
| > | > then
| > | > | >> > I can
| > | > | >> > use a dynamic web template for my page layout; otherwise I
| > would
| > | > have
| > | > | >> > to
| > | > | >> > manually configure the height for each column in every page
| > | > (Yikes!).
| > | > | >> > Any
| > | > | >> > suggestions on how to implement variable height columns using
| > CSS.
| > | > I'm
| > | > | >> > wondering if the problem is that the "height" property is not
| > | > | >> > inheritable. If
| > | > | >> > that's the problem, what can I do to fix that? If it's not,
| > what is
| > | > my
| > | > | >> > solution? Thanks for your help.
| > | > |
| > | > |
| > | >
| > | >
| > |
| > |
| >
| >
|
|
 
N

Nicholas Malone

I agree that tables aren't going anywhere, they work and that tables and CSS
can peacefully coexist. I invested many hours learning CSS, though, because
I think it has several important advantages:

Compatibility:
Cell Phones, PDAs, braille readers, old browsers and who-knows-what's-next.
If you bring in your styles using the @import rule, old browsers and
anything that ignores style sheets will display straight text in a readable
format instead of trying to squeeze 800 pixels into 200.

You also can target these different media. You don't need to be an expert on
cell phones or Braille readers because you can steal those styles from the
experts. When What's Next comes along, hopefully you'll just have to add a
style sheet rather than redesiging your site.

For printing, in particular, CSS allows every page to be print friendly.

Stefan B Rusynko said:
I agree




| I could also say that tables are only supported well if done correctly, too.
| How many posts a day do you see here from people with tables done
| incorrectly?
|
| > that takes some knowledge of how / why it works and doesn't work. Users
| > need to understand that before they go off and use it
|
| Well, you get no argument from me on this. Any tool requires that you have
| some knowledge of it before you can use it well.
|
| > The old proverb of "Teach a man how to fish"
|
| Isn't that what we are all trying to do here? 8)
|
| --
| Murray
|
| | >I saw your use either comment
| > My general comment was aimed more at your general statement:
| > "It is not necessary to use tables as a layout tool in most cases now that
| > CSS positioning is as well supported as it is."
| >
| > CSS is only "supported well" if it is done correctly, and that takes some
| > knowledge of how / why it works and doesn't work. Users
| > need to understand that before they go off and use it
| >
| > IMHO
| > Just posting just corrections to poorly used CSS absolute positioning (by
| > apparently a user that does not understand how to use CSS
| > correctly or is trying to do it all in the WYSIWYG), may not help the user
| > understand that they need to learn how to do it right
| > before they rely on it for a site layout (who will correct it next time?)
| > The old proverb of "Teach a man how to fish"
| > --
| >
| > _____________________________________________
| > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| > "Warning - Using the F1 Key will not break anything!" (-;
| > To find the best Newsgroup for FrontPage support see:
| > http://www.net-sites.com/sitebuilder/newsgroups.asp
| > _____________________________________________
| >
| >
| > | > | Well, I never said anything other than that, did I? 8)
| > |
| > | Use tables until you don't need to. That's what I was trying to say at
| > | least.
| > |
| > | Start by using CSS for your styles. As you use it, you will learn
| > better
| > | methods and expand your understanding.
| > |
| > | My issue was with the specific comment I included in my post.
| > |
| > | --
| > | Murray
| > |
| > | | > | > While I agree with you that in the hands of a knowledgeable user, the
| > use
| > | > of CSS and absolute positioning (instead of tables) for
| > | > layout can be effectively done for most browsers
| > | > - unfortunately too many users do not take the time to learn what is
| > the
| > | > right way to do it and understand what works and why (or
| > | > why not)
| > | >
| > | > That's why you will find that unless the user indicates some level of
| > | > understanding of html/css and cross browser design, many of us
| > | > will recommend sticking w/ tables
| > | > - especially for beginners or WYSIWYG users
| > | >
| > | > --
| > | >
| > | > _____________________________________________
| > | > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| > | > "Warning - Using the F1 Key will not break anything!" (-;
| > | > To find the best Newsgroup for FrontPage support see:
| > | > http://www.net-sites.com/sitebuilder/newsgroups.asp
| > | > _____________________________________________
| > | >
| > | >
| > | > | > | > | > I agree about tables -
| > | > | > they take too long to load and are the design method of the
| > past...
| > | > |
| > | > | Mostly urban legend. If a table works for your design, use it. A
| > table
| > | > | itself does not take too long to download. A complex table (i.e.,
| > one
| > | > | containing many nested tables and lots of col- and rowspans) leads
| > to a
| > | > page
| > | > | loaded with table tags, and that can give you a heavy code load, and
| > a
| > | > long
| > | > | browser render. Such tables are poorly designed.
| > | > |
| > | > | The real truth is this. It is not necessary to use tables as a
| > layout
| > | > tool
| > | > | in most cases now that CSS positioning is as well supported as it
| > is.
| > | > It is
| > | > | not required that you use CSS, although doing so will usually make
| > your
| > | > | pages much lighter weight, and much easier to maintain. If you
| > | > understand
| > | > | HTML tables and how they work, you can use both to good advantage.
| > | > |
| > | > |
| > | > | --
| > | > | Murray
| > | > |
| > | > | | > | > | > Thanks for your advice. I'm working on implementing this now, and
| > I
| > | > have
| > | > | > created jpegs of the gradients (which work in Netscape, which I
| > also
| > | > | > downloaded), so it should be cross-browser compatible. I agree
| > about
| > | > | > tables -
| > | > | > they take too long to load and are the design method of the
| > past...
| > | > | >
| > | > | > Robb
| > | > | >
| > | > | > "Nicholas Malone" wrote:
| > | > | >
| > | > | >> You do this with backgrounds, although a gradient background
| > could be
| > | > | >> tough
| > | > | >> to get lined up.
| > | > | >> You need to set up a "shell" div to contain everything. The
| > header,
| > | > | >> footer,
| > | > | >> everything is inside this shell.
| > | > | >>
| > | > | >> margin: 0px auto; to make sure it centers in all displays.
| > | > | >> width: 760 px; to avoid the horizontal scroll
| > | > | >> background-image: url('images/something.jpg');
| > | > | >>
| > | > | >> In your case, the white area (Welcome to the Internet home...)
| > would
| > | > be a
| > | > | >> float left div that has its own background and sets the overall
| > page
| > | > | >> length.
| > | > | >>
| > | > | >> The right side isn't its own div. Rather, the green is
| > something.jpg
| > | > | >> showing
| > | > | >> through. The text blocks (date, Service Times, etc.) are then in
| > | > their
| > | > | >> own
| > | > | >> small divs floating right.
| > | > | >>
| > | > | >> So, if you wanted three columns in three colors, you would make
| > | > | >> something.jpg with the left and right colors, then the center
| > | > div/column
| > | > | >> would have its own background. To center that div in the shell
| > use
| > | > | >> width:
| > | > | >> lessthan760px; margin: 0px auto;
| > | > | >>
| > | > | >> And, hey, learning CSS is both fun and interesting. All layout
| > tables
| > | > | >> must
| > | > | >> be banished! Don't give in to the dark side!
| > | > | >>
| > | > | >> That said, download Netscape and look at your site. It needs
| > some
| > | > help.
| > | > | >> You
| > | > | >> need a "clear" div above the footer.
| > | > | >>
| > | > | >> clear:both; to keep the footer text below the content
| > | > | >> font: 1px/1px monospace; to make the div only 1px high
| > | > | >>
| > | > | >>
| > | > | >> "Robb B" wrote:
| > | > | >>
| > | > | >> > I am using FP 2003, and I want a three column layout using CSS.
| > I
| > | > have
| > | > | >> > it set
| > | > | >> > up (you can view the sample at
| > www.cbcwichita.org/csspage.shtml)
| > | > using
| > | > | >> > CSS
| > | > | >> > now, but there's a problem. I want to have variable length
| > pages,
| > | > with
| > | > | >> > the
| > | > | >> > page length (height) equal to the height of the center column.
| > That
| > | > way
| > | > | >> > the
| > | > | >> > background color on each of my side columns will stretch as far
| > | > down
| > | > | >> > the page
| > | > | >> > as the center column text/images go. If I can set it up this
| > way,
| > | > then
| > | > | >> > I can
| > | > | >> > use a dynamic web template for my page layout; otherwise I
| > would
| > | > have
| > | > | >> > to
| > | > | >> > manually configure the height for each column in every page
| > | > (Yikes!).
| > | > | >> > Any
| > | > | >> > suggestions on how to implement variable height columns using
| > CSS.
| > | > I'm
| > | > | >> > wondering if the problem is that the "height" property is not
| > | > | >> > inheritable. If
| > | > | >> > that's the problem, what can I do to fix that? If it's not,
| > what is
| > | > my
| > | > | >> > solution? Thanks for your help.
| > | > |
| > | > |
| > | >
| > | >
| > |
| > |
| >
| >
|
|
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top