Coding help!

[excussus]

I'm trying to make a cr chart over here, and ran into a few obvious snags. The top left one functions fine, but when I started playing around with moving the text box (top right) and with making the circle clickable to reveal the text (bottom right), it got all messed up. I tried playing with margins, but it didn't do anything. Any help would be super appreciated!

Here's the code:

<raw-text><table width="1000"><tr><td><div style="width: 300px; height: 300px; background: #7e8000 url(http://cdn.screenrant.com/wp-content/uploads/amazing-spider-man-2-andrew-garfield.jpg) center top; background-repeat: no-repeat; border-radius: 300px; padding: 10px;"><div style="width: 300px; height: 300px;border-radius:300px;border:10px dashed #007e80; padding: 20px;margin: -30px 0 0 -30px;"></div></div><div style="font-family: courier;letter-spacing:-3px;; font-size: 10pt; color: #662803; position: relative; margin-top: -70px; margin-left: 200px;"><b><div style="background: #C9C9C9; border-radius: 10px; height: 100px; padding: 10px; width: 250px; border: 1px solid #7A6761; opacity: .75;">You want to believe that there's one relationship in life that's beyond betrayal. A relationship that's beyond that kind of hurt. And there isn't.</div></b></div></td> <td style="width:1%"></td> <td><table width="1000"><tr><td><div style="width: 300px; height: 300px; background: #7e8000 url(http://cdn.screenrant.com/wp-content/uploads/amazing-spider-man-2-andrew-garfield.jpg) center top; background-repeat: no-repeat; border-radius: 300px; padding: 10px;"><div style="width: 300px; height: 300px; border-radius:300px;border:10px dashed #007e80; padding: 20px; position: relative; margin: -30px 0 0 -30px;"></div></div><div style="font-family: courier;letter-spacing:-3px;; font-size: 10pt; color: #662803; position: relative;margin: -130px 0 0 30px"><b><div style="background: #C9C9C9; border-radius: 10px; height: 50px; padding: 10px; width: 250px; border: 1px solid #7A6761; opacity: .75;">You want to believe that there's one relationship in life that's beyond betrayal. A relationship that's beyond that kind of hurt. And there isn't.</div></b></div></td></tr> <tr><td><div style="width: 350px; height: 350px; overflow: hidden;"><a name="first"></a><a href="#second" style="text-decoration:none;"><div style="width: 300px; height: 300px; background: #7e8000 url(https://38.media.tumblr.com/6d3845ca581d4b8ff2305743f2ca0ef5/tumblr_na2dj1LGjB1sc0ffqo2_500.gif) center; background-repeat: no-repeat; border-radius: 300px; padding: 10px;"><div style="width: 300px; height: 300px;border-radius: 300px;border: 10px dashed #007e80; padding: 20px; margin: -30px 0 0 -30px;"></div></div> <a name="second"></a><a href="#first" style="text-decoration: none;"><div style="width: 300px; height: 300px; background: #7e8000 url(https://38.media.tumblr.com/6d3845ca581d4b8ff2305743f2ca0ef5/tumblr_na2dj1LGjB1sc0ffqo2_500.gif) center; background-repeat: no-repeat; border-radius: 300px; padding: 10px;opacity: .4;"><div style="width: 300px; height: 250px;border-radius:300px;border:10px dashed #007e80; padding: 20px;margin: -30px 0 0 -30px;"></div></div><div style="width: 300px;font-family: courier;letter-spacing:-3px;; font-size: 12pt; color: #662803; position: relative; margin-top: -200px; margin-left: 30px;opacity: 0.8;align: float">It’s easy to feel hopeful on a beautiful day like today, but there will be dark days ahead of us too.</div></div></td> </tr></table>

Comments

[glazedmacguffin]

For some reason DW makes you have to put a space at the top of a table cell with any sort of picture in it. I have yet to figure out why. It's irritating as butts. Even if that picture is in a div code background. So if you put divs at the top, they shouldn't go so wobberjawed in position.

I haven't figured it out completely (and my brain is pooting out tonight) but here is what I managed. The cells should be clickable once you get info into them.

Replaceables in the code are marked with caps and --- on either side. To make a new table row just copy and paste it from the marked start to end.

<raw-code> <table style="width: 1000px; margin: 0px !important; border-spacing: 0px !important; border-collapse: collapse !important;"> <!--HERE IS THE START OF THE TABLE ROW--> <tr><td><br><div style="width: 500px; height: 400px; overflow: hidden;"><a name="---LINK TO BLANK---"></a><br><table><tr><td> <div style="width: 300px; height: 300px; background: #7e8000 url(---URL OF PICTURE #1---) center top; background-repeat: no-repeat; border-radius: 300px; padding: 10px; margin: 10px;"><a style="text-decoration: none;" href="#---LINK TO TEXT---"> <div style="width: 300px; height: 300px; border-radius:300px; border:10px dashed #007e80; padding: 20px; position: relative; margin: -30px 0 0 -30px;"></div></a></div></td></tr></table><div style="height: 300px;"></div><a name="---LINK TO TEXT---"></a><br><table><tr><td> <div style="width: 300px; height: 300px; background: #7e8000 url(---URL OF PICTURE #1---) center top; background-repeat: no-repeat; border-radius: 300px; padding: 10px; margin: 10px;"><a style="text-decoration: none;" href="#---LINK TO BLANK---"> <div style="width: 300px; height: 300px; border-radius:300px; border:10px dashed #007e80; padding: 20px; position: relative; margin: -30px 0 0 -30px;"><div style="background: #C9C9C9; border-radius: 10px; padding: 10px; width: 250px; border: 1px solid #7A6761; opacity: .75; font-family: courier new; font-weight: bold; margin-top: 250px; margin-right: -100px; margin-left: 150px;"> ---TEXT GOES HERE--- .</div></div></a></div></td></tr></table></div></td> <td><br><div style="width: 500px; height: 400px; overflow: hidden;"><a name="top"></a><table><tr><td> <div style="width: 300px; height: 300px; background: #7e8000 url(---URL OF PICTURE #1---) center top; background-repeat: no-repeat; border-radius: 300px; padding: 10px; margin: 10px;"><a style="text-decoration: none;" href="#---LINK TO TEXT---"> <div style="width: 300px; height: 300px; border-radius:300px; border:10px dashed #007e80; padding: 20px; position: relative; margin: -30px 0 0 -30px;"></div></a></div></td></tr></table><div style="height: 300px;"></div><a name="---LINK TO TEXT---"></a><br><table><tr><td> <div style="width: 300px; height: 300px; background: #7e8000 url(---URL OF PICTURE #1---) center top; background-repeat: no-repeat; border-radius: 300px; padding: 10px; margin: 10px;"><a style="text-decoration: none;" href="#---LINK TO BLANK---"> <div style="width: 300px; height: 300px; border-radius:300px; border:10px dashed #007e80; padding: 20px; position: relative; margin: -30px 0 0 -30px;"><div style="background: #C9C9C9; border-radius: 10px; padding: 10px; width: 250px; border: 1px solid #7A6761; opacity: .75; font-family: courier new; font-weight: bold; margin-top: 250px; margin-right: -100px; margin-left: 150px;"> ---TEXT GOES HERE--- .</div></div></a></div></td></tr></table></div></td></tr> <!--HERE IS THE END OF THE TABLE ROW--> </table></raw-code>

[excussus]

Oh man, that is really strange. But thank you! This makes it so much cleaner than, you know, smashing everything together in a corner like it was. xp Thanks so much for your help!!