Hi Gang

I'm not an HTML expert. I only tinker here and there with tables, and copy and paste code occasionally. Unfortunately with no help, working on a WWII Documentary, I just don't have the time to master HTML.

For now I'm still stuck with an old program called 'Sausage Page Wiz'
(I know - please don't laugh).

For what this Web Site is, it's fine (easy to navigate) for the many older veterans and people who view it.

Is there a way, (without re-designing the entire site), where I might be able to get just this page to fit/view/appear in it's entirety?

As it stands now, it can be stretched out and look best on an Apple 20" Cinema Display.

Thank you

Here's the page;
http://www.ww2survivorstories.com/news.htm

And here's my trailer;
http://www.vimeo.com/7340608

Merry Xmas
Mike

Are you talking about getting that humongous background image to fit in every browser window? If so, no need to worry about that, as background images repeat themselves by default. With the tiled image as it is, a repeating image is not a problem, and on huge monitors will not even be noticeable.

Background images can't be stretched, so if you want the entire image to be shown on smaller monitors, you're out of luck, unless you use an IMG tag. This won't be a good idea because although IMG tags can be stretched to any proportion, with a high quality photo like this stretching it is a bad idea and hard to accommodate every possibility of not only monitor size but also the browser window being resized.

The real question I would be asking is, "is it a good design decision to have a humongous photo array as the background image?". It takes too long to load, even on my super fast internet connection.

Hello wayfarer07

Thanx for the response.

Yes you're probably right, that Bckgrd photo is about 426KB's

But even on Cable, with an older Dell Dimension Pent 4 - 3.5 Gig processor it takes about 4-5 seconds to download. That's not 'too' bad ...

Ok then, I'll leave well enough alone - you say that an IMG type image file/code will degrade the quality.

Overall I think the site actually fits my needs better than some templates I've seen, where you're limited to appearance.

Mike

i am new for this too. i want to learn about this, and build up my own web.

You can create excellent photo collages with linux or Windows, but the output to html will have to be on your own. Actually, it's pretty easy.

1. Create a collage using imageMagick http://www.imagemagick.org/script/index.php
2. Create an html page and add your collage to the page as one image
3. Use image Maps to map the images to link each image to different pages if that's what your after.

Hi Brian

Merry Xmas

Thanks for the info

Remember my goal here is to design a collage that will accommodate several size monitor screens, without loosing images if that's possible?

Wayfarer lead me to believe that HTML 'IMG' files, (although easier to download), can produce pixilated quality. He also stated that for how this image is designed, getting it to stretch and shrink accordingly can be very difficult to accomplish. That's why I may just leave it the way it is....

Also remember I'm using an older software program.

Redesigning using a different HTML code may not be possible at the moment.

Here's the page;
http://www.ww2survivorstories.com/news.htm

And here's my trailer;
http://www.vimeo.com/7340608

Happy New Year
Mike

IMG isn't a file, it is just a tag in HTML. Here is an example in code:

<img src="/path/to/image.jpg" alt="descriptive text of this image" />

Since it is just a normal HTML element, it could be positioned any way you wanted. Sometimes this is done for a background. Here's a quick little tutorial that explains when this might actually be a benefit: When to use IMG vs CSS background-image

***EDIT***

Originally Posted by ENIGMACODE

Also remember I'm using an older software program.

The software program you're using is not going to matter in this situation. If you want to experiment with using an IMG tag to stretch to 100% of the browser window every time, your software program is not going to be likely to help you very much. You will be forced to edit the code yourself to achieve this effect. It is not difficult, but will require some basic CSS code, namely, knowing how absolute positioning works and its effect on stacking order. If you want to go this route to see how it looks in different browsers, we could probably help you do it, but you must learn something about the code, not the application you're using to write code.

One other disadvantage to using an IMG tag is that you can't make it repeat, which background images do by default. Often when developers use an IMG for a background, they position it in a fixed way so that it doesn't move even if the browser is scrolled downward. Unfortunately this approach doesn't work by default in IE6 and below, so some hacking is required to accommodate that browser.

If you just want to see what the image quality would be, you could make a document that looks like this:

<html>
<body>
<img src="path/to/image.jpg" width="100%">
</body>
</html>

Be sure to replace the src attribute with the correct path to your image. Now, resize the window to see the image resize. The quality varies by browser, with Internet Explorer tending to be worse than other browsers, especially version 7 and below.

Michael,
I edited my above post, which I have an annoying habit of doing. I notice you're online, which means you may have been reading it and missed what I said in my edit. I'm posting this additional post so that the thread tells you there is more information to read.

Hi wayfarer

Merry Xmas

Thank you for staying ontop of this.

"You will be forced to edit the code yourself"

Give me a little time, and I'll give it a try.

Back soon
Mike

Hi again wayfarer

Well it seems to me, unless I'm missing something, this 'Page Wiz' software, (as it's primarily designed as WYSIWYG), won't allow me to SAVE the HTML you gave me;
<HTML>
<BODY>
<IMG src="http://www.ww2survivorstories.com/Combo-20fha.jpg width="100%">
</BODY>
</HTML>

