Categories
creative internets uncategorized web design

CSS tricks: Styling parent elements with :hover

[EDIT: this site no longer supports the features described in this article. Sorry.]

You may have noticed in my sidebar that there are a few elements which are nested in an obvious hierarchical order. For example, at the time of this writing, i have a list of books which i am either reading, planning to read, or have already read, listed under the “now reading” heading.

You may also have noticed that the heading for each of these menu items is highlighted whenever you hover your cursor (pointer) over it.

What you may not have noticed is that the headings for these items’ parent elements is also highlighted when its descendant is hovered over. In other words, when you hover over the “planned books,” “current books,” or “recent books” list, the parent element, “now reading,” is highlighted as well.

(If you’re still not sure just what the hell i’m talking about, check out the demo first, and then come back.)

This is a cool trick that you rarely ever see on the internets, and it’s remarkably simple to do. You don’t need no fancy JavaScripting to do it, either! No server- or client-side scripts are used at all, just good old CSS, and a properly nested hierarchy of elements.

Categories
uncategorized

CSS tricks: Styling parent elements with :hover

Originally published at jeremyjarratt.com. You can comment here or there.

[EDIT: this site no longer supports the features described in this article. Sorry.]

You may have noticed in my sidebar that there are a few elements which are nested in an obvious hierarchical order. For example, at the time of this writing, i have a list of books which i am either reading, planning to read, or have already read, listed under the “now reading” heading.

You may also have noticed that the heading for each of these menu items is highlighted whenever you hover your cursor (pointer) over it.

What you may not have noticed is that the headings for these items’ parent elements is also highlighted when its descendant is hovered over. In other words, when you hover over the “planned books,” “current books,” or “recent books” list, the parent element, “now reading,” is highlighted as well.

(If you’re still not sure just what the hell i’m talking about, check out the demo first, and then come back.)

This is a cool trick that you rarely ever see on the internets, and it’s remarkably simple to do. You don’t need no fancy JavaScripting to do it, either! No server- or client-side scripts are used at all, just good old CSS, and a properly nested hierarchy of elements.

First, create a nested list, with headings. For example:

<ol>
<li>
<h1>text</h1>
<h2>more text</h2>
<ol>
<li>
<h3>subtext1</h3>
</li>
<li>
<h3>subtext2</h3>
<ol>
<li>
<h4>subtext2.1</h4>
</li>
<li>
<h4>subtext2.2</h4>
</li>
</ol>
</li>
<li>
<h3>subtext</h3>
</li>
</ol>
</li>
<li>
<h2>text again</h2>
</li>
</ol>

Now create the following style rules:

li:hover>h2, /* matches the H2 element when its parent list-item is hovered over */ li:hover>h3, li:hover>h4, li:hover>h5
{
background: #000;
color: #fed;
}

(Note that the H1 element is not styled and thus does not actually participate in any fancy hover effects.)

Now save your page and test it out. You can adapt this technique to work with just about any set of nested elements. (Just make sure your nest validates!)

See the demo

Categories
family friends uncategorized

Happy birthday to Holly!

Dear Holly,

You are ah-THE bomb.

Happy birthday, dear sweet Miss Thang. Hope you enjoyed your Freedom Toast.

Love & kisses,

~jer

Categories
uncategorized

Happy birthday to Holly!

Originally published at jeremyjarratt.com. You can comment here or there.

Dear Holly,

You are ah-THE bomb.

Happy birthday, dear sweet Miss Thang. Hope you enjoyed your Freedom Toast.

Love & kisses,

~jer

Categories
current events uncategorized

Sarah Palin: unevolved

So… if Sarah Palin doesn’t believe in evolution… can we call her unevolved?? And nobody even gets upset??? Really?!

So... if Sarah Palin doesn't *BELIEVE* in evolution... can we call her NON-EVOLVED?? And nobody even gets upset??? Really?!
Sarah Palin
Categories
uncategorized

Sarah Palin: unevolved

