Finished Page Effect (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

pageoneresults -> Finished Page Effect (5/27/2003 2:12:03)

Are you looking for a way to add a finishing touch to the bottom of your pages? How about a Last modified date and time stamp that sits inside of a <p class=" last" > tag with a border on top and a background color of gray #cccccc.

Here is the external CSS code...

p.last {
font-size: .8em;
border-top: .1em solid #000;
margin: 0;
padding: .1em 1em;
color:#777;
background:#ccc;
}

This is an example of the finished tag using a webbot that has been modified to display the time and date per the ISO 8601 specifications.

<p class=" last" >Last modified date and time: <!--webbot bot=" Timestamp" S-Type=" EDITED" S-Format=" %Y-%m-%dT%H:%M:%S%Z" --></p>

Place this tag right before your closing </body> tag as it is a paragraph designed to sit at the very bottom edge of the page outside of all other elements such as tables or divs.

See it in action at the bottom of the [url=" http://www.csstips.com/colors/web-safe.asp" ]Web Safe Color Palette[/url].

Note: You' ll need to preview your page live to see the bottom margin effect. If viewing in FP' s normal view, a margin will appear which really isn' t there. ;)

P.S. Unfortunately this only works on pages that scroll vertically. The <p class=" last" > needs to rest against the browser window to create the Finished Page Effect.



pageoneresults -> Breakdown of the Finished Page Effect code. (5/27/2003 2:44:13)

/* This is the specific class name for the <p class=" last" > element used at the bottom of the page. */

p.last {

/* This defines a .8em small font size for the <p class=" last" > element. */

font-size:.8em;

/* This defines a .1em solid black border at the top of the <p class=" last" > element. */

border-top: .1em solid #000;

/* This defines the margins for the top, right, bottom and left of the <p class=" last" > element. */

margin: 0;

/* This defines the padding of the <p class=" last" > element. Similar to cellpadding in tables.
In this example we have .1em padding top and bottom and 1em padding left and right. */

padding: .1em 1em;

/* This is the color of the font for the <p class=" last" > element. */

color:#777;

/* This is the background color of the <p class=" last" > element. */

background:#ccc;
}



Spooky -> RE: Finished Page Effect (5/27/2003 2:51:46)

If you are frightened easily by sudden movement and garish colors, dont go to the safe color page [;)]



pageoneresults -> RE: Finished Page Effect (5/27/2003 3:40:08)

Hey! It wasn' t long ago that we had to use colors from that palette.

I wanted to make that page 100% accessible. Check out the scaling on the background clear gif when viewing in IE and sizing your text from Smallest to Largest. The clear gif resides in each of the color cells. Pretty cool stuff. Everything on that page scales relatively to the users settings.



Spooky -> RE: Finished Page Effect (5/27/2003 4:43:09)

Not bad for a 60' s nightclub [;)]
I had Austin Powers flashbacks, but yes, very useful [:D]



paul rayner -> RE: Finished Page Effect (5/28/2003 2:29:22)

Thanks - and if you were positioning this in a page developed using CSS, is the following OK??

.footer
{

position: absolute; left:10px;bottom: 0px; margin: 0px; padding: 0px;
width: 720px;
}

It works, but is it good coding?

Cheers



c1sissy -> RE: Finished Page Effect (5/28/2003 9:37:32)

quote:

1em;

What does this mean?
Thanks



clum1 -> RE: Finished Page Effect (5/29/2003 11:35:41)

1em is a measure of text size. It' s a dynamic, percentage ting where 1em equals 100% of the standard size. Use 0.9em etc to take the point size down.

I use this way of specifying text size as it allows the text to resize depending on how the user sets their font size (e.g. visually impaired people will be able to see larger text).

clum1



abbeyvet -> RE: Finished Page Effect (5/29/2003 12:07:52)

To be precise 1em is the height of the capital letter ' M' at the users default text size setting and (if font is not defined in the CSS of the webpage) the users default font.

Thus 2em would be twice this, 1.2em 20% larger, .9em 10% smaller.

It is method of using relative font sizes, that is font sizes that will change with the user' s preferred browser settings.

ems are widely used in print, and theoretically should also be a useful and accessible way of sizing text for the web. However browser support for ems is way less than optimal and for now at least a better method of sizing text relatively is by use of percentages.



pageoneresults -> RE: Finished Page Effect (5/29/2003 22:01:14)

quote:

Thanks - and if you were positioning this in a page developed using CSS, is the following OK??

.footer {
position: absolute;
left:10px;
bottom: 0px;
margin: 0px;
padding: 0px;
width: 720px;
}

Only on first page load. Once you scroll, that <div> remains at the same position it fell when you first hit the page.

The bottom positioned footer has been one piece of the puzzle that has eluded many in the CSS community. There is currently a discussion taking place at another CSS forum that I am following where code was just posted which would allow you to do this. Unfortunately, that code is about 40 lines long and is much more technical than I like to get! ;)

quote:

However browser support for ems is way less than optimal and for now at least a better method of sizing text relatively is by use of percentages.

