I sucks at html+css+javascript

[housetier]

This is what programmers do these days

I have to "design" a page with a little DHTML:

• User inputs question
• Question is displayed below instructions and card deck
• User selects a card from card deck
• selected card is raised
• random card and its explanation are displayed below the re-displayed question

They use libraries

I have to use Highslide JS, which I think is quite solid. My page is loaded by highslide; it's a normal .html-page.

The Specs

I have all the images, and the texts, and a few "prototypes" printed on paper. What I don't have is a clue! I thought I know a little about CSS, but I can't for the time of my life figure out how to position those cards like in the prototype.

The card deck is right of the instructions. On the card deck there are 7 cards, 85x117 pixels; they overlap partially and are laid out in an arch (I think thats the word). For three days now I have been struggling to use the proper combination of "position", "top", "left", "margin-left" and "whatnot" to lay out the cards according to specs.

The Problem
I thought this would be easy, but I must be overlooking something.

So, how do I layout the cards with css and add an event handler to each one that raises it by, say, 20 pixels? I think I can hook into that raise-script to display the front of the card (135x183) and its explanation myself.

The Bounty

I don't have any credits left to offer, so I offer my help in setting up secure communications (email, irc, and jabber) as a return.

[steeladept]

The best help I can give you is to go to www.HTMLDog.com and checkout relative positioning.

[housetier]

Attached I have the files to show how far I have gotten:

• index.php is the homepage; highslide's popup is opened/launched/started by clicking on "Tageskarte ziehen" on the left
• tarot.htm is the content of the popup; this is what I am struggling with
• Tarotkarte_Rueckseite.gif is the cards of the card deck which is supposed to laid out in an arc. I even wrote a javascript to automatically insert <img>-tags, which worked but not really: the tags where inserted with correct styles but nevertheless they werent laid out according to style.
• 01_galli_tarot_2.jpg is a mock-up or prototype; gives an idea of the layout.

I know I am very demanding, but there is no reason for me to go beyond the basics of css+(d)html. I know the theory quite well and always have tips and hints for web designers, but I do not want to become a web designer myself.

Alas, experience beats theory, and lacking the former I am asking if someone could show me how to arrange this card deck. I am confident I can handle javascripting myself, I am not confident anymore about my css knowledge.


I should have asked much earlier when I first ran into problems and not when I finally ran out of ideas, and time. Thank you for responding, steeldept!