Originally published at jeremyjarratt.com. You can comment here or there.

So… if Sarah Palin doesn’t believe in evolution… can we call her unevolved?? And nobody even gets upset??? Really?!

So... if Sarah Palin doesn't *BELIEVE* in evolution... can we call her NON-EVOLVED?? And nobody even gets upset??? Really?!

Sarah Palin

Categories
creative internets web design

Cheaters, etc.

Here’s a list of cool resources for web design and development, including cheat sheets galore.

I’m sure there are more I have bookmarked somewhere. I’ll add them as i find ’em. Enjoy!

Categories
uncategorized

Cheaters, etc.

Originally published at jeremyjarratt.com. You can comment here or there.

Here’s a list of cool resources for web design and development, including cheat sheets galore.

I’m sure there are more I have bookmarked somewhere. I’ll add them as i find ‘em. Enjoy!

Categories
current events internets

More Jon Stewart on McCain

Because there’s nothing like laughing your ass off while your blood is boiling…



Categories
uncategorized

More Jon Stewart on McCain

Originally published at jeremyjarratt.com. You can comment here or there.

Because there’s nothing like laughing your ass off while your blood is boiling…

Categories
web design

Coming up, a redesign

I’m gearing up for a redesign. Sometimes too many bells and whistles is a bad, bad thing. I’m going simple and clean next.

I expect to base it off of the current theme, just because i already hacked it up for the style switcher. This time, no extraneous code. This time, things will be clean. My plan is to AJAXify the sidebars so all the other crap is still there, just not there all the time. Go figure – JavaScript wound up becoming useful for something after all!

Suggestions welcome, as always.web

Categories
uncategorized

Coming up, a redesign

Originally published at jeremyjarratt.com. You can comment here or there.

I’m gearing up for a redesign. Sometimes too many bells and whistles is a bad, bad thing. I’m going simple and clean next.

I expect to base it off of the current theme, just because i already hacked it up for the style switcher. This time, no extraneous code. This time, things will be clean. My plan is to AJAXify the sidebars so all the other crap is still there, just not there all the time. Go figure – JavaScript wound up becoming useful for something after all!

Suggestions welcome, as always.web

Categories
current events uncategorized

The Daily Show on Republican hypocrisy

Categories
uncategorized

The Daily Show on Republican hypocrisy

Originally published at jeremyjarratt.com. You can comment here or there.

Categories
creative web design

Fun & stupid things to do with PHP and CSS

Over on the recently-relaunched Technothrope: A better PHP random background-color generator.

Also in the garage: the latest version of the random bg generator, plus a weird little experiment with fixed backgrounds that i was considering using for something before i decided it was too noisy.

Coming up at some point: something Holly called me the other day has inspired me to make my next project, the Argument Machine.

Categories
uncategorized

Fun & stupid things to do with PHP and CSS

Originally published at jeremyjarratt.com. You can comment here or there.

Over on the recently-relaunched Technothrope: A better PHP random background-color generator.

Also in the garage: the latest version of the random bg generator, plus a weird little experiment with fixed backgrounds that i was considering using for something before i decided it was too noisy.

Coming up at some point: something Holly called me the other day has inspired me to make my next project, the Argument Machine.

Categories
internets uncategorized web design

Google Chrome obeys alternate CSS

NOTE: this post is ancient, but still gets a good bit of traffic, so i need to let readers know:

This issue was fixed long ago.

So Google Chrome is out. That’s great! It’s really a cool, fast, secure browser.

Unfortunately, it appears to break sites in one very important way: it obeys alternate stylesheets, just as if they were normal, active stylesheets. This breaks sites who print their alternate CSS links after active ones (like mine – for now).

I’ve sent this in as a bug to Google, and i’d recommend that others do the same (select “report bug or broken website” from the page icon to the upper right).

At the moment, the only thing to do is to list alternate stylesheets before active ones, or exclude alternate links altogether.

However, there are (naturally!) problems with each method…

