Images in tables displaying strangely on widescreen monitors

J

jennyh1961

Hi all. I am another 'least unqualified' person who has taken on the role of
website designer. This site is for our school www.brunswicksouthps.vic.edu.au
(and yes, my regular job is to teach 7-year-olds, so my expertise in web
design is very limited)! The site looks splendid on regular monitors (PC or
mac) but there is a problem with widescreen monitors. The tables at the top
of each page, which contain the images, sometimes stretch across the wider
screen but sometimes only partly stretch and sometimes don't stretch at all.
Even if the tables stretch, the images don't, so I'm left with large and
unequal amounts of blank space around the images. It looks very random and
peculiar. My only advice so far is that FrontPage is "bad code" and that I
should start the whole site again using another program, but I'd rather not
do that. I think it looks fantastic on anything other than a widescreen! Any
help or suggestions most appreciated.
 
T

Thomas A. Rowe

1. Photo don't stretch no matter what HTML editor you use. You can set photos to have a % width and
height however this will result in most cases of the photo being distorted. You best option is to
create a fixed width table to hold the photos.

--
==============================================
Thomas A. Rowe
Microsoft MVP - FrontPage

http://www.Ecom-Data.com
==============================================
 
R

Ronx

As a first step in the Home page,
Change:
<table border="6" width="97%" style="border-color: #008000">
<tr>
<td width="266" align="center">
<img border="0" src="images/IMG_1259.JPG" width="225"
height="286"></td>
<td width="266" align="center">
<img border="0" src="images/IMG_3065.JPG" width="222"
height="290"></td>
<td width="253" align="center">
<img border="0" src="images/P1010198a.jpg" width="221"
height="290"></td>
<td align="center">
<img border="0" src="images/IMG_3047.JPG" width="217"
height="291"></td>
</tr>
</table>

To

<table style="border:4px #008000 ridge" align="center">
<tr>
<td style="vertical-align:top;margin:1px;padding:2px;border:1px
#008000 solid">
<img border="0" src="images/IMG_1259.JPG" width="225"
height="286"></td>
<td style="vertical-align:top;margin:1px;padding:2px;border:1px
#008000 solid">
<img border="0" src="images/IMG_3065.JPG" width="222"
height="290"></td>
<td style="vertical-align:top;margin:1px;padding:2px;border:1px
#008000 solid">
<img border="0" src="images/P1010198a.jpg" width="221"
height="290"></td>
<td style="vertical-align:top;margin:1px;padding:2px;border:1px
#008000 solid">
<img border="0" src="images/IMG_3047.JPG" width="217"
height="291"></td>
</tr>
</table>

This centres the table in the page, and it's width is defined by the
size of the images - so there is never any excess white space around the
images. There is nothing you can do about white space to left and right
of the table.

I would move the inline styles to an embedded style sheet in the <head>
section of the page, or to an external style sheet, but the theme may
override this.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

how my website is viewed on widescreen monitors... help please! 4
My frontpage website looks different when browsed on different co. 1
Excel & Two Monitors 3
Viewing Word On Widescreen 0
Last image in HTML email replacing all other images 0
Pasting Visio images into Word 0
Some (not all) html messages are unreadable 6
background does not display consistantly on various monitors 8

Top