Problem auto resizing for resolution

Oh man! Ad-blocking software has been detected! :'(

This website is run by the community, for the community... and it needs advertisements in order to keep running. Blocking our ads means your killing our stats!
Please disable your ad-block, or become a premium member to hide all advertisements and this notice.

I don't know if my term on the title was right but here's my problem:

i'm not a web designer but my boss asked me to make a website for our company ( home ) if you want to see it to get what i'm saying. It seems to work ok in internet explorer but if you open it with firefox and go to the used bike section (most obvious page with the problem), it moves the last image onto the next line and makes the site a: look crap, and b: confises you as to what description is for what bike. how do i get the screen to resize so that the 3 pictures fit and it looks ok or can i add a thumbnail that you can click to see a larger pic?

I'm using front page 2003 and have no web training what so ever. apparently as i'm doing my a+, that makes me able to do everything on a computer

i also realise that i need to re draw the logo at the top as it looks pants.

 

Oh man! Ad-blocking software has been detected! :'(

This website is run by the community, for the community... and it needs advertisements in order to keep running. Blocking our ads means your killing our stats!
Please disable your ad-block, or become a premium member to hide all advertisements and this notice.

Hey Steve.

In all honesty I would bin Frontpage right away, it was a poor tool even in it's day.

My advice would be to install Wordpress onto your web server, very easy five minute install (after your your web host has enabled a mysql database for you), pick a template from the many free ones and go from there, it may take more time to get it looking as you want but will handle the sizing issues and provide you with greater flexibility in the future.

Just my cuppa teas worth.

 

You need to clean up some of the HTML, you have a lot of unneeded code in there. FF will render things differently to IE and that will make things look different.

To the left of the first image on that page there is a table that is completely messed up, try and tidy this up.

You can see from the HTML below, you have paragraphs with nothing but a space in them that I can only guess you have used for padding.

HTML:

<td valign="top" width="1%"><!--mstheme--><font face="Arial">
<p>&nbsp; </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<!--mstheme--></font></td><td valign="top" width="24"></td><!--msnavigation--><td valign="top"><!--mstheme--><font face="Arial">





<p><font face="sans-serif">Welcome to our used bike section. Here you will find a comprehensive range of 
bikes. Ranging from scooters to 1000cc-plus motorcycles.</font></p>





<p><font face="sans-serif">All bikes come with a 3 month warranty and any remaining manufacturer 
warranty. All bikes have a years MOT included in the price (if less than 6 
months remain).</font></p>



<p><img src="images/bikes/VN1500.JPG" border="2" height="312" width="416"><img src="images/bikes/sprint%201050.JPG" border="2" height="312" width="416"><img src="images/bikes/gsx650f.JPG" border="2" height="312" width="416"></p>



<p><font face="sans-serif">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
Kawasaki VN1500: 2003, 1720 miles,&nbsp; £4999&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;Triumph 
Sprint 1050: 2009, 38400 miles, £3k extras, £5299&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<font face="sans-serif">&nbsp;</font>Suzuki 
GSX650F: 2008, 8200 miles, £4099<font face="sans-serif">&nbsp;</font></p>
<p><img src="images/bikes/zx6r%20blue.JPG" border="2" height="312" width="416"><img src="images/bikes/hornet%2006.JPG" border="2" height="312" width="416"><img src="images/bikes/fz6%20fazer.JPG" border="2" height="312" width="416"></p>



<p>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
Kawasaki ZX6R: 2001, 21400 miles, £2399&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
Honda Hornet 600: 2006, 30000 miles, £3199&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font face="sans-serif">&nbsp;Yamaha FZ6 Fazer, 2007, 12920 miles, £3599 </font> </p>
<p>
<img src="images/bikes/gs500f.JPG" border="2" height="312" width="416"><img src="images/bikes/gsxr400.JPG" border="2" height="312" width="416"><img src="images/bikes/daliem%20daystar.JPG" border="2" height="312" width="416"></p>
<p>
<font face="sans-serif">&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font> <font face="sans-serif">
Suzuki GS500F: 2004, 13980 miles, £1849&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font face="sans-serif">
Suzuki GSXR400: 1993, 27660km, £1899&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font>&nbsp;&nbsp; Daliem 
Daystar 125cc: 2007, 800 miles, £1499&nbsp;&nbsp;&nbsp; </p>
<p>
<img src="images/bikes/CIMG1777.JPG" border="2" height="312" width="416"><img src="images/bikes/CIMG1780.JPG" border="2" height="312" width="416"><img src="images/bikes/CIMG1779.JPG" border="2" height="312" width="416"></p>
<p align="left">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Honda Varadero 125: 2007, 21250 miles £2499&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
Kymco Agility City 125: 2010, 250km, £1699&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
Kymco Super 8 125: 2010, 4200km, £1695</p>
<p align="left">
<img src="images/bikes/ps%20125%20white.JPG" border="2" height="312" width="416"><img src="images/bikes/pantheon%2006.JPG" border="2" height="312" width="416"><img src="images/bikes/CIMG1778.JPG" border="2" height="312" width="416"></p>
<p align="left">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Honda 
PS 125: 2008, 14070 miles, £1699&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Honda 
Pantheon 125: 2006, 13500 miles £1699&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
Kymco Agility City 125: 2008, 12470km, £1395</p>
<p align="center">
<img src="images/bikes/speedfight%2050%20grey.JPG" border="2" height="312" width="416"><img src="images/bikes/SF50%20RED%2007.JPG" border="2" height="312" width="416"></p>
<p align="center">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Peugeot 
Speedfight2: 2008, 9720 km, £1299&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
Peugeot Speedfight 2 50cc: 2007, 21400km, £1149&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </p>
<p align="center">
<img src="images/bikes/motoroma.JPG" border="2" height="312" width="416"><img src="images/bikes/dirt%20master.JPG" border="2" height="312" width="416"></p>

