3 Replies Latest reply on Aug 18, 2010 5:53 PM by future-architect

    spacing

    future-architect Level 1

      two questions:

       

      1) i have a div with text aligned to the right with a background image.  i want to create a margin so the text is not right up against the right-side of the div.

      2) coding question-when you want a space, say after some text, then a diagram, would you do a bunch of paragraphs, or create a new div, and create a "margin-top"? i would just like to know the professional way to go about doing it.

       

      thanks!

        • 1. Re: spacing
          Ben M Adobe Community Professional

          1.  #divid or .divclass --> CSS --> padding-right:###px;

          Alternatively you can add a margin-right to the div, p or whatever tag is around the tag

           

          2.  Not really sure about this one.  I'm trying to imagine what you are describing and why you need the top margin.  I think the best thing here is to look at what you have and see what works best.  Depending on what you are showing and what you want to portray will determine how it looks.  There is no written rule for how to do this.

          • 2. Re: spacing
            MurraySummers Level 8

            1.  #divid or .divclass --> CSS --> padding-right:###px;

            Alternatively you can add a margin-right to the div, p or whatever tag is around the tag

             

            I'd use the padding.  Since it's a div with a background image, and OP wants the spacing of content within the div to not be so tight with the edges of the div, padding seems right.

             

            2.  Not really sure about this one.  I'm trying to imagine what you are describing and why you need the top margin.  I think the best thing here is to look at what you have and see what works best.  Depending on what you are showing and what you want to portray will determine how it looks.  There is no written rule for how to do this.

             

            Just add a top margin to the <img> or a bottom margin to the content above it.

            • 3. Re: spacing
              future-architect Level 1

              oh, duh! thanks!

               

              while i'm at it.... i'm having some compatability issues...

               

               

              div.bottom_nav {
                  text-align:center;
                  font-size:14px;
                  margin-top:25px;
              }

              div.copyright {
                  font-weight:bold;
                  margin-top:25px;
                  margin-bottom:25px;
                  font-size:14px;
              }

               

                <div class="bottom_nav" id="bottom_nav"><a href="index.html">Homepage</a> | <a href="about.html">About</a> |<a href="services.html">Services</a> | <a href="portfolio.html">Portfolio</a> | <a href="contact.php">Contact</a></div>
              <div class="copyright" id="copyright">&copy; Copyright 2010 LAB Tech Web Design All Rights Reserved.</div>
              </div>

               

              this shows an overlap of gray area in IE, but not in firefox... why not?