How to vertically align a table

  • Thread starter michael_maberly
  • Start date
M

michael_maberly

Hello again, Ron.

Sorry for the delay - my email server didn't send me notification of your
reply.

Thanks for sending this CSS code. However, I don't understand something:
the "rollover" code I used consisted of one line of code, and two images --
period. The CSS code you show consists of eleven lines of style code. Apart
from CSS' elegance, why should someone like me -- who still only understands
half the CSS terms and syntax shown here (after ten hours of studying CSS
online) -- want to go that route?

After spending several weeks getting oriented to basic HTML and FP (using
tables for layout), I took your suggestion, and headed out to w3schools.com
for CSS tutorials. After a day there, it dawned on me that the tutorials
leave a great deal (eg, arcane values, like the aspect ratios used in
'font-size-adjust') unexplained. I therefore hiked out to w3.org's CSS2
documentation, and began a slow, uphill slog, just to understand its
language. Nevertheless, everything does seem to be there -- on all 300-plus
pages of dense technical language. Another twelve hours into it, it dawned
on me that to use CSS2 for layout means to learn it in a serious way. Since
it is a fundamentally different approach than using HTML tags, this would
entail a long period of learning, with trial and error, on the way to minimum
competence (some web-designers have posted articles saying one should allow
at least 6 months of steady practice for it). And here I was, expecting
that two weeks of steady study and practice would allow me to get a web page
onto the net via FP.

Am I wrong in concluding that it takes months to learn CSS sufficiently
enough to use DIV for layouts, rather than tables (as you suggested, in order
to vertically align a table)? Am I wrong to hope that there must be a way
of combining old HTML methods (like tables, and rollover code) with the
easier aspects of CSS (like fonts and text management), and still pass
HTML4.01 standards? If so, I think I'm gonna cut my (time) losses, and give
up -- I'm a (music) composer, not an aspiring pro web designer, and I should
properly be putting this amount of energy and time into own vocation.

I eagerly await your comments.

- Michael

Ronx said:
A couple of years ago I would have said "Yes, that is the code".
Now I would use CSS to get the same effect with very little code, a
total of 2 images, and no Javascript.

<style type="text/css">
#nav {margin: 5px auto;width:560px;}
#nav br {clear: both; font-size: 0; line-height: 0;}
#nav ul {list-style:none;margin:0;padding:0;}
#nav ul li {width: 100px; float:left; vertical-align:middle;}
#nav a { height:30px; display: block; padding: 5px 10px;
vertical-align:middle; text-decoration: none; font-family: trebuchet,
Arial, helvetica, sans-serif; font-weight: bold; font-size: 85%; color:
blue; background: url('images/navbtnl.gif') no-repeat;}
#nav a:hover {color:green; background: url('images/navbtnh.gif')
no-repeat;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#nav" id="home">Home</a></li>
<li><a href="#nav" id="page1">Page 1</a></li>
<li><a href="#nav" id="page2">Page 2</a></li>
<li><a href="#nav" id="page3">Page 3</a></li>
</ul>
<br />
</div>
Rest of page


The above is adapted from
http://www.rxs-enterprises.org/tests/themed-css-navigation.htm

--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



Ron, in relation to my last post (re. how to create a link bar without FP's
webbot), I THINK I may have figured it out (eight hours later!!!). Here's
the script:

<a href="[URL for hyperlink]"><img src=[gif I want to use for hyperlink
button] onmouseover=this.src="[gif I want to appear when mouse is hovering
over the button]" onmouseout=this.src="[first gif, above]">

It works when I try it in FP -- both in Preview and my Browser. (After
spending five hours trying to figure out my friend's website code, and trying
to teach myself javascript from scratch, I finally found a javascript forum
comment that showed that the friend's code was probably from DreamWeaver,
with impenetrable javascript. I eventually found the above solution on a
young guy's blog!) Is this similar to what you would suggest (the code, I
mean, not the wasted hours!)?

- Michael
Click to expand...
Click to expand...
 
M

michael_maberly

Hi, Ron;

Despite my misgivings re. using CSS for layout (see my other post, dated May
21) I decided it wouldn’t hurt to try your original suggestion for getting a
vertically aligned table: "use CSS to create a nested table."

Here’s the original code you’d sent:

<style type="text/css">
html, body {height:100%;margin:0;padding:0;}
div {height:100%;border:1px solid red;}
#container {height:100%;width:100%;margin:0;padding:0;}
#container td {padding:0;vertical-align:middle;text-align:center;}
</style>

Then the HTML

<body>
<table id="container">
<tr>
<td>Page contents go here</td>
</tr>
</table>
</body>


Using a new web page in FP, I followed this exactly – first, using the code
(without the opening and closing <style> tags) in an external style sheet,
then, separately, using it exactly as you sent it, as an embedded style sheet.

The first thing I noticed was that the HTML requires a <td id=#container td>
tag, so I added it.

Both worked – but not to the effect that I require: your code produced a
table (within the ‘div’, I guess) that took up the entire web page, in all
directions, and that had text originating from the center of the page. What
I am after – and which worked, when I used your previous instructions on how
to create a ‘nested table’ – ie, without CSS – is a table that is smaller
than the page, centered in the middle of the page, and within which I can
create table rows and cells of specific proportions, within which I can
insert images (that will either fill up the entire row of cells, or be
centered – vertically and horizontally – within each row of cells, or within
each cell – ie, probably via cell padding) and text.

How should I alter your code to achieve this?

Thanks!
- Michael



Ronx said:
A couple of years ago I would have said "Yes, that is the code".
Now I would use CSS to get the same effect with very little code, a
total of 2 images, and no Javascript.

<style type="text/css">
#nav {margin: 5px auto;width:560px;}
#nav br {clear: both; font-size: 0; line-height: 0;}
#nav ul {list-style:none;margin:0;padding:0;}
#nav ul li {width: 100px; float:left; vertical-align:middle;}
#nav a { height:30px; display: block; padding: 5px 10px;
vertical-align:middle; text-decoration: none; font-family: trebuchet,
Arial, helvetica, sans-serif; font-weight: bold; font-size: 85%; color:
blue; background: url('images/navbtnl.gif') no-repeat;}
#nav a:hover {color:green; background: url('images/navbtnh.gif')
no-repeat;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#nav" id="home">Home</a></li>
<li><a href="#nav" id="page1">Page 1</a></li>
<li><a href="#nav" id="page2">Page 2</a></li>
<li><a href="#nav" id="page3">Page 3</a></li>
</ul>
<br />
</div>
Rest of page


The above is adapted from
http://www.rxs-enterprises.org/tests/themed-css-navigation.htm

--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



Ron, in relation to my last post (re. how to create a link bar without FP's
webbot), I THINK I may have figured it out (eight hours later!!!). Here's
the script:

<a href="[URL for hyperlink]"><img src=[gif I want to use for hyperlink
button] onmouseover=this.src="[gif I want to appear when mouse is hovering
over the button]" onmouseout=this.src="[first gif, above]">

It works when I try it in FP -- both in Preview and my Browser. (After
spending five hours trying to figure out my friend's website code, and trying
to teach myself javascript from scratch, I finally found a javascript forum
comment that showed that the friend's code was probably from DreamWeaver,
with impenetrable javascript. I eventually found the above solution on a
young guy's blog!) Is this similar to what you would suggest (the code, I
mean, not the wasted hours!)?

- Michael
Click to expand...
Click to expand...
 
R

Ronx

The first thing I noticed was that the HTML requires a <td
id=#container td> tag, so I added it.

That is invalid HTML, and is not required. The id=#container is
invalid, and id="container" is already used for the table.

See http://www.rxs-enterprises.org/tests/pages/nested_centered_table.htm

You may wish to change (or remove) the borders and the table sizes. The
innermost table (where you place your text and images) will size itself
automatically according to the content placed in it. It will always be
in the middle of the outer table, which in turn is centred in the
browser and extends from top to bottom of the browser portal. The width
of this table can be adjusted from 100% (full width) down to very small,
but the height cannot be changed - always 100%.

