Friday, February 23, 2007

Styling with CSS

The more I delve into cascading style sheets, the more I wonder how I ever created a web site without using them. For an existing site where you need to make a style modification, CSS makes it so convenient. I’m web master for a site that has a particular event that’s advertised in it’s own special web site “section” every year. The site’s architectural template stays the same, but the graphics and color scheme of that section change every year to match the hard copy publications and advertising for the event. I pull up the style sheet from last year’s event, rename it for this year’s event, make the changes, and presto! There it is.

The IMU CSS project was challenging. First, I wasn’t sure of the actual IMU site design yet, and second, I was re-coding an old blog template for use on this project. Probably not the best mix to use for this assignment, but I was interested to see how the blog-turned-web site would work. Everything was moving along okay, if a little slowly since it had been awhile since I “spoke” CSS, until I ran across the float attribute. I had 3 sections that I needed “centered” equal distance apart. Guess what? There’s no such thing as a float: center attribute. “Since you have float: left/right, many people think there should be a float: center. The way CSS does it is to assign the margin to an auto value, so both sides get the same amount of margin.”
And even more on floating – this explains the theory behind float usage. So after that bit of research, I was able to correct my non-validating code and achieve the look I wanted.

Another thing I was reminded of while working on the CSS assignment was how different it is to work with a no-table page. Most of my sites that I work with daily are a combo of table and CSS, (Web 1.5 anyone?) so it’s always a little shocking to immerse myself in the full-on CSS code.

And finally, while digging in my old bookmarks, I ran across this 2003 IMU(?) titled "Why tables for layout is stupid: problems defined, solutions offered.”

1 comment:

Erik said...

I'm noexpert, but when you use Photoshop to make pages in combination with ImageReady, it uses tables. It seems we aren't quite to a WYSISWYG approach to CSS, but this is out of my league. Am I incorrect?