CODE | thrift shop

[manual]

dessous perosa

three sisters

hunger

<table style="font-family:impact; font-size:1.4em;letter-spacing:3pt;text-transform:uppercase;"><tr><td width="250px" style="align:center;"><div style="height: 150px; align: float; background: url(IMGURL); background-position: center;"><div style="height: 25px; width: 250px; background: #eee; position: relative; top: 35px; opacity: 0.8;">TEXT</div></div></td></tr></table>

Comments

[youwillgotohell]

Heya! I LOVE this code, but I keep running into problems. I'll give this the caveat that it's late and I might be overlooking something obvious, but this is where I'm trying to use it, and it's cutting off the gif no matter what sizes I've put in. It also looks like it's not going the light bar in the background. Is there something I'm missing?

<center><table style="font-family:impact; font-size:1.4em;letter-spacing:3pt;text-transform:uppercase;"><tr><td width="400px" style="align:center;"><div style="height: 400px; align: float; background: url(http://24.media.tumblr.com/7ac7516294663ed797da4d0a0a2ab502/tumblr_mj2gsqgOVZ1qgiou0o1_400.gif); background-position: center;"><div style="height: 400px; width: 500px; background: #eee; position: relative; top: 35px; opacity: 0.8;">mirror universe</div></div></td></tr></table>

[manual]

Hi! Sorry for taking a while to reply. You didn't miss anything, technically, the width-height values were just mixed up a bit; in the code you gave me the background image width and the white bar width/height got switched. The inner div code has the values for the white bar, while the outer div code has the values for the background image.

Here's a quick fix:
<center><table style="font-family:impact; font-size:1.4em;letter-spacing:3pt;text-transform:uppercase;"><tr><td width="400px" style="align:center;"><div style="height: 225px; align: float; background: url(http://24.media.tumblr.com/7ac7516294663ed797da4d0a0a2ab502/tumblr_mj2gsqgOVZ1qgiou0o1_400.gif); background-position: center;"><div style="height: 25px; width: 400px; background: #eee; position: relative; top: 35px; opacity: 0.8;">mirror universe</div></div></td></tr></table>

[youwillgotohell]

Oh no worries, you didn't take long at all! I really appreciate the help. I see what you mean about changing up the widths/heights, but It's still coming out the same way; I edited in your fix code (thank you!), and it's still cutting off the gif and without the white part. :|a

[manual]

Are you using the code in an entry or in a comment? Because DW strips the coding if you post them as a comment, I have no clue why. I tried to duplicate the table as much as I could, and this is what I came up with for a comment table-like thing:

<center><table><tr><td width="380px" height="220px" style="align:center; background: url(http://24.media.tumblr.com/7ac7516294663ed797da4d0a0a2ab502/tumblr_mj2gsqgOVZ1qgiou0o1_400.gif);"><br /><br /><span style="display: block; margin:-10px 0; font-family:impact; font-size:1.4em; letter-spacing:3pt; text-transform:uppercase; background-color: #eee;">_mirror universe</span></td></tr></table>

[youwillgotohell]

Ah man, I was just wondering if that was what was happening. Yeah, I was using it in a comment, it's so weird that the coding doesn't translate. But that rewrite definitely works, thanks so much for your help, I love your stuff! :D

[manual]

No problem, I'm glad to help! Thanks for the comment too, it was a learning experience recoding it. <3

[solasbeag]

hi there! I adore this code, and I'd like to use it for a visualosities list - i would love to use the names as links to the visual posts; my only problem is, is that I don't like having the text highlighted after it's been used and i can't figure out how to make it work. any chance you could help me?

[manual]

Let's try this:

<table style="font-family:impact; font-size:1.4em;letter-spacing:3pt;text-transform:uppercase;"><style type="css"> a:link {color:#000000;} a:visited {color:#000000;} a:hover {color:#000000;} a:active {color:#000000;}</style> <tr><td width="250px" style="align:center;"><div style="height: 150px; align: float; background: url(IMGURL); background-position: center;"><div style="height: 25px; width: 250px; background: #eee; position: relative; top: 35px; opacity: 0.8;"><A href="LINKURL" style="text-decoration: none; color: #000;">TEXT</a></div></div></td></tr></table>

[solasbeag]

And it works! Thanks so much, you're a doll!