1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Problem auto resizing for resolution

Discussion in 'Web Development & Web Hosting' started by steve_p1981, Apr 16, 2011.

  1. steve_p1981

    steve_p1981 Byte Poster

    236
    5
    30
    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 :blink

    i also realise that i need to re draw the logo at the top as it looks pants.
     
    Certifications: A+ 220-701 and 220-702
    WIP: none at current but poss 70-680 soon
  2. GSteer

    GSteer Megabyte Poster

    627
    31
    109
    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.
     
    Certifications: BSc. (Comp. Sci.), MBCS, MCP [70-290], Specialist [74-324], Security+, Network+, A+, Tea Lord: Beverage Brewmaster | Courses: LFS101x Introduction to Linux (edX)
    WIP: CCNA Routing & Switching
  3. SimonV

    SimonV Petabyte Poster Administrator

    6,616
    149
    228
    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. :oops:
     
    Certifications: MOS Master 2003, CompTIA A+, MCSA:M, MCSE
    WIP: Keeping CF Alive...
  4. steve_p1981

    steve_p1981 Byte Poster

    236
    5
    30
    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?
     
    Certifications: A+ 220-701 and 220-702
    WIP: none at current but poss 70-680 soon
  5. Bluerinse
    Honorary Member

    Bluerinse Exabyte Poster

    8,871
    167
    256
    Certifications: C&G Electronics - MCSA (W2K) MCSE (W2K)
  6. quuuaid

    quuuaid Nibble Poster

    65
    2
    34
    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! :biggrin
     
    Last edited by a moderator: Jan 2, 2015
    Certifications: A+, N+, MCDST
    WIP: Drupal, PHP
  7. steve_p1981

    steve_p1981 Byte Poster

    236
    5
    30
    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.
     
    Certifications: A+ 220-701 and 220-702
    WIP: none at current but poss 70-680 soon
  8. quuuaid

    quuuaid Nibble Poster

    65
    2
    34
    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** :D

    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 :biggrin
     
    Certifications: A+, N+, MCDST
    WIP: Drupal, PHP

Share This Page

Loading...