16 Replies Latest reply: Apr 1, 2012 11:53 AM by jinda55 RSS

    moving images

    jinda55 Community Member

      What is the best way to move images so that when you launch it in your browser, it is in the same place as design view on dreamweaver 8?

        • 1. Re: moving images
          SnakEyez02 CommunityMVP

          Impossible.  Design View should never be used to judge where images will be, you should always be basing your decisions off of Live View or on pages you test in your browser.  Let's start by taking a look at what you are trying to accomplish (preferrably as a an image like a JPG) and then let's see the page you uploaded online and we will go from there.

          • 2. Re: moving images
            jinda55 Community Member

            Oh okay.

             

            How do I get 'live view' in dreamweaver 8?

             

            I haven't uploaded any pages online as I have only just started creating the website. The image is a JPEG.

            • 3. Re: moving images
              SnakEyez02 CommunityMVP

              Oops.  Forgot Live View came a little later.  What you will have to do is just test the page in the browser as you go along.  Personally I'd recommend upgrading to CS5.5 if you are going to upgrade because once CS6 is announced you will no longer be able to upgrade per Adobe's previous 3 version policy unless you are planning on going to the Creative Cloud subscription model when it is released.

               

              I'd recommend starting with the following tutorial ( http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html ).  That will give you an idea about how to turn an image into a CSS layout with code that will be the same when you launch it in your browser.  It is specific to Fireworks, but if you understand what is going on in the slicing process it can be interpreted into other graphics editors.

               

              Only way we can help here though is if we see the page (if you can upload it somewhere for us to see that would be great), or at minimum the HTML & CSS from the page so we can see what's going on.  Also seeing that image to see what you are expecting the layout to look like can go a long way in helping us understand your issue and help you solve it.

              • 4. Re: moving images
                jinda55 Community Member

                Hi

                 

                I decided to get the CS5.5 trial to try it out.

                 

                Live view is there but the image still moves when I see the page in chrome. I have already tried changing the screen resolution. The problem is I want to get an image to be on the right hand side but I can't physically move the image to exactly where I want it. I tried using AP Div tags but although this allows me to move it to anywhere within the page, it looks different in Chrome.

                 

                Any ideas? (please tell me if I can do anything to help based on my response of getting CS5.5)

                 

                Thanks

                • 5. Re: moving images
                  SnakEyez02 CommunityMVP

                  AP divs are not the answer.  Absolutely positioned elements are positioned relative to their parent container.  What you probably need to do is float the container to the right.  But it's impossible to determine without seeing at minimum either a link to the page in question or the HTML & CSS from the document.

                  • 6. Re: moving images
                    jinda55 Community Member

                    How do I post the HTML & CSS code without it being hard to read?

                    • 7. Re: moving images
                      martcol Community Member
                      • 8. Re: moving images
                        jinda55 Community Member
                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                        <html xmlns="http://www.w3.org/1999/xhtml">
                        <head>
                        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
                        <title>homepage</title>
                        <meta name="keywords" content="" />
                        <meta name="description" content="" />
                        <link href="default.css" rel="stylesheet" type="text/css" />
                        <style type="text/css">
                        <!--
                        #Layer1 {
                                  position:static;
                                  width:231px;
                                  height:115px;
                                  z-index:1;
                                  left: 1127px;
                                  top: 354px;
                        }
                        #Layer2 {
                                  position:absolute;
                                  width:200px;
                                  height:115px;
                                  z-index:2;
                                  left: 418px;
                                  top: 576px;
                                  background-color: #003399;
                        }
                        #Layer3 {
                                  position:static;
                                  width:238px;
                                  height:30px;
                                  z-index:3;
                                  left: 1131px;
                                  top: 10px;
                                  background-color: #009966;
                        }
                        .style2 {color: #FFFFFF}
                        .style4 {
                                  font-size: 24px;
                                  font-weight: bold;
                                  font-family: "Times New Roman", Arial, Verdana, "Trebuchet MS";
                        }
                        .style5 {font-family: "Times New Roman", Arial, Verdana, "Trebuchet MS"}
                        .style6 {font-size: x-large; color: #FFFFFF;}
                        .style7 {
                                  color: #FFFFFF;
                                  font-family: "Times New Roman", Arial, Verdana, "Trebuchet MS";
                                  font-size: 36px;
                                  font-weight: bold;
                        }
                        #Layer4 {
                                  position:static;
                                  width:200px;
                                  height:115px;
                                  z-index:1;
                                  left: 500px;
                                  top: 299px;
                        }
                        #apDiv1 {
                                  position:static;
                                  width:200px;
                                  height:115px;
                                  z-index:1;
                                  left: 984px;
                                  top: 225px;
                        }
                        #apDiv2 {
                                  position:absolute;
                                  width:200px;
                                  height:115px;
                                  z-index:1;
                                  left: 955px;
                                  top: 260px;
                        }
                        #apDiv3 {
                                  position:absolute;
                                  width:200px;
                                  height:115px;
                                  z-index:1;
                                  left: 658px;
                                  top: 335px;
                                  background-image: url(images/homepage%20image%201.jpg);
                        }
                        #apDiv4 {
                                  position:absolute;
                                  width:200px;
                                  height:115px;
                                  z-index:1;
                                  left: 546px;
                                  top: 224px;
                                  background-image: url(images/homepage%20image%201.jpg);
                        }
                        -->
                        </style>
                        </head>
                        <body>
                        <div id="wrapper">
                          <div class="style5" id="header">
                            <!-- end div#logo -->
                        </div>
                          <span class="style5">
                          <!-- end div#header -->
                          </span>
                          <div class="style5" id="menu">
                            <ul>
                              <li class="active"><a href="#">Home</a></li>
                              <li><a href="Aboutus.htm">About Us</a></li>
                              <li><a href="Flightsandtimetables.htm">Flights &amp; Timetables</a></li>
                              <li><a href="Managemybooking.htm">Manage My Booking</a></li>
                                    <li><a href="Hotels.htm">Hotels</a></li>
                                    <li><a href="FAQs.htm">FAQs</a></li>
                                    <li><a href="Careers.htm">Careers</a></li>
                                    <li><a href="Contactus.htm">Contact Us</a></li>
                            </ul>
                          </div>
                          <span class="style5">
                          <!-- end div#menu -->
                          </span>
                          <div id="page">
                            <div id="page-bgtop">
                              <p class="style5">           </p>
                              <p class="style5"><img src="images/homepage image 1.jpg" alt="" width="240" height="167" align="right" /></p>
                              <p class="style5"> </p>
                              <p class="style5">
                                <label for="textfield"></label>
                              </p>
                              <p class="style5"> </p>
                              <p class="style5"> </p>
                              <p class="style5"> </p>
                              <p class="style5"> </p>
                              <p class="style5"> </p>
                              <p class="style5"> </p>
                              <p class="style5"> </p>
                              <p class="style5"> </p>
                              <p class="style5"> </p>
                              <p class="style5"> </p>
                              <p class="style5"> </p>
                              <p class="style5"> </p>
                              <p class="style5"> </p>
                              <p class="style5">
                                <!-- end div#content -->
                              </p>
                              <div style="clear: both; height: 1px"></div>
                            </div>
                          </div>
                          <!-- end div#page -->
                          <div id="footer">
                            <p>Copyright &copy; 2007 Culinary. All Rights Reserved. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.  <a href="#">Privacy Policy</a> | <a href="Termsandconditions.htm">Terms of Use</a></p>
                          </div>
                          <!-- end div#footer -->
                        </div>
                        <!-- end div#wrapper -->
                        </body>
                        </html>
                        
                        

                         

                         

                         

                        /*
                        Design by Free CSS Templates
                        http://www.freecsstemplates.org
                        Released for free under a Creative Commons Attribution 2.5 License
                        */
                        
                        
                        * {
                                  margin: 1;
                                  padding: 0;
                        }
                        
                        
                        body {
                                  margin: 0px;
                                  background: #C0C0C0;
                                  text-align: inherit;
                                  font-family: Georgia, "Times New Roman", Times, serif;
                                  font-size: 13px;
                                  font-style: normal;
                                  color: #7D807A;
                        }
                        
                        
                        h1, h2, h3 {
                                  color: #AA2808;
                        }
                        
                        
                        h1 {
                        }
                        
                        
                        h2 {
                        }
                        
                        
                        h3 {
                        }
                        
                        
                        p, blockquote, ul, ol {
                                  margin-bottom: 20px;
                                  line-height: 2em;
                        }
                        
                        
                        p {
                        }
                        
                        
                        blockquote {
                        }
                        
                        
                        ul, ol, li {
                                  margin: 0px;
                                  padding: 0px;
                                  list-style: none;
                        }
                        
                        
                        a {
                                  text-decoration: underline;
                                  color: #E14949;
                        }
                        
                        
                        a:hover {
                                  text-decoration: none;
                                  color: #C11414;
                        }
                        
                        
                        /* Wrapper */
                        
                        
                        #wrapper {
                        }
                        
                        
                        /* Header */
                        
                        
                        #header {
                                  width: 900px;
                                  height: 140px;
                                  margin: 0 auto;
                                  background: url(images/img01.jpg) no-repeat left top;
                        }
                        
                        
                        /* Logo */
                        
                        
                        #logo {
                                  float: left;
                                  width: 270px;
                                  height: 70px;
                                  margin: 0px;
                                  padding-left: 30px;
                                  text-align: center;
                        }
                        
                        
                        #logo h1 {
                                  margin: 0;
                                  padding: 10px 0px 0px 0px;
                                  text-transform: lowercase;
                                  font: normal 46px Georgia, "Times New Roman", Times, serif;
                        }
                        
                        
                        #logo h2 {
                                  margin: -2px 0 0 0;
                                  padding: 0;
                                  text-transform: lowercase;
                                  letter-spacing: 2px;
                                  font-size: 12px;
                                  font-weight: normal;
                                  font-style: italic;
                                  color: #FFFFFF;
                        }
                        
                        
                        #logo a {
                                  text-decoration: none;
                                  color: #FFFFFF;
                        }
                        
                        
                        /* Menu */
                        
                        
                        #menu {
                                  width: 872px;
                                  height: 41px;
                                  margin: 0 auto;
                                  padding: 0px 0px 0px 28px;
                                  background: url(images/img02.jpg) no-repeat left top;
                        }
                        
                        
                        #menu ul {
                                  margin: 0;
                                  list-style: none;
                                  line-height: normal;
                        }
                        
                        
                        #menu li {
                                  display: inline;
                                  text-align: center;
                        }
                        
                        
                        #menu a {
                                  height: 33px;
                                  display: block;
                                  float: left;
                                  padding: 8px 20px 0px 20px;
                                  text-decoration: none;
                                  text-align: center;
                                  text-transform: none;
                                  font-family: "Times New Roman", Arial, Verdana, "Trebuchet MS";
                                  font-size: 14px;
                                  font-weight: normal;
                                  font-style: normal;
                                  color: #FFFFFF;
                                  line-height: normal;
                                  background-color: #0033CC;
                        }
                        
                        
                        #menu a:hover, #menu .active a {
                                  background: #C11212;
                                  color: #FFFFFF;
                        }
                        
                        
                        #splash {
                                  width: 940px;
                                  height: 299px;
                                  margin: 0 auto;
                        }
                        
                        
                        /* Search */
                        
                        
                        #header-search {
                                  width: 940px;
                                  height: 51px;
                                  margin: 0 auto;
                                  padding: 0px 0px 0px 0px;
                        }
                        
                        
                        #header-search form {
                                  float: right;
                                  width: 300px;
                                  margin: 0;
                                  padding: 12px 0px 0px 0px;
                        }
                        
                        
                        #header-search fieldset {
                                  margin: 0;
                                  padding: 0;
                                  border: none;
                        }
                        
                        
                        #header-search-text {
                                  width: 200px;
                                  padding: 2px 3px;
                                  background: #1E1E1E;
                                  border: none;
                                  color: #4D4D4D;
                        }
                        
                        
                        #header-search-submit {
                                  background: none;
                                  border: none;
                                  font-family: Arial, Helvetica, sans-serif;
                                  font-size: 12px;
                                  color: #E4E4E4;
                        }
                        
                        
                        #search {
                                  height: 51px;
                                  margin: 0 auto;
                                  padding: 0px 0px 60px 0px;
                        }
                        
                        
                        #search form {
                                  margin: 0;
                                  padding: 12px 0px 0 0;
                        }
                        
                        
                        #search fieldset {
                                  margin: 0;
                                  padding: 0;
                                  border: none;
                        }
                        
                        
                        #search input {
                                  float: left;
                                  font: 12px Arial, Helvetica, sans-serif;
                        }
                        
                        
                        #search-text {
                                  width: 160px;
                                  height: 18px;
                                  padding: 3px 0 3px 5px;
                                  border: 1px solid #999999;
                                  color: #000000;
                        }
                        
                        
                        #search-submit {
                                  margin-left: 10px;
                                  padding: 4px 4px;
                                  border: none;
                                  background: #C11212;
                                  font-size: 10px;
                                  color: #FFFFFF;
                        }
                        
                        
                        /* Page */
                        
                        
                        #page {
                                  width: 844px;
                                  margin: 0 auto;
                                  padding: 0px 28px;
                                  background: #FFFFFF url(images/img05.jpg) repeat-y left top;
                        }
                        
                        
                        /* Content */
                        
                        
                        #content {
                                  float: left;
                                  width: 560px;
                                  padding-top: 30px;
                        }
                        .post {
                                  background: url(images/img04.gif) repeat-x left bottom;
                                  margin: 0px 0px 30px 0px;
                        }
                        
                        
                        .post .title {
                                  background: url(images/img03.jpg) no-repeat left 0px;
                                  margin: 0px;
                                  color: #BF0B0B;
                        }
                        
                        
                        .post .title a {
                                  padding: 0px 0px 0px 40px;
                                  letter-spacing: -1px;
                                  text-decoration: none;
                                  font-family: Georgia, "Times New Roman", Times, serif;
                                  font-size: 28px;
                                  font-weight: normal;
                                  font-style: italic;
                                  color: #BF0B0B;
                        }
                        
                        
                        .post .entry {
                                  padding: 20px 0px;
                        }
                        
                        
                        .post img {
                                  float: left;
                                  padding: 15px 0px;
                        }
                        
                        
                        .post .meta {
                                  text-align: right;
                                  padding: 0px 0 20px 0;
                                  font-weight: bold;
                                  color: #202020;
                        }
                        
                        
                        .post .byline {
                                  padding-left: 40px;
                                  font-size: 12px;
                                  font-style: italic;
                                  text-transform: lowercase;
                                  color: #7D807A;
                        }
                        
                        
                        /* Sidebar */
                        
                        
                        #sidebar {
                                  float: right;
                                  width: 230px;
                                  margin: 20px 0px;
                                  padding: 10px 0px 30px 30px;
                        }
                        
                        
                        #sidebar ul {
                                  margin: 0;
                                  padding: 0;
                                  list-style: none;
                                  line-height: normal;
                        }
                        
                        
                        #sidebar li {
                                  margin-bottom: 0px;
                        }
                        
                        
                        #sidebar li ul {
                                  margin: 0px;
                                  padding: 0px 0px 40px 27px;
                        }
                        
                        
                        #sidebar li li {
                                  margin: 0;
                                  padding: 9px 0px;
                                  border: none;
                                  background: none;
                        }
                        
                        
                        #sidebar h2 {
                                  margin: 0px;
                                  padding: 0px 0px 10px 0px;
                                  font-family: Georgia, "Times New Roman", Times, serif;
                                  font-size: 18px;
                                  font-weight: normal;
                                  font-style: italic;
                                  color: #BF0B0B;
                        }
                        
                        
                        #sidebar h3 {
                                  font-size: 77%;
                                  color: #110404;
                        }
                        
                        
                        #sidebar p {
                                  margin: 0;
                                  line-height: normal;
                                  color: #D4C792;
                        }
                        
                        
                        #sidebar a {
                                  border: none;
                                  text-decoration: none;
                                  color: #7D807A;
                        }
                        
                        
                        #sidebar a:hover {
                                  text-decoration: underline;
                        }
                        
                        
                        /* Submenu */
                        
                        
                        #submenu {
                        }
                        
                        
                        /* News */
                        
                        
                        #news {
                        }
                        
                        
                        #news a {
                                  font-size: 85%;
                        }
                        
                        
                        /* Footer */
                        
                        
                        #footer {
                                  width: 960px;
                                  height: 100px;
                                  margin: 0 auto;
                                  padding: 14px 0px 0px 0px;
                                  background: url(images/img04.jpg) no-repeat left top;
                                  color: #9C9C9C;
                        }
                        
                        
                        #footer p {
                                  margin: 0;
                                  text-align: center;
                                  font-size: 11px;
                        }
                        
                        
                        #footer a {
                                  text-decoration: underline;
                                  color: #808080;
                        }
                        
                        
                        #footer a:hover {
                                  text-decoration: none;
                        }
                        
                        
                        • 9. Re: moving images
                          Nancy O. CommunityMVP

                          Default CSS positioning (unspecified or static) is all that is required for 98% of layouts.   When you position elements with absolute, you remove them from the normal document flow.  That's why your elements seem to move around when previewed in browsers.

                          http://apptools.com/examples/pagelayout101.php

                           

                          Start over with a pre-built CSS Layout that has all the columns and containers you'll need for your project.  Align elements with floats, margins & padding.

                           

                          See DW Starter Pages

                          http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_layouts.html

                           

                          Use meaningful selector names in your CSS code.   Style1, Style2, etc... doesn't tell you what the style is being used for.

                           

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

                           

                          How to Develop with CSS? (must read)

                          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/

                          • 10. Re: moving images
                            martcol Community Member

                            Nancy's advice is worth taking note of.

                             

                            Have a look at this: http://martcol.co.uk/test/imagefloat.html

                             

                            I have used your code and modified it.  I have used a plain yellow .png image to represent your image and it is floated right and has a bit of padding.

                             

                            It was quick n' dirty and you might need to rethink it as you soak up some of the information that Nancy has pointed out to you.

                             

                            Martin

                            • 11. Re: moving images
                              martcol Community Member

                              You can use your browser to view source but what is really helpful is to used Firefox browser and get hold of the Firebug plugin.

                               

                              Martin

                              • 12. Re: moving images
                                jinda55 Community Member

                                I know very little about Dreamweaver.

                                 

                                I can't afford to start again and I don't have the time to learn it so that is why I opted for the template.

                                 

                                I'm confused what is a container?

                                 

                                And also can't the code I posted just be edited so that I can move the images.

                                • 13. Re: moving images
                                  martcol Community Member

                                  the page I put up is your existing code but modified to move (float) the image.

                                   

                                  A container is (usually) a div that contains other elements.

                                   

                                  Martin

                                  • 14. Re: moving images
                                    jinda55 Community Member

                                    Thanks for your reponse

                                     

                                    Can I ask how you managed to change it?

                                     

                                    What did you add/remove?

                                     

                                    To the HTML code right?

                                    • 15. Re: moving images
                                      Nancy O. CommunityMVP

                                      I know very little about Dreamweaver.

                                       

                                      I can't afford to start again and I don't have the time to learn it so that is why I opted for the template.

                                       

                                      I'm confused what is a container?

                                       

                                      Hire a professional to help you.  

                                      You're in over your skill-set.

                                       

                                       

                                      Nancy O.

                                      Alt-Web Design & Publishing

                                      Web | Graphics | Print | Media  Specialists 

                                      http://alt-web.com/

                                      • 16. Re: moving images
                                        jinda55 Community Member

                                        Ha I know

                                         

                                        How much would I be looking to fork out?