Printable Version of Topic
Click here to view this topic in its original format
bfarber.com _ Web Design and Maintenance _ Logo that resizes for all window sizes
Posted by: sz1 Feb 8 2005, 02:29 AM
(UPDATED: Apr 1st, 2005)
This is how to make logo that resizes for all browser window sizes. It does not just resize the logo but uses 3 images to fill up the logo space.
You need 3 images: left.gif for left part, middle.gif for tiled middle part (made enough wide) and right.gif for right part.
Select one of these:
-- [1] --
NEW This is the most compact way to make it.
<div style="border:0px;background:transparent url(middle.gif);margin:0px;padding:0px">
<p style="background: url(right.gif) right top no-repeat"><img src="left.gif" vspace=0 hspace=0></p>
</div>
OR
Same with external .css file:
-- [2] --
<div id="logodef_sz1"><p><img src="left.gif" vspace=0 hspace=0></p></div>
And add this to your .css file:
{
border: 0px;
background: transparent url(middle.gif);
margin: 0px;
padding: 0px;
}
#logodef_sz1 p
{
background: url(right.gif) right top no-repeat;
}
---------
OR
This is made with tables:
-- [3] --
<table border="0" cellspacing="0" cellpadding="0" style="border:0px; background-color:transparent">
<tr style="border:0px; background-color:transparent">
<td style="border:0px; background-image:url(middle.gif); background-repeat: no-repeat;background-position:top right;padding:0px;margin:0px;">
<img src="left.gif" align="right" border="0" style="margin:0px" hspace=0 vspace=0>
</td>
<td width="100%" style="border:0px;background-image:url(middle.gif);background-repeat:repeat-x;background-position:top left;padding:0px;margin:0px;">
<! middle part that is tiled />
</td>
<td style="border:0px; background-image:url(middle.gif); background-repeat: no-repeat;background-position:top left;padding:0px;margin:0px;">
<img src="right.gif" align="left" hspace=0 vspace=0>
</td>
</tr>
</table>
---------
OR
Same with external .css file:
-- [4] --
<table border="0" cellspacing="0" cellpadding="0" style="border:0px; background-color:transparent">
<tr style="border:0px; background-color:transparent">
<td class="logodef" style="background-repeat:no-repeat;background-position:top right;">
<img src="left.gif" align="right" border="0" style="margin:0px" hspace=0 vspace=0>
</td>
<td width="100%" class="logodef" style="background-repeat:repeat-x;background-position:top left">
<! middle part that is tiled />
</td>
<td class="logodef" style="background-repeat:no-repeat;background-position:top left;">
<img src="right.gif" align="left" hspace=0 vspace=0>
</td>
</tr>
</table>
Add .logodef to .css file of you site to fine define your logo parameters. For example like this:
{
border: 0px;
background-color: transparent;
background-image: url(middle.gif);
margin: 0px;
padding: 0px;
}
---------
Posted by: bfarber Feb 8 2005, 08:19 AM
Nice tip, thx. 
Posted by: PSyMastR Feb 8 2005, 10:01 PM
Thats really cool, Im going to put that into the custom skin im making (Its in my forums but hidden away)
Posted by: sz1 Feb 9 2005, 05:16 AM
Thanks,
I just updated it a little as .css files of course affects to tables so it is usually necessary to make own definitions for that table.
Posted by: bfarber Feb 11 2005, 07:22 PM
Tip: You can replace the background-color: #000000 that is hardcoded above with
If you do not wish to hardcode any colors into your header tables.
Posted by: mflintjer Feb 11 2005, 11:59 PM
@ BF, Will that snip work in IE6 -- Tried to make a page transparent in MM Dreamweaver, and it turned out in FF -- but not in IE6. 
Posted by: bfarber Feb 13 2005, 08:50 AM
Yes, that works in IE, however it has no bearing on images. Instead of the background color of the logo being black (for example, dialup users waiting for the logo image(s) to load) it will make it transparent (whatever color the background color is behind the images).
IE has problems with transparent pngs. 
Posted by: sz1 Feb 14 2005, 07:26 AM
EDIT: I added that transparent bg there. Yes, it is better that way for most cases.
Posted by: sz1 Feb 15 2005, 04:23 AM
EDIT:
IE seems that it had problems with the earlier version.
Updated.
Posted by: blushinmushroom Mar 3 2005, 05:02 PM
The way I do it is much simpler just add width ="100%" after the logo script in skin manager in between the brackets
Posted by: bfarber Mar 9 2005, 01:27 PM
That may work in IPB...but the tutorial is meant to be a bit more general than just for IPB.
Posted by: sz1 Mar 10 2005, 02:06 AM
Yes, but that does just resize the logo by changing it's size: not very smooth.
My code does not effect the size of the logo but tiling the middle part picture horizontally.
Posted by: bfarber Mar 31 2005, 01:27 PM
Hey, sz1...
I was using this tutorial on Ruler's site recently working with three-image header bars (not headers themselves, but like titlebars) and found another interesting note...
Firstly, in your first code snippet the following is incorrect
<td style="style="
you can see why.
Secondly, I found that for the actual img tags, I had to add the hspace='0' and vspace='0' attributes to get them to line up properly. Probably not as big an issue with headers as there is more room (larger images and such), but with the little titlebars it was necessary to line the images up properly. Maybe you could add those to your code and then it could not only be for a logo that resizes, but stretching titlebar images as well.
Posted by: sz1 Apr 1 2005, 01:11 AM
Yep, you right with typo. I also added those others things. Thanks.
It is so hard to make an universal code that works in IE and FF with every picture size 
Posted by: sz1 Apr 1 2005, 03:20 AM
I made an another version, can't be shorter than this
<div style="border:0px;background:transparent url(middle.gif);margin:0px;padding:0px">
<p style="background: url(right.gif) right top no-repeat"><img src="left.gif" vspace=0 hspace=0></p>
</div>
More details in the first post....
Posted by: bfarber Apr 1 2005, 12:22 PM
Cool, thx!
Yeah..I know what you mean. One thing I noticed is the table cellpadding has to be 0, which isn't always desirable. I'm working on a way to increase the padding in the individual td cells afterwards, but eh...universal is not so universal all the time lol.
Posted by: sz1 Apr 4 2005, 03:08 AM
Propably that new way I posted works better as it uses divs (and it is lot shorter also). But again other .css setting can makes some unwanted effects.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)