Problems formatting text within tables

[Cerebral Believer]

Hi,

I have chosen to make a basic template for a website I am creating, using a
seriries of tables to control the layout of the page. I have an overall
"global" 4rows x 5columns table, arranged basically into 3 columns for
content, with two columns used as "spacers" between the text in the main
panel and the left panel and right panel elements either side of it on on
the page, as shown approximately below:

---------------------------------------------------------------------------------------------------------------
|
|
| PAGE BANNER
I
|
|
---------------------------------------------------------------------------------------------------------------
|_________| |
| |_________|
| | |
| | |
| |S|
|S| |
| | |
| | |
| |P|
|P| |
| | |
| | |
| LEFT |A|
|A| RIGHT |
| | | MAIN PANEL
| | |
| PANEL |C|
|C| PANEL |
| | |
| | |
| |E|_________________________________________|E|
|
| | |
| | |
| |R| *MAIN PANEL FOOTER* |R|
|
| | |
| | |
---------------------------------------------------------------------------------------------------------------
|
|
| FOOTER
I
|
|
---------------------------------------------------------------------------------------------------------------

I have also chosen to use another two tables actually within the some cells
of the "global" table, one inside the left panel for navigation, and one
inside the main panel (which includes the main panel footer) so that I can
give the text a different colour background to the content in the left and
right panels. The table shows fine, there do not appear to be any
formatting problems as regards that, but can anyone tell me any reasons why
the text I have in the following code:

<tr>
<td class="mainpanelfooter">
<p>*MAIN PANEL FOOTER*</p>
</td>
</tr>

Referenced in a stylesheet thus:

td.mainpanelfooter {
vertical-align: middle;
height: 20px;
width: auto;
padding: 7px;
font-size: 80%;
color: #000000;
font-family: Verdana, Sans-Serif;
font-weight: normal;
text-decoration: none;
text-align: center;
}

Does not appear centered (but aligned left) when I preview my page in my
browser? It does appear centered in Frontpage's design window, but not in
the preview window.

Even if I use an <p align="center"></p> tag around the text in question, the
text appears as if it has merely been indented left rather than centered.
Any ideas what the problem could be or how to fix it?

 

[Cerebral Believer]

Please ignore the representation of the table, the formatting was lost (by
getting much bigger) after I posted the message to the group!

Regards,
CB.

 

[Costa Tropical Internet]

Does any of the formatting apply? Like the font color?

Is it the same in Firefox?

Internet Explorer has a nasty habit of resetting all formatting
whenever it encounters a TD tag.

I think your best option is to remove the class statement from the TD
tag and create a DIV tag around the text with the same class:

<tr>
<td>
<div class="mainpanelfooter">
*MAIN PANEL FOOTER*
</div>
</td>
</tr>

And then change the css to:

..mainpanelfooter {
vertical-align: middle;
height: 20px;
width: auto;
padding: 7px;
font-size: 80%;
color: #000000;
font-family: Verdana, Sans-Serif;
font-weight: normal;
text-decoration: none;
text-align: center;
}

Hope this helps.

-------------------------------
Soren Beck
Costa Tropical Internet and Web Design
http://www.costatropicalinternet.com

 

[Beauregard T. Shagnasty]

I have chosen to make a basic template for a website I am creating,
using a seriries of tables to control the layout of the page. I have
an overall "global" 4rows x 5columns table, arranged basically into 3
columns for content, with two columns used as "spacers" between the
text in the main panel and the left panel and right panel elements
either side of it on on the page, as shown approximately below:

Looks like you want a three column with footer. Look, no tables, and no
spacers necessary:
http://benmeadowcroft.com/webdev/csstemplates/3-column-with-footer.html

 

[Cerebral Believer]

Soren,

Thanks for your reply. I tried your idea, but it has no effect for some
reason. I am really perplexed by this, as it is the only element on the
whole page that does not render correctly. Maybe I will have to try
creating a template without using tables to format the page?

Regards,
C.B.

 

[Cerebral Believer]

Looks like you want a three column with footer. Look, no tables, and no
spacers necessary:
http://benmeadowcroft.com/webdev/csstemplates/3-column-with-footer.html

Beauregard,

