"Visit Now" tables in the middle of articles. How?

[wjb316]

Ok, I'm an idiot when it comes to this kind of thing. I'm trying to code some nice looking promotional boxes to add to the middle of my articles.

For example, look at the PokerStars box in the middle of this article:

5 Tips to Beating Super Turbo Sit and Go?s | Poker News

It's just a simple rectangle with a dotted border. Why the hell is this so hard for me to figure out?

Mine always turn into huge, ugly squares that take up half the screen:

Why Play? | BeatNoLimit.com

I'm using WP and do not know how to code these things.

If someone could help me out with a quick little Idiot's guide to creating these, I'll write any article you want for free.

[GregW]

You can do really simple ones using this CSS:

.box {border:1px dashed #C60; background-color:#FF9; text-align:center; padding:6px;}

Then just add the class to the promo text in p tags and it will give it the border and bg colour. Like this:

<p class="box">Promo text in a box with a dotted border</p>

If you want to put more stuff in the promo box, just give that class to a div and then put whatever you want in it. So:

<div class="box">
<p>text</p>
<img src="wherever.jpg" />
<p>more text</p>
</div>

You might have to fiddle with the CSS a tiny bit like with the margins to give it more space in between the text, but that's the jist of it. No need to use a table.

[pokerworx]

That table you linked looks like this

<table class="MsoNormalTable"
style="border: medium none ; background: rgb(226, 251, 228) none repeat scroll 0%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; margin-left: 5.4pt; border-collapse: collapse; text-align: left;"
border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr style="height: 0.6in;">
<td
style="border: 1pt dashed rgb(127, 127, 127); padding: 0in 5pt; width: 6in; height: 0.6in;"
valign="top" width="576">
<p
style="margin: 7pt 0in 0pt; text-align: center; line-height: 60%;"
align="center"><span
style="font-size: 10.5pt; font-family: Verdana; color: rgb(193, 0, 0);"><strong>POKERSTARS
IS #1 FOR SIT-N-GO TOURNAMENTS!</strong></span> - <strong><span
style="font-size: 10pt; line-height: 60%;">Get up to $50
FREE!</span></strong></p>
<p
style="margin: 0pt 0in; text-align: center; line-height: 60%;"
align="center"><strong><span
style="font-size: 10pt; line-height: 60%;">Bonus Code: <span
style="color: rgb(193, 0, 0);">Stars50 </span><span
style="color: rgb(255, 255, 153);"> &hellip;..</span>Marketing
Code: <span style="color: rgb(193, 0, 0);">PSP2175</span></span></strong></p>
<p class="MsoNormal"
style="margin: 0pt 0in; text-align: center; line-height: 70%;"
align="center"><span style="color: rgb(0, 0, 195);"><strong><span
style="font-size: 10.7pt; line-height: 60%; font-family: Verdana;"><a
rel="nofollow" href="http://www.rsspoker.com/go/pokerstars"
target="_blank"><span style="color: rgb(0, 0, 255);">DOWNLOAD
POKERSTARS</span></a></span></strong></span></p>
</td>
</tr>
</tbody>
</table>

What I use and its a great free program is Nvu Web Authoring Software you can just copy the page onto it click view at the top and view html source that gives you the code you use when making a page or submitting.

heres a simple one i just done with it, you use it just like word its brillient.

<table
style="border: medium dashed ; width: 580px; text-align: left; margin-left: auto; margin-right: auto;"
border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td
style="text-align: center; background-color: rgb(255, 255, 102);">text
goes here</td>
</tr>
</tbody>
</table>

[Unknown Webmaster]

Use CSS instead of tables. There are a bunch of CSS tutorials on W3C Schools

Here are some code to get you started - You should be able to copy-paste it directly to where you want the box to appear.

<div style="border-style:dotted; background-color:green; margin:20px; padding:20px;"><p>Your text here</p></div>

TPB's example are better long term, but it may be easier to start without a seperate CSS file.

[pokerworx]

The css seems much better would you guys use that over tables all the time?

[GregW]

The css seems much better would you guys use that over tables all the time?

Yep definitely. Just easier and less code. You won't go back to using tables for layouts after you get used to using CSS and a handful of divs.

[OPC]

Yep definitely. Just easier and less code. You won't go back to using tables for layouts after you get used to using CSS and a handful of divs.

x2... CSS is much more user friendly to the developer and content writer...

[wjb316]

Thanks for the responses guys. Ok so CSS it is.

This would be a lot easier on a simple website but where do I put this stuff when using WP? Do I need find the actual post pages on my server, insert the code there and then find the corresponding syle sheet somewhere else?


(TPB, wilee and UW, PM me your article topics and I'll get em to you guys right away. The article giveaway is now officially over)

Thanks a lot for the help ppl!

[Matt Geer]

If you are looking for a box similar to the one on RSS Poker and are using Word Press you can simply just use the Quote Box. That would be much simpler. An example can be seen here: Poker Rooms - Online Poker Rakeback

All those grey boxes are Quote Boxes and are very simple to use.

If you need help or maybe want don't want to use the quote box, I can probably design/code one if you'd like.

Shoot me a pm if you need any further help-

NOTE: Forgot to mention too that if you would rather have dotted lines or w/e that can be changed in the CSS

[LadyHoldem]

The What would Seth Godin do is a groovy lil wp plugin that Tj showed me awhile back. It makes those pretty lil boxes.. u can't (as far as I'm aware) customize each one, but you can show something different to new users, old users, registered users.. etc.