Listing alternate CSS (which would still be obeyed) could still cause style conflicts, if there are any rules which are not contradicted (read: overwritten) by later stylesheets below the alternate ones.

On the other hand, not listing alternate stylesheets disables additional functionality in user agents such as Opera, which allows users to select from a menu what style they’d prefer to view a site in – which is arguably the best, most accessible method of switching stylesheets (if you’re using one of those user agents, that is).

For my money, i believe the former is the best option. This means i may have to do some code “cleaning,” which i should have done anyway. In fact, rather than removing extraneous CSS rules, i’ll be adding rules which do not exist in, say, X.css to Y.css, in order to counteract any style collisions by overwriting them with alternate rules.

Btw, for those who need it, here’s the User Agent string i captured:

Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

[UPDATE] Matt Wilcox helpfully pointed out that this isn’t exactly a Chrome bug, but a leftover Safari one which has apparently been around for years, according to a decently shrewd Google search. Lesson: test in Safari, even if you think it’s a Practically Perfect Browser.

I have fixed it locally but am waiting for at least a few more hours in order to use this site as an example. Hey, it beats making a quick mock-up. Sort of. (My teachers always thought i was most useful as an example to warn others – well, i do what i can!)

And a big thanks to the great Jeffrey Zeldman for helping get the word out to designers about this. Of course, 99% of people making web sites won’t be affected, but for those of us using alternate styling, it’s a nasty thing to have happen.

[UPDATE 2] To clarify, Safari and Chrome both use the Webkit rendering engine, as well as parts of the Mozilla FIrefox codebase. Not to point fingers or anything. I’m just sayin’ is all.

[UPDATE 3] I couldn’t take it anymore. I fixed things here so there shouldn’t be any issues. I use a browser sniffer to detect the user agent and deliver either modern CSS or a crappy facsimile thereof for older, less standards-compliant user agents. As long as i keep up to date, no problem… of course, the drawback is obvious. I must keep up to date. Anyway, i’ve completely eliminated the alternate styles for both Chrome & Safari, at least until this bug is fixed in the Webkit renderer. In the meantime, i’ll put together a tester page and link it here.

Categories
uncategorized

Google Chrome obeys alternate CSS

Originally published at jeremyjarratt.com. You can comment here or there.

So Google Chrome is out. That’s great! It’s really a cool, fast, secure browser.

Unfortunately, it appears to break sites in one very important way: it obeys alternate stylesheets, just as if they were normal, active stylesheets. This breaks sites who print their alternate CSS links after active ones (like mine – for now).

I’ve sent this in as a bug to Google, and i’d recommend that others do the same (select “report bug or broken website” from the page icon to the upper right).

At the moment, the only thing to do is to list alternate stylesheets before active ones, or exclude alternate links altogether.

However, there are (naturally!) problems with each method…

Listing alternate CSS (which would still be obeyed) could still cause style conflicts, if there are any rules which are not contradicted (read: overwritten) by later stylesheets below the alternate ones.

On the other hand, not listing alternate stylesheets disables additional functionality in user agents such as Opera, which allows users to select from a menu what style they’d prefer to view a site in – which is arguably the best, most accessible method of switching stylesheets (if you’re using one of those user agents, that is).

For my money, i believe the former is the best option. This means i may have to do some code “cleaning,” which i should have done anyway. In fact, rather than removing extraneous CSS rules, i’ll be adding rules which do not exist in, say, X.css to Y.css, in order to counteract any style collisions by overwriting them with alternate rules.

Btw, for those who need it, here’s the User Agent string i captured:

Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

[UPDATE] Matt Wilcox helpfully pointed out that this isn’t exactly a Chrome bug, but a leftover Safari one which has apparently been around for years, according to a decently shrewd Google search. Lesson: test in Safari, even if you think it’s a Practically Perfect Browser.

I have fixed it locally but am waiting for at least a few more hours in order to use this site as an example. Hey, it beats making a quick mock-up. Sort of. (My teachers always thought i was most useful as an example to warn others – well, i do what i can!)

