Aligning to left & right corners

[erikd]

I'm trying to set up a standard "footer" on my pages. I just
discovered by reading this newsgroup that straight html is no good and
I need to learn how to do it using css. So I while I'm learning css I
took some code from a sample web page, but I don't think it's optimal.

What I'm trying to achieve is a horizontal rule at the bottom of the
page with a text block left aligned on the left and right aligned on
the right. So there would be a line and then text in the 2 corners
below the line.

Here's what I have. It works, but since I don't have a lot of
experience, I'm wondering if there is a better way? The pages validate
as HTML 4.01 Transitional, so maybe it's good enough?

<HR>

<div id="content">
Page last updated: <script LANGUAGE="JavaScript"
src="js/pagedate.js" type="text/javascript"></script>
</div>

<div id="footer"> View all the PAD fields in a pop-up
<a href="javascript:PopUp('\\apps\\ctparts\\pad_file. xml')">
<img src="graphics/logo3.jpg" alt="Portable Application
Description"
title="View all the PAD fields in a pop-up" align=TOP>
</a>
</div>
Here's the relevant portions of the external stylesheet.

#content {
float: left;
padding-top: 0.1em;
text-align: left;
font-size: 0.75em;
font-family: "Times New Roman", Arial, Verdana, serif;
}
#footer {
float: right;
padding-top: 0.1em;
text-align: right;
font-size: 0.75em;
font-family: "Times New Roman", Arial, Verdana, serif;
}

--
Erik

[Mark Tranchant]

er***@nospam.wanted.here wrote:

I'm trying to set up a standard "footer" on my pages. I just
discovered by reading this newsgroup that straight html is no good and
I need to learn how to do it using css. So I while I'm learning css I
took some code from a sample web page, but I don't think it's optimal.
The left/right float solution works pretty well but has its pitfalls.
Please supply your page URL for us to have a look at. There are too many
other variables to evaluate a code snippet.
Here's what I have. It works, but since I don't have a lot of
experience, I'm wondering if there is a better way? The pages validate
as HTML 4.01 Transitional, so maybe it's good enough?
Why Transitional, not Strict?
<div id="content">
Page last updated: <script LANGUAGE="JavaScript"
src="js/pagedate.js" type="text/javascript"></script>
</div>
And if I don't have Javascript? Does your server allow SSIs or PHP/ASP?
You can lose the LANGUAGE attribute.
<div id="footer"> View all the PAD fields in a pop-up
<a href="javascript:PopUp('\\apps\\ctparts\\pad_file. xml')">
<img src="graphics/logo3.jpg" alt="Portable Application
Description"
title="View all the PAD fields in a pop-up" align=TOP>
</a>
</div>
Aha - it's an intranet. Hopefully you can ensure all clients have
Javascript installed. You should supply a width and a height in the
<img> tag to allow the browser to do the layout before downloading the file.
font-family: "Times New Roman", Arial, Verdana, serif;

So you're saying you want it in TNR (a serif font) if available,
otherwise Arial (a standard sans-serif font), Verdana (an abnormally
wide sans font), followed by the system default serif font? What a
bizarre mixture! Save yourself a hundred bytes and don't specify the
font at all.

--
Mark.
http://tranchant.plus.com/

[erikd]

On Thu, 02 Dec 2004 08:39:26 +0000, Mark Tranchant
<ma**@tranchant.plus.com> wrote:

The left/right float solution works pretty well but has its pitfalls.
Please supply your page URL for us to have a look at. There are too many
other variables to evaluate a code snippet.
Sorry for that limitation. The page is for internal company use and
isn't available from the internet. I don't have a web site that I can
post it to. I hoped I posted the minimum needed. Do you have any
information on the pitfalls? Although I only need to worry about IE at
the moment, I see Firefox as a potential in the future.

Here's what I have. It works, but since I don't have a lot of
experience, I'm wondering if there is a better way? The pages validate
as HTML 4.01 Transitional, so maybe it's good enough?

Why Transitional, not Strict?

Honestly? Because I just started learning html and css for this
project redesign and it validates as Transitional, but failed strict.
But you can be sure that Strict is the goal in the near future.
And if I don't have Javascript? Does your server allow SSIs or PHP/ASP?
You can lose the LANGUAGE attribute.

Since it is for internal use only, I won't have any trouble specifying
what the client uses. Some of the code is also intended for
distribution on disc, so javascript seemed to be the logical choice
for both.

I'm not sure why the LANGUAGE attribute is there. I don't remember is
that came from the original or if I was advised to add it somewhere
along the way. It's one of those things I'm slowly learning to change
to get to Strict.

<div id="footer"> View all the PAD fields in a pop-up
<a href="javascript:PopUp('\\apps\\ctparts\\pad_file. xml')">
<img src="graphics/logo3.jpg" alt="Portable Application
Description"
title="View all the PAD fields in a pop-up" align=TOP>
</a>
</div>

Aha - it's an intranet. Hopefully you can ensure all clients have
Javascript installed. You should supply a width and a height in the
<img> tag to allow the browser to do the layout before downloading the file.

Yes, for the moment I have it easy, the supported browser is IE and
it's for internal use only. I'll add the width and height to the img.

font-family: "Times New Roman", Arial, Verdana, serif;

So you're saying you want it in TNR (a serif font) if available,
otherwise Arial (a standard sans-serif font), Verdana (an abnormally
wide sans font), followed by the system default serif font? What a
bizarre mixture! Save yourself a hundred bytes and don't specify the
font at all.

These were the original fonts as listed for the page, but I changed
the order around. I wanted the font to appear differently from the
body font so I thought choosing a serif font would do it. Would it be
better just using font-family: serif; ?

Thanks for taking a look at the code and your comments.

--
Erik

[Andrew Thompson]

On Thu, 02 Dec 2004 06:45:24 -0800, er***@nospam.wanted.here wrote:

The page is for internal company ...
Before others point it out, I will point out that this
group's name contains 'www', rather than 'company intranet'.
..use and isn't available from the internet.
So move it there.
..I don't have a web site that I can post it to.

GeoCities. Note that Geocities inserts code that makes pages
invalid, so it might pay to make a .zip of the relevant files
and link to it from your example page.

Speaking of which, check here for tips on that example..
<http://www.spartanicus.utvinternet.ie/help_us_help_you.htm> ..and..
<http://www.physci.org/codes/sscce.jsp>

HTH

--
Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.LensEscapes.com/ Images that escape the mundane

[Mark Tranchant]

er***@nospam.wanted.here wrote:

font-family: "Times New Roman", Arial, Verdana, serif;

So you're saying you want it in TNR (a serif font) if available,
otherwise Arial (a standard sans-serif font), Verdana (an abnormally
wide sans font), followed by the system default serif font? What a
bizarre mixture! Save yourself a hundred bytes and don't specify the
font at all.

These were the original fonts as listed for the page, but I changed
the order around. I wanted the font to appear differently from the
body font so I thought choosing a serif font would do it. Would it be
better just using font-family: serif; ?

You'd be better not specifying font-family at all, as it seems like you
don't really care given the current font list.

--
Mark.
http://tranchant.plus.com/