Putting your buttons in an invisible table

The Problem With Buttons

The problem with those buttons - outside of the fact that they're ugly and gray if you don't have custom buttons, of course - is that they seem to go where they want to, not where you want them. Even when you buy or make your own buttons, they have a mind of their own, and what they want is to make you look like somebody who can control a cock, but can't control little buttons.

For instance, except with custom tribute buttons, you're going to have to have a caption explaining what the customer is buying and how much they're going to have to pay for it. That caption looks funky no matter where you put it.
Let's say you put it inline with the descriptions, and it ends up looking like this:

New photo set, 3 photos at the poolHumiliating you stupid wankersVideo of me and my girlfriendListen to me having sex with my boyfriend
So maybe you put line breaks between them:
New photo set, 3 photos at the pool
Humiliating you stupid wankers
Video of me and my girlfriend
Listen to me having sex with my boyfriend

So you center them:
New photo set, 3 photos at the pool
Humiliating you stupid wankers
Video of me and my girlfriend
Listen to me having sex with my boyfriend

Not a big improvement

How to space out your buttons neatly

What you can do is put them in a table, with a separate cell holding each button and its description.

To make a table, you first need to write table tags, to tell the browser it's a table. You tell the browser where the table starts - the first tag - and where it ends - the second tag that starts with the slash.
<table></table>
Now we're going to write the first row. You have to tell it where a row starts and where it stops. You will do this with an open 'tr' tag and a close 'tr' tag, just as you did with the table tags.
<table> <tr></tr> </table>
Let's put in a column. Each column starts with 'td' and ends with '/td'.
<table> <tr><td></td></tr> </table>
You can't actually see the table yet, as it has no borders and no size

Now we have a table with one colunn and one row. Let's add another column.
<table> <tr><td></td><td></td></tr> </table>
Let's add another row.
<table> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> </table>
You can't actually see the table yet, as it has no borders and no size. I'm going to put a border around it so you can see what happens when I fill the cells.
<table border="1"> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> </table>
Now I'm going to copy and paste one of the buttons in each of the cells. Don't forget, each cell's content goes between the 'td' and the '/td'.
<table border="1"> <tr><td>New photo set, 3 photos at the pool<img src="buybutton.gif"></td> <td>Humiliating you stupid wankers<img src="listenbutton.gif"></td></tr> <tr><td>Video of me and my girlfriend<img src="buybutton.gif"></td> <td>Listen to me having sex with my boyfriend<img src="listenbutton.gif"></td></tr> </table>

New photo set, 3 photos at the pool Humiliating you stupid wankers

Video of me and my girlfriend Listen to me having sex with my boyfriend

I'm going to put the text beneath the button by putting it after it with a break 'br' in between.
<table border="1"> <tr><td><img src="buybutton.gif"><br>New photo set, 3 photos at the pool</td> <td><img src="listenbutton.gif"><br>Humiliating you stupid wankers</td></tr> <tr><td><img src="buybutton.gif"><br>Video of me and my girlfriend</td> <td><img src="listenbutton.gif"><br>Listen to me having sex with my boyfriend</td></tr> </table>

New photo set, 3 photos at the pool
Humiliating you stupid wankers

Video of me and my girlfriend
Listen to me having sex with my boyfriend

Now I'll center the table and its contents. I putting 'center' before and '/center' after the table, and then I'll put 'center' before the contents of each cell. I'll leave out the '/center' from the cells to save character space, since it isn't necessary to put it on Niteflirt.
<center><table border="1"> <tr><td><center><img src="buybutton.gif"><br>New photo set, 3 photos at the pool</td> <td><center><img src="listenbutton.gif"><br>Humiliating you stupid wankers</td></tr> <tr><td><center><img src="buybutton.gif"><br>Video of me and my girlfriend</td> <td><center><img src="listenbutton.gif"><br>Listen to me having sex with my boyfriend</td></tr> </table></center>

New photo set, 3 photos at the pool
Humiliating you stupid wankers

Video of me and my girlfriend
Listen to me having sex with my boyfriend

I'm going to break the lines of text with a 'br' so they are no wider than the button.
<center><table border="1"> <tr><td><center><img src="buybutton.gif"><br>New photo set,<br>3 photos at the pool</td> <td><center><img src="listenbutton.gif"><br>Humiliating you<br>stupid wankers</td></tr> <tr><td><center><img src="buybutton.gif"><br>Video of me<br>and my girlfriend</td> <td><center><img src="listenbutton.gif"><br>Listen to me having<br>sex with my boyfriend</td></tr> </table></center>

New photo set,
3 photos at the pool
Humiliating you
stupid wankers

Video of me
and my girlfriend
Listen to me having
sex with my boyfriend

Now I'll set the table width at 60% of the white page column and the table height at 200 pixels. Then I'll set the colummn width and row height at 50% of table width and table height. You can use trial and error to see what looks best.
<center><table border="1" width="60%" height="200"> <tr height="50%"><td width="50%" ><center><img src="buybutton.gif"><br>New photo set,<br>3 photos at the pool</td> <td width="50%"><center><img src="listenbutton.gif"><br>Humiliating<br>you stupid wankers</td></tr> <tr height="50%"><td><center><img src="buybutton.gif"><br>Video of me<br>and my girlfriend</td> <td><center><img src="listenbutton.gif"><br>Listen to me having<br>sex with my boyfriend</td></tr> </table></center>

New photo set,
3 photos at the pool
Humiliating you
stupid wankers

Video of me
and my girlfriend
Listen to me having
sex with my boyfriend

Now just remove the border by setting the width to "0".
<center><table border="0" width="60%" height="200"> <tr height="50%"><td width="50%"><center><img src="buybutton.gif"><br>New photo set,<br>3 photos at the pool</td> <td width="50%"><center><img src="listenbutton.gif"><br>Humiliating<br>you stupid wankers</td></tr> <tr height="50%"><td><center><img src="buybutton.gif"><br>Video of me<br>and my girlfriend</td> <td><center><img src="listenbutton.gif"><br>Listen to me having<br>sex with my boyfriend</td></tr> </table></center>

New photo set,
3 photos at the pool
Humiliating you
stupid wankers

Video of me
and my girlfriend
Listen to me having
sex with my boyfriend

Voila!

Add more columns ('td') or rows ('tr') to make a table that will hold all of your buttons.

Back to tutorials index