Image Flip, Doing something wrong here... Options

[tharpdevenport]

http://rejectedfilmscores.150m.com/WKGC/Music.html

The flip images aren't showing behind "Classical", "Jazz" (for forth). "Classical" has something behind it, but that was just a failed attempt at a few tries to get it to work.

And I want the buttons to be pressed, not justhte word. Going to eliminate that.

I'm trying to avoid positioning here.

Not sure what I am doing incorrectly.

[Darin McGrew]

Your CSS uses

CODE

.SOL A

which selects an A element inside an element with class="SOL".

Your HTML uses

CODE

<A href=...><SPAN class="SOL">...</SPAN></A>

(which is the other way around).

[tharpdevenport]

The problem there that if I switch it around, it makes only the word clickable. I one the entire button to be; not just for the heck of it, but so people don't have to position it right on the word.

[pandy]

And what do you have if you don't switch it around? Zilch it looks like.

You have several problems with that code. What do you need the SPANs for? Also, your tabs won't be more than partly visible because the A isn't larger than the text it contains. You will just see a patch of color.

[Darin McGrew]

The problem there that if I switch it around, it makes only the word clickable.

That sounds like switching the HTML. So what happens if you switch the CSS?

[tharpdevenport]

The SPANs were what I thought would be a clever solution around positioning DIVs.

I started with code from composerbase.150m.com/PT.html

Where the buttons on the left are Flips, but positioned.

I tried redoing stuff, since getting DIVs to hard to position horizantally in browsers, plus it was just pissing me off.

Then I had to change the code from links to Jump Clickers.

That sounds like switching the HTML. So what happens if you switch the CSS?

You lost me.

[Darin McGrew]

That sounds like switching the HTML. So what happens if you switch the CSS?

You lost me.

Your HTML has a span element inside an a element. Your CSS selects a elements inside the span elements. The problem is that they don't match.

If you can't switch your HTML to use a elements inside span elements, then why can't you switch your CSS to select span elements inside the a elements?

[Frederiek]

The code from which you started, isn't a very good one. Several div's are used, where only one should be enough. It's always harder to adapt someone else's code then to write one of one's own.

Turn the span and a elements around in your HTML, as suggested before. And then, fiddle with the padding, eg padding: 9px 17px; (9px for top/bottom, 12px for left/right).

You might want to take a look at samples in Listamatic.

[tharpdevenport]

Thank you. I tried applying this one, and it worked:

http://css.maxdesign.com.au/listamatic/horizontal02.htm#