8 Replies Latest reply on Mar 15, 2010 11:25 AM by osgood_

    Centre Image Between 2 Other Images

    Needahand51

      Hi,

      I am a beginner to Dreamweaver and am trying to find a solution to what should be a simple problem. I want to place 3 images across a page, with one image aligned left, one image aligned right and the other image centred between the two. I am using Dreamweaver CS4. I need to know how to create a class style which will achieve this. I have tried several things but without success.

      Thanks in advance.

        • 1. Re: Centre Image Between 2 Other Images
          hans-g. Adobe Community Professional & MVP

          Hi,

           

          in my oppinion you should solve this job with/in a table. Open three columns and put each of the pictures in one of the cells. There you can align the images according to your wishes.

           

          Hans-G.

          • 2. Re: Centre Image Between 2 Other Images
            Needahand51 Level 1

            Hi,

            Is there not a way to do this with a CSS class style?

            • 3. Re: Centre Image Between 2 Other Images
              Nancy OShea Adobe Community Professional & MVP

              Float images inside a #container of pre-determined width.

              http://alt-web.com/DEMOS/3-CSS-boxes.shtml

               

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

              • 4. Re: Centre Image Between 2 Other Images
                John Waller Adobe Community Professional & MVP

                I must admit that using a 1x3 table is easier and more intuitive than CSS for this.

                • 5. Re: Centre Image Between 2 Other Images
                  hans-g. Adobe Community Professional & MVP

                  Hi Needahand51 and John,

                   

                  I'll second that! Even if the use of tables some people are frown on, tables allow to do this job in the easiest way, in my humble opinion. Look here for example:

                   

                  <body>
                  <table width="957" border="4" cellspacing="0">
                    <tr>
                      <td width="2%" bordercolor="#0000FF"> </td>
                      <td width="32%" bordercolor="#00FF00"><div align="center"><img src="dr.jpg" alt="dr" width="48" height="48" border="1" /></div></td>
                      <td width="2%"> </td>
                      <td width="32%"><div align="center"><img src="dr.jpg" width="48" height="48" alt="dr" /></div></td>
                      <td width="2%"> </td>
                      <td width="32%"><div align="center"><img src="dr.jpg" width="48" height="48" alt="dr" /></div></td>
                      <td width="2%"> </td>
                    </tr>
                  </table>
                  <p> </p>
                  </body>

                  Hans-G.

                  • 6. Re: Centre Image Between 2 Other Images
                    Needahand51 Level 1

                    Hi,

                    Thanks for the suggestions but I wanted to do this without using a table as I want the images to line up with the text on either side and this differs with different browsers, so it seems to me that you can never get it just right, unless I am missing something, how can you set a width for the table when the width of the text block varies with different browsers?. I would have thought that it would be possible to float one image left, float one image left and place the other in the centre, I jusy don't know how to do it.

                    I am a beginner and I am using Dreamweaver so I might easily be understanding it wrong.

                     

                    My test page is here:

                     

                    http://www.needahandspanishproperties.com/test2.html

                     

                    as you can see the image is not in the centre. With this example I followed a tip from another forum who suggested assigning the centre image as a block (text centred) and setting margins to auto, also putting centred image after the left and right aligned images.

                    • 7. Re: Centre Image Between 2 Other Images
                      hans-g. Adobe Community Professional & MVP

                      Hi,

                       

                      as I said, the simplest way is to creat some tables. Another way would be to solve this task with layers. This is in my mind a kind of coronation, and a little bit complicated. You can see an example I made for myself here: http://www.goldschmiede-blumberg.de/AdobTest/LayerOJ.php.

                       

                      But even so I would like to persuad you, to tackle this job with tables. And if you fit out tables and columns with a percentage basis, not with a fixed size, that will work out in a good end.

                       

                      Hans-G.

                      • 8. Re: Centre Image Between 2 Other Images
                        osgood_ Level 8

                        Needahand51 wrote:

                         

                        Hi,

                        Thanks for the suggestions but I wanted to do this without using a table as I want the images to line up with the text on either side and this differs with different browsers, so it seems to me that you can never get it just right, unless I am missing something, how can you set a width for the table when the width of the text block varies with different browsers?. I would have thought that it would be possible to float one image left, float one image left and place the other in the centre, I jusy don't know how to do it.

                        I am a beginner and I am using Dreamweaver so I might easily be understanding it wrong.

                         

                        My test page is here:

                         

                        http://www.needahandspanishproperties.com/test2.html

                         

                        as you can see the image is not in the centre. With this example I followed a tip from another forum who suggested assigning the centre image as a block (text centred) and setting margins to auto, also putting centred image after the left and right aligned images.

                         

                        This css construct will keep your image in the middle regardless of browser width.

                         

                        <!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>
                        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                        <title>Untitled Document</title>
                        <style type="text/css">
                        #container {
                        width: 90%;
                        margin: 0 auto;
                        }
                        #leftCol {
                        float: left;
                        width: 190px;
                        }
                        #imageWrapper {
                        margin-left: 200px;
                        margin-right: 15px;
                        }
                        #imageWrapper h1 {
                        margin: 0;
                        padding: 0 0 20px 0;
                        }
                        #leftImage {
                        width: 170px;
                        float: left;
                        text-align: center;
                        }
                        #rightImage {
                        width: 170px;
                        float: right;
                        text-align: center;
                        }
                        #centerImage {
                        margin-left: 170px;
                        margin-right: 170px;
                        text-align: center;
                        }
                        </style>
                        </head>

                         

                        <body>
                        <div id="container">
                        <div id="leftCol">
                        Left Column
                        </div><!-- end leftCol -->
                        <div id="imageWrapper">
                        <h1>Factfile for Estepona </h1>
                        <div id="leftImage"><img src="images/one.jpg" width="170" height="170" /></div>
                        <div id="rightImage"><img src="images/two.jpg" width="170" height="170" /></div>
                        <div id="centerImage"><img src="images/three.jpg" width="170" height="170" /></div>
                        <p>Use this handy fact file to get information on the resort of Estepona located on the Costa de Sol, Spain.</p>
                        </div><!-- end imageWrapper -->
                        </div><!-- end container -->
                        </body>
                        </html>