I like the way the page you referenced works. I am a relative beginner in
this, and am wondering how I can achieve exactly the same effects using CSS
to format pages, rather than tables - if that makes any sense. I mean, if I
have several objects on a page each holding text/images etc, and someone
resizes text in their browser, or resizes their browser window, how can I
form my HTML & CSS to ensure that the objects resize and move in proportion
and relatively? Using a table, this is fairly easy as long as the
formatting isn't complicated, but then using <div> & CSS I assume, it all
seems a lot more difficult, especially if yo uhave to code for several
browsers because on incosistent interpretation of the code.

Regards,
C.B.

 

[Luigi Donatello Asero]

Beauregard,

I like the way the page you referenced works. I am a relative beginner in
this, and am wondering how I can achieve exactly the same effects using CSS
to format pages, rather than tables - if that makes any sense. I mean, if I
have several objects on a page each holding text/images etc, and someone
resizes text in their browser, or resizes their browser window, how can I
form my HTML & CSS to ensure that the objects resize and move in proportion
and relatively? Using a table, this is fairly easy as long as the
formatting isn't complicated, but then using <div> & CSS I assume, it all
seems a lot more difficult, especially if yo uhave to code for several
browsers because on incosistent interpretation of the code.

Regards,
C.B.

Is itsomething like that you were looking for?
(I am not satisfied myself with that, yet, though)

 

[Luigi Donatello Asero]

"Cerebral Believer" <[email protected]> skrev i meddelandet

Using a table, this is fairly easy as long as the

formatting isn't complicated, but then using <div> & CSS I assume, it all
seems a lot more difficult, especially if yo uhave to code for several
browsers because on incosistent interpretation of the code.

Regards,
C.B.

Is it something like that you were looking for?
(I am not satisfied myself with that, yet, though)

 

[Beauregard T. Shagnasty]

Beauregard,

I like the way the page you referenced works. I am a relative
beginner in this, and am wondering how I can achieve exactly the same
effects using CSS to format pages, rather than tables - if that makes
any sense. I mean, if I have several objects on a page each holding
text/images etc, and someone resizes text in their browser, or
resizes their browser window, how can I form my HTML & CSS to ensure
that the objects resize and move in proportion and relatively?

Put your images/text in paragraphs. You do not need table cells to
display images and text.

<p>This is some text.</p>

Using a table, this is fairly easy as long as the formatting isn't
complicated, but then using <div> & CSS I assume, it all seems a lot
more difficult, especially if yo uhave to code for several browsers
because on incosistent interpretation of the code.

It is not more difficult (I think it is much *less* difficult), it is
just ... different.

S'far as I know, all modern browsers interpret basic CSS correctly. Note
that IE is not a modern browser, marches to its own drum, but if you
don't use really fancy stuff, it will work fine.

Look at this site of mine. Lots of text, a number of images, and the
only tables on the whole site contain .. what they were designed for ..
tabular data.
http://countryrode.com/

 

[Cerebral Believer]

Is itsomething like that you were looking for?
(I am not satisfied myself with that, yet, though)

Yes, at a very basic level the way the page works is good, what I want to
learn is how to code such a page, exactly what techniques were used, <div>'s
or tables, or something else?

Regards,
C.B.

 

[Cerebral Believer]

Put your images/text in paragraphs. You do not need table cells to
display images and text.

<p>This is some text.</p>


It is not more difficult (I think it is much *less* difficult), it is
just ... different.

S'far as I know, all modern browsers interpret basic CSS correctly. Note
that IE is not a modern browser, marches to its own drum, but if you
don't use really fancy stuff, it will work fine.

Look at this site of mine. Lots of text, a number of images, and the
only tables on the whole site contain .. what they were designed for ..
tabular data.
http://countryrode.com/

Yes, this is a page that works well aslo, I'll have to study the code and
see how you formed it, that is unless you can point me to any good guides
for using CSS to format web pages.

Regards,
C.B.

 

[Beauregard T. Shagnasty]

Yes, this is a page that works well aslo, I'll have to study the code
and see how you formed it, that is unless you can point me to any
good guides for using CSS to format web pages.

Examine the classes for #boxbanner, #boxcontent, .boxfooter, #boxnav
to see the code that does the positional layout of the pages. The rest
is fluff. <g>