Hello,

I have been looking over the tutorials on this forum for CSS layout design and I began to make changes to our guilds website.

The problem is I can't get the images to work correctly.

This is what I am using for my content boxes.  This is what it should look like.



But the problem is... when I put in my code it turns out looking like this.



As you can see the images are not displaying correctly.  I figure this has something to do with the code.  If anyone can take a look at this and let me know if you see anything that is out of the norm I would appreciate it.

CSS Code

.ltopleft, .ctopleft, .rtopleft { background: url(http://i298.photobucket.com/albums/mm244/slumslum71/NewContent/top_1x1.jpg) no-repeat; height:12px; width:25px; }

.ltoptile, .ctoptile, .rtoptile { background: url(http://i298.photobucket.com/albums/mm244/slumslum71/NewContent/top_sliver.jpg) repeat-x; height:25px; }

.ltopright, .ctopright, .rtopright { background: url(http://i298.photobucket.com/albums/mm244/slumslum71/NewContent/top_1x3.jpg) no-repeat; height:12px; width:25px; }

.llefttile, .clefttile, .rlefttile { background: url(http://i298.photobucket.com/albums/mm244/slumslum71/NewContent/center_1x1.jpg) repeat-y; width:1px; }

.lrighttile, .crighttile, .rrighttile { background: url(http://i298.photobucket.com/albums/mm244/slumslum71/NewContent/center_1x3.jpg) repeat-y; width:1px; }

.lbottomleft, .cbottomleft, .rbottomleft { background: url(http://i298.photobucket.com/albums/mm244/slumslum71/NewContent/bottom_1x1.jpg) no-repeat; height:48px; width:26px; }

.lbottomtile, .cbottomtile, .rbottomtile { background:
url(http://i298.photobucket.com/albums/mm244/slumslum71/NewContent/bottom_sliver.jpg) repeat-x; height:26px; }

.lbottomright, .cbottomright, .rbottomright { background: url(http://i298.photobucket.com/albums/mm244/slumslum71/NewContent/bottom_1x3.jpg) no-repeat; height:47px; width:26px; }

Content Box (Left)

<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="ltopleft"></td>
  <td class="ltoptile"><div class="ContentBoxTitle">$block[title]&nbsp</div></td>
  <td class="ltopright"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="llefttile"></td>
  <td class="ContentBoxBody">$block[content]&nbsp</td>
  <td class="lrighttile"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="lbottomleft"></td>
  <td class="lbottomtile">&nbsp;</td>
  <td class="lbottomright"></td>
</tr>
</table><br>

Any clues?  Thanks for your help.

The site I am working in is:

http://end-game.guildportal.com

One thing that I am having a problem with is finding out how to put dividers between the forum posts.  As of right now there is nothing there to really say one post has ended.  Anyone know the CSS command for that?

Thanks Mottie,

You are like the CSS Savior.

Well, GuildPortal is set up to use the AltGridRow, I figured that was what you wanted. If you only want the individual posts to be divided, try using:

.MessageAuthorLinkCell1 { color:#ffffff; background:#424542; }
.MessageSubjectCell1 { color:#ffffff; background:#424542 }

If you want the link to message the person and the direct link to also match, you can add

.MessageAuthorLinkCell1 a:link { color:#ffffff; }
.MessageSubjectCell1 a:link { color:#ffffff; }

You can also add more styles to the links by copying the CSS above and changing the a:link to a:active, a:hover and a:visited if you want to change those styles too.

Mottie is freaking awesome, check out Mottie's test website too - its a wealth of pure gold knowledge.