 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;
}
---------
Feb 8 2005, 08:19 AM
Post
#2
Administrator
Group: Admin
Posts: 10,302
Joined: 9-February 03
From: Jacksonville, FL
Member No.: 1
United States
Nice tip, thx.
Feb 8 2005, 10:01 PM
Post
#3
Karaoke MastR
Group: Members
Posts: 242
Joined: 5-January 05
From: Im a bum on the LIRR! :)
Member No.: 26,539
United States
Thats really cool, Im going to put that into the custom skin im making (Its in my forums but hidden away)
Feb 9 2005, 05:16 AM
Post
#4
>> gui mod
Group: Members
Posts: 986
Joined: 14-February 03
From: Finland / Europe
Member No.: 3
Finland
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.
Feb 11 2005, 07:22 PM
Post
#5
Administrator
Group: Admin
Posts: 10,302
Joined: 9-February 03
From: Jacksonville, FL
Member No.: 1
United States
Tip: You can replace the background-color: #000000 that is hardcoded above with
CODEbackground-color: transparent
If you do not wish to hardcode any colors into your header tables.
Feb 11 2005, 11:59 PM
Post
#6
Back; Down you Hooligans! :P
Group: Members
Posts: 1,012
Joined: 2-November 04
From: Rochester, MN
Member No.: 23,596
United States
@ 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.
Feb 13 2005, 08:50 AM
Post
#7
Administrator
Group: Admin
Posts: 10,302
Joined: 9-February 03
From: Jacksonville, FL
Member No.: 1
United States
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. 
Feb 14 2005, 07:26 AM
Post
#8
>> gui mod
Group: Members
Posts: 986
Joined: 14-February 03
From: Finland / Europe
Member No.: 3
Finland
EDIT: I added that transparent bg there. Yes, it is better that way for most cases.
Feb 15 2005, 04:23 AM
Post
#9
>> gui mod
Group: Members
Posts: 986
Joined: 14-February 03
From: Finland / Europe
Member No.: 3
Finland
EDIT:
IE seems that it had problems with the earlier version.
Updated.
Mar 3 2005, 05:02 PM
Post
#10
Newbie
Group: Members
Posts: 13
Joined: 10-October 04
Member No.: 22,071
United Kingdom
The way I do it is much simpler just add width ="100%" after the logo script in skin manager in between the brackets
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
Lo-Fi Version
Time is now: 20th November 2008 - 05:33 PM
Webber Enhanced skin created by Im4eversmart of RuneHQ.
