3 Replies Latest reply on Nov 4, 2011 4:34 AM by lee28382

    Absolutely positioned image is now over my text

    lee28382

      I finally understand the absolute and relative positioning of div and things inside a div, so I positioned an image inside a div and now it covers up part of my text.  The website is www.rumcnow.com.  This is the html:

       

      I was going to attach the html and css but i cant, im sure there is some way to do it but i dont know how.  Anyway, the bottom left of the page youll see a picture and its covering the text.  I have the picture positioned absolute at 5% top and right.  Thats where I want the picture but I dont want it covering the text.

       

      Lee

        • 1. Re: Absolutely positioned image is now over my text
          mytaxsite.co.uk Level 6

          Change your main code to look something like this:

           

           

          <div id="fromthepastordesk"><h3>From the Pastor's Desk.......</h3>

          <img src="rev-herring.jpg" alt="rev_herring" class="floatRight" />

          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id felis diam, sed consectetur diam. In consectetur libero a enim laoreet blandit. Phasellus tincidunt, quam ac volutpat mollis, ligula diam vehicula massa, sollicitudin viverra mauris nibh et enim. Donec tortor orci, pretium a varius vel, tempor sit amet neque. Vivamus imperdiet elementum faucibus. Integer non lorem at lectus feugiat sodales. Sed pellentesque ornare sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempus, mi sit amet pretium consectetur, dui enim congue felis, ut rhoncus lorem mauris et ante. Duis enim sem, varius in molestie non, ultrices sed leo. Nullam tempus leo semper orci consectetur ac sodales leo adipiscing. Aliquam quis leo nibh, et mattis sem. Pellentesque eu massa diam, nec laoreet ligula. Donec dui massa, auctor at dignissim eu, interdum eget velit.</p>

          </div>

           

          Now add the following style to your css file:

           

           

          img.floatRight {

              float: right;

              margin: 4px;

          }

           

          Now this should solve your problems.

           

          Good luck.

           

          Message was edited by: JTANNA

          • 3. Re: Absolutely positioned image is now over my text
            lee28382 Level 1

            Yes that worked!  I was confused about the css title "img.floatRight, because I didnt know you could use CSS like that.  That may help me more than just for this. 

            Lee

             

            Date: Thu, 3 Nov 2011 23:38:52 -0600

            From: forums@adobe.com

            To: lee.coleman@hotmail.com

            Subject: Absolutely positioned image is now over my text

             

             

             

             

             

             

                  

                       

                       

                       

                Re: Absolutely positioned image is now over my text

             

             

                created by JTANNA in HTML5 - View the full discussion

             

             

             

            Change your main code to look something like this: 

            h3. From the Pastor's Desk.......

            !rev-herring.jpg|alt=rev_herring|class=floatRight|src=rev-herring.jpg!

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id felis diam, sed consectetur diam. In consectetur libero a enim laoreet blandit. Phasellus tincidunt, quam ac volutpat mollis, ligula diam vehicula massa, sollicitudin viverra mauris nibh et enim. Donec tortor orci, pretium a varius vel, tempor sit amet neque. Vivamus imperdiet elementum faucibus. Integer non lorem at lectus feugiat sodales. Sed pellentesque ornare sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempus, mi sit amet pretium consectetur, dui enim congue felis, ut rhoncus lorem mauris et ante. Duis enim sem, varius in molestie non, ultrices sed leo. Nullam tempus leo semper orci consectetur ac sodales leo adipiscing. Aliquam quis leo nibh, et mattis sem. Pellentesque eu massa diam, nec laoreet ligula. Donec dui massa, auctor at dignissim eu, interdum eget velit.

             

            Now add the following style to your css file:  img.floatRight Now this should solve your problems. Good luck.

             

             

                 Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/4007194#4007194

                 To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/4007194#4007194. In the Actions box on the right, click the Stop Email Notifications link.

                  

                 Start a new discussion in HTML5 by email or at Adobe Forums

              For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746.