6 Replies Latest reply on Apr 11, 2010 2:27 PM by playz123

    Space between image and text that follows it

    playz123 Level 1

      Hi,
      Recently when I was having problems getting a container div to line up with a page background,  (please see  http://forums.adobe.com/message/2673018#2673018 ) Nancy O suggested that I include the following code on my styles page, which solved the problem:


      * {margin:0; padding:0; line-height:100%;  font-size: 100%}


      Wonderful, but now I find that when I try to add V space or H space around an image in the divs in the container that those settings no longer do a thing, so I can't get space between the image and the text that comes after it. Remove that line of code above and all is well in the div, but then the container is not where it should be. So my question today is: if I leave that code in place, how does one then add space between an image and the text that follows it??
      I'm sure there's probably a simple answer, but I'm not experienced enough to know what it is. Any advice would be greatly appreciated.................frank

        • 1. Re: Space between image and text that follows it
          Nancy OShea Adobe Community Professional & MVP

          <p><img src="your-image.jpg">   your text goes here</p>

           

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

          • 2. Re: Space between image and text that follows it
            playz123 Level 1

            Thanks for the reply, Nancy, but unless I've missed something, that still doesn't work. The text stays right beside the image no matter how much space I leave between the image and the text in the line of code. It was actually the very first thing I tried. Remove that other line of code though and everything is fine. Here's a very simple test page I've used to try and solve this problem. Maybe that will help. Thanks..........frank

             

            <!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">

            * {margin:0; padding:0; line-height:100%;  font-size: 100%}
            <!--
            #apDiv1 {
                position:absolute;
                left:589px;
                top:138px;
                width:771px;
                height:480px;
                z-index:1;
            }

             

            -->
            </style>
            </head>

             

            <body>
            <div id="apDiv1">
            <p><img src="images/NI.gif">                   this is a test</p>
            </div>
            </body>
            </html>

             

            This looks the same as what you suggested..yes??

             

            <p><img  src="your-image.jpg">   your text goes here</p>

            • 3. Re: Space between image and text that follows it
              John Waller Adobe Community Professional & MVP

              <p><img src="images/NI.gif">                   this is a test</p>

               

              That won't work because multiple spaces (just by pressing the spacebar) are not recognized in HTML. Only one space is recognized between words or words and images.

               

              To create spaces for whitespace purposes you must use a non-breaking space:

               

              You insert a non-breaking space in DW Design View using Ctrl+Shift+Spacebar.

               

              <p><img src="images/NI.gif">    this is a test</p>

               

              However, none of the above is the recommended method of creating whitespace between page elements. Use CSS for all your page formatting.

               

              You could add .rightwhitespace { margin-right: 10px; } to your stylesheet then change the HTML thus:

               

              <p><img src="images/NI.gif" class="rightwhitespace">this is a test</p>

              However, I suggest you delete the global CSS reset rule from your stylesheet. I'm not personally a fan of them.

               

              * {margin:0; padding:0; line-height:100%;  font-size: 100% }

               

              and style your page elements systematically.

               

              Can you post a link to your current page so we can see the entire code and offer more comprehensive suggestions?

              • 4. Re: Space between image and text that follows it
                Nancy OShea Adobe Community Professional & MVP

                For some strange reason, this forum won't publish code for non-breaking spaces.  Ampersand nbsp semi-colon.

                 

                <p><img src="your-image.jpg>      your text goes here</p>
                

                 

                As an alternative, you could add some padding-left to your images.

                 

                CSS:

                 

                img {

                padding-left: 15px

                }

                 

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

                • 5. Re: Space between image and text that follows it
                  playz123 Level 1

                  a)   Thanks, Nancy. You are amazing! Yes, that was all that was required to do what I wanted...simply use Ctl+Shift+Space bar to add two "non-breaking spaces". And now that I know what that simple code is called, I was able to confirm that there was indeed no mention of it in my tutorial book. Fortunately, it is in a new book I've purchased, but not yet completed. Not sure either why this forum didn't show your code suggestion in your very first post...you must have been surprised when you returned to find that the critical point was missing.

                   

                     Later today, I'm definitely going to try the CSS Padding coding that you mentioned, and since you and John both suggested that there are better ways to approach this than using non breaking spaces, I suspect your second suggestion may prove to be the better one for me to use in most situtations, both now and in the future. Again, as in the past, I thank you most sincerely for your assistance and for taking time to repond.

                   

                   

                  b) John, some very useful tips and comments, and I'll certainly try what you suggested. Actually almost the entire page is CSS 'controlled', but there was just this last bit I wished to add, and couldn't figure out how to do it. Since the page(s) are not quite finished yet, they have not yet been uploaded to a server, but that should happen very soon, and after that it will be much easier for everyone to view them and the code. I'm going to try your main suggestion as well and then pick the one that works best in a particular situation. Fortunately this one little area is a very small part of the page.

                   

                  Re:  the use of the "global reset rule"...well I must leave that up to others to debate since I do not have your expertise. It certainly solved a problem with getting the container div lined up with the background and the very top of the page, and I have not noticed any problems with its use in either Firefox or IE yet, but that doesn't mean I am not planning to consider your suggestion. And based on your reply and Nancy's, it's becoming more apparent that there's often more than one way to do something in Dreamweaver. Hopefully as I gain experience I too will begin to be able to choose which approach to take in each situation.

                   

                   

                  Many thanks to you both for your replies and the help. You've made my day Cheers.............frank

                  • 6. Re: Space between image and text that follows it
                    playz123 Level 1

                    Testing of all suggestions completed. While non breaking spaces can be used in this case because it's only needed once, the approach below is my choice for the project because it's CSS, does exactly what I want and where I want it, and will also prove useful with other pages. Brilliant!

                     

                    "You could add .rightwhitespace { margin-right: 10px; } to your stylesheet then change the HTML thus:

                    <p><img src="images/NI.gif" class="rightwhitespace">this is a test</p> "

                    Thanks again to you both...................frank