Web Page just little too big

Discussion in 'Web Design and Development' started by Dal123, May 26, 2009.

  1. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #1
    I have created a web page in dreamweacer and it's just a little too wide. So when you preview in browser you get the arrows at the bottom.
    How do I fix this?
     
  2. thunderweb macrumors 6502

    thunderweb

    Joined:
    Oct 22, 2008
    Location:
    Bend OR
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    Um, use a smaller width :D Need to see to page HTML/CSS to know what specifically to change.
     
  4. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #4
    I don't think it's my content that's too big, not positive though. Here is the code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    body {
    background-color: #000000;
    }
    body,td,th {
    color: #FFFFFF;
    }
    .style1 {color: #FFFFFF}
    -->
    </style>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) { //reloads the window if Nav4 resized
    if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
    else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    //-->
    </script>
    </head>
    <body bgcolor="#993300" text="#FFCCFF" link="#FFFF00" vlink="#CCCC33" alink="#CCCC99">
    <p align="center"><img src="Images/Logo-Website.gif" width="1020" height="114" /></p>
    <p> </p>
    <div id="Layer2" style="position:absolute; width:200px; height:115px; z-index:2; left: 200px; top: 510px;">
    <p>Gallery</p>
    <p>Stages of Work</p>
    <p>Contact Us</p>
    <p>Services</p>
    </div>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="431" height="287">
    <param name="movie" value="Images/Staircase%20Animation.swf" />
    <param name="quality" value="high" />
    <param name="SCALE" value="exactfit" />
    <embed src="Images/Staircase%20Animation.swf" width="431" height="287" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" scale="exactfit"></embed>
    </object>
    <p align="center"> </p>
    <div id="Layer1" style="position:absolute; width:530px; height:290px; z-index:1; left: 450px; top: 180px; font-family: Arial, Helvetica, sans-serif;">
    <p align="center" class="style1">Welcome to Precise Formwork Limited. We are a small family firm specialising in high accuracy, high specification formwork projects. All of our work is quality-assured, with a 10 year guarantee as standard.</p>
    <p align="center" class="style1">We work with Main-Contractors and Private Clients. We have found ourselves specialising further in Cast-In-Situ Staircases (photographs of previous staircases in gallery). We have also found ourselves becoming deeply involved in Caltite (waterproof) Concrete structures. </p>
    <p align="center" class="style1">Precise Formwork offer all services in the Formwork sector; setting-out (engineering), Steel-Fixing, Formwork / Shuttering, Concrete Pours. </p>
    <p align="center" class="style1">We tend to specialise in staircases. Photographs of previous work are in the gallery. </p>
    </div>
    </body>
    </html>
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    I think this bit might have something to do with it.
    HTML:
    <div id="Layer1" style="position:absolute; width:530px; height:290px; z-index:1; left: 450px; top: 180px; font-family: Arial, Helvetica, sans-serif;">
    It has a width of 530, plus has a left of 450, which means it's taking up at least 980px of width.
     
  6. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #6
    Thanks

    Thank you very much. Why has this happened, This is the first site I am doing, not too familiar with code.
    When i started doing the site (Not long ago this is my first page:)). I selected the correct size, most common size 1024 x 768. I don't understand why it's happened. I was hoping not have to get into all this code stuff cos I think its out of my league. Don't know what any of it means.
    Thanks again for your help, much appreciated.
     
  7. besler3035 macrumors 6502a

    Joined:
    Oct 29, 2004
    Location:
    Grand Rapids, MI
    #7
    Even though you chose that size, that really doesn't mean too much in the long run. You've also got this in there:

    <p align="center"><img src="Images/Logo-Website.gif" width="1020" height="114" /></p>

    Problem is that your computer monitor might be able to handle resolutions far above 1024x768, but if your browser is sized smaller than this, you're going to see the arrows. Most sites still don't come close to the full 1024 because of this reason...try going around the 900 range for width.
     
  8. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #8
    Thank you very much, do you think I would be better setting the logo as a % rather than a fixed measurement.
     
  9. geekindisguise macrumors 6502

    geekindisguise

    Joined:
    Jul 22, 2008
    Location:
    Oklahoma
    #9
    No, you should keep the logo the same size as the picture of your logo is. If you make the space for a picture smaller than what it really is then it will become squished and distorted.
     
  10. vivithemage macrumors 6502a

    vivithemage

    Joined:
    Jul 12, 2008
    Location:
    Minneapolis
    #10
    Try using a 99.9% for the width instead of a direct number like that.
     

Share This Page