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! > Aligning graphics
Gax_DDO (New Admin) 9/24/2008 3:36 AM EST : Aligning graphics
Gax_DDO
Posts: 396
Fingers of Fury!

I am having trouble trying to get two graphics to line up on my welcome content box.
Notice the top left corner how the graphic piece is shoved into the corner instead of sitting on top of the graphic next to the contextboxbody. There is one on the right as well and cant even see it at all.


http://www.guildportal.com/Guild.aspx?GuildID=99994&TabID=856487



Here is what I have in Custom CSS

#box_Welcome .topleft { background: url(http://www.axiomfiles.com/Files/99994/topleft2.png) no-repeat; height:0px; width:43px; }
#box_Welcome .topright { background: url(http://www.axiomfiles.com/Files/99994/topright2.png) no-repeat; height:0px; width:43px; }

#box_Welcome .toptile, #box_Welcome .bottomleft, #box_Welcome .bottomtile, #box_Welcome .bottomright { }

#box_Welcome { background: transparent; border:0px; }
#box_Welcome .ContentBoxTitle { background: transparent; color: #ffffff; position: relative; top:20px; left:265px; font-size:12pt; }
#box_Welcome .lefttile { background: transparent url(http://www.axiomfiles.com/Files/99994/leftside2.png) right top no-repeat; height:0px; width:100px; padding:5px; }
#box_Welcome .ContentBoxBody { background: transparent url(http://www.axiomfiles.com/Files/99994/wbackground.png) left top repeat-x; height:0px; padding: 1px 25px; color: #5a4129; }
#box_Welcome .righttile { background: transparent url(http://www.axiomfiles.com/Files/99994/rightside2.png) left top no-repeat; height:0px; width:100px; padding:5px; }

Thanks in Advance. 

TopBottom

Mottie (MVP) 9/24/2008 7:16 AM EST : RE: Aligning graphics
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Gax_DDO,

First off you need to go back and edit your custom content box HTML. There are three tables in each area (left, center and right) and all three should have cellspacing="0",  cellpadding="0" and width="100%".  You shouldn't have to edit any of the custom content box HTML because you can modify it with CSS. For the full HTML, please refer back to this post.

Here are some notes about the CSS:
  • The ContentBoxTitle doesn't need this part of the CSS unless it's not aligning up to where you want it - "position: relative; top:20px; left:265px;"
  • There is no need to set the height of a repeating border to 0px.
  • Image height and width, when defined, is usually the exact height and width of the image (e.g. the lefttile should be set to 36px), from there you can nudge the images with padding.
  • Here is your modified CSS:

    #box_Welcome .toptile, #box_Welcome .bottomleft, #box_Welcome .bottomtile, #box_Welcome .bottomright { }

    #box_Welcome { background: transparent; border:0px; }
    #box_Welcome .ContentBoxTitle { background: transparent; color: #ffffff; font-size:12pt; }
    #box_Welcome .topleft { background: url(http://www.axiomfiles.com/Files/99994/topleft2.png) bottom right no-repeat; width:35px; height:22px; padding-left:6px; }
    #box_Welcome .topright { background: url(http://www.axiomfiles.com/Files/99994/topright2.png) bottom left no-repeat; width:35px; height:22px; padding-right:6px; }
    #box_Welcome .lefttile { background: transparent url(http://www.axiomfiles.com/Files/99994/leftside2.png) right top no-repeat; width:36px; }
    #box_Welcome .ContentBoxBody { background: transparent url(http://www.axiomfiles.com/Files/99994/wbackground.png) left top repeat-x; padding: 1px 25px; color: #5a4129; }
    #box_Welcome .righttile { background: transparent url(http://www.axiomfiles.com/Files/99994/rightside2.png) left top no-repeat; width:36px; }

  • Here are some notes on making a transparent background... I don't mean to assume that's what you are going for, but here are some comments about it if you are:

    If you are going for a transparent background, I'd recommend renaming the ContentBoxBody. GuildPortal adds extra "ContentBoxBody" tags to certain content windows. I described this (sorta) in this post.

    Then I would remove the background images from the "ContentBox", "ContentBoxTitle", "ContentBoxBody", "NormGridRow" and "AltGridRow"

    Use "background: transparent;" for those, then you could add a background image or color for the mouseover row "MoGridRow" to highlight that effect.
I hope my spewing of information helped a little!

TopBottom

Gax_DDO (New Admin) 9/24/2008 10:22 AM EST : RE: Aligning graphics
Gax_DDO
Posts: 396
Fingers of Fury!

yes I have custom html in the 3 boxes, but I had borked it all up trying to achieve what you have in the revised code. So i re-did the 3 boxes and placed you code and Snap! everything looks beautiful.
Thank You Thank you.

A question though, what is the relevance of this?: (In green)
#box_Welcome .topleft { background: url(http://www.axiomfiles.com/Files/99994/topleft2.png) bottom right no-repeat; width:35px; height:22px; padding-left:6px; }

Every image had a similar reference. What does that do?
TopBottom

Mottie (MVP) 9/24/2008 11:17 AM EST : RE: Aligning graphics
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

The CSS in green above is used for background positioning... I basically added it because there was a gap between the top left corner and the left side. If you've ever added a page background and added "bottom right" you'll see that image pop up in the bottom right corner of your page.

It's difficult to explain it better without a lot of image examples and graphs and charts LOL, but here is a site that might help explain it a little better... CSS Sprites and this article is pretty good too 
TopBottom

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