The above page works correctly in IE5.5, IE6, IE7, FireFox 2 and Opera
9, but may not display correctly in FrontPage design view.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



Hi, Ron;

Despite my misgivings re. using CSS for layout (see my other post, dated May
21) I decided it wouldn't hurt to try your original suggestion for getting a
vertically aligned table: "use CSS to create a nested table."

Here's the original code you'd sent:

<style type="text/css">
html, body {height:100%;margin:0;padding:0;}
div {height:100%;border:1px solid red;}
#container {height:100%;width:100%;margin:0;padding:0;}
#container td {padding:0;vertical-align:middle;text-align:center;}
</style>

Then the HTML

<body>
<table id="container">
<tr>
<td>Page contents go here</td>
</tr>
</table>
</body>


Using a new web page in FP, I followed this exactly - first, using the code
(without the opening and closing <style> tags) in an external style sheet,
then, separately, using it exactly as you sent it, as an embedded style sheet.

The first thing I noticed was that the HTML requires a <td id=#container td>
tag, so I added it.

Both worked - but not to the effect that I require: your code produced a
table (within the 'div', I guess) that took up the entire web page, in all
directions, and that had text originating from the center of the page. What
I am after - and which worked, when I used your previous instructions on how
to create a 'nested table' - ie, without CSS - is a table that is smaller
than the page, centered in the middle of the page, and within which I can
create table rows and cells of specific proportions, within which I can
insert images (that will either fill up the entire row of cells, or be
centered - vertically and horizontally - within each row of cells, or within
each cell - ie, probably via cell padding) and text.

How should I alter your code to achieve this?

Thanks!
- Michael



Ronx said:
A couple of years ago I would have said "Yes, that is the code".
Now I would use CSS to get the same effect with very little code, a
total of 2 images, and no Javascript.

<style type="text/css">
#nav {margin: 5px auto;width:560px;}
#nav br {clear: both; font-size: 0; line-height: 0;}
#nav ul {list-style:none;margin:0;padding:0;}
#nav ul li {width: 100px; float:left; vertical-align:middle;}
#nav a { height:30px; display: block; padding: 5px 10px;
vertical-align:middle; text-decoration: none; font-family: trebuchet,
Arial, helvetica, sans-serif; font-weight: bold; font-size: 85%; color:
blue; background: url('images/navbtnl.gif') no-repeat;}
#nav a:hover {color:green; background: url('images/navbtnh.gif')
no-repeat;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#nav" id="home">Home</a></li>
<li><a href="#nav" id="page1">Page 1</a></li>
<li><a href="#nav" id="page2">Page 2</a></li>
<li><a href="#nav" id="page3">Page 3</a></li>
</ul>
<br />
</div>
Rest of page


The above is adapted from
http://www.rxs-enterprises.org/tests/themed-css-navigation.htm

--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



Ron, in relation to my last post (re. how to create a link bar without FP's
webbot), I THINK I may have figured it out (eight hours later!!!). Here's
the script:

<a href="[URL for hyperlink]"><img src=[gif I want to use for hyperlink
button] onmouseover=this.src="[gif I want to appear when mouse is hovering
over the button]" onmouseout=this.src="[first gif, above]">

It works when I try it in FP -- both in Preview and my Browser. (After
spending five hours trying to figure out my friend's website code, and trying
to teach myself javascript from scratch, I finally found a javascript forum
comment that showed that the friend's code was probably from DreamWeaver,
with impenetrable javascript. I eventually found the above solution on a
young guy's blog!) Is this similar to what you would suggest (the code, I
mean, not the wasted hours!)?

- Michael
Click to expand...
Click to expand...
Click to expand...
 
M

michael_maberly

Thanks, Ron. I copied the source code from your URL, and it works - as shown
there - in my FP. I then compared that code with the code you'd originally
given for this task (which didn't work in my FP), and saw that it's
different. Although I'd like to know how all this works, I'll simply forget
the first code and use this new one.

I don't know if you saw my previous post; to sum it up:

1) Do you think that learning CSS to the point where one can do layout with
it -- and understand what one is doing -- would take at least 6 months of
study and practice? 1 month?


2) If more than one month, is there a way of combining CSS for easy stuff
(fonts, text, etc), and older HTML code for layout (tables, etc) -- so that I
can get my page done within a month -- and still pass HTML4.01 standards?

Thanks!
- Michael


Ronx said:
The first thing I noticed was that the HTML requires a <td
Click to expand...
id=#container td> tag, so I added it.

That is invalid HTML, and is not required. The id=#container is
invalid, and id="container" is already used for the table.

See http://www.rxs-enterprises.org/tests/pages/nested_centered_table.htm

You may wish to change (or remove) the borders and the table sizes. The
innermost table (where you place your text and images) will size itself
automatically according to the content placed in it. It will always be
in the middle of the outer table, which in turn is centred in the
browser and extends from top to bottom of the browser portal. The width
of this table can be adjusted from 100% (full width) down to very small,
but the height cannot be changed - always 100%.

The above page works correctly in IE5.5, IE6, IE7, FireFox 2 and Opera
9, but may not display correctly in FrontPage design view.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



Hi, Ron;

Despite my misgivings re. using CSS for layout (see my other post, dated May
21) I decided it wouldn't hurt to try your original suggestion for getting a
vertically aligned table: "use CSS to create a nested table."

Here's the original code you'd sent:

<style type="text/css">
html, body {height:100%;margin:0;padding:0;}
div {height:100%;border:1px solid red;}
#container {height:100%;width:100%;margin:0;padding:0;}
#container td {padding:0;vertical-align:middle;text-align:center;}
</style>

Then the HTML

<body>
<table id="container">
<tr>
<td>Page contents go here</td>
</tr>
</table>
</body>


Using a new web page in FP, I followed this exactly - first, using the code
(without the opening and closing <style> tags) in an external style sheet,
then, separately, using it exactly as you sent it, as an embedded style sheet.

The first thing I noticed was that the HTML requires a <td id=#container td>
tag, so I added it.

Both worked - but not to the effect that I require: your code produced a
table (within the 'div', I guess) that took up the entire web page, in all
directions, and that had text originating from the center of the page. What
I am after - and which worked, when I used your previous instructions on how
to create a 'nested table' - ie, without CSS - is a table that is smaller
than the page, centered in the middle of the page, and within which I can
create table rows and cells of specific proportions, within which I can
insert images (that will either fill up the entire row of cells, or be
centered - vertically and horizontally - within each row of cells, or within
each cell - ie, probably via cell padding) and text.

How should I alter your code to achieve this?

Thanks!
- Michael



Ronx said:
A couple of years ago I would have said "Yes, that is the code".
Now I would use CSS to get the same effect with very little code, a
total of 2 images, and no Javascript.

<style type="text/css">
#nav {margin: 5px auto;width:560px;}
#nav br {clear: both; font-size: 0; line-height: 0;}
#nav ul {list-style:none;margin:0;padding:0;}
#nav ul li {width: 100px; float:left; vertical-align:middle;}
#nav a { height:30px; display: block; padding: 5px 10px;
vertical-align:middle; text-decoration: none; font-family: trebuchet,
Arial, helvetica, sans-serif; font-weight: bold; font-size: 85%; color:
blue; background: url('images/navbtnl.gif') no-repeat;}
#nav a:hover {color:green; background: url('images/navbtnh.gif')
no-repeat;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#nav" id="home">Home</a></li>
<li><a href="#nav" id="page1">Page 1</a></li>
<li><a href="#nav" id="page2">Page 2</a></li>
<li><a href="#nav" id="page3">Page 3</a></li>
</ul>
<br />
</div>
Rest of page


The above is adapted from
http://www.rxs-enterprises.org/tests/themed-css-navigation.htm

--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



message
Ron, in relation to my last post (re. how to create a link bar without FP's
webbot), I THINK I may have figured it out (eight hours later!!!). Here's
the script:

