A better world, without IE

Looking closely at the CSS for the typography project…. The class example shows some good stuff (the css).

Here’s some CSS tips and points to remember:

  • To get IE to float properly, use a text-align: center in the body and then text-align: left/right/whatever where needed.
  • Set the min-width in the body to prevent failures in Netscape.
  • There’s a cool way to do the foot notes on this example. They are in a span that is hidden unless the mouse rolls over, at which point they appear visible. Really Cool, I think.
  • The example also uses a small flash movie to add some pull text to the site. Kind of a neat way to add some different fonts and colors to the page.
  • Try these fonts: font-family: “Lucida Grande”, “Lucida Sans Unicode”, verdana, lucida, sans-serif

Octothorpe

Class discussion on February 7, 2006.

Big deal about footnotes? Scholars love them, and need them. Web people don’t want them, or think they are needed. They want to come up with a different way: links, sidebars, and such.

Tonight, we learn how to put good ol’ footnotes in the text, so they look good.

Here’s the practice page.

– The problem with the basic tag is that the line-height is all messed up. It’s about readability! Make it nice on the eyes, pal!
– all the values in the element? remember TROUBLE or TRBL (top right bottom left)

Ex. padding: 2em 2em 2em 2em

– Make the sup script stand out and not mess up the line-height by taking out the margin, padding, etc
– The image looks best when floated to the right. Because the image shows someone pointing. You want the eyes to be drawn to the text. Bad example: Little Professor. Her picture is looking away from the text.
– Can’t she just flip the image? Depends, what is the image for, copyright issues…
– images: use some floating and padding.
– menus: list-style-type: none, get’s rid of the dots.
– pull qoute: display: block, kind of makes it like it’s own little div. Also use the tag.

Octothorpe?
Luddite?

Front page get's new design

I updated the front page for http://gmu.mossiso.com

I’m using a content management system that I built myself. Looks pretty cool, I think.

I just need to fix a few things with the links, how they’re displayed. I need to be able to order them how I want.

Anyhow, the code is available for anyone who wants it.

And to fulfill the CSS assignment, I made sure that the site validates as standard compliant CSS and HTML (don’t worry about all of the warnings in the CSS, who wants to add all of that extra stuff anyway).

What's the deal with typography

Post for February 7, 2006

What’s the deal with typography? one may ask. It’s all just words on a page, or screen. Does it even matter? Here are some thoughts as I read through the class readings.

From A List Apart (nice site change, by the way):
Particularly in a medium that invites a thousand distractions, anything that we as web developers can do to maintain the reader’s focus and keep her eyes moving smoothly over our text can only benefit our content.

That’s a good point. Some web sites are tooooooo busy. Anything to focus the reader’s eyes on that which is most important.

This NY Times article didn’t seem to have too much on the corrolation of links and footnotes. It was more of “footnotes are out because of links… here’s a history about links and why links are important.”

Adding the calendar in WordPress

This is the info…
http://codex.wordpress.org/Template_Tags/get_calendar

but to save you all from having to go to a different page, I shall explain it here.

You simply need to add a line of PHP code to the template. The code is:

< ?php get_calendar() ? >

The steps:
1. Go to the admin section of WordPress.
2. Presentation
3. Theme Editor
4. Sidebar
5. Find where this part of the code is:

< ?php wp _list_pages('title_li=< h2>Pages< /h2>' ); ? >
	< li>< h2>Archives< /h2>
		< ul>
		< ?php wp _get_archives('type=monthly'); ? >
		< /ul>
	< /li>

6. and add the calendar code before the wp_list_pages junk.
7. update the page and BANG! You’ve got a calendar.

*Be aware, I had to add some spaces in the above code so that it would show up properly.