pagans | code | dreams

NAVIGATION
APPLICATION «
PLAYER CONTACT «
HMD CATCH-ALL «
PERMISSIONS «
CR CHART «
ACTIVITY TRACKING «
OPEN RP POST «

VERSION 1
*BACKGROUND IMAGE MUST BE AT LEAST 400px by 500px

<raw-code>
<table style="font-family: 'century gothic', 'avant garde', sans-serif; color: #000; letter-spacing: 1pt;">
<tr><td width="400px">
<div style="width: 400px; height: 500px; align: float; background: #e14f4f url(IMGURL); background-position: center; background-repeat: no-repeat;">
<div style="width: 200px; background: #fff; position: relative; top: 15px; left: 90px; padding: 9px; text-align: right;">
<span style="font-size: 16pt;">HEADERTEXT</span><br />
<span style="font-size: 9pt;">
<a href="LINKURL" style="text-decoration: none;">LINKTITLE</a> «<br />
<a href="LINKURL" style="text-decoration: none;">LINKTITLE</a> «<br />
<a href="LINKURL" style="text-decoration: none;">LINKTITLE</a> «<br />
<a href="LINKURL" style="text-decoration: none;">LINKTITLE</a> «<br />
<a href="LINKURL" style="text-decoration: none;">LINKTITLE</a> «<br />
<a href="LINKURL" style="text-decoration: none;">LINKTITLE</a> «<br />
<a href="LINKURL" style="text-decoration: none;">LINKTITLE</a> «</span>
</div>
</div>
</td></tr>
</table>
</raw-code>

- - -

DIRECTORY
active muselist
past & present
how's my driving

PRESS PLAY
open prompts
open inbox

contact
plot with me
permissions

disclaimer
this musebox is pg-13.

VERSION 2
*BACKGROUND IMAGE MUST BE AT LEAST 320px by 420px
**LINK NUMBERS ARE FIXED;
if you'd like less boxes or more boxes,
you'll need to change the div position values

<raw-code>
<table style="font-family: 'Courier New', 'Andale Mono', monospace; color: #000; letter-spacing: 0.5pt; line-height: 18pt; text-transform: uppercase;">
<tr><td width="320px">
<div style="width: 320px; height: 420px; align: float; background: #000000 url(IMGURL); background-position: center; background-repeat: no-repeat;">
<div style="width: 180px; background: #fff url(http://i.imgur.com/gfpzs.png); position: relative; top: 15px; left: 120px; padding: 5px; text-align: right;">
<span style="font-size: 16pt; color: #000;">BOXHEADER1</span><br />
<a href="LINKURL" style="text-decoration: none;">LINKTITLE1</a><br />
<a href="LINKURL" style="text-decoration: none;">LINKTITLE2</a><br />
<a href="LINKURL" style="text-decoration: none;">LINKTITLE3</a>
</div>
<div style="width: 180px; background: #fff url(http://i.imgur.com/gfpzs.png); position: relative; top: 30px; left: 120px; padding: 5px; text-align: right;">
<span style="font-size: 16pt; color: #000;">BOXHEADER2</span><br />
<a href="LINKURL" style="text-decoration: none;">LINKTITLE1</a><br />
<a href="LINKURL" style="text-decoration: none;">LINKTITLE2</a><br />
</div>
<div style="width: 180px; background: #fff url(http://i.imgur.com/gfpzs.png); position: relative; top: 45px; left: 120px; padding: 5px; text-align: right;">
<span style="font-size: 16pt; color: #000;">BOXHEADER3</span><br />
<a href="LINKURL" style="text-decoration: none;">LINKTITLE1</a><br />
<a href="LINKURL" style="text-decoration: none;">LINKTITLE2</a><br />
</div>
<div style="width: 180px; background: #fff url(http://i.imgur.com/gfpzs.png); position: relative; top: 60px; left: 120px; padding: 5px; text-align: right;">
<span style="font-size: 16pt; color: #000;">BOXHEADER4</span><br />
SUPERSHORT MESSAGE HERE.<br />
</div>
</div>
</td></tr>
</table>
</raw-code>