Or I can always give you a price on designing something for you.

 

i haven't actually had to type any code as i have no idea how it all works. As far as i was aware FP was just a graphical designer so i've just placed things where i think they can go.
Also i don't have any servers here as we only have a handfull of pc's (we're on a P2P network) and i can edit the web from any of these computers. Is word press free? my boss won't pay for anything. Kawasaki have said they'll get us a free site and give us access to the CMS so we can edit it our selves but i'd like to learn how it's done any way.
Do you have any recommendations for places online to start looking at coding?

 

This site helped me a lot..

World Wide Web Consortium (W3C)

 

Hey Steve, if you're still looking for a quick fix to this issue in the used bike section, open your html file in a text editor (like Notepad) and make this change (in large bold font at the bottom of the following scroll box, should be about line 40ish):

Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-us">

<title>Used Motorcycles 125cc +</title>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta name="Microsoft Theme" content="industrial-new-textno-b-g 010, default">
<meta name="Microsoft Border" content="tlb, default">
</head>

<body bgcolor="#FFFFFF" text="#000000" link="#3399FF" vlink="#3366CC" alink="#FF9900"  ><!--msnavigation--><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td><!--mstheme--><font face="Arial">
<p align="center">&nbsp;<a href="index.htm"><img border="0" src="http://www.certforums.co.uk/forums/images/banner1.JPG" width="933" height="94"></a></p>
<p align="center">This website is optimised to run with Internet Explorer 8 at a 
resolution of 1280 X 1024<br>
<b><a href="prod01.htm">New Scooters and 125cc Bikes</a>&nbsp;&nbsp;&nbsp;
<a href="prod02.htm">Used Motorcycles and Scooters </a>&nbsp;&nbsp;
<a href="http://www.eastlondonkawasaki.co.uk">New <font color="#008000" size="4">
Kawasaki</font> Motorcycles</a>&nbsp;&nbsp;&nbsp; <a href="prod03.htm">
Accessories</a>&nbsp;&nbsp; <a href="serv01.htm">Services Page</a></b>&nbsp;&nbsp;
<i><b><a href="knowledge.htm">Knowledge Bikes</a></b></i>&nbsp;&nbsp;<b>
<a href="parking.htm">PARKING</a></b></p>
<p align="center"><b><font size="5" color="#0000FF">Follow us on
<a href="http://www.facebook.com/BaconsMotorcycles">Facebook</a></font></b></p>
<p align="center"><a href="http://www.eastlondonkawasaki.co.uk">
<img border="2" src="http://www.certforums.co.uk/forums/images/kwak%20logo1.bmp" width="137" height="75"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://www.kymco.co.uk/">
<img border="2" src="http://www.certforums.co.uk/forums/images/kymco_gr.gif" width="80" height="74"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://www.peugeotscooters.co.uk/">
<img border="2" src="http://www.certforums.co.uk/forums/images/pug%20logonew.jpg" width="92" height="75"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBacons-Motorcycles%2F120804061321215&width=292&colorscheme=light&show_faces=false&stream=false&header=false&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:62px;" allowTransparency="true">
</iframe>&nbsp;</p>
<p align="center"><font color="#FF0000">&nbsp;</font></p>

<!--mstheme--></font></td></tr><!--msnavigation--></table><!--msnavigation--><table dir="ltr" border="0" cellpadding="0" cellspacing="0" [B][SIZE="5"]width="1300px"[/SIZE][/B]><tr><td valign="top" width="1%"><!--mstheme--><font face="Arial">

Sorry about the excessive code sample but as GSteer and SimonV point out, FrontPage makes the code very hard to read so had to start from the top. Also, as it relies purely on HTML (ie. no CSS) all the tags are very verbose.

+1 on Bluerinse's recommendation to check out World Wide Web Consortium. There's some excellent tutorials there to get you started on "hand-coding" html & css files (the best way to start, in my opinion).

Also, CSS Play is great for exploring CSS, especially with regard to making images interactive, which might jazz up your site a bit.

Keep working on your html, it's a skill that's bound to come in handy!

 

cheers for that i will give it a go when i get a chance. I also managed to find a serif website editor to see if it could solve the problem for mebut that would mean re creating the whole site again! Does that bit of code force the computer to render the page at that size regardless of browser?
Also as a side note, is there a book you recommend to get that will teach basic HTML and what software do you suggest to test / build a site (i know adobe is good but i'd like a cheap or free one as i might make this a little hobby). I was thinking of looking into this or visual basic but i'm not too sure if i have to have databases for either of them to look at to make them work properly.
As you can tell i'm very new to this side of things. cheers for the help, it's much appreciated.

 

Exactly! The problem at present is that IE and Firefox are interpreting "width=100%" in different ways. IE seems to take that to mean the width of the widest element in the <table> element (in this case, the paragraph element, <p>, containing your 3 photos), whereas FF is taking it to mean the width of the user's browser window. Using an absolute size, ie. 1300 pixels, eliminates this ambiguity. Cross-browser compatibility: what a pain in the a**

I could recommend a couple but as I haven't read any recent HTML\CSS texts they'd be a bit dated and probably not best for you. Check out the publisher O'Reilly for some ideas. I've bought a number of their books regarding web development and they're usually very good (although it's always best to check some independent reviews before buying of course). Amazon's always a good place to look for ideas as well.

For getting started, as GSteer says:

It's free and very popular at the moment. Personally, for static HTML\CSS pages I like using text editors to build and browsers to test but this is definitely not the quickest way of going about it! I've also used Eclipse for php. At the moment it's more of a hobby for me so I'm less up to scratch with design tools than those doing web development commercially