PDA

Click to See Complete Forum and Search --> : banner sizing

hawkesi
04-02-2006, 10:54 PM
Hi Guys,

I've got a banner at the top of my page (like this page has with the webdeveloper logo on it) and want it to stretch to fit whatever screen size the viewer has.

Can anyone tel me how i can do this/code this?


Thanks
bathurst_guy
04-02-2006, 11:37 PM
If you want it to stetch than you can set the width to 100%
Note that streching will only stretch the width, not the height, and therefore won't be in proportion and depending on the image, may look funny.
hawkesi
04-02-2006, 11:44 PM
Thanks bathurst guy

I did read a post earlier where someone suggested that you can select a point somewhere on the image and chop it and then select one part to resize. Any idea what thats about?

Also, if i wanted it to look like the webdeveloper banner up the top of this page, how would i do that. Ie, logo on the left, border around it and it stretches to fit screen.
bathurst_guy
04-02-2006, 11:56 PM
I did read a post earlier where someone suggested that you can select a point somewhere on the image and chop it and then select one part to resize. Any idea what thats about?Yes, lets say you have your logo to the left in the banner. You just show the logo at the same size no matter what, but depending on the background of the banner you can just have it repeat - or just set a background colour that is the same as the logo background.
Also, if i wanted it to look like the webdeveloper banner up the top of this page, how would i do that. Ie, logo on the left, border around it and it stretches to fit screen.I'm not sure which border you are talking about? The maroon one that wraps around the entire page?
hawkesi
04-03-2006, 12:15 AM
yep, the moroon border. For instance, if u minimise your window a bit the border still fits to the screen. is there a trick to do that?
bathurst_guy
04-03-2006, 04:16 AM
Not really, just set the body border
<body style="border:3px solid #000;">
HoboBen
04-04-2006, 11:55 AM
Note that streching will only stretch the width, not the height,

I don't think this is true if you only specify width.


<IMG src="banner.gif" width="100%" alt="Advert">


Will (I think, unless I'm completely wrong, in which case feel free call me something insulting) produce an image that scales in both dimensions and keeps proportionately the same size. It will validate too (or last time I checked, it did.)




<IMG src="banner.gif" width="100%" height="100%" alt="Advert">

0
Will not, however, keep the proportions equal, because the monitor screen height and width is not equal, so you could have a screen with 640 by 480, 800 by 600 or 1024 by 700-And-Something.

Unless I'm wrong, but you can check anyway.
skilled1
04-04-2006, 12:28 PM
or if you want it to be the correct height, just move with a browser, make the image, with your logo on the left and have a websafe color in the middle slice it and have what ever you wanted on the left side, then use this code

<table id="Navigation" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr bgcolor="#*color of websafe color*">
<td align="left">
<a href="index.html"><img src="images/logoimage" width="width of the image" border="0" height="height of the image" alt=""></a></td>
<td align="center" width="20%">&nbsp;</td>
<td align="right">
<img src="images/imageontheright" width="width of the image" height="height of the image" alt=""></td>
</tr>
</table>


then just modify where needed, but that should pretty much do the trick
WebJoel
04-04-2006, 12:36 PM
From "The JavaScript Source". Follow direction (included in script).

<!-- TWO STEPS TO INSTALL DYNAMIC SIZED IMAGE:

1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Ed Churnside -->
<!-- Web Site: http://www.dragonquest.com/inddpl.htm -->

<!-- Additional documention available online at -->
<!-- http://www.dragonquest.com/dplsspic.htm -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function showpic(src, w, h, alt, aln, pw, ph, bw, bh) {
if (src == null) return;
var iw, ih; // Set inner width and height
if (window.innerWidth == null) {
iw = document.body.clientWidth;
ih=document.body.clientHeight;
}
else {
iw = window.innerWidth;
ih = window.innerHeight;
}
if (w == null) w = iw;
if(h == null) h = ih;
if(alt == null) alt = "Picture";
if(aln == null) aln = "left";
if(pw == null) pw = 100;
if(ph == null) ph = 100;
if(bw == null) bw = 24;
if(bh == null) bh = 24;
var sw = Math.round((iw - bw) * pw / 100);
var sh = Math.round((ih - bh) * ph / 100);
if ((w * sh) / (h * sw) < 1) sw = Math.round(w * sh / h);
else sh = Math.round(h * sw / w);
document.write('<img src="'+src+'" alt="'+alt+'" width="'+sw+'" height="'+sh+'" align="'+aln+'">');
}
// End -->
</script>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document -->

<BODY>

<script language="javascript">
showpic("path_to_your_imageURL_here.gif", 362, 113, "Text to describe this image", "middle");
</script>

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size: 1.64 KB -->

Note "path_to_your_imageURL_here" is for YOUR banner image, and the width/height here is shown to be 362, 113 (but can be whatever width/height you want it to be). I think that you have to leave the number without "px" or else this won't work.
-Good luck!
-Joel