Flat | Top-Level Comments Only

Yo it's still me; I checked your code and the new one up on your post and I figured out why it's not aligning. The inner div padding has to be all the same value; the second column's at 5px while the first column's at 9px.

try this one out:

<raw-code>
<table style="font-family: 'calibri', color: #000; letter-spacing: 0.5pt; line-height: 18pt;">
<tr><td width="320px">
<div style="width: 370px; height: 420px; align: float; background: #e14f4f url(https://31.media.tumblr.com/85626ae1e1511e267ece3cd9f883efb3/tumblr_mquxk0tOrg1rcfflyo1_500.jpg); background-position: right-center; background-repeat: no-repeat;">
<div style="width: 200px; background: #fff; position: relative; top: 15px; left: 130px; padding: 9px; text-align: right;">
<span style="font-size: 16pt;">HAYLEY</span><br />
<span style="font-size: 9pt;">
<a href="http://vampirediaries.wikia.com/wiki/Hayley_Marshall" style="text-decoration: none;">hayley wikia article</a> «<br />
<a href="http://vampirediaries.wikia.com/wiki/Werewolf" style="text-decoration: none;">tvd werewolf wikia article</a> «<br />
<a href="http://www.tumblr.com/tagged/hayley-marshall" style="text-decoration: none;">hayley marshall @tumblr</a> «<br />
<a href="http://www.tumblr.com/tagged/haylijah" style="text-decoration: none;">haylijah @tumblr</a> «</span>
</div>
<div style="width: 200px; background: #fff; position: relative; top: 15px; left: 130px; padding: 9px; text-align: right;">
<span style="font-size: 16pt;">GENERAL RP</span><br />
<span style="font-size: 9pt;">
<a href="http://consequence.dreamwidth.org/801.html" style="text-decoration: none;">permissions + opt-out</a> «<br />
<a href="http://consequence.dreamwidth.org/2185.html" style="text-decoration: none;">open inbox post</a> «<br />
<a href="http://things.dreamwidth.org/6084.html" style="text-decoration: none;">open gen post</a> «<br />
<a href="http://things.dreamwidth.org/7935.html" style="text-decoration: none;">open nsfw post</a> «</span>
</div></div></td><td width="320px">
<div style="width: 320px; height: 420px; align: float; background: #000000 url(https://24.media.tumblr.com/9f414df0a68c2fb993bbc7e8af367789/tumblr_mlmivumP5V1rrdu8mo1_500.jpg); background-position: center; background-repeat: no-repeat;">
<div style="width: 180px; background: #fff url(http://i.imgur.com/gfpzs.png); position: relative; top: 15px; left: 110px; padding: 9px; text-align: right;">
<span style="font-size: 16pt; color: #000;">ATARAXION</span><br />
<a href="http://consequence.dreamwidth.org/713.html" style="text-decoration: none;">contacting hayley</a><br />
<a href="http://consequence.dreamwidth.org/1709.html" style="text-decoration: none;">remembering people</a><br />
<a href="http://consequence.dreamwidth.org/1359.html" style="text-decoration: none;">collecting items</a>
</div>
<div style="width: 180px; background: #fff url(http://i.imgur.com/gfpzs.png); position: relative; top: 30px; left: 110px; padding: 9px; text-align: right;">
<span style="font-size: 16pt; color: #000;">ASGARD</span><br />
<a href="http://consequence.dreamwidth.org/1159.html" style="text-decoration: none;">contacting hayley</a><br />
<a href="http://consequence.dreamwidth.org/1980.html" style="text-decoration: none;">remembering people</a>
</div>
<div style="width: 180px; background: #fff url(http://i.imgur.com/gfpzs.png); position: relative; top: 45px; left: 110px; padding: 9px; text-align: right;">
<span style="font-size: 16pt; color: #000;">HAYLEY...</span><br />
is a werewolf.<br />
chomp chomp.<br />
</div>
</div>
</td></tr>
</table></raw-code>

THANK YOU!! I tried to figure out where something wasn't matching up but I didn't check the inner div! You are amazing.

code | dreams

no subject

no subject