You’re going to laugh at what I did here. Thoughts?

[travelvice]

I’ve got this little moleskine notebook icon that I’m going to have above and below my travelogue content. Next to it will be the ‘previous’ and ‘next’ links, but with dates instead of text.

Here’s an example from the proof of concept work I’m doing: http://i.imgur.com/LXTxM.png
border added to show boundary of the wrapper DIV, set at 506px

Without jquery or JS I wanted to make the moleskine icon change from transparent to opaque when either of the links were hovered over, as well as the notebook itself. (see something similar, but with scripting at the bottom of http://intensedebate.com/).

I didn’t want the icon changing when the block was hovered over without the cursor over the text or the notebook.

The dates needed to grow left & right from a centered position, aligned towards the icon.

This is the gist of what I ended up doing. It validated at W3C, but I honestly don’t know if it’ll work beyond the modern browsers:

« previous

next »

OK not that wacky so far… but here’s what the CSS is doing:

• The span tags are absolutely positioned! The left one 270px from the right, the right one 270px from the left.
• The icon background div is a set 26px width and height that has the hover applied to it which changes the background. This has been given a margin-left of 240px!

Yeah. That’s two spans that have been absolutely positioned within a div that’s absurdly small with a hover effect that swaps the icons (using an image sprite).

Works perfectly on MISE9/FF4/Chrome10 – haven’t tried it on anything else.

Is this completely bonkers, or what?

[Historical Forums User]

I’m a little confused. This seems really fundamental and I don’t really see anything ground-breaking – but I want to believe its there. So what is incredible? I don’t see any reason this shouldn’t work all the way back to ie6.

[travelvice]

That’s good to hear. I just thought it was really out there in left field.

[Historical Forums User]

You can float all over the place, push margins, and hover your heart out all you want – and you should be good to go. I don’t know how new you are to this, but validating your code is key. Many new-comers groan at that like its a crappy task, but really you’re bound to learn something new. My best advice is to read, read, read, and build stuff until you can teach others. Good luck!

[Author]

Posts