 Logo that resizes for all window sizes, 3 x image logo (by sz1) |
|
ISO Image
Creator
Logo that resizes for all window sizes, 3 x image logo (by sz1)
Feb 8 2005, 02:29 AM
Post
#1
>> gui mod
Group: Members
Posts: 986
Joined: 14-February 03
From: Finland / Europe
Member No.: 3
Finland
(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.CODE<! by sz1 http://521.2ya.com >
<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] --CODE<! by sz1 http://521.2ya.com >
<div id="logodef_sz1"><p><img src="left.gif" vspace=0 hspace=0></p></div>
And add this to your .css file:CODE#logodef_sz1
{
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] --CODE<! by sz1 http://521.2ya.com >
<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] --CODE<! by sz1 http://521.2ya.com >
<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:CODE.logodef
{
border: 0px;
background-color: transparent;
background-image: url(middle.gif);
margin: 0px;
padding: 0px;
}
---------
Replies
(10 - 16)
Mar 9 2005, 01:27 PM
Post
#11
Administrator
Group: Admin
Posts: 10,302
Joined: 9-February 03
From: Jacksonville, FL
Member No.: 1
United States
QUOTE(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
That may work in IPB...but the tutorial is meant to be a bit more general than just for IPB. 
Mar 10 2005, 02:06 AM
Post
#12
>> gui mod
Group: Members
Posts: 986
Joined: 14-February 03
From: Finland / Europe
Member No.: 3
Finland
QUOTE(blushinmushroom @ Mar 4 2005, 12:02 AM)The way I do it is much simpler just add width ="100%" after the logo script in skin manager in between the brackets
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.
Mar 31 2005, 01:27 PM
Post
#13
Administrator
Group: Admin
Posts: 10,302
Joined: 9-February 03
From: Jacksonville, FL
Member No.: 1
United States
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. 
Apr 1 2005, 01:11 AM
Post
#14
>> gui mod
Group: Members
Posts: 986
Joined: 14-February 03
From: Finland / Europe
Member No.: 3
Finland
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 
Apr 1 2005, 03:20 AM
Post
#15
>> gui mod
Group: Members
Posts: 986
Joined: 14-February 03
From: Finland / Europe
Member No.: 3
Finland
I made an another version, can't be shorter than this
CODE<! by sz1 http://521.2ya.com >
<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....
Apr 1 2005, 12:22 PM
Post
#16
Administrator
Group: Admin
Posts: 10,302
Joined: 9-February 03
From: Jacksonville, FL
Member No.: 1
United States
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.
Apr 4 2005, 03:08 AM
Post
#17
>> gui mod
Group: Members
Posts: 986
Joined: 14-February 03
From: Finland / Europe
Member No.: 3
Finland
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.
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
Lo-Fi Version
Time is now: 5th February 2012 - 07:42 PM
Webber Enhanced skin created by Im4eversmart of RuneHQ.
