...

View Full Version : vBulletin & cross-resolution compatibility.



sepharic
12-10-2002, 08:43 PM
I'm creating a style for a board that I go to, and after doing a little research I found that 800x600 is the common resolution, but there's quite a few members that use 1024x768 and up. Nonetheless I've started to design it in 800x600, but I want it so that the header will stretch to fit the entire screen, I've basically got an area on the right (pixel stretched) that should expand with the resolution but I'm having problems with it.

See, I've set the table width (that the header is placed in) to 100%, and in 800x600 it works fine, but anything upwards of that the header gets distorted as the slices space out from each other. :(

Can somebody give me any help on this? I can post the HTML if that's needed.

krycek
12-10-2002, 08:50 PM
post the html for the table's header row only, and I'll have a look :)

From the sound of it, you have more than one table cell on the header row. I suggest making all except one fixed width, that way you can control which one resizes :)

::] krycek [::

sepharic
12-10-2002, 09:31 PM
For some reason, now, it doesn't even display in 800x600 correctly... the header04.gif that is supposed to stretch is now stretching the screen, :o. I may try reslicing it. As for this code, it's the default stuff that Photoshop put out with some tweaks I've made to try and get the image to stretch.

Thanks for your help.


<TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="v4_images/header_01.gif" WIDTH=213 HEIGHT=78 ALT=""></TD>
<TD ROWSPAN=2>
<IMG SRC="v4_images/header_02.gif" WIDTH=146 HEIGHT=98 ALT=""></TD>
<TD COLSPAN=4 ROWSPAN=2>
<IMG SRC="v4_images/header_03.gif" WIDTH=201 HEIGHT=98 ALT=""></TD>
<TD COLSPAN=5 ROWSPAN=2>
<IMG SRC="v4_images/header_04.gif" WIDTH=207 HEIGHT=98 ALT=""></TD>
<TD COLSPAN=100% ROWSPAN=3 BACKGROUND="v4_images/header_05.gif">
</TD>
<TD>
<IMG SRC="v4_images/spacer.gif" WIDTH=1 HEIGHT=78 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=2>
<IMG SRC="v4_images/header_06.gif" WIDTH=213 HEIGHT=60 ALT=""></TD>
<TD>
<IMG SRC="v4_images/spacer.gif" WIDTH=1 HEIGHT=20 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=2>
<IMG SRC="v4_images/header_07.gif" WIDTH=168 HEIGHT=40 ALT=""></TD>
<TD>
<IMG SRC="v4_images/header_08.gif" WIDTH=59 HEIGHT=40 ALT=""></TD>
<TD>
<A HREF="usercp.php?s=$session[sessionhash]" TARGET="_top">
<IMG SRC="v4_images/usercp.gif" WIDTH=66 HEIGHT=40 BORDER=0 ALT="Here you can view your subscribed threads, work with private messages and edit your profile and preferences"></A></TD>
<TD COLSPAN=2>
<A HREF="calendar.php?s=$session[sessionhash]" TARGET="_top">
<IMG SRC="v4_images/calendar.gif" WIDTH=66 HEIGHT=40 BORDER=0 ALT="View the calendar"></A></TD>
<TD>
<A HREF="memberlist.php?s=$session[sessionhash]" TARGET="_top">
<IMG SRC="v4_images/members.gif" WIDTH=59 HEIGHT=40 BORDER=0 ALT="Find other members"></A></TD>
<TD>
<A HREF="misc.php?s=$session[sessionhash]&action=faq" TARGET="_top">
<IMG SRC="v4_images/help.gif" WIDTH=42 HEIGHT=40 BORDER=0 ALT="Frequently Asked Questions"></A></TD>
<TD>
<A HREF="search.php?s=$session[sessionhash]" TARGET="_top">
<IMG SRC="v4_images/search.gif" WIDTH=54 HEIGHT=40 BORDER=0 ALT="Search"></A></TD>
<TD>
<A HREF="index.php?s=$session[sessionhash]" TARGET="_top">
<IMG SRC="v4_images/home.gif" WIDTH=40 HEIGHT=40 BORDER=0 ALT="Home"></A></TD>
<TD>
<IMG SRC="v4_images/spacer.gif" WIDTH=1 HEIGHT=40 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=100% BACKGROUND="v4_images/header_bot.gif">
</TD>
<TD>
<IMG SRC="v4_images/spacer.gif" WIDTH=1 HEIGHT=8 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="v4_images/spacer.gif" WIDTH=213 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="v4_images/spacer.gif" WIDTH=146 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="v4_images/spacer.gif" WIDTH=22 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="v4_images/spacer.gif" WIDTH=59 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="v4_images/spacer.gif" WIDTH=66 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="v4_images/spacer.gif" WIDTH=54 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="v4_images/spacer.gif" WIDTH=12 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="v4_images/spacer.gif" WIDTH=59 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="v4_images/spacer.gif" WIDTH=42 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="v4_images/spacer.gif" WIDTH=54 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="v4_images/spacer.gif" WIDTH=40 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="v4_images/spacer.gif" WIDTH=3 HEIGHT=1 ALT=""></TD>
<TD></TD>
</TR>
</TABLE>

sepharic
12-12-2002, 08:22 PM
No help on this? :(

krycek
12-12-2002, 09:28 PM
Whoops, I must have missed your post :o sorry about that!

You have a lot going on there, for a start I am not convinced that all those spacers are necessary.

Try changing the width of the header04 image to 100%:

<IMG SRC="v4_images/header_04.gif" WIDTH=100% HEIGHT=98 ALT="">

I am not sure what kind of image it is, i.e. whether it is one that will change a lot when it stretches, but have you considered putting it as a background image in the table cell, so that it will tile? (if tiling it would be appropriate)

If you need to keep it as an IMG tag, then setting the width of the image to 100% should make it fill the table cell it is in, and if you don't specify the width of the table cell, it should size automatically.

Make sure that you check if there are any cells on the rows below that need to size too, because if you don't change them they will stop the header from stretching.

Fingers crossed, because I have only skimmed your code, not tested it, also it has been a long time since I used tables lol - I use CSS as much as possible now :)

::] krycek [::



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum