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! > Help with Fluid Width Tables
Grymn (New Admin) 8/26/2008 5:41 PM EST : Help with resizing banners
Grymn
Posts: 580
Zomgawsh Poster

I would like my site to display well on all resolutions and my banner is oversized on smaller resolutions; I'd like it to auto-resize.

How would I implement this into my site?

My site is here for reference:

http://ordohereticus.guildportal.com/


In smaller resolutions, the banner causes the screen to scroll horizontally.  That's what I'm trying to avoid.



I know I have to set width to 100% somewhere, but I'm not sure what code string I need, nor where to insert it.


Can anyone walk me through it?  Many thanks. 

TopBottom

Mottie (MVP) 8/27/2008 3:46 AM EST : RE: Help with Fluid Width Tables
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

This isn't exactly what you're looking for, but the basic idea is there... read this post.
TopBottom

Grymn (New Admin) 8/27/2008 7:39 AM EST : RE: Help with Fluid Width Tables
Grymn
Posts: 580
Zomgawsh Poster

Thanks so much, I'll take a look and see if I can get it to work. 
TopBottom

Grymn (New Admin) 8/27/2008 9:23 AM EST : RE: Help with Fluid Width Tables
Grymn
Posts: 580
Zomgawsh Poster

Still need assistance.  Can't figure this out on my own


I updated my original post to better reflect my issue.
TopBottom

Mottie (MVP) 8/28/2008 6:31 AM EST : RE: Help with Fluid Width Tables
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hey Grymn,

I took your current image and chopped it up into it's smaller parts (the CSS names are in parenthesis).

 Banner Image (bannerImg)
Sides
(LSide, RSide)
Repeating
background
(banner)
Title
(titleName)
  • Right click on the images above to save them
  • I only modified the left side of the "Banner Image" to match the repeating background... it was too much trouble to remove the name from the bottom right to show you this example 

  • The "Title" image is a png because it can allows different opacities in the image. This works nicely on all browsers but Internet Explorer.

  • You'll end up with a banner that looks like this (it will adjust to your browser window):


Banner Area
<style type="text/css">
.banner { width: 100%; height: 260px; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/Ordobkgd2.jpg) repeat-x; }
.bannerImg { width: 100%; height: 260px; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/Ordobkgd.jpg) right center no-repeat; }
.titleName { width: 100%; height: 64px; background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/Ordotitle.png) no-repeat; position: relative; left:100px; top:27%; }
.LSide { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/sides.gif); width:79px; height:260px; position: absolute; left: 1%; }
.RSide { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/sides.gif); width:79px; height:260px; position: absolute; right: 1%; }
</style>

<div class="LSide"></div><div class="RSide"></div>
<table class="banner" width="100%" border="0" cellpadding="0" cellspacing="0"><tbody>
<tr><td class="bannerImg"><div class="titleName"></div></td></tr>
</tbody></table>
Customizing
  • You can move everything between <style type="text/css"> and </style> into your Custom StyleSheet if you want.

  • Replace the URLs in green with your final images.

  • Adjust the image location of your guild title by changing the numbers in red.

  • If you replace any images, adjust the image height and width as needed in the CSS above (in blue), leave the width at 100% if that's what it is in the CSS.

TopBottom

RedRydur (Guild Admin) 8/28/2008 7:23 AM EST : RE: Help with Fluid Width Tables
RedRydur
Posts: 1065
Zomgawsh Poster

Lol, I was actually gonna ask you (Mottie) how you did this on your "HoT" site. Guess I know now.

I would like to know how you SHOUTED upside down!
"snɹɐʇɹɐʇ ɟo puɐɥ ǝɹǝɥʇ oןןǝɥ"

It seems you know all the niffty tricks!
---------------------------------------------
-
RedRydur the Pure
TopBottom

Mottie (MVP) 8/28/2008 9:02 AM EST : RE: Help with Fluid Width Tables
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

TopBottom

Grymn (New Admin) 8/28/2008 9:30 AM EST : RE: Help with Fluid Width Tables
Grymn
Posts: 580
Zomgawsh Poster

Wow, thank you so much, once again. 

You really go above and beyond the call of duty here.

You have my many thanks.

So the code goes into the Custom CSS area and not the Banner Area custom html right?
TopBottom

Mottie (MVP) 8/28/2008 9:40 AM EST : RE: Help with Fluid Width Tables
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

You can add the CSS into either place. But if you put it into GuildPortal's Custom StyleSheet, you'll need to remove <style> tags above and below it as it does this automatically.
TopBottom

Grymn (New Admin) 8/28/2008 10:25 AM EST : RE: Help with Fluid Width Tables
Grymn
Posts: 580
Zomgawsh Poster

Worked perfectly and had the side effect of allowing me to better understand how this works in general.

Thanks again!


(runs off to figure out nav button images)
TopBottom

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