CSS me, baby
I'm late to the CSS party, but trying to learn as much as I can about it in, oh, the next five days before my MIT class starts. It's fun, it's pretty, it's useful, it's work-related... what more can a girl really ask for? (Oh yeah, browser compliance.)
In the meantime, reading has made me realize my website desperately needs an upgrade. I started the CSS revolution with my writings page, thinking it was more structured than a lot of my pages, but also in some ways would be the most complex.
And behold, I was right! It looks almost exactly the way it did before, but with all images and styles done in CSS. I had some headers formed like this:
...and it turns out it's not easy in CSS, trying to attach four images to one header. So, that's not how I did it. I wound up attaching one bar to the "section" class between headers, and finally the other to a "sectionend" class. I'm still trying to decide whether that was a good workaround to the basic problem; does anyone have opinions?
It also got me into the question of what one does about poetry -- there's only one poem on that page, but I have around 20 other pages that can all re-use the poetry styling, so I took some care with it. I'm not the first person to have this problem, of course, and I decided to go with old-fashioned pre tags. Sometimes line breaks and strange spacing ARE the content, and they need to remain in place with CSS disabled. Of course, I have worse troubles -- I have some pages, like my Life and Debt comic, where images are the content... except that, oh yeah, they have words too. What is one supposed to do about accessibility and comic strips? The dialogue could be copied into the alt text, but maybe at some point you have to give up.
As a side note, I'm completely enamored with the comic-style look of Ballade, over at the CSS Zen Garden, and I do wonder how far a person could go with heavily CSS-intensive comic pages that still allow the text and browser window to be resized.
Pretty far, I suspect, with enough free time.
In the meantime, reading has made me realize my website desperately needs an upgrade. I started the CSS revolution with my writings page, thinking it was more structured than a lot of my pages, but also in some ways would be the most complex.
And behold, I was right! It looks almost exactly the way it did before, but with all images and styles done in CSS. I had some headers formed like this:
 |
| |
...and it turns out it's not easy in CSS, trying to attach four images to one header. So, that's not how I did it. I wound up attaching one bar to the "section" class between headers, and finally the other to a "sectionend" class. I'm still trying to decide whether that was a good workaround to the basic problem; does anyone have opinions?
It also got me into the question of what one does about poetry -- there's only one poem on that page, but I have around 20 other pages that can all re-use the poetry styling, so I took some care with it. I'm not the first person to have this problem, of course, and I decided to go with old-fashioned pre tags. Sometimes line breaks and strange spacing ARE the content, and they need to remain in place with CSS disabled. Of course, I have worse troubles -- I have some pages, like my Life and Debt comic, where images are the content... except that, oh yeah, they have words too. What is one supposed to do about accessibility and comic strips? The dialogue could be copied into the alt text, but maybe at some point you have to give up.
As a side note, I'm completely enamored with the comic-style look of Ballade, over at the CSS Zen Garden, and I do wonder how far a person could go with heavily CSS-intensive comic pages that still allow the text and browser window to be resized.
Pretty far, I suspect, with enough free time.
Labels: css
posted by Rachel at
4:48 AM
1 Comments:
I'd give up on the comics. Put in alt text that says, "Hey, sorry you can't read the comics, but they're, like, a visual medium. Maybe you can go to my husband's page and listen to some music?"
Post a Comment
Subscribe to Post Comments [Atom]
<< Home