Banner Sizing Help

Hmm... it would help if we could see your skin.  With Tammy's DesertBrown it looks like the banner isn't used in relation to other elements.  Like, it's not inside a div that helps define the size of any elements on the page.  If yours is, that could be why it's doing what it's doing - it might be meant to.  An example of what I'm talking about is this (really buggy old) skin at my test site: http://efictiontest.verilyviridian.com/index.php?skin=PhotoBooth.  See how the banner image is helping to define the width of the content areas?

That's an awfully wide banner, though.  It's 1440 across?  So even if someone does have a wide-screen monitor set to that they'd have to have the browser window completely maximized to see the entire thing.

One way to do it that I know is not the best but still SHOULD work (used to work anyways) is to have your banner image be in a table and included as the table background... Make the table be 100% wide and that should do it.

exemple coding:

<table width="100%" border=0 cellpadding=0 cellspacing=0 bg="{skindir}/images/banner.jpg"><tr><td>&nbsp;</td></tr></table>

That's the kind of code if you don't want to write your site's name and/or slogan in the banner area because the info is already on the banner itself. As I said, I'm sure there is a much better way to do it using CSS but I haven't had time to keep up with the CSS compliance thingies so I can't see what that might be.

Maybe the best way would be to look into the header.tpl and the style.css files for desertbrown and see how it was set up. Just an idea. 🙂

Edit:

Okay so I took a gander at the .tpl and the css file and it's really quite simple. In your CSS, you need to make sure you have a class for the banner that can be assigned as a div id... meaning something like this.

#banner {
background: url(images/imagename.JPG);
padding-top: 215px;
}

Note that the padding can be 0... in desertbrown skin she has is set at 215px, which means this is where the other elements will start to happen (like her skin changer, etc). Then you only need to add to your header.tpl a div id="banner" and there you go.

Use the CSS method, and it should "wrap" accordingly to the size of the window.

Jenny, the HTML would have done the same thing as long as she didn't put the image IN the table but as the background to the table. That's how it was done in the old days... as in 10+ years ago. LOL

I'm slightly anally retentive with semantics and all that, forgive. 🙁

No worries at all dear. 🙂
Okay time for this woman to snuggle up under warm blankets... That -26F crap is really getting old fast!

thank you all so much for your help!  I haven't figured out everything yet but this helped a little!

That image is just a fairly large image.  It's centered so the sides can be cut off without losing the text.  The edges are also black so it can tile itself left and right a little and still look good.

I have a somewhat related question.  Could Jacynthe's HTML code be used to control a table of text on a page?  I only ask because i'm working on a web project for school and I'd like the page to appear without having to scrolll on smaller screen resolutions.

Yes, using percentage instead of fixed-width will allow the content to fit any resolution you throw at it when it comes to text. You may want to experiment with adding some cellpadding in there so the text doesn't hang to the table's "bounding box" but since I doubt you'd want your table to have 100%, this ends up not having much importance.