5 Replies Latest reply on Sep 20, 2010 3:10 PM by MurraySummers

    Why does my content seem to appear 1 inch from original position?!

    JamesArter Level 1

      Hey guys,

       

      I've done a little web design before, but it's not my forte!

       

      Here's my problem...

       

      The main creation of the website was done on Photoshop, where I then used the Slice Tool to create the main html page.

      I'm now dropping the content of the website - images/text etc - by drawing a layer for each piece and inserting them inside.  The problem I get when I do this is when I view it in any browser these layers with the content seem to appear approx 1inch from their original position in Design View.

       

       

      Any ideas why this happens?

       

      Cheers,

      James

        • 1. Re: Why does my content seem to appear 1 inch from original position?!
          BobLevine MVP & Adobe Community Professional

          We need to see the code, but be aware that one monitor's inch is another monitor's 1/4"

           

          Bob

          • 2. Re: Why does my content seem to appear 1 inch from original position?!
            JamesArter Level 1

            Thanks for the reply Bob. And yeah, I know what you mean...

             

             

            Here comes the code:

             

            <html>

            <head>

            <title>hbpp 3</title>

            <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

            <style type="text/css">

            <!--

            body {

            background-color: #000000;

            }

            #Layer1 {

            position:absolute;

            left:709px;

            top:488px;

            width:64px;

            height:26px;

            z-index:1;

            }

            #Layer2 {

            position:absolute;

            left:782px;

            top:487px;

            width:87px;

            height:29px;

            z-index:2;

            }

            #Layer3 {

            position:absolute;

            left:876px;

            top:486px;

            width:102px;

            height:28px;

            z-index:3;

            }

            -->

            </style>

            <script type="text/JavaScript">

            <!--

            function MM_swapImgRestore() { //v3.0

              var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

            }

             

            function MM_preloadImages() { //v3.0

              var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

                var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

                if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

            }

             

            function MM_findObj(n, d) { //v4.01

              var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

                d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

              if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

              for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

              if(!x && d.getElementById) x=d.getElementById(n); return x;

            }

             

            function MM_swapImage() { //v3.0

              var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

               if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

            }

            //-->

            </script>

            </head>

            <body onLoad="MM_preloadImages('images/info_grey.jpg','images/music_grey.jpg','images/contact_g rey.jpg')">

            <div id="Layer1"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('info','','images/info_grey.jpg',1)"><img src="images/info_white.jpg" alt="INFO" name="info" width="59" height="28" border="0"></a></div>

            <div id="Layer2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('music','','images/music_grey.jpg',1)"><img src="images/music_white.jpg" alt="MUSIC" name="music" width="76" height="29" border="0"></a></div>

            <div id="Layer3"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','images/contact_grey.jpg',1)"><img src="images/contact_white.jpg" alt="CONTACT" name="contact" width="106" height="29" border="0"></a></div>

            <div align="center">

            <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

            <!-- ImageReady Slices (hbpp 3.psd) -->

            <table id="Table_01" width="1024" height="768" border="0" cellpadding="0" cellspacing="0">

            <tr>

            <td colspan="5">

            <img src="images/header.gif" width="1024" height="110" alt=""></td>

            </tr>

            <tr>

            <td colspan="5">

            <img src="images/title.gif" width="1024" height="61" alt=""></td>

            </tr>

            <tr>

            <td rowspan="2">

            <img src="images/left.gif" width="60" height="327" alt=""></td>

            <td>

            <img src="images/bunny.gif" width="228" height="260" alt=""></td>

            <td>

            <img src="images/space.gif" width="456" height="260" alt=""></td>

            <td>

            <img src="images/peanut.gif" width="228" height="260" alt=""></td>

            <td rowspan="2">

            <img src="images/right.gif" width="52" height="327" alt=""></td>

            </tr>

            <tr>

            <td colspan="3">

            <img src="images/copyright.gif" width="912" height="67" alt=""></td>

            </tr>

            <tr>

            <td colspan="5">

            <img src="images/footer.gif" width="1024" height="270" alt=""></td>

            </tr>

            </table>

            <!-- End ImageReady Slices -->

            </body>

            </div>

            </body>

            </html>

             

             

             

             

             

             

             

            Any thoughts?

            • 3. Re: Why does my content seem to appear 1 inch from original position?!
              Nancy OShea Adobe Community Professional & MVP

              Any thoughts?

              Yeah.  Don't allow Photoshop/Fireworks to generate your HTML and CSS code for you.  The code is too rigid/fragile for production sites.  It's only good for quick mock-ups to show the client.  As soon as you start editing the page, it will fall apart.  This is typical.

               

              Use your graphic editor for images only. Use DW to build your HTML and CSS code.

              My advice is to start with a pre-built CSS layout.  Then insert your optimized images directly into DW pages.

              http://alt-web.com/TEMPLATES/Basic-1-col-fixed.shtml

               

              It may help you to review HTML and CSS basics first.

              HTML & CSS Tutorials - http://w3schools.com/

               

              How to Develop with CSS?
              http://phrogz.net/css/HowToDevelopWithCSS.html

               

              Learn CSS positioning in 10 Steps
              http://www.barelyfitz.com/screencast/html-training/css/positioning/

               

               

               

              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists
              http://alt-web.com/
              http://twitter.com/altweb

              • 4. Re: Why does my content seem to appear 1 inch from original position?!
                geotrice Level 2

                I hope that whatever you're making in Photoshop, you don't:

                • Need anyone with disabilities to see.
                • Need to rank on Google, Yahoo, Bing or any other search engine
                • Need anyone using a mobile device to see
                • Need to ever try and update
                • Need to be usable.

                 

                Sigh, the list goes on an on...Use Dreamweaver to mark up your HTML. Use CSS to achieve the look you desire. Use Javascript to control the behavior.

                 

                And STOP USING TABLES FOR YOUR LAYOUT.

                 

                Tables are meant for organizing data.

                • 5. Re: Why does my content seem to appear 1 inch from original position?!
                  MurraySummers Level 8

                  AND STOP USING LAYERS FOR LAYOUT!

                   

                  Layers (a/p elements) are special-purpose tools only.