Yup, and all because of IE' s thrashing of the specifications. Percentages are definitely much more predictable then em. But, it appears that em is what the standards organizations are moving towards. It will be a while still before ems really catch on in the design community.



c1sissy -> RE: Finished Page Effect (6/1/2003 11:34:11)

quote:

ems are widely used in print, and theoretically should also be a useful and accessible way of sizing text for the web. However browser support for ems is way less than optimal and for now at least a better method of sizing text relatively is by use of percentages


Are there any charts that show you how the letters look? Like with html, you see what h1 looks like etc... and font size 1-7. ( am I making sense here?)
thanks.



abbeyvet -> RE: Finished Page Effect (6/1/2003 11:46:58)

quote:

Are there any charts that show you how the letters look?


No, because ems are relative, what they look like will depend on the users size settings - they will vary according to that.

There is an interesting page here though:

http://akalg.com/pub/webref/style/fontSize.htm

Showing fonts styled in lots of different ways.




c1sissy -> RE: Finished Page Effect (6/1/2003 12:51:44)

Katherine:
Thanks, this is exactly what I was looking for! I was online almost all morning searching for something like this.

So, I am hoping that I understand this, the ems shouldn' t be used?

Sort of confused though, I thought that the em was a relative sizing? Or is the relative unit different from relative sizing? heavy sigh.

<edit>Thanks for that link. I have just spent some time going around in there. appreciate it.[;)]



abbeyvet -> RE: Finished Page Effect (6/1/2003 13:31:29)

Absolute Sizing

The font size stays the same, it is fixed, and will not change no matter what people do with their browsers. Though some browsers, like Opera, will zoom in on it to make it bigger.

Units: points (pt), pixels (px)

Advantages: You can position text accurately and it will not move about according to users settings. Pixels are very well supported by browsers generally, so it will be seen as you intended it to be.

Disadvantages: User control taken away - user cannot control text size.


Relative Sizing

The text size changes as the user alters their text size settings in their browser.

Units: ems, percentages

Advantages: user control retained. Makes text readable for those who need to increase text size and therefore improves readability/accessibility

Disadvantages: Poor browser support for ems. Percentages can be tricky to use until you get used to them.


One thing I have noted it that if you use percentages for stying paragraphs in FP you need to be very careful - say you use 90%. Sometimes FP fails to put in a closing </p> tag, so the second pargraph is displayed as 90% of the first, the third as 90% of the second and so on, until pretty quickly text is so tiny it is unreadable.

When using CSS for layout there are loads of ways around this, but when using for text styling only I have found this the best way:

Set a text size for body text. Say 80% - whatever size you think looks ok for your standard page text. You do not then need to specify any size for text in paragraphs, for link text, list text etc. It will take up the size set for the body. With one proviso - see below.


Then set styles for headings as a bit bigger than this, say h1 -120%, h2 - 110%. remember these latter percentages will be relative to the size you set for the body.


The proviso I mentioned was that sometimes, in some browsers, a size defined for body will not show up on text inside tables. To get over this just add this line to your stylesheet:

table {font-size:inherit;}


You can also just set the font family for the body, varying it for particualr elements later if you wish, in which case amend the above to:

table {font-size:inherit;font-family:inherit;}



c1sissy -> RE: Finished Page Effect (6/1/2003 14:28:28)

quote:

Relative Sizing

The text size changes as the user alters their text size settings in their browser.

Units: ems, percentages

Advantages: user control retained. Makes text readable for those who need to increase text size and therefore improves readability/accessibility

Disadvantages: Poor browser support for ems. Percentages can be tricky to use until you get used to them.


I' m surprised that there isn' t more browser support for this method. I would think that with all the emphasis on disabilites that people have you would think that they would have placed a bit more work in this area for disabled viewers.

Thanks for the info Katherine, I' m most likely a bit ahead of myself, but did read something in regards to 1em, and they didn' t explain what it was in the book. So since I had seen that it was posted in here I did want to know what it was. I appreciate the time that you took with all of this.



pageoneresults -> RE: Finished Page Effect (6/1/2003 14:52:38)

In all reality, I don' t think it is as big of an issue as we might think it is. For example, Opera, Mozilla and other standards compliant browsers offer a method of zoom that overrides the font size in document style sheets. IE is the only browser that I' m using right now that does not allow the user to resize text if the document specifies absolute sizing (13px).

If your visitor has a disability or accessibility problem, they will most likely know how to set their IE to accessibility mode. Go to...

IE > Tools > Internet Options > General > Accessibility

...and select Ignore font sizes specified on web pages..

This is a flaw in IE' s total accessibility features as some users do not know about this setting. I' m almost certain that anyone with a sight disability knows about this.

Other browsers incorporate this feature as a default and thereby override the documents fixed font size (13px) and zoom in as Opera refers to it.



c1sissy -> RE: Finished Page Effect (6/1/2003 15:55:39)

quote:

In all reality, I don' t think it is as big of an issue as we might think it is.

This is good to know. Thanks for posting this along with the other information. I appreciate it.[;)]




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.1103516