<a href="[URL for hyperlink]"><img src=[gif I want to use for hyperlink
button] onmouseover=this.src="[gif I want to appear when mouse is hovering
over the button]" onmouseout=this.src="[first gif, above]">

It works when I try it in FP -- both in Preview and my Browser. (After
spending five hours trying to figure out my friend's website code, and trying
to teach myself javascript from scratch, I finally found a javascript forum
comment that showed that the friend's code was probably from DreamWeaver,
with impenetrable javascript. I eventually found the above solution on a
young guy's blog!) Is this similar to what you would suggest (the code, I
mean, not the wasted hours!)?

- Michael
Click to expand...
Click to expand...
Click to expand...
 
R

Ronx

The only real change to the CSS was a bug fix for IE6
I had forgotten that IE6 requires text-align:center for the body to
allow tables etc. to be centered using margins.
The other major change was styling for the innermost table.


To thoroughly learn CSS - allow a lifetime or two. But the basics can
be learnt in a few hours.
Best way (for me) is to play with the code, armed with a good reference
book and a few examples.
The book I use is "Cascading Style Sheets - The Definitive Guide" by
Eric A Meyer.

Learning CSS is easy, what is hard is discovering that it does not all
work in every browser. http://www.w3schools.com provides a good
tutorial.

Good example templates for FP2003 and expression Web, using CSS, can be
downloaded from
http://by-expression.com/samples/index.aspx
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



Thanks, Ron. I copied the source code from your URL, and it works - as shown
there - in my FP. I then compared that code with the code you'd originally
given for this task (which didn't work in my FP), and saw that it's
different. Although I'd like to know how all this works, I'll simply forget
the first code and use this new one.

I don't know if you saw my previous post; to sum it up:

1) Do you think that learning CSS to the point where one can do layout with
it -- and understand what one is doing -- would take at least 6 months of
study and practice? 1 month?


2) If more than one month, is there a way of combining CSS for easy stuff
(fonts, text, etc), and older HTML code for layout (tables, etc) -- so that I
can get my page done within a month -- and still pass HTML4.01 standards?

Thanks!
- Michael


Ronx said:
The first thing I noticed was that the HTML requires a <td
Click to expand...
id=#container td> tag, so I added it.

That is invalid HTML, and is not required. The id=#container is
invalid, and id="container" is already used for the table.

See http://www.rxs-enterprises.org/tests/pages/nested_centered_table.htm

You may wish to change (or remove) the borders and the table sizes. The
innermost table (where you place your text and images) will size itself
automatically according to the content placed in it. It will always be
in the middle of the outer table, which in turn is centred in the
browser and extends from top to bottom of the browser portal. The width
of this table can be adjusted from 100% (full width) down to very small,
but the height cannot be changed - always 100%.

The above page works correctly in IE5.5, IE6, IE7, FireFox 2 and Opera
9, but may not display correctly in FrontPage design view.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



Hi, Ron;

Despite my misgivings re. using CSS for layout (see my other post, dated May
21) I decided it wouldn't hurt to try your original suggestion for getting a
vertically aligned table: "use CSS to create a nested table."

Here's the original code you'd sent:

<style type="text/css">
html, body {height:100%;margin:0;padding:0;}
div {height:100%;border:1px solid red;}
#container {height:100%;width:100%;margin:0;padding:0;}
#container td {padding:0;vertical-align:middle;text-align:center;}
</style>

Then the HTML

<body>
<table id="container">
<tr>
<td>Page contents go here</td>
</tr>
</table>
</body>


Using a new web page in FP, I followed this exactly - first, using the code
(without the opening and closing <style> tags) in an external style sheet,
then, separately, using it exactly as you sent it, as an embedded style sheet.

The first thing I noticed was that the HTML requires a <td id=#container td>
tag, so I added it.

Both worked - but not to the effect that I require: your code produced a
table (within the 'div', I guess) that took up the entire web page, in all
directions, and that had text originating from the center of the page. What
I am after - and which worked, when I used your previous instructions on how
to create a 'nested table' - ie, without CSS - is a table that is smaller
than the page, centered in the middle of the page, and within which I can
create table rows and cells of specific proportions, within which I can
insert images (that will either fill up the entire row of cells, or be
centered - vertically and horizontally - within each row of cells, or within
each cell - ie, probably via cell padding) and text.

How should I alter your code to achieve this?

Thanks!
- Michael



:

A couple of years ago I would have said "Yes, that is the code".
Now I would use CSS to get the same effect with very little code, a
total of 2 images, and no Javascript.

<style type="text/css">
#nav {margin: 5px auto;width:560px;}
#nav br {clear: both; font-size: 0; line-height: 0;}
#nav ul {list-style:none;margin:0;padding:0;}
#nav ul li {width: 100px; float:left; vertical-align:middle;}
#nav a { height:30px; display: block; padding: 5px 10px;
vertical-align:middle; text-decoration: none; font-family: trebuchet,
Arial, helvetica, sans-serif; font-weight: bold; font-size: 85%; color:
blue; background: url('images/navbtnl.gif') no-repeat;}
#nav a:hover {color:green; background: url('images/navbtnh.gif')
no-repeat;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#nav" id="home">Home</a></li>
<li><a href="#nav" id="page1">Page 1</a></li>
<li><a href="#nav" id="page2">Page 2</a></li>
<li><a href="#nav" id="page3">Page 3</a></li>
</ul>
<br />
</div>
Rest of page


The above is adapted from
http://www.rxs-enterprises.org/tests/themed-css-navigation.htm

--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



message
Ron, in relation to my last post (re. how to create a link bar without FP's
webbot), I THINK I may have figured it out (eight hours later!!!). Here's
the script:

<a href="[URL for hyperlink]"><img src=[gif I want to use for hyperlink
button] onmouseover=this.src="[gif I want to appear when mouse is hovering
over the button]" onmouseout=this.src="[first gif, above]">

It works when I try it in FP -- both in Preview and my Browser. (After
spending five hours trying to figure out my friend's website code, and trying
to teach myself javascript from scratch, I finally found a javascript forum
comment that showed that the friend's code was probably from DreamWeaver,
with impenetrable javascript. I eventually found the above solution on a
young guy's blog!) Is this similar to what you would suggest (the code, I
mean, not the wasted hours!)?

- Michael
Click to expand...
Click to expand...
Click to expand...
 
M

michael_maberly

Thanks, Ron -- I appreciate this feedback!
. . . what is hard is discovering that it does not all
work in every browser.
Click to expand...
I BET it is!! Yet, it is, in your opinion, still worth the move from
pre-CSS HTML?
The book I use is "Cascading Style Sheets - The Definitive Guide" by
Eric A Meyer.
Click to expand...
I will try to find it. In the meantime, do you think that trying to learn
from W3C's "CSS2 Specifications" (downloadable as a PDF) is overkill?

- Michael



Ronx said:
The only real change to the CSS was a bug fix for IE6
I had forgotten that IE6 requires text-align:center for the body to
allow tables etc. to be centered using margins.
The other major change was styling for the innermost table.


To thoroughly learn CSS - allow a lifetime or two. But the basics can
be learnt in a few hours.
Best way (for me) is to play with the code, armed with a good reference
book and a few examples.
The book I use is "Cascading Style Sheets - The Definitive Guide" by
Eric A Meyer.

Learning CSS is easy, what is hard is discovering that it does not all
work in every browser. http://www.w3schools.com provides a good
tutorial.

Good example templates for FP2003 and expression Web, using CSS, can be
downloaded from
http://by-expression.com/samples/index.aspx
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



Thanks, Ron. I copied the source code from your URL, and it works - as shown
there - in my FP. I then compared that code with the code you'd originally
given for this task (which didn't work in my FP), and saw that it's
different. Although I'd like to know how all this works, I'll simply forget
the first code and use this new one.

I don't know if you saw my previous post; to sum it up:

1) Do you think that learning CSS to the point where one can do layout with
it -- and understand what one is doing -- would take at least 6 months of
study and practice? 1 month?


