9 Replies Latest reply on Aug 7, 2008 10:04 AM by Newsgroup_User

    Image positioning

    fralexis
      I have an image that I need to position partially over another image...as in a layer. How do I make an image position completely exact? Thanks.
        • 1. Re: Image positioning
          Ben M Adobe Community Professional
          I'm assuming if you are positioning layers that you have an understanding of CSS. Just add a z-index to the image so that it is higher than the z-index of the image below it. Then the image will appear over top of the other image given that the positioning is correct.
          • 2. Re: Image positioning
            fralexis Level 1
            Ooops. I only have a very basic understanding of CSS. I'm not sure how to go about this or how to select and image and attach a z-index. Thanks!
            • 3. Re: Image positioning
              Level 7
              >>I only have a very basic understanding of CSS

              You will need more than that if you want to use AP (Absolutely Positioned)
              elements and Z-index. Have you picked up a book on CSS yet?

              --

              Walt


              "fralexis" <webforumsuser@macromedia.com> wrote in message
              news:g7daqk$ps5$1@forums.macromedia.com...
              > Ooops. I only have a very basic understanding of CSS. I'm not sure how to
              > go about this or how to select and image and attach a z-index. Thanks!


              • 4. Re: Image positioning
                fralexis Level 1
                OK. I do need a lot more education in this. But I see the light at the end of the tunnel. I got the z-index working. But I do have one problem.

                Once I get evertything just right I save all and close. Then, when I open back up, the object is in a different place than when I saved it. I have the attribute set as absolute. Is there a way to lock the position? Thanks for you help. I appreciate it!
                • 5. Re: Image positioning
                  Level 7
                  Let's see your code.

                  --
                  Murray --- ICQ 71997575
                  Adobe Community Expert
                  (If you *MUST* email me, don't LAUGH when you do so!)
                  ==================
                  http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                  http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                  ==================


                  "fralexis" <webforumsuser@macromedia.com> wrote in message
                  news:g7euki$k8l$1@forums.macromedia.com...
                  > OK. I do need a lot more education in this. But I see the light at the end
                  > of
                  > the tunnel. I got the z-index working. But I do have one problem.
                  >
                  > Once I get evertything just right I save all and close. Then, when I open
                  > back
                  > up, the object is in a different place than when I saved it. I have the
                  > attribute set as absolute. Is there a way to lock the position? Thanks for
                  > you
                  > help. I appreciate it!
                  >

                  • 6. Re: Image positioning
                    fralexis Level 1
                    Thanks so much. Here is the code for the area that is troubling me. The offending graphic is "montreal.gif" and "menu.gif". They are both positioned on top of the "banner.gif".

                    <p><img src="menu.gif" width="730" height="28" border="0" usemap="#Map" class="graphic3" />
                    <map name="Map" id="Map"><area shape="rect" coords="141,3,237,23" href="registration.html" />
                    </map><img src="montreal.gif" width="629" height="165" class="graphic2" /><img src="Banner.gif" width="1024" height="329" class="basegraphic" /></p>
                    <p><img src="line.gif" width="1037" height="20" /></p>

                    And here are the css attributes for these graphics..............

                    .basegraphic {
                    overflow: auto;
                    position: static;
                    z-index: 5;
                    left: auto;
                    top: 0px;
                    right: auto;
                    bottom: auto;
                    }
                    .graphic3 {
                    position: absolute;
                    z-index: 15;
                    left: 157px;
                    top: 324px;
                    }

                    .graphic2 {
                    position: absolute;
                    z-index: 10;
                    left: 307px;
                    top: 153px;
                    right: auto;
                    bottom: auto;
                    visibility: visible;
                    width: 472px;
                    height: 123px;
                    • 7. Re: Image positioning
                      Level 7
                      It would be much more helpful if you could post a link to the uploaded page
                      so we can SEE what is happening.

                      Notwithstanding that, your CSS is unnecessarily verbose. Try this -

                      /* .basegraphic {
                      position:static is the default, and its placement on the page is determined
                      entirely by the normal flow of the page, not your CSS
                      z-index: 5;
                      left: auto;
                      top: 0px;
                      right: auto;
                      bottom: auto;

                      }*/

                      .graphic3 {
                      position: absolute;
                      z-index: 15;
                      left: 157px;
                      top: 324px;
                      }

                      .graphic2 {
                      position: absolute;
                      z-index: 10;
                      left: 307px;
                      top: 153px;
                      visibility: visible;
                      width: 472px;
                      height: 123px;
                      }

                      Also, unless you plan on reusing these rules, you would be better off using
                      an ID selector not a class selector.

                      The fact that you are seeing these positioned elements "in different
                      locations on the page" is one of the symptoms that people who are unfamiliar
                      with positioning report. Actually, the positioned elements are always in
                      the same position on the page, it's the rest of the stuff on the page that
                      is moving around.

                      So - that being said, we'd need to see the whole page. Can you show us?


                      --
                      Murray --- ICQ 71997575
                      Adobe Community Expert
                      (If you *MUST* email me, don't LAUGH when you do so!)
                      ==================
                      http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                      http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                      ==================


                      "fralexis" <webforumsuser@macromedia.com> wrote in message
                      news:g7f0at$m6f$1@forums.macromedia.com...
                      > Thanks so much. Here is the code for the area that is troubling me. The
                      > offending graphic is "montreal.gif" and "menu.gif". They are both
                      > positioned on
                      > top of the "banner.gif".
                      >
                      > <p><img src="menu.gif" width="730" height="28" border="0" usemap="#Map"
                      > class="graphic3" />
                      > <map name="Map" id="Map"><area shape="rect" coords="141,3,237,23"
                      > href="registration.html" />
                      > </map><img src="montreal.gif" width="629" height="165" class="graphic2"
                      > /><img
                      > src="Banner.gif" width="1024" height="329" class="basegraphic" /></p>
                      > <p><img src="line.gif" width="1037" height="20" /></p>
                      >
                      > And here are the css attributes for these graphics..............
                      >
                      > .basegraphic {
                      > overflow: auto;
                      > position: static;
                      > z-index: 5;
                      > left: auto;
                      > top: 0px;
                      > right: auto;
                      > bottom: auto;
                      > }
                      > .graphic3 {
                      > position: absolute;
                      > z-index: 15;
                      > left: 157px;
                      > top: 324px;
                      > }
                      >
                      > .graphic2 {
                      > position: absolute;
                      > z-index: 10;
                      > left: 307px;
                      > top: 153px;
                      > right: auto;
                      > bottom: auto;
                      > visibility: visible;
                      > width: 472px;
                      > height: 123px;
                      >

                      • 8. Re: Image positioning
                        fralexis Level 1
                        Thanks again. Actually something you wrote solved the problem. You said that elements with an absolute position remained in the same place while other page elements changed. I figured out that as I changed the magnificaiton to see certain elements better, they threw everything else out of order. Thus, when everything is viewed at 100% it all works just fine. Duh.

                        At least I hope it is solved!
                        • 9. Re: Image positioning
                          Level 7
                          > At least I hope it is solved!

                          Depending on what you mean by changing the magnification and which browser
                          you are using, I don't think it's fixed.

                          --
                          Murray --- ICQ 71997575
                          Adobe Community Expert
                          (If you *MUST* email me, don't LAUGH when you do so!)
                          ==================
                          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                          ==================


                          "fralexis" <webforumsuser@macromedia.com> wrote in message
                          news:g7f9op$37f$1@forums.macromedia.com...
                          > Thanks again. Actually something you wrote solved the problem. You said
                          > that
                          > elements with an absolute position remained in the same place while other
                          > page
                          > elements changed. I figured out that as I changed the magnificaiton to see
                          > certain elements better, they threw everything else out of order. Thus,
                          > when
                          > everything is viewed at 100% it all works just fine. Duh.
                          >
                          > At least I hope it is solved!
                          >