6 Replies Latest reply on Apr 14, 2010 3:54 PM by Nancy OShea

    Image positioning problems?

    webprogrammer123

      2.jpg

      How come in dreamweaver, the picture position is exactly where i want it to be. However, in the previews it's not?

       

      1.jpg

        • 1. Re: Image positioning problems?
          aonefun Level 1

          What code are you using to control the image's positioning? It appears that you want it centered? Are you using the spacebar to move the image or html <center> tags?

          • 2. Re: Image positioning problems?
            John Waller Adobe Community Professional & MVP

            Can't tell anything from the screenshot other than you're using an APDiv to position the image.

             

            Can you upload the page and post a link so we can see what's happening?

            • 3. Re: Image positioning problems?
              hans-g. Adobe Community Professional & MVP

              Hi,

               

              I remember a former post here: http://forums.adobe.com/thread/506563.

               

              And I would like to refer to a paper from Nancy-O, to center images (CSS 3-Column, Liquid Layout) which could solve your problem:
              http://alt-web.com/TEMPLATES/3-col-liq-layout.shtml

              My preference are, however, the tables. Most of the people here don't like them,

              but you can give a image position in a simple manner.

               

              Hans-G.

              • 4. Re: Image positioning problems?
                webprogrammer123 Level 1

                I used the AP Div tags to position the image. What i want, is one picture to be on the top center of the main content, one picture to be middle left and another picture to be middle right. like a pyramid. Then, their name below their pictures.

                Here's the page code.

                 

                 

                <!--
                #apDiv1 {
                position:absolute;
                width:203px;
                height:279px;
                z-index:1;
                left: 799px;
                top: 256px;
                background-image: url(Company/2.jpg);
                border: medium solid #FFF;
                }
                #apDiv2 {
                position:absolute;
                width:203px;
                height:279px;
                z-index:2;
                left: 553px;
                top: 381px;
                background-image: url(Company/29.jpg);
                border: medium solid #FFF;
                }
                #apDiv3 {
                position:absolute;
                width:203px;
                height:279px;
                z-index:1;
                left: 485px;
                top: 14px;
                background-image: url(Company/28.jpg);
                border: medium solid #FFF;
                }
                -->
                </style>
                <link href="pictures/alpha_pic1.css" rel="stylesheet" type="text/css" />
                <!-- InstanceEndEditable -->
                </head>
                <body bgcolor="#ffffff" background="index_r1_c11.gif">
                <div id="main_layout">
                <table width="1044" border="0" align="center" cellpadding="0" cellspacing="0">
                <!-- fwtable fwsrc="bwebsitepreviews4.png" fwpage="Page 1" fwbase="index.gif" fwstyle="Dreamweaver" fwdocid = "1492111998" fwnested="0" -->
                <tr>
                <td><img src="spacer.gif" width="106" height="1" border="0" alt="" /></td>
                <td><img src="spacer.gif" width="9" height="1" border="0" alt="" /></td>
                <td><img src="spacer.gif" width="115" height="1" border="0" alt="" /></td>
                <td><img src="spacer.gif" width="11" height="1" border="0" alt="" /></td>
                <td><img src="spacer.gif" width="156" height="1" border="0" alt="" /></td>
                <td><img src="spacer.gif" width="133" height="1" border="0" alt="" /></td>
                <td><img src="spacer.gif" width="137" height="1" border="0" alt="" /></td>
                <td><img src="spacer.gif" width="137" height="1" border="0" alt="" /></td>
                <td><img src="spacer.gif" width="139" height="1" border="0" alt="" /></td>
                <td><img src="spacer.gif" width="36" height="1" border="0" alt="" /></td>
                <td><img src="spacer.gif" width="65" height="1" border="0" alt="" /></td>
                <td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
                </tr>
                <tr>
                <td rowspan="39"><img name="index_r1_c1" src="index_r1_c1.gif" width="106" height="994" border="0" id="index_r1_c1" alt="" /></td>
                <td colspan="9"><a href="index.html"><img name="index_r1_c2" src="index_r1_c2.gif" width="873" height="216" border="0" id="index_r1_c2" alt="" /></a></td>
                <td rowspan="39"><img name="index_r1_c11" src="index_r1_c11.gif" width="65" height="994" border="0" id="index_r1_c11" alt="" /></td>
                <td><img src="spacer.gif" width="1" height="216" border="0" alt="" /></td>
                </tr>
                <tr>
                <td rowspan="2" colspan="3"><img name="index_r2_c2" src="index_r2_c2.gif" width="135" height="43" border="0" id="index_r2_c2" alt="" /></td>
                <td><a href="alpha_page.html"><img name="index_r2_c5" src="index_r2_c5.gif" width="156" height="26" border="0" id="index_r2_c5" alt="" /></a></td>
                <td><a href="bravo_page.html"><img name="index_r2_c6" src="index_r2_c6.gif" width="133" height="26" border="0" id="index_r2_c6" alt="" /></a></td>
                <td><a href="charlie_page.html"><img name="index_r2_c7" src="index_r2_c7.gif" width="137" height="26" border="0" id="index_r2_c7" alt="" /></a></td>
                <td><a href="delta_page.html"><img name="index_r2_c8" src="index_r2_c8.gif" width="137" height="26" border="0" id="index_r2_c8" alt="" /></a></td>
                <td><a href="echo_page.html"><img name="index_r2_c9" src="index_r2_c9.gif" width="139" height="26" border="0" id="index_r2_c9" alt="" /></a></td>
                <td><img name="index_r2_c10" src="index_r2_c10.gif" width="36" height="26" border="0" id="index_r2_c10" alt="" /></td>
                <td><img src="spacer.gif" width="1" height="26" border="0" alt="" /></td>
                </tr>
                <tr>
                <td rowspan="35" colspan="5"><!-- InstanceBeginEditable name="main_content" -->
                <div id="main_content_alpha">
                <p> </p>
                <div id="alpha_pic1"></div>
                <p> </p>
                </div>
                <!-- InstanceEndEditable --></td>
                <td rowspan="35"><img name="index_r3_c10" src="index_r3_c10.gif" width="36" height="644" border="0" id="index_r3_c10" alt="" /></td>
                <td><img src="spacer.gif" width="1" height="17" border="0" alt="" /></td>
                </tr>
                <tr>
                <td rowspan="35"><img name="index_r4_c2" src="index_r4_c2.gif" width="9" height="708" border="0" id="index_r4_c2" alt="" /></td>
                <td><a href="jh_page.html"><img name="index_r4_c3" src="index_r4_c3.gif" width="115" height="20" border="0" id="index_r4_c3" alt="" /></a></td>
                <td rowspan="35"><img name="index_r4_c4" src="index_r4_c4.gif" width="11" height="708" border="0" id="index_r4_c4" alt="" /></td>
                <td><img src="spacer.gif" width="1" height="20" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><a href="jc_page.html"><img name="index_r5_c3" src="index_r5_c3.gif" width="115" height="18" border="0" id="index_r5_c3" alt="" /></a></td>
                <td><img src="spacer.gif" width="1" height="18" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><img name="index_r6_c3" src="index_r6_c3.gif" width="115" height="18" border="0" id="index_r6_c3" alt="" /></td>
                <td><img src="spacer.gif" width="1" height="18" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><img name="index_r7_c3" src="index_r7_c3.gif" width="115" height="20" border="0" id="index_r7_c3" alt="" /></td>
                <td><img src="spacer.gif" width="1" height="20" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><a href="grooming_page.html"><img name="index_r8_c3" src="index_r8_c3.gif" width="115" height="19" border="0" id="index_r8_c3" alt="" /></a></td>
                <td><img src="spacer.gif" width="1" height="19" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><a href="questions_page.html"><img name="index_r9_c3" src="index_r9_c3.gif" width="115" height="20" border="0" id="index_r9_c3" alt="" /></a></td>
                <td><img src="spacer.gif" width="1" height="20" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><a href="rank_page.html"><img name="index_r10_c3" src="index_r10_c3.gif" width="115" height="18" border="0" id="index_r10_c3" alt="" /></a></td>
                <td><img src="spacer.gif" width="1" height="18" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><a href="ribbons_page.html"><img name="index_r11_c3" src="index_r11_c3.gif" width="115" height="22" border="0" id="index_r11_c3" alt="" /></a></td>
                <td><img src="spacer.gif" width="1" height="22" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><a href="uniform_page.html"><img name="index_r12_c3" src="index_r12_c3.gif" width="115" height="17" border="0" id="index_r12_c3" alt="" /></a></td>
                <td><img src="spacer.gif" width="1" height="17" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><img name="index_r13_c3" src="index_r13_c3.gif" width="115" height="17" border="0" id="index_r13_c3" alt="" /></td>
                <td><img src="spacer.gif" width="1" height="17" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><a href="ai_page.html"><img name="index_r14_c3" src="index_r14_c3.gif" width="115" height="19" border="0" id="index_r14_c3" alt="" /></a></td>
                <td><img src="spacer.gif" width="1" height="19" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><a href="battldrship_page.html"><img name="index_r15_c3" src="index_r15_c3.gif" width="115" height="20" border="0" id="index_r15_c3" alt="" /></a></td>
                <td><img src="spacer.gif" width="1" height="20" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><img name="index_r16_c3" src="index_r16_c3.gif" width="115" height="19" border="0" id="index_r16_c3" alt="" /></td>
                <td><img src="spacer.gif" width="1" height="19" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><a href="academic_page.html"><img name="index_r17_c3" src="index_r17_c3.gif" width="115" height="17" border="0" id="index_r17_c3" alt="" /></a></td>
                <td><img src="spacer.gif" width="1" height="17" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><a href="choir_page.html"><img name="index_r18_c3" src="index_r18_c3.gif" width="115" height="20" border="0" id="index_r18_c3" alt="" /></a></td>
                <td><img src="spacer.gif" width="1" height="20" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><a href="drill_page.html"><img name="index_r19_c3" src="index_r19_c3.gif" width="115" height="20" border="0" id="index_r19_c3" alt="" /></a></td>
                <td><img src="spacer.gif" width="1" height="20" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><a href="dc_page.html"><img name="index_r20_c3" src="index_r20_c3.gif" width="115" height="19" border="0" id="index_r20_c3" alt="" /></a></td>
                <td><img src="spacer.gif" width="1" height="19" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><a href="hg_page.html"><img name="index_r21_c3" src="index_r21_c3.gif" width="115" height="17" border="0" id="index_r21_c3" alt="" /></a></td>
                <td><img src="spacer.gif" width="1" height="17" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><img name="index_r22_c3" src="index_r22_c3.gif" width="115" height="19" border="0" id="index_r22_c3" alt="" /></td>
                <td><img src="spacer.gif" width="1" height="19" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><a href="raiders_page.html"><img name="index_r23_c3" src="index_r23_c3.gif" width="115" height="21" border="0" id="index_r23_c3" alt="" /></a></td>
                <td><img src="spacer.gif" width="1" height="21" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><img name="index_r24_c3" src="index_r24_c3.gif" width="115" height="19" border="0" id="index_r24_c3" alt="" /></td>
                <td><img src="spacer.gif" width="1" height="19" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><a href="s1_page.html"><img name="index_r25_c3" src="index_r25_c3.gif" width="115" height="17" border="0" id="index_r25_c3" alt="" /></a></td>
                <td><img src="spacer.gif" width="1" height="17" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><a href="s2_page.html"><img name="index_r26_c3" src="index_r26_c3.gif" width="115" height="18" border="0" id="index_r26_c3" alt="" /></a></td>
                <td><img src="spacer.gif" width="1" height="18" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><a href="s3_page.html"><img name="index_r27_c3" src="index_r27_c3.gif" width="115" height="21" border="0" id="index_r27_c3" alt="" /></a></td>
                <td><img src="spacer.gif" width="1" height="21" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><a href="s4_page.html"><img name="index_r28_c3" src="index_r28_c3.gif" width="115" height="18" border="0" id="index_r28_c3" alt="" /></a></td>
                <td><img src="spacer.gif" width="1" height="18" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><a href="s5_page.html"><img name="index_r29_c3" src="index_r29_c3.gif" width="115" height="19" border="0" id="index_r29_c3" alt="" /></a></td>
                <td><img src="spacer.gif" width="1" height="19" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><a href="s6_page.html"><img name="index_r30_c3" src="index_r30_c3.gif" width="115" height="19" border="0" id="index_r30_c3" alt="" /></a></td>
                <td><img src="spacer.gif" width="1" height="19" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><a href="s7_page.html"><img name="index_r31_c3" src="index_r31_c3.gif" width="115" height="19" border="0" id="index_r31_c3" alt="" /></a></td>
                <td><img src="spacer.gif" width="1" height="19" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><img name="index_r32_c3" src="index_r32_c3.gif" width="115" height="17" border="0" id="index_r32_c3" alt="" /></td>
                <td><img src="spacer.gif" width="1" height="17" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><img name="index_r33_c3" src="index_r33_c3.gif" width="115" height="19" border="0" id="index_r33_c3" alt="" /></td>
                <td><img src="spacer.gif" width="1" height="19" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><img name="index_r34_c3" src="index_r34_c3.gif" width="115" height="5" border="0" id="index_r34_c3" alt="" /></td>
                <td><img src="spacer.gif" width="1" height="5" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><img name="index_r35_c3" src="index_r35_c3.gif" width="115" height="15" border="0" id="index_r35_c3" alt="" /></td>
                <td><img src="spacer.gif" width="1" height="15" border="0" alt="" /></td>
                </tr>
                <tr>
                <td><img name="index_r36_c3" src="index_r36_c3.gif" width="115" height="20" border="0" id="index_r36_c3" alt="" /></td>
                <td><img src="spacer.gif" width="1" height="20" border="0" alt="" /></td>
                </tr>
                <tr>
                <td rowspan="2"><img name="index_r37_c3" src="index_r37_c3.gif" width="115" height="102" border="0" id="index_r37_c3" alt="" /></td>
                <td><img src="spacer.gif" width="1" height="21" border="0" alt="" /></td>
                </tr>
                <tr>
                <td rowspan="2" colspan="6"><img name="index_r38_c5" src="index_r38_c5.gif" width="738" height="108" border="0" id="index_r38_c5" alt="" /></td>
                <td><img src="spacer.gif" width="1" height="81" border="0" alt="" /></td>
                </tr>
                <tr>
                <td colspan="3"><img name="index_r39_c2" src="index_r39_c2.gif" width="135" height="27" border="0" id="index_r39_c2" alt="" /></td>
                <td><img src="spacer.gif" width="1" height="27" border="0" alt="" /></td>
                </tr>
                </table>
                </div>
                </body>
                <!-- InstanceEnd --></html>

                • 5. Re: Image positioning problems?
                  hans-g. Adobe Community Professional & MVP

                  Hi,

                   

                  well, you use a template. Maybe you should talk to the producer of it.

                   

                  The other possibility is a little bit like a radical cure. You should eliminate every <!-- and -->. I did it and so I could insert an image and direct it in the middle and the top, there where you wanted it. I could edit line 72 in this way:

                   

                  <td colspan="5" rowspan="35" align="center" valign="top"><div align="center"><img src="yourImage.jpg" alt="W" width="258" height="117"></div></td>

                   

                  Hans-G.

                  • 6. Re: Image positioning problems?
                    Nancy OShea Adobe Community Professional & MVP

                    APDivs are not a good primary layout method.

                    Here is why:
                    http://apptools.com/examples/pagelayout101.php

                     

                    You can't center pages with APDivs because they are absolutely positioned in relation to the top left corner of your browser window.  This invariable changes when viewport is resized.

                     

                    A much saner approach is to start with a CSS grid or framework that can handle all your content. With a little pre-planning, you can get the exact layout required without APDivs or table-based containers.

                     

                    EZ-CSS (watch the screencast to see how it works)

                    http://www.ez-css.org/

                     

                     

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