2) If more than one month, is there a way of combining CSS for easy stuff
(fonts, text, etc), and older HTML code for layout (tables, etc) -- so that I
can get my page done within a month -- and still pass HTML4.01 standards?

Thanks!
- Michael


Ronx said:
The first thing I noticed was that the HTML requires a <td
id=#container td> tag, so I added it.

That is invalid HTML, and is not required. The id=#container is
invalid, and id="container" is already used for the table.

See http://www.rxs-enterprises.org/tests/pages/nested_centered_table.htm

You may wish to change (or remove) the borders and the table sizes. The
innermost table (where you place your text and images) will size itself
automatically according to the content placed in it. It will always be
in the middle of the outer table, which in turn is centred in the
browser and extends from top to bottom of the browser portal. The width
of this table can be adjusted from 100% (full width) down to very small,
but the height cannot be changed - always 100%.

The above page works correctly in IE5.5, IE6, IE7, FireFox 2 and Opera
9, but may not display correctly in FrontPage design view.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



message
Hi, Ron;

Despite my misgivings re. using CSS for layout (see my other post, dated May
21) I decided it wouldn't hurt to try your original suggestion for getting a
vertically aligned table: "use CSS to create a nested table."

Here's the original code you'd sent:

<style type="text/css">
html, body {height:100%;margin:0;padding:0;}
div {height:100%;border:1px solid red;}
#container {height:100%;width:100%;margin:0;padding:0;}
#container td {padding:0;vertical-align:middle;text-align:center;}
</style>

Then the HTML

<body>
<table id="container">
<tr>
<td>Page contents go here</td>
</tr>
</table>
</body>


Using a new web page in FP, I followed this exactly - first, using the code
(without the opening and closing <style> tags) in an external style sheet,
then, separately, using it exactly as you sent it, as an embedded style sheet.

The first thing I noticed was that the HTML requires a <td id=#container td>
tag, so I added it.

Both worked - but not to the effect that I require: your code produced a
table (within the 'div', I guess) that took up the entire web page, in all
directions, and that had text originating from the center of the page. What
I am after - and which worked, when I used your previous instructions on how
to create a 'nested table' - ie, without CSS - is a table that is smaller
than the page, centered in the middle of the page, and within which I can
create table rows and cells of specific proportions, within which I can
insert images (that will either fill up the entire row of cells, or be
centered - vertically and horizontally - within each row of cells, or within
each cell - ie, probably via cell padding) and text.

How should I alter your code to achieve this?

Thanks!
- Michael



:

A couple of years ago I would have said "Yes, that is the code".
Now I would use CSS to get the same effect with very little code, a
total of 2 images, and no Javascript.

<style type="text/css">
#nav {margin: 5px auto;width:560px;}
#nav br {clear: both; font-size: 0; line-height: 0;}
#nav ul {list-style:none;margin:0;padding:0;}
#nav ul li {width: 100px; float:left; vertical-align:middle;}
#nav a { height:30px; display: block; padding: 5px 10px;
vertical-align:middle; text-decoration: none; font-family: trebuchet,
Arial, helvetica, sans-serif; font-weight: bold; font-size: 85%; color:
blue; background: url('images/navbtnl.gif') no-repeat;}
#nav a:hover {color:green; background: url('images/navbtnh.gif')
no-repeat;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#nav" id="home">Home</a></li>
<li><a href="#nav" id="page1">Page 1</a></li>
<li><a href="#nav" id="page2">Page 2</a></li>
<li><a href="#nav" id="page3">Page 3</a></li>
</ul>
<br />
</div>
Rest of page


The above is adapted from
http://www.rxs-enterprises.org/tests/themed-css-navigation.htm

--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



message
Ron, in relation to my last post (re. how to create a link bar without FP's
webbot), I THINK I may have figured it out (eight hours later!!!). Here's
the script:

<a href="[URL for hyperlink]"><img src=[gif I want to use for hyperlink
button] onmouseover=this.src="[gif I want to appear when mouse is hovering
over the button]" onmouseout=this.src="[first gif, above]">

It works when I try it in FP -- both in Preview and my Browser. (After
spending five hours trying to figure out my friend's website code, and trying
to teach myself javascript from scratch, I finally found a javascript forum
comment that showed that the friend's code was probably from DreamWeaver,
with impenetrable javascript. I eventually found the above solution on a
young guy's blog!) Is this similar to what you would suggest (the code, I
mean, not the wasted hours!)?

- Michael
Click to expand...
Click to expand...
Click to expand...
 
T

Trevor Lawrence

michael_maberly said:
Thanks, Ron -- I appreciate this feedback!

I BET it is!! Yet, it is, in your opinion, still worth the move from
pre-CSS HTML?

I will try to find it. In the meantime, do you think that trying to learn
from W3C's "CSS2 Specifications" (downloadable as a PDF) is overkill?
Click to expand...

Try http://w3schools.com/

There are examples for just about everything web related
 
R

Ronx

Yet, it is, in your opinion, still worth the move from
pre-CSS HTML?
Click to expand...

Definitely. 110% definitely.

With CSS you can change the look and layout of a 1000 page website by
editing one file.
See http://www.csszengarden.com/ for an example

CSS The Definitive Guide gives examples of how to use CSS, what may work
and what definitely doesn't, as well as a good reference.
W3C's CSS2.1 reference does provide some good tutorials, but I prefer
the style of writing in the book.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



Thanks, Ron -- I appreciate this feedback!
. . . what is hard is discovering that it does not all
work in every browser.
Click to expand...
I BET it is!! Yet, it is, in your opinion, still worth the move from
pre-CSS HTML?
The book I use is "Cascading Style Sheets - The Definitive Guide" by
Eric A Meyer.
Click to expand...
I will try to find it. In the meantime, do you think that trying to learn
from W3C's "CSS2 Specifications" (downloadable as a PDF) is overkill?

- Michael



Ronx said:
The only real change to the CSS was a bug fix for IE6
I had forgotten that IE6 requires text-align:center for the body to
allow tables etc. to be centered using margins.
The other major change was styling for the innermost table.


To thoroughly learn CSS - allow a lifetime or two. But the basics can
be learnt in a few hours.
Best way (for me) is to play with the code, armed with a good reference
book and a few examples.
The book I use is "Cascading Style Sheets - The Definitive Guide" by
Eric A Meyer.

Learning CSS is easy, what is hard is discovering that it does not all
work in every browser. http://www.w3schools.com provides a good
tutorial.

Good example templates for FP2003 and expression Web, using CSS, can be
downloaded from
http://by-expression.com/samples/index.aspx
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



Thanks, Ron. I copied the source code from your URL, and it works - as shown
there - in my FP. I then compared that code with the code you'd originally
given for this task (which didn't work in my FP), and saw that it's
different. Although I'd like to know how all this works, I'll simply forget
the first code and use this new one.

I don't know if you saw my previous post; to sum it up:

1) Do you think that learning CSS to the point where one can do layout with
it -- and understand what one is doing -- would take at least 6 months of
study and practice? 1 month?


2) If more than one month, is there a way of combining CSS for easy stuff
(fonts, text, etc), and older HTML code for layout (tables, etc) -- so that I
can get my page done within a month -- and still pass HTML4.01 standards?

Thanks!
- Michael


:

The first thing I noticed was that the HTML requires a <td
id=#container td> tag, so I added it.

That is invalid HTML, and is not required. The id=#container is
invalid, and id="container" is already used for the table.

See http://www.rxs-enterprises.org/tests/pages/nested_centered_table.htm

You may wish to change (or remove) the borders and the table sizes. The
innermost table (where you place your text and images) will size itself
automatically according to the content placed in it. It will always be
in the middle of the outer table, which in turn is centred in the
browser and extends from top to bottom of the browser portal. The width
of this table can be adjusted from 100% (full width) down to very small,
but the height cannot be changed - always 100%.

The above page works correctly in IE5.5, IE6, IE7, FireFox 2 and Opera
9, but may not display correctly in FrontPage design view.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



message
Hi, Ron;

