4 Replies Latest reply on Mar 19, 2010 4:13 PM by playz123

    Container and Background Alignment

    playz123 Level 1


      Q: How do I properly align a 'container' with the background?
                  Please see attached image. As an example, I created a page in DW with a simple background with a horizontal stripe across the top. Next I inserted a Div Tag and call it "container" and aligned it in the center of the page using left and right margins in its CSS Styles panel. However, the first thing I noted was that the container was now ca. 8 px from the top of the page, even though top margins etc. had no settings. So, when I inserted a header that was the same height (and intended pattern) as the stripe in the background, what happened is shown in "A". The two are not aligned because the container is not at the top of the page. What I really want to see is shown in "B".


          My solution was to simply enter minus 8 px in the Box 'top margin' setting in the CSS Style Panel for the container (> B).


      a) But is this the right way to do this?? It works in my browsers on my computer (not yet published to the web), but will it work when someone else opens the page on their computer?
      b) Is there a better way or a 'correct' way to do this?
      c) Any idea why the container isn't originally at the top of the page (in A)  anyway? There are no settings that I can see that move it ca 8 px from the top.
      Any advice or assistance would, of course, be greatly appreciated..............frank

      alignment.jpg

        • 1. Re: Container and Background Alignment
          Nancy OShea Adobe Community Professional & MVP

          Zero out default browser settings with the following CSS rule:

           

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

           

          For me, negative margins are not a good solution as they often cause other problems somewhere else.

           

           

          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: Container and Background Alignment
            playz123 Level 1

            Thanks very much, Nancy, for your reply. Please forgive me though, I'm very new at this sort of thing, and I don't quite understand yet where one utilizes that code. Do you mean open the CSS Rule Style Panel for the #container and set, for example, line-height to 100% and font-size to 100%? I actually can't do the latter because the px box opposite "font-size" is greyed out, and only small, medium, large etc. can be selected. Changing the line height, and setting margins and padding to zero just produces what I've shown in illustration A, and the container reverts to being ca. 8 px from the top of the page. The only way I've found so far is to do what I described in my first message. So that probably means I have misunderstood what you are suggesting I should do. Could you possibly be a bit more specific? Here's the style code for the current container, if that helps......frank

             

            #container {
                height: 1200px;
                width: 760px;
                margin-right: auto;
                margin-left: auto;
                position: relative;
                text-align: left;
                margin-top: -8px;

             

            PS: Re. "negative margins are not a good solution as they often cause other  problems somewhere else."

            ---That's what concerned me and lead to my questions.

            • 3. Re: Container and Background Alignment
              Nancy OShea Adobe Community Professional & MVP

              I'm afraid the CSS Properties Panel can't do everything for you.  Sometimes it's more efficient to switch to Code View.  Just copy and paste the following (red) code between the <style> tags in your HTML document.

               

              <style type="text/css">

               

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

               

              </style> tags.

               

               

               

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

              • 4. Re: Container and Background Alignment
                playz123 Level 1

                Brilliant! Thanks, Nancy; that did it! As I learn this program, it continues to amaze me how, just like in Flash, sometimes a simple line with the correct code, in just the right place, can make all the difference. I've learned something today. That code not only solved a problem for me, but it opens up new possibilities in page design for me as well. Cheers...................frank