When I hit SAVE, or toggle from HTML back to WYSIWYG, it reverts back to;
<HTML>
<BODY>
<IMG src="http://www.ww2survivorstories.com/Combo-20fha.jpg width=" 100%?>
</BODY>
</HTML>

Check it out;
http://www.ww2survivorstories.com/news-E.htm < You'll see here that the image is broken, (boxed red X)
And read the 'View Source'

This is what Sausage Page Wiz starts out with when you open a New Page;
<HTML>
<HEAD>
<TITLE> Sausage Software HotDog PageWiz </TITLE>
<META NAME="generator" CONTENT="Sausage Software HotDog PageWiz">
</HEAD>
<BODY>
</BODY>
</HTML>

You didn't close your quotes in the correct place:

<IMG src="http://www.ww2survivorstories.com/Combo-20fha.jpg width=" 100%?>

should be:

<IMG src="http://www.ww2survivorstories.com/Combo-20fha.jpg" width="100%">

and not sure why there is a question mark ? at the end of the tag...?

Abel, you were right!

http://www.ww2survivorstories.com/news-E.htm

Can I send you an Apple Pie? Or would you prefer Blueberry?

And it looks like it will stretch/shrink accordingly!

Only problem now is trying to get the rest of the HTML, (the original layout to behave). I tried to copy and paste the original HTML text layout back, but it's not working.

Mike
Mike

If the quality of the image when it stretches is acceptable for you, place the IMG tag at the top of your other page, right after the opening <body> tag. Now, add this attribute:

style="position: absolute;left:0;top:0;"

Absolute positioning takes the image out of the document flow so that it doesn't change how the elements around it are positioned. However, this will cause the IMG to be stacked on top of anything that is not positioned. Therefore, you must wrap everything else in a positioned DIV so that it stacks on top of the IMG. Your final code will look something like this:

<body>
<img src="http://www.ww2survivorstories.com/Combo-20fha.jpg" width="100%" style="position:absolute;left:0;top:0">
<div style="position:relative;">
    <!--all of your previous content goes here-->
</div>
</body>

Normally, I would keep all my styles externally and the code would be much cleaner, but I'm not trying to teach you how to be a professional coder.

Next, re-size your browser window to see if this actually works for you.

Good Morning Abel

You're very helpful, courteous, and knowledgeable.
I really appreciate it
(never got this help before)

How's this?
http://www.ww2survivorstories.com/news-E2.htm
(still tweaking it)

Here's another version;
http://www.ww2survivorstories.com/news-E3.htm < I reduced the image to 90% of the original, and addded a black border. But I think the quality of this image is somewhat degraded on a 15" standard monitor.
(still tweaking it)

Two more back to the original size, and the sharper image looks better on a 20" wide screen thru Fire Fox, but again I think they both appear degraded on a 15" standard monitor thru IE7;
http://www.ww2survivorstories.com/news-ENoSharp.htm

And this one;
http://www.ww2survivorstories.com/news-ESharp.htm

Thanks Abel
Mike