 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;
}
---------
Posts in this topic
sz1 Logo that resizes for all window sizes Feb 8 2005, 02:29 AM
bfarber Nice tip, thx. :) Feb 8 2005, 08:19 AM PSyMastR Thats really cool, Im going to put that into the c... Feb 8 2005, 10:01 PM sz1 Thanks,
I just updated it a little as .css files ... Feb 9 2005, 05:16 AM bfarber Tip: You can replace the background-color: #000000... Feb 11 2005, 07:22 PM mflintjer @ BF, Will that snip work in IE6 -- Tried to make... Feb 11 2005, 11:59 PM bfarber Yes, that works in IE, however it has no bearing o... Feb 13 2005, 08:50 AM sz1 EDIT: I added that transparent bg there. Yes, it i... Feb 14 2005, 07:26 AM sz1 EDIT:
IE seems that it had problems with the earl... Feb 15 2005, 04:23 AM blushinmushroom The way I do it is much simpler just add width =... Mar 3 2005, 05:02 PM
bfarber
That may work in IPB...but the tutorial is meant... Mar 9 2005, 01:27 PM
sz1
Yes, but that does just resize the logo by chang... Mar 10 2005, 02:06 AM bfarber Hey, sz1...
I was using this tutorial on Ruler... Mar 31 2005, 01:27 PM sz1 Yep, you right with typo. I also added those other... Apr 1 2005, 01:11 AM sz1 I made an another version, can't be shorter th... Apr 1 2005, 03:20 AM bfarber Cool, thx! :D
Yeah..I know what you mean. One... Apr 1 2005, 12:22 PM sz1 Propably that new way I posted works better as it ... Apr 4 2005, 03:08 AM
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:37 PM
Webber Enhanced skin created by Im4eversmart of RuneHQ.