Despite my misgivings re. using CSS for layout (see my other post, dated May
21) I decided it wouldn't hurt to try your original suggestion for getting a
vertically aligned table: "use CSS to create a nested table."

Here's the original code you'd sent:

<style type="text/css">
html, body {height:100%;margin:0;padding:0;}
div {height:100%;border:1px solid red;}
#container {height:100%;width:100%;margin:0;padding:0;}
#container td {padding:0;vertical-align:middle;text-align:center;}
</style>

Then the HTML

<body>
<table id="container">
<tr>
<td>Page contents go here</td>
</tr>
</table>
</body>


Using a new web page in FP, I followed this exactly - first, using the code
(without the opening and closing <style> tags) in an external style sheet,
then, separately, using it exactly as you sent it, as an embedded style sheet.

The first thing I noticed was that the HTML requires a <td id=#container td>
tag, so I added it.

Both worked - but not to the effect that I require: your code produced a
table (within the 'div', I guess) that took up the entire web page, in all
directions, and that had text originating from the center of the page. What
I am after - and which worked, when I used your previous instructions on how
to create a 'nested table' - ie, without CSS - is a table that is smaller
than the page, centered in the middle of the page, and within which I can
create table rows and cells of specific proportions, within which I can
insert images (that will either fill up the entire row of cells, or be
centered - vertically and horizontally - within each row of cells, or within
each cell - ie, probably via cell padding) and text.

How should I alter your code to achieve this?

Thanks!
- Michael



:

A couple of years ago I would have said "Yes, that is the code".
Now I would use CSS to get the same effect with very little code, a
total of 2 images, and no Javascript.

<style type="text/css">
#nav {margin: 5px auto;width:560px;}
#nav br {clear: both; font-size: 0; line-height: 0;}
#nav ul {list-style:none;margin:0;padding:0;}
#nav ul li {width: 100px; float:left; vertical-align:middle;}
#nav a { height:30px; display: block; padding: 5px 10px;
vertical-align:middle; text-decoration: none; font-family: trebuchet,
Arial, helvetica, sans-serif; font-weight: bold; font-size: 85%; color:
blue; background: url('images/navbtnl.gif') no-repeat;}
#nav a:hover {color:green; background: url('images/navbtnh.gif')
no-repeat;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#nav" id="home">Home</a></li>
<li><a href="#nav" id="page1">Page 1</a></li>
<li><a href="#nav" id="page2">Page 2</a></li>
<li><a href="#nav" id="page3">Page 3</a></li>
</ul>
<br />
</div>
Rest of page


The above is adapted from
http://www.rxs-enterprises.org/tests/themed-css-navigation.htm

--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



message
Ron, in relation to my last post (re. how to create a link bar without FP's
webbot), I THINK I may have figured it out (eight hours later!!!). Here's
the script:

<a href="[URL for hyperlink]"><img src=[gif I want to use for hyperlink
button] onmouseover=this.src="[gif I want to appear when mouse is hovering
over the button]" onmouseout=this.src="[first gif, above]">

It works when I try it in FP -- both in Preview and my Browser. (After
spending five hours trying to figure out my friend's website code, and trying
to teach myself javascript from scratch, I finally found a javascript forum
comment that showed that the friend's code was probably from DreamWeaver,
with impenetrable javascript. I eventually found the above solution on a
young guy's blog!) Is this similar to what you would suggest (the code, I
mean, not the wasted hours!)?

- Michael
Click to expand...
Click to expand...
Click to expand...
 
M

michael_maberly

Thanks for your perspective, Ron - I appreciate it!

Yesterday I loaded your "Expand this table as you wish" example of nested
tables into FP, and experimented with it. I see that, of course, it expands
horizontally according to the text; I imagine that it would expand
vertically were I to add more rows (with content) to it. My design calls for
such a centrally-aligned table, but - in my graphic design, anyway - the
table is of specific width, and contains various 'rows' of text (stylized
headings, etc) and several images (a logo, and the text of some buttons done
in an exotic font). Should I:

a) Achieve the height via content and padding -- ie, just add my content to
the rows, with as much cell-padding as I need to match the 'width' and
'height' of my original graphic?

or

b) Somehow give the 'table' (via either 'container' or 'contents') specific
width and height?

If b), I don't see any parameter for its height in the code. However, I was
able to re-size it by simply dragging it -- but I recall you suggesting (in
an earlier reply) that one should avoid this when trying to accomodate
standards compliance.

Thanks!
- Michael



Ronx said:
Yet, it is, in your opinion, still worth the move from
pre-CSS HTML?
Click to expand...

Definitely. 110% definitely.

With CSS you can change the look and layout of a 1000 page website by
editing one file.
See http://www.csszengarden.com/ for an example

CSS The Definitive Guide gives examples of how to use CSS, what may work
and what definitely doesn't, as well as a good reference.
W3C's CSS2.1 reference does provide some good tutorials, but I prefer
the style of writing in the book.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



Thanks, Ron -- I appreciate this feedback!
. . . what is hard is discovering that it does not all
work in every browser.
Click to expand...
I BET it is!! Yet, it is, in your opinion, still worth the move from
pre-CSS HTML?
The book I use is "Cascading Style Sheets - The Definitive Guide" by
Eric A Meyer.
Click to expand...
I will try to find it. In the meantime, do you think that trying to learn
from W3C's "CSS2 Specifications" (downloadable as a PDF) is overkill?

- Michael



Ronx said:
The only real change to the CSS was a bug fix for IE6
I had forgotten that IE6 requires text-align:center for the body to
allow tables etc. to be centered using margins.
The other major change was styling for the innermost table.


To thoroughly learn CSS - allow a lifetime or two. But the basics can
be learnt in a few hours.
Best way (for me) is to play with the code, armed with a good reference
book and a few examples.
The book I use is "Cascading Style Sheets - The Definitive Guide" by
Eric A Meyer.

Learning CSS is easy, what is hard is discovering that it does not all
work in every browser. http://www.w3schools.com provides a good
tutorial.

Good example templates for FP2003 and expression Web, using CSS, can be
downloaded from
http://by-expression.com/samples/index.aspx
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



message
Thanks, Ron. I copied the source code from your URL, and it works - as shown
there - in my FP. I then compared that code with the code you'd originally
given for this task (which didn't work in my FP), and saw that it's
different. Although I'd like to know how all this works, I'll simply forget
the first code and use this new one.

I don't know if you saw my previous post; to sum it up:

1) Do you think that learning CSS to the point where one can do layout with
it -- and understand what one is doing -- would take at least 6 months of
study and practice? 1 month?


2) If more than one month, is there a way of combining CSS for easy stuff
(fonts, text, etc), and older HTML code for layout (tables, etc) -- so that I
can get my page done within a month -- and still pass HTML4.01 standards?

Thanks!
- Michael


:

The first thing I noticed was that the HTML requires a <td
id=#container td> tag, so I added it.

That is invalid HTML, and is not required. The id=#container is
invalid, and id="container" is already used for the table.

See http://www.rxs-enterprises.org/tests/pages/nested_centered_table.htm

You may wish to change (or remove) the borders and the table sizes. The
innermost table (where you place your text and images) will size itself
automatically according to the content placed in it. It will always be
in the middle of the outer table, which in turn is centred in the
browser and extends from top to bottom of the browser portal. The width
of this table can be adjusted from 100% (full width) down to very small,
but the height cannot be changed - always 100%.

The above page works correctly in IE5.5, IE6, IE7, FireFox 2 and Opera
9, but may not display correctly in FrontPage design view.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



message
Hi, Ron;

Despite my misgivings re. using CSS for layout (see my other post, dated May
21) I decided it wouldn't hurt to try your original suggestion for getting a
vertically aligned table: "use CSS to create a nested table."

Here's the original code you'd sent:

<style type="text/css">
html, body {height:100%;margin:0;padding:0;}
div {height:100%;border:1px solid red;}
#container {height:100%;width:100%;margin:0;padding:0;}
#container td {padding:0;vertical-align:middle;text-align:center;}
</style>

Then the HTML

