Logo does not work with different screen sizes.

[drjdh]

I'm new to vBulletin and css. I'm having trouble formatting my logo which I created with photoshop. I formatted the logo to fit with my home widescreen monitor, but when I view the page on a smaller monitor the image is no longer centered, but is moved to the right :(

I have tried to break the image up into three pieces, but the image that I have does not look right when repeated.

attached is an image on my large monitor and small monitor.

Here is my Logo Code:


<!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="center"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
<td align="$stylevar[right]">
&nbsp;
</td>
</tr>
</table>


<!-- /logo -->


What can I do to remedy this situation?
Any help is greatly appreciated!

- Jerry

[Seven Skins]

You need to make a logo of less width e.g. 950px and when some one uses a smaller resolution 1024x768 it will be in the middle.

PS. These days only few (may be less then 1%) of the people use resolution below 1024x768 so you will not have this issue.

.

[drjdh]

But I would like to have the logo area stretch all the way across the screen. Is there a way to do this?

[Seven Skins]

Then you have to make a logo in at least 2 parts.
1 background image ... repeating horizontally. (Example image attached)
1 logo with transparent backgroup.

So your code could be:

<!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr style="background: url(background.png) repeat-x top left">
<td align="center"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
<td align="$stylevar[right]">
&nbsp;
</td>
</tr>
</table>
<!-- /logo -->

[drjdh]

Thanks Seven Skins!

I broke it up into 3 pieces using this simple code:

<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="50%" style="background-image: url(/images/styles/bluebox/misc/head_left.gif); background-repeat: repeat-x;">&nbsp;</td>
<td><img src="/images/styles/bluebox/misc/headbg2.gif" alt="" /></td>
<td width="50%" style="background-image: url(/images/styles/bluebox/misc/head_right.gif); background-repeat: repeat-x;">&nbsp;</td>

</tr>
</table>


It seems to be working well. :D

I'll likely have to modify it at a later time in order to add sponsors, etc, but I'm happy with it now!

- Jerry

[Seven Skins]

Yes, This will work too. Where is logo going in the middle TD?

.

[drjdh]

Yes, I wanted the main part of the logo to stay in the middle of the screen and the two wings to grow and shrink to accommodate different screen sizes.

Thanks for your help!

I'd been working on this for the past several days. :up: