Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > CSS Layout problem
HaleGnomeMage (New Admin) 6/23/2008 2:57 AM EST : CSS Layout problem

HaleGnomeMage
Posts: 805
Zomgawsh Poster

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.

No alternate text supplied.

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

No alternate text supplied.

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.

TopBottom

Mottie (MVP) 6/23/2008 3:58 AM EST : RE: CSS Layout problem
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi HaleGnomeMage!

I love the border design nice work!

I checked out your code and noticed you switched the height and width numbers for all the corners. When the image shows 12 x 25 that's showing width x height. The HTML code doesn't need changing, but I'll post the CSS. I also added ".ContentBoxBody" with the color and a little padding to get the text away from the edge.

Please post a link to your site so we can all see what you've done!
.ltopleft, .ctopleft, .rtopleft { background: url(http://i298.photobucket.com/albums/mm244/slumslum71/NewContent/top_1x1.jpg) no-repeat; height:25px; width:12px; }
.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:25px; width:12px; }
.llefttile, .clefttile, .rlefttile { background: url(http://i298.photobucket.com/albums/mm244/slumslum71/NewContent/center_1x1.jpg) repeat-y; width:4px; }
.lrighttile, .crighttile, .rrighttile { background: url(http://i298.photobucket.com/albums/mm244/slumslum71/NewContent/center_1x3.jpg) repeat-y; width:4px; }
.lbottomleft, .cbottomleft, .rbottomleft { background: url(http://i298.photobucket.com/albums/mm244/slumslum71/NewContent/bottom_1x1.jpg) no-repeat; height:26px; width:48px; }
.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:26px; width:47px; }

.ContentBoxBody {background:#394539; padding: 4px;}
TopBottom

HaleGnomeMage (New Admin) 6/23/2008 8:14 AM EST : RE: CSS Layout problem

HaleGnomeMage
Posts: 805
Zomgawsh Poster

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?
TopBottom

Mottie (MVP) 6/23/2008 8:55 AM EST : RE: CSS Layout problem
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi again,

Just add this CSS:

.AltGridRow { color: #ffffff; background: #424542; }
.NormGridRow { color: #ffffff; background: #848684; }

The AltGridRow is used for the post headers, while the NormalGridRow is used in the forum post listings. I made the NormGridRow the same color as your background, but you can change that to whatever you want.
TopBottom

HaleGnomeMage (New Admin) 6/23/2008 4:13 PM EST : RE: CSS Layout problem

HaleGnomeMage
Posts: 805
Zomgawsh Poster

Thanks Mottie,

You are like the CSS Savior.
TopBottom

HaleGnomeMage (New Admin) 6/24/2008 1:05 AM EST : RE: CSS Layout problem

HaleGnomeMage
Posts: 805
Zomgawsh Poster

I just noticed that this code changes the forum listings as well.  Whatit does is put the background color over the forum titles, and when youmouse over them they disappear. 

I was just looking for a way to put in a divider for the user'sindividual post.  Which this code does, but it also does that hovereffect. If possible does anyone know of a way to just put in some way to separate individual posts?
TopBottom

Mottie (MVP) 6/24/2008 2:48 AM EST : RE: CSS Layout problem
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

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.
TopBottom

HaleGnomeMage (New Admin) 6/24/2008 2:54 AM EST : RE: CSS Layout problem

HaleGnomeMage
Posts: 805
Zomgawsh Poster

Awesome! That was exactly what I was looking for.  Thanks for the super fast response!  
TopBottom

Gundrik Rikbolgisson (New Admin) 6/24/2008 9:36 AM EST : RE: CSS Layout problem
Gundrik Rikbolgisson
Posts: 1753
Zomgawsh Poster

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

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%