<body>
<table id="container">
<tr>
<td>Page contents go here</td>
</tr>
</table>
</body>


Using a new web page in FP, I followed this exactly - first, using the code
(without the opening and closing <style> tags) in an external style sheet,
then, separately, using it exactly as you sent it, as an embedded style sheet.

The first thing I noticed was that the HTML requires a <td id=#container td>
tag, so I added it.

Both worked - but not to the effect that I require: your code produced a
table (within the 'div', I guess) that took up the entire web page, in all
directions, and that had text originating from the center of the page. What
I am after - and which worked, when I used your previous instructions on how
to create a 'nested table' - ie, without CSS - is a table that is smaller
than the page, centered in the middle of the page, and within which I can
create table rows and cells of specific proportions, within which I can
insert images (that will either fill up the entire row of cells, or be
centered - vertically and horizontally - within each row of cells, or within
each cell - ie, probably via cell padding) and text.

How should I alter your code to achieve this?

Thanks!
- Michael



:

A couple of years ago I would have said "Yes, that is the code".
Now I would use CSS to get the same effect with very little code, a
total of 2 images, and no Javascript.

<style type="text/css">
#nav {margin: 5px auto;width:560px;}
#nav br {clear: both; font-size: 0; line-height: 0;}
#nav ul {list-style:none;margin:0;padding:0;}
#nav ul li {width: 100px; float:left; vertical-align:middle;}
#nav a { height:30px; display: block; padding: 5px 10px;
vertical-align:middle; text-decoration: none; font-family: trebuchet,
Arial, helvetica, sans-serif; font-weight: bold; font-size: 85%; color:
blue; background: url('images/navbtnl.gif') no-repeat;}
#nav a:hover {color:green; background: url('images/navbtnh.gif')
no-repeat;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#nav" id="home">Home</a></li>
<li><a href="#nav" id="page1">Page 1</a></li>
<li><a href="#nav" id="page2">Page 2</a></li>
<li><a href="#nav" id="page3">Page 3</a></li>
</ul>
<br />
</div>
Rest of page


The above is adapted from
http://www.rxs-enterprises.org/tests/themed-css-navigation.htm

--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



message
Ron, in relation to my last post (re. how to create a link bar without FP's
webbot), I THINK I may have figured it out (eight hours later!!!). Here's
the script:

<a href="[URL for hyperlink]"><img src=[gif I want to use for hyperlink
button] onmouseover=this.src="[gif I want to appear when mouse is hovering
over the button]" onmouseout=this.src="[first gif, above]">

It works when I try it in FP -- both in Preview and my Browser. (After
spending five hours trying to figure out my friend's website code, and trying
to teach myself javascript from scratch, I finally found a javascript forum
comment that showed that the friend's code was probably from DreamWeaver,
with impenetrable javascript. I eventually found the above solution on a
young guy's blog!) Is this similar to what you would suggest (the code, I
mean, not the wasted hours!)?

- Michael
Click to expand...
Click to expand...
Click to expand...
 
R

Ronx

I never specify height for a table - if it contains text then the height
may change anyway if the user changes the font size.
You can specify the width - change
#contents {width: auto;...
to
#contents {width: 400px;
(alter 400px to whatever width you need, but you MUST specify the unit
of measurement, px in this case.)

Similarly, you can change the table cell dimensions. If they are all
the same size change in the CSS:
#contents td {width:20%; height:50px,text-align: center; ...

But bear in mind that cell dimensions are always minimums and will
stretch to accommodate the content, if necessary.

All the cells in the same row will have the same height, all the cells
in the same column will have the same width.

Don't drag the borders - this sets the height and width of table and
cells as attributes. The table height is illegal HTML and may be
ignored by browsers - or worse it may be adhered to. I have seen this
where cells at the bottom of the table disappeared because the table was
not high enough to display all the contents.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



Thanks for your perspective, Ron - I appreciate it!

Yesterday I loaded your "Expand this table as you wish" example of nested
tables into FP, and experimented with it. I see that, of course, it expands
horizontally according to the text; I imagine that it would expand
vertically were I to add more rows (with content) to it. My design calls for
such a centrally-aligned table, but - in my graphic design, anyway - the
table is of specific width, and contains various 'rows' of text (stylized
headings, etc) and several images (a logo, and the text of some buttons done
in an exotic font). Should I:

a) Achieve the height via content and padding -- ie, just add my content to
the rows, with as much cell-padding as I need to match the 'width' and
'height' of my original graphic?

or

b) Somehow give the 'table' (via either 'container' or 'contents') specific
width and height?

If b), I don't see any parameter for its height in the code. However, I was
able to re-size it by simply dragging it -- but I recall you suggesting (in
an earlier reply) that one should avoid this when trying to accomodate
standards compliance.

Thanks!
- Michael



Ronx said:
Yet, it is, in your opinion, still worth the move from
pre-CSS HTML?
Click to expand...

Definitely. 110% definitely.

With CSS you can change the look and layout of a 1000 page website by
editing one file.
See http://www.csszengarden.com/ for an example

CSS The Definitive Guide gives examples of how to use CSS, what may work
and what definitely doesn't, as well as a good reference.
W3C's CSS2.1 reference does provide some good tutorials, but I prefer
the style of writing in the book.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



Thanks, Ron -- I appreciate this feedback!

. . . what is hard is discovering that it does not all
work in every browser.
I BET it is!! Yet, it is, in your opinion, still worth the move from
pre-CSS HTML?

The book I use is "Cascading Style Sheets - The Definitive Guide" by
Eric A Meyer.
I will try to find it. In the meantime, do you think that trying to learn
from W3C's "CSS2 Specifications" (downloadable as a PDF) is overkill?

- Michael



:

The only real change to the CSS was a bug fix for IE6
I had forgotten that IE6 requires text-align:center for the body to
allow tables etc. to be centered using margins.
The other major change was styling for the innermost table.


To thoroughly learn CSS - allow a lifetime or two. But the basics can
be learnt in a few hours.
Best way (for me) is to play with the code, armed with a good reference
book and a few examples.
The book I use is "Cascading Style Sheets - The Definitive Guide" by
Eric A Meyer.

Learning CSS is easy, what is hard is discovering that it does not all
work in every browser. http://www.w3schools.com provides a good
tutorial.

Good example templates for FP2003 and expression Web, using CSS, can be
downloaded from
http://by-expression.com/samples/index.aspx
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



message
Thanks, Ron. I copied the source code from your URL, and it works - as shown
there - in my FP. I then compared that code with the code you'd originally
given for this task (which didn't work in my FP), and saw that it's
different. Although I'd like to know how all this works, I'll simply forget
the first code and use this new one.

I don't know if you saw my previous post; to sum it up:

1) Do you think that learning CSS to the point where one can do layout with
it -- and understand what one is doing -- would take at least 6 months of
study and practice? 1 month?


2) If more than one month, is there a way of combining CSS for easy stuff
(fonts, text, etc), and older HTML code for layout (tables, etc) -- so that I
can get my page done within a month -- and still pass HTML4.01 standards?

Thanks!
- Michael


:

The first thing I noticed was that the HTML requires a <td
id=#container td> tag, so I added it.

That is invalid HTML, and is not required. The id=#container is
invalid, and id="container" is already used for the table.

See http://www.rxs-enterprises.org/tests/pages/nested_centered_table.htm

You may wish to change (or remove) the borders and the table sizes. The
innermost table (where you place your text and images) will size itself
automatically according to the content placed in it. It will always be
in the middle of the outer table, which in turn is centred in the
browser and extends from top to bottom of the browser portal. The width
of this table can be adjusted from 100% (full width) down to very small,
but the height cannot be changed - always 100%.

The above page works correctly in IE5.5, IE6, IE7, FireFox 2 and Opera
9, but may not display correctly in FrontPage design view.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



message
Hi, Ron;

Despite my misgivings re. using CSS for layout (see my other post, dated May
21) I decided it wouldn't hurt to try your original suggestion for getting a
vertically aligned table: "use CSS to create a nested table."