And a big thanks to the great Jeffrey Zeldman for helping get the word out to designers about this. Of course, 99% of people making web sites won’t be affected, but for those of us using alternate styling, it’s a nasty thing to have happen.

[UPDATE 2] To clarify, Safari and Chrome both use the Webkit rendering engine, as well as parts of the Mozilla FIrefox codebase. Not to point fingers or anything. I’m just sayin’ is all.

[UPDATE 3] I couldn’t take it anymore. I fixed things here so there shouldn’t be any issues. I use a browser sniffer to detect the user agent and deliver either modern CSS or a crappy facsimile thereof for older, less standards-compliant user agents. As long as i keep up to date, no problem… of course, the drawback is obvious. I must keep up to date. Anyway, i’ve completely eliminated the alternate styles for both Chrome & Safari, at least until this bug is fixed in the Webkit renderer. In the meantime, i’ll put together a tester page and link it here.

Categories
current events life local memories work

Open letter to Dayton defenders

Homeless.
Homeless.

Here is the text of an e-mail i never sent to the editors of the Dayton Daily News and some other locals. For whatever reason, it was abandoned. This was concerning a recent Forbes article asserting Dayton, among several other Ohio cities, was among the top ten fastest dying cities in America. Our local media, far from investigating the underlying reasons why we should be so included, instead insisted on defending our [un]fair city, claiming that Dayton wasn’t really dying – just changing.

You know what else is a change? Death.

(Note: this is not very well written and equally badly edited. As i’ve said, it never got beyond an early stage.)

Categories
current events local uncategorized

John McCain announces VP in Dayton

John McCain wants to eat you.
John McCain wants to eat you.

So today at the Wright State University‘s Nutter Center, Republican presidential hopeful John McCain announced his running mate. This, in Dayton, Ohio, the worst, dyingest city on the face of the earth.

His running mate? Alaska Governor Sarah Palin. The one who hates women, the environment, and gay rights (but loves guns and death)? Yes, that one.

So, to recap: he’s chosen Dayton, Ohio – the new Flint, Michigan – to announce his female running mate.

Well played, sir. Well played. The worst thing is that he’s actually got me a little shaken, and i’d bet a lot of other Democrats are similarly rattled. Never mind that we’ll get over it by the end of the weekend and continue to fight, harder than ever, against this debased, America world-hating pair of depraved sickos.

Look, the facts are in. McCain not only admitted on national television that he doesn’t understand economics, but he doesn’t even know how to count (for the record, Mr. McCain, we lost count of your houses too). He believes that you’re still “middle class” until you’ve hit five million dollars. He’s missed many votes while a Senator during his campaign. Numbers is not this guy’s strong suit. And you know what? I want a president who can count. It is certain that the job of President of the United States of America requires this particular skill.

He thinks Iraq is safe now. Uh… yeah. Not really.

Much of his top campaign staff were lobbyists, which kind of defeats the whole reform thing.

Need one more nail? How’s this one… you could pierce hardened steel with it in one lethargic, half-assed whack.

As for Palin… well, she wants kids to be taught that Dinosaurs and Jesus were contemporaries, and she fired a guy because he wouldn’t fire a guy who was divorcing her sister. Alaska was one of the first states in the union to ban same-sex marriage, ten years ago (before her governorship – but she supported it). Her husband works for BP. And she wants Alaska drilled… so… hard. I think these things speak for themselves.

So if you’re on the line about who to vote for, think about these things, then think a little bit more about them. Then do the right thing and vote who you believe has the better chance of not running our nation into the ground with endless, zillion-dollar wars and imprudent corporate kickbacks, who probably won’t be shipping our entire economy, including our very jobs, wholesale, overseas, and who probably has a better-rounded and fresher, more insightful view of the world around him. And who, in merely becoming our next President of the United States of America, will change the world we live in, in meaningful and positive ways.