Register Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
  #1  
Old 10 Dec 2009, 22:18
drjdh's Avatar
drjdh drjdh is offline
 
Join Date: Nov 2009
Logo does not work with different screen sizes.

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
Attached Images
File Type: jpg tmb centered.jpg (58.2 KB, 19 views)
File Type: jpg tmb not centered.jpg (80.2 KB, 22 views)
Reply With Quote
  #2  
Old 11 Dec 2009, 11:28
Seven Skins's Avatar
Seven Skins Seven Skins is offline
 
Join Date: Sep 2008
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.

.
Reply With Quote
  #3  
Old 11 Dec 2009, 17:26
drjdh's Avatar
drjdh drjdh is offline
 
Join Date: Nov 2009
But I would like to have the logo area stretch all the way across the screen. Is there a way to do this?
Reply With Quote
  #4  
Old 11 Dec 2009, 18:12
Seven Skins's Avatar
Seven Skins Seven Skins is offline
 
Join Date: Sep 2008
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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Attached Images
File Type: jpg a.jpg (11.1 KB, 6 views)
Reply With Quote
  #5  
Old 11 Dec 2009, 19:27
drjdh's Avatar
drjdh drjdh is offline
 
Join Date: Nov 2009
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.

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
__________________
Judge a man by his questions rather than his answers. - Voltaire.
Reply With Quote
  #6  
Old 11 Dec 2009, 22:16
Seven Skins's Avatar
Seven Skins Seven Skins is offline
 
Join Date: Sep 2008
Yes, This will work too. Where is logo going in the middle TD?

.
Reply With Quote
  #7  
Old 14 Dec 2009, 05:20
drjdh's Avatar
drjdh drjdh is offline
 
Join Date: Nov 2009
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.
__________________
Judge a man by his questions rather than his answers. - Voltaire.
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 05:01.

Layout Options | Width: Wide Color: