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! > ContentBoxBody too big---Resizing?
skyfiiire (New Admin) 9/28/2008 8:49 AM EST : ContentBoxBody too big---Resizing?
skyfiiire
Posts: 19
Becoming Adept!

Hey all, I have been working hard on my test site and learning the ways of CSS from the Mottie School of Web Design.  After applying my custom CSS and using it to provide the box border image formatting, I discovered a problem that for the life of me I cannot solve.  I have a feeling the solution is something very basic that I just have not learned.  Check out my test site here.

Certain content types push out the box side images because of their inherit sizes.  These are almost issues of using images that are too large; however, when I used the control panel to provide box border images, this was not an issue.  It only happened when I started using a custom CSS, therefore I assume there is a setting I am missing to auto resize the content or the boxes themselves?

Any help would be appreciated!

-Sky
TopBottom

Mottie (MVP) 9/29/2008 6:10 AM EST : RE: ContentBoxBody too big---Resizing?
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Sadly this is the problem with putting images in the background.

A simple solution would be to make the side columns larger or limiting the size of images within it. The CSS below will limit the image size, I believe this should work with Div's too, but it'll be difficult to get this to work with flash video.
  • Adjust the text in red to fit your column widths (remember everyone has different resolution settings!)
  • Also, you don't necessarily need the max-height... but it's there if you need it
.LeftContentZone .ContentBoxBody img { max-width:200px; max-height:500px; }
.CenterContentZone .ContentBoxBody img { max-width:600px; max-height:500px; }
.RightContentZone .ContentBoxBody img { max-width:200px; max-height:500px; }


TopBottom

skyfiiire (New Admin) 9/29/2008 11:43 AM EST : RE: ContentBoxBody too big---Resizing?
skyfiiire
Posts: 19
Becoming Adept!

OK...upon inserting this into my CSS and fooling with the options, it partially solved my problem...however, if you look at my site, it appears that it's not just the images that are creating the problem...the images are now compressed, but the content box itself looks as if it is 'forcing' itself larger than my box border images.  Any clues?

-Sky

**EDIT** Ok I fooled around with limiting the content boxes themselves using your code, and it now works 99% of the time...sometimes when resizing the window, the right border box shifts one pixel...but really the only time it now breaks down is if you resize the browser window in a way that would make the box borders smaller than the image inside.

TopBottom

fuzzhead (New Admin) 9/29/2008 1:07 PM EST : RE: ContentBoxBody too big---Resizing?
fuzzhead
Posts: 295
Fingers of Fury!

Well I'm no expert, but when viewing your sorce code I did find something odd:

.LeftContentZone .ContentBoxBody img { max-width:150px; max-height:150px; }
.CenterContentZone .ContentBoxBody img { max-width:300px; max-height:300px; }
.RightContentZone .ContentBoxBody img { max-width:150px; max-height:150px; }
.LeftContentZone .ContentBoxBody { max-width:121px;}

Not sure why you need a another Left Content Zone (highlighted in red), since the first one should take care of the entire left side zone on the page.

Also, as a rule of thumb, I always limit the page width to a maximum of 900px. I doubt that has anything to do with your picture problem, but it might help you get eveything contained while designing and provide a guide to determine where things are getting pushed beyond the limits you set.
TopBottom

skyfiiire (New Admin) 9/30/2008 10:19 AM EST : RE: ContentBoxBody too big---Resizing?
skyfiiire
Posts: 19
Becoming Adept!

Yes, I understand that the setting for that are a bit wacked (I need to play with them), but my understanding was that .ContentBoxBody {max-width=X} limited the entire element, while .ContentBoxBody img {max-width=X} limited an image's size within that element...I wasn't sure of the syntax to combine those two lines.

-Sky
TopBottom

Mottie (MVP) 9/30/2008 10:54 AM EST : RE: ContentBoxBody too big---Resizing?
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Yeah sorry I should have explained better....

You can't combine these two CSS elements as they will have different values. But Fuzzhead is right, your ".ContentBoxBody" should be wider than the ".ContentBoxBody img".

Just so you know you can also set a "min-width", "max-height" and "min-height" as well
TopBottom

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