Here's the original code you'd sent:

<style type="text/css">
html, body {height:100%;margin:0;padding:0;}
div {height:100%;border:1px solid red;}
#container {height:100%;width:100%;margin:0;padding:0;}
#container td {padding:0;vertical-align:middle;text-align:center;}
</style>

Then the HTML

<body>
<table id="container">
<tr>
<td>Page contents go here</td>
</tr>
</table>
</body>


Using a new web page in FP, I followed this exactly - first, using the code
(without the opening and closing <style> tags) in an external style sheet,
then, separately, using it exactly as you sent it, as an embedded style sheet.

The first thing I noticed was that the HTML requires a <td id=#container td>
tag, so I added it.

Both worked - but not to the effect that I require: your code produced a
table (within the 'div', I guess) that took up the entire web page, in all
directions, and that had text originating from the center of the page. What
I am after - and which worked, when I used your previous instructions on how
to create a 'nested table' - ie, without CSS - is a table that is smaller
than the page, centered in the middle of the page, and within which I can
create table rows and cells of specific proportions, within which I can
insert images (that will either fill up the entire row of cells, or be
centered - vertically and horizontally - within each row of cells, or within
each cell - ie, probably via cell padding) and text.

How should I alter your code to achieve this?

Thanks!
- Michael



:

A couple of years ago I would have said "Yes, that is the code".
Now I would use CSS to get the same effect with very little code, a
total of 2 images, and no Javascript.

<style type="text/css">
#nav {margin: 5px auto;width:560px;}
#nav br {clear: both; font-size: 0; line-height: 0;}
#nav ul {list-style:none;margin:0;padding:0;}
#nav ul li {width: 100px; float:left; vertical-align:middle;}
#nav a { height:30px; display: block; padding: 5px 10px;
vertical-align:middle; text-decoration: none; font-family: trebuchet,
Arial, helvetica, sans-serif; font-weight: bold; font-size: 85%; color:
blue; background: url('images/navbtnl.gif') no-repeat;}
#nav a:hover {color:green; background: url('images/navbtnh.gif')
no-repeat;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#nav" id="home">Home</a></li>
<li><a href="#nav" id="page1">Page 1</a></li>
<li><a href="#nav" id="page2">Page 2</a></li>
<li><a href="#nav" id="page3">Page 3</a></li>
</ul>
<br />
</div>
Rest of page


The above is adapted from
http://www.rxs-enterprises.org/tests/themed-css-navigation.htm

--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



message
Ron, in relation to my last post (re. how to create a link bar without FP's
webbot), I THINK I may have figured it out (eight hours later!!!). Here's
the script:

<a href="[URL for hyperlink]"><img src=[gif I want to use for hyperlink
button] onmouseover=this.src="[gif I want to appear when mouse is hovering
over the button]" onmouseout=this.src="[first gif, above]">

It works when I try it in FP -- both in Preview and my Browser. (After
spending five hours trying to figure out my friend's website code, and trying
to teach myself javascript from scratch, I finally found a javascript forum
comment that showed that the friend's code was probably from DreamWeaver,
with impenetrable javascript. I eventually found the above solution on a
young guy's blog!) Is this similar to what you would suggest (the code, I
mean, not the wasted hours!)?

- Michael
Click to expand...
Click to expand...
Click to expand...
 
M

michael_maberly

Thanks, Ron – I added width and height dimensions to a cell, and it worked!
Similarly, you can change the table cell dimensions. If they are all
the same size change in the CSS:
#contents td {width:20%; height:50px,text-align: center; ...
Click to expand...

If I want the cells on different rows to have different dimensions, would I
create two different references for them in the CSS? Eg, #contents td1(for
upper row) and #contents td3 (for lower row)?


I also inserted a large image into one of the cells, and saw that, as you
described, the cell (and row) expanded to fit the image. Would this be the
more typical route to take, rather than setting actual cell dimensions?


Last, as an experiment, I reduced your nested table to one cell, and
inserted a large image. I then added a {background: green} to the ‘body’
CSS, and then – within the CSS – changed the following so as to eliminate all
borders, margins and padding:

body {background: green; color: black; margin: 0; padding: 0; text-align:
center;}
#container {height: 100%; width: 600px; margin: 0 ; padding: 0; border: 0}
#container td {padding: 0; vertical-align: middle; text-align: center;}
#contents {background: white; width: 0; border: 0; margin-left: 0;
margin-right: 0;}
#contents td {text-align: center; padding: 0; border: 0; vertical-align:
middle;}

The body looks like this:

<body>
<table id="container">
<tr>
<td>
<table id="contents">
<tr>
<td>
<img border="0" src="image.jpg" width="765" height="593">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>


Nevertheless, I was still left with a clearly visible white border around
the image. Do you have any idea why?

Again, many thanks!

- Michael

Ronx said:
I never specify height for a table - if it contains text then the height
may change anyway if the user changes the font size.
You can specify the width - change
#contents {width: auto;...
to
#contents {width: 400px;
(alter 400px to whatever width you need, but you MUST specify the unit
of measurement, px in this case.)

Similarly, you can change the table cell dimensions. If they are all
the same size change in the CSS:
#contents td {width:20%; height:50px,text-align: center; ...

But bear in mind that cell dimensions are always minimums and will
stretch to accommodate the content, if necessary.

All the cells in the same row will have the same height, all the cells
in the same column will have the same width.

Don't drag the borders - this sets the height and width of table and
cells as attributes. The table height is illegal HTML and may be
ignored by browsers - or worse it may be adhered to. I have seen this
where cells at the bottom of the table disappeared because the table was
not high enough to display all the contents.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



Thanks for your perspective, Ron - I appreciate it!

Yesterday I loaded your "Expand this table as you wish" example of nested
tables into FP, and experimented with it. I see that, of course, it expands
horizontally according to the text; I imagine that it would expand
vertically were I to add more rows (with content) to it. My design calls for
such a centrally-aligned table, but - in my graphic design, anyway - the
table is of specific width, and contains various 'rows' of text (stylized
headings, etc) and several images (a logo, and the text of some buttons done
in an exotic font). Should I:

a) Achieve the height via content and padding -- ie, just add my content to
the rows, with as much cell-padding as I need to match the 'width' and
'height' of my original graphic?

or

b) Somehow give the 'table' (via either 'container' or 'contents') specific
width and height?

If b), I don't see any parameter for its height in the code. However, I was
able to re-size it by simply dragging it -- but I recall you suggesting (in
an earlier reply) that one should avoid this when trying to accomodate
standards compliance.

Thanks!
- Michael



Ronx said:
Yet, it is, in your opinion, still worth the move from
pre-CSS HTML?

Definitely. 110% definitely.

With CSS you can change the look and layout of a 1000 page website by
editing one file.
See http://www.csszengarden.com/ for an example

CSS The Definitive Guide gives examples of how to use CSS, what may work
and what definitely doesn't, as well as a good reference.
W3C's CSS2.1 reference does provide some good tutorials, but I prefer
the style of writing in the book.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



message
Thanks, Ron -- I appreciate this feedback!

. . . what is hard is discovering that it does not all
work in every browser.
I BET it is!! Yet, it is, in your opinion, still worth the move from
pre-CSS HTML?

The book I use is "Cascading Style Sheets - The Definitive Guide" by
Eric A Meyer.
I will try to find it. In the meantime, do you think that trying to learn
from W3C's "CSS2 Specifications" (downloadable as a PDF) is overkill?

- Michael



:

The only real change to the CSS was a bug fix for IE6
I had forgotten that IE6 requires text-align:center for the body to
allow tables etc. to be centered using margins.
The other major change was styling for the innermost table.


To thoroughly learn CSS - allow a lifetime or two. But the basics can
be learnt in a few hours.
Best way (for me) is to play with the code, armed with a good reference
book and a few examples.
The book I use is "Cascading Style Sheets - The Definitive Guide" by
Eric A Meyer.

Learning CSS is easy, what is hard is discovering that it does not all
work in every browser. http://www.w3schools.com provides a good
tutorial.

