10 Replies Latest reply: Nov 19, 2007 3:53 PM by joe dora RSS

    image position

    joe dora Community Member
      Made site. Okay
      Used table in editable portion of index page.
      Made table one row and one column.
      Using dreamweaver CSS I made a container in the table with div and id
      Inside the container I placed an image.
      Also used div and id.
      I see the image and I can position it all over the place.
      I can edit text, make margins, borders and color.

      But. This image looks and acts like a layer.
      I can’t keep it in the image.
      Top 0 and left 0 position the image in that position on my page.
      I want to keep the image within the page so top 0 and left 0 position in the container.

      Any suggestions?

      I am not in horrible shape because I positioned everything with tables but I would like to do it with CSS.

      I am using absolute placement.
        • 1. Re: image position
          Newsgroup_User Community Member
          > I am using absolute placement.

          Most likely the source of your problems. Let's see the page, please.

          --
          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
          ==================


          "joe dora" <webforumsuser@macromedia.com> wrote in message
          news:fhqm06$6hc$1@forums.macromedia.com...
          > Made site. Okay
          > Used table in editable portion of index page.
          > Made table one row and one column.
          > Using dreamweaver CSS I made a container in the table with div and id
          > Inside the container I placed an image.
          > Also used div and id.
          > I see the image and I can position it all over the place.
          > I can edit text, make margins, borders and color.
          >
          > But. This image looks and acts like a layer.
          > I can?t keep it in the image.
          > Top 0 and left 0 position the image in that position on my page.
          > I want to keep the image within the page so top 0 and left 0 position in
          > the
          > container.
          >
          > Any suggestions?
          >
          > I am not in horrible shape because I positioned everything with tables but
          > I
          > would like to do it with CSS.
          >
          > I am using absolute placement.
          >
          >

          • 2. Re: image position
            joe dora Community Member
            Page available at http://usersite.com/joe

            I am trying to do one to learn the reason why.

            Joe
            • 3. Re: image position
              Newsgroup_User Community Member
              > I can?t keep it in the image.
              > Top 0 and left 0 position the image in that position on my page.
              > I want to keep the image within the page so top 0 and left 0 position in the
              > container.

              I don't entirely understand where you would like to place the image. In
              the top left corner of the table?

              BTW: For your menu bar, instead of using header tags e.g. <h5> you could
              simply use styled definition list <dl>.

              <div id="sidebar">
              <dl>
              <dt>Main Link</dt>
              <dt>Main Link</dt>
              <dd>Sub Link</dd>
              <dd>Sub Link</dd>
              <dt>Main Link<.dt>
              </dl>
              • 4. image position
                joe dora Community Member
                It don't matter where I specifically want to place the image, I want the image to be defined by the container. As it stands now the image is defined by the page not the container. Note on the site how the image intersects the border of the table. I am afraid if I place the image bound by the page it might travel away from the position I place it.
                Summary: I want the image within the container boundaries
                Image in the table.
                .
                • 5. Re: image position
                  Newsgroup_User Community Member
                  joe dora wrote:
                  > It don't matter where I specifically want to place the image, I want the image
                  > to be defined by the container. As it stands now the image is defined by the
                  > page not the container. Note on the site how the image intersects the border of
                  > the table. I am afraid if I place the image bound by the page it might travel
                  > away from the position I place it.
                  > Summary: I want the image within the container boundaries
                  > .
                  >
                  Not quite sure how it's supposed to look or how you want it to work -
                  but you could try.......

                  Changing the css - yours for mine.....

                  body {
                  margin: 0pt;
                  padding: 0pt;
                  background: #666666;
                  color: #000000;
                  font-family: Verdana,Arial,Helvetica,sans-serif;
                  font-size: 100%;
                  text-align: center;
                  }


                  and........

                  .ahim #mainContent {
                  font-family: Verdana, Arial, Helvetica, sans-serif;
                  font-size: 10px;
                  width: 600px;
                  margin: 0 auto;
                  color: #093b0b;
                  font-weight: 400;
                  }

                  and........

                  #home_container {
                  font-family: Georgia,"Times New Roman",Times,serif;
                  font-size: 36px;
                  color: #00CC33;
                  text-decoration: underline overline;
                  position: relative;
                  height: 360px;
                  width: 500px;
                  margin: 0 auto;
                  border: thin solid #00CCCC;
                  }

                  and note on this one I've changed the name of the rule from
                  #home_container #emma img to just #emma img .....

                  #emma img {
                  position: absolute;
                  background-color: #0099CC;
                  border: thick solid #000;
                  left: 164px;
                  top: 66px;
                  }


                  and your html markup for the home_container div should look like this -
                  note the table has gone...

                  <div id="home_container">
                  <div id="emma"><img src="emma200.jpg" height="200"
                  width="200">Temporary Page </div>
                  </div>


                  --
                  chin chin
                  Sinclair
                  • 6. Re: image position
                    Newsgroup_User Community Member
                    Points? Ugh....

                    --
                    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
                    ==================


                    "djinn" <scobies@dsl.pipexYerKitAff.com> wrote in message
                    news:fhrv6g$sfq$1@forums.macromedia.com...
                    > joe dora wrote:
                    >> It don't matter where I specifically want to place the image, I want the
                    >> image to be defined by the container. As it stands now the image is
                    >> defined by the page not the container. Note on the site how the image
                    >> intersects the border of the table. I am afraid if I place the image
                    >> bound by the page it might travel away from the position I place it.
                    >> Summary: I want the image within the container boundaries
                    >> .
                    >>
                    > Not quite sure how it's supposed to look or how you want it to work - but
                    > you could try.......
                    >
                    > Changing the css - yours for mine.....
                    >
                    > body {
                    > margin: 0pt;
                    > padding: 0pt;
                    > background: #666666;
                    > color: #000000;
                    > font-family: Verdana,Arial,Helvetica,sans-serif;
                    > font-size: 100%;
                    > text-align: center;
                    > }
                    >
                    >
                    > and........
                    >
                    > .ahim #mainContent {
                    > font-family: Verdana, Arial, Helvetica, sans-serif;
                    > font-size: 10px;
                    > width: 600px;
                    > margin: 0 auto;
                    > color: #093b0b;
                    > font-weight: 400;
                    > }
                    >
                    > and........
                    >
                    > #home_container {
                    > font-family: Georgia,"Times New Roman",Times,serif;
                    > font-size: 36px;
                    > color: #00CC33;
                    > text-decoration: underline overline;
                    > position: relative;
                    > height: 360px;
                    > width: 500px;
                    > margin: 0 auto;
                    > border: thin solid #00CCCC;
                    > }
                    >
                    > and note on this one I've changed the name of the rule from
                    > #home_container #emma img to just #emma img .....
                    >
                    > #emma img {
                    > position: absolute;
                    > background-color: #0099CC;
                    > border: thick solid #000;
                    > left: 164px;
                    > top: 66px;
                    > }
                    >
                    >
                    > and your html markup for the home_container div should look like this -
                    > note the table has gone...
                    >
                    > <div id="home_container">
                    > <div id="emma"><img src="emma200.jpg" height="200"
                    > width="200">Temporary Page </div>
                    > </div>
                    >
                    >
                    > --
                    > chin chin
                    > Sinclair

                    • 7. Re: image position
                      Newsgroup_User Community Member
                      Murray *ACE* wrote:
                      > Points? Ugh....
                      >

                      Out of ten? - well perhaps 7 for not picking up on his use of points -
                      my edits are all px of course ;-)

                      --
                      chin chin
                      Sinclair
                      • 8. Re: image position
                        joe dora Community Member
                        I don't think you understand my question.
                        I will repeat.
                        Why? I can css edit my container.
                        I can edit the image in the container.
                        But the image will only stay in the container if I set the attributes for a page.
                        Look at the page http://usersite.com/joe
                        I set the location as top 0 and left 0
                        It is on the page as top 0 and left 0
                        I want it to be in the table container
                        • 9. Re: image position
                          Newsgroup_User Community Member
                          You have used an interesting filenaming scheme - <link
                          href="!!_css/ahim.css" - why that?

                          Your confusion is related to the details of CSS positioning. The image,
                          <img src=" http://usersite.coms_images/emma200.jpg" width="200" height="200"
                          />
                          is absolutely positioned by your CSS. As such, it is removed from the flow
                          of the code on the page. You may think it's within <div id="emma">, but
                          it's not - it's ABOVE it. Further, according to the specifications for CSS,
                          absolute positions are calculated based on the location of the nearest
                          positioned ancestor container. In your case, there is no nearest positioned
                          ancestor, and therefore the body tag is the default, i.e., the upper, left
                          hand corner of the browser viewport.

                          You have complicated things by placing the absolutely positioned element
                          directly into a table cell, something that is sure to create browser
                          rendering differences.

                          To see things improve a bit, try making <div id="emma"> relatively
                          positioned - at least now, you will not have the problem of 'layers' in
                          table cells.

                          So - where do you want that image to appear?

                          --
                          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
                          ==================


                          "joe dora" <webforumsuser@macromedia.com> wrote in message
                          news:fhs4mp$65b$1@forums.macromedia.com...
                          >I don't think you understand my question.
                          > I will repeat.
                          > Why? I can css edit my container.
                          > I can edit the image in the container.
                          > But the image will only stay in the container if I set the attributes for
                          > a
                          > page.
                          > Look at the page http://usersite.com/joe
                          > I set the location as top 0 and left 0
                          > It is on the page as top 0 and left 0
                          > I want it to be in the table container
                          >

                          • 10. Re: image position
                            joe dora Community Member
                            Murray:
                            You hit the nail on the head. As soon as you mentioned heredity I knew you were going to help me. I did not know the rule. Now I know, I bent it a little and I am very pleased.
                            I created a container called parent exactly the same size as the space I wanted to use in my editable table. It has no position element.
                            I created another container called son. It has relative position. In the son container I placed the images with absolute positioning. It works just the way I want it to work. I tried it in IE 7 and Netscape 8 on my laptop.
                            Tell your boss to give you Thanksgiving Day off.
                            Please look at http://usersite.com/joe to see how good it came out.
                            Email me after you look so I can take the page down and post the page that should be there.
                            Thank you very much. Enjoy your Thanksgiving Day off.
                            Joe Dora at joedora@usersite.com