Good example templates for FP2003 and expression Web, using CSS, can be
downloaded from
http://by-expression.com/samples/index.aspx
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



message
Thanks, Ron. I copied the source code from your URL, and it works - as shown
there - in my FP. I then compared that code with the code you'd originally
given for this task (which didn't work in my FP), and saw that it's
different. Although I'd like to know how all this works, I'll simply forget
the first code and use this new one.

I don't know if you saw my previous post; to sum it up:

1) Do you think that learning CSS to the point where one can do layout with
it -- and understand what one is doing -- would take at least 6 months of
study and practice? 1 month?


2) If more than one month, is there a way of combining CSS for easy stuff
(fonts, text, etc), and older HTML code for layout (tables, etc) -- so that I
can get my page done within a month -- and still pass HTML4.01 standards?

Thanks!
- Michael


:

The first thing I noticed was that the HTML requires a <td
id=#container td> tag, so I added it.

That is invalid HTML, and is not required. The id=#container is
invalid, and id="container" is already used for the table.

See http://www.rxs-enterprises.org/tests/pages/nested_centered_table.htm

You may wish to change (or remove) the borders and the table sizes. The
innermost table (where you place your text and images) will size itself
automatically according to the content placed in it. It will always be
in the middle of the outer table, which in turn is centred in the
browser and extends from top to bottom of the browser portal. The width
of this table can be adjusted from 100% (full width) down to very small,
but the height cannot be changed - always 100%.

The above page works correctly in IE5.5, IE6, IE7, FireFox 2 and Opera
9, but may not display correctly in FrontPage design view.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



message
Hi, Ron;

Despite my misgivings re. using CSS for layout (see my other post, dated May
21) I decided it wouldn't hurt to try your original suggestion for getting a
vertically aligned table: "use CSS to create a nested table."

Here's the original code you'd sent:

<style type="text/css">
html, body {height:100%;margin:0;padding:0;}
div {height:100%;border:1px solid red;}
#container {height:100%;width:100%;margin:0;padding:0;}
#container td {padding:0;vertical-align:middle;text-align:center;}
</style>

Then the HTML

<body>
<table id="container">
<tr>
<td>Page contents go here</td>
</tr>
</table>
</body>


Using a new web page in FP, I followed this exactly - first, using the code
(without the opening and closing <style> tags) in an external style sheet,
then, separately, using it exactly as you sent it, as an embedded style sheet.

The first thing I noticed was that the HTML requires a <td id=#container td>
tag, so I added it.

Both worked - but not to the effect that I require: your code produced a
table (within the 'div', I guess) that took up the entire web page, in all
directions, and that had text originating from the center of the page. What
I am after - and which worked, when I used your previous instructions on how
to create a 'nested table' - ie, without CSS - is a table that is smaller
than the page, centered in the middle of the page, and within which I can
create table rows and cells of specific proportions, within which I can
insert images (that will either fill up the entire row of cells, or be
centered - vertically and horizontally - within each row of cells, or within
each cell - ie, probably via cell padding) and text.

How should I alter your code to achieve this?

Thanks!
- Michael



:

A couple of years ago I would have said "Yes, that is the code".
Now I would use CSS to get the same effect with very little code, a
total of 2 images, and no Javascript.

<style type="text/css">
#nav {margin: 5px auto;width:560px;}
#nav br {clear: both; font-size: 0; line-height: 0;}
#nav ul {list-style:none;margin:0;padding:0;}
#nav ul li {width: 100px; float:left; vertical-align:middle;}
#nav a { height:30px; display: block; padding: 5px 10px;
vertical-align:middle; text-decoration: none; font-family: trebuchet,
Arial, helvetica, sans-serif; font-weight: bold; font-size: 85%; color:
blue; background: url('images/navbtnl.gif') no-repeat;}
#nav a:hover {color:green; background: url('images/navbtnh.gif')
no-repeat;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#nav" id="home">Home</a></li>
<li><a href="#nav" id="page1">Page 1</a></li>
<li><a href="#nav" id="page2">Page 2</a></li>
<li><a href="#nav" id="page3">Page 3</a></li>
</ul>
<br />
</div>
Rest of page


The above is adapted from
http://www.rxs-enterprises.org/tests/themed-css-navigation.htm

--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



message
Ron, in relation to my last post (re. how to create a link bar without FP's
webbot), I THINK I may have figured it out (eight hours later!!!). Here's
the script:

<a href="[URL for hyperlink]"><img src=[gif I want to use for hyperlink
button] onmouseover=this.src="[gif I want to appear when mouse is hovering
over the button]" onmouseout=this.src="[first gif, above]">

It works when I try it in FP -- both in Preview and my Browser. (After
spending five hours trying to figure out my friend's website code, and trying
to teach myself javascript from scratch, I finally found a javascript forum
Click to expand...
Click to expand...
Click to expand...
 
M

michael_maberly

(Ron, please first see my previous post, also dated May 24.)

Ron, I came upon a solution to the white margin showing around my image ,
but it still doesn’t explain WHY the margin showed up in the first place.

I realized that the 'white' I was seeing as a margin/border/padding was
actually the 'background colour' that was assigned to the cell (#contents
{background: white; . . . } ). Since I had previously changed the body's
background colour to green ( body {background: green; . . . } ), and since
the #container, having no background colour, was 'inheriting' its parent's
green background colour, I simply changed the cell's background colour to
green as well. Sure enough, that white border became invisible, by being the
same colour as its container.

However, I still don't understand why the cell's background should show up
around the inserted image, given that I had eliminated all padding, margins
and borders around the cell (and its container). Any ideas?

Thanks!
- Michael
 
R

Ronx

You CSS from the first post:
body {background: green; color: black; margin: 0; padding: 0;
text-align:
center;}

That's fine.

#container {height: 100%; width: 600px; margin: 0 ; padding: 0; border:
0}

Change the margins to margin:0 auto;
This ensures the table will be centred in the browser. (Firefox will
place it on the left.)


#container td {padding: 0; vertical-align: middle; text-align: center;}
#contents {background: white; width: 0; border: 0; margin-left: 0;
margin-right: 0;}

Don't use 0 for width. Change this to width: auto; This means that
the table will set its own width according to the content. If you use
margin: auto (to centre the table then you must specify a width - auto
specifies the width without giving it a fixed size.
Also change border: 0; to border: none; border-collapse: collapse;
border: 0 is not the same as no border.
Again, change the left/right margins to auto or Firefox will place the
table on the left.
The border-collapse: collapse; removes the small gap between the
borders around cells - this is similar to the cellpadding attribute, but
has a slightly different effect.

#contents {background: white; width: auto; border: none;
border-collapse: collapse; margin-left: auto; margin-right: auto;}


#contents td {text-align: center; padding: 0; border: 0; vertical-align:
middle;}



If you set different sizes for cells, remember that a column of cells
will take on the width of the widest cell in that column, and a row of
cells will take on the height of the highest cell in that row. I
usually let cells choose their own height and width (though some layouts
do require specified sizes).
To specify different cell sizes, you will have to use classes:

..width100 {width:100px;}

And in the HTML

<td class="width100">cell contents</td>

The CSS and HTML will set the width of the cell to a minimum of 100px.

Or

..hgt200 {height:200px;}

<td class="hgt200"> cell contents</td>

The cell will be at least 200px high.

Or

..wh42 {width:400px;height:200px;}

<td class="wh24"> cell contents</td>

The cell will be 400px wide and 200px high.

As I said - I prefer to let the cells find their own sizes according to
content.

Nevertheless, I was still left with a clearly visible white border around
Click to expand...
the image. Do you have any idea why?

The missing border-collapse:collapse explained above.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp
 

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

Similar Threads

Problem with printing a word document containing a table 0
How to change margins around bullets in list 1
Format column widths from one table to a separate table on same page 1
Move Chart with Text 0
Insert Index into a Table 1
Word doc won't center at 100% 5
How to vertically align autoshape text? 1
How to center adjust text above and image in a two column document. 1

Top