7 Replies Latest reply: May 24, 2012 9:34 PM by Charles Bannister RSS

    Easy Question?

    Prodigy9 Community Member

      I have a propbably easy question but one I can't seem to get to work right...

       

      I have a web site with a footer at the bottom of the page...  In the footer on the left there is your typical Copyright line.  What I would like to do is add another Copyright line directly across from it on the same line just floated to the right side.  How do I accomplish this?  I'm always getting bumped down to the next line.

       

      Here is the link to the unfinished test site...  It a pretty elementary site but well whatever...  Your help is much appreciated!

       

      www.alt-end.net

        • 1. Re: Easy Question?
          Charles Bannister Community Member

          This is how it's done using list items.

           

          Place each item in a list instead of a paragraph, display inline and remove the discs - then float the second item, as you said, to the right using an id.

           

          Hope it helps

           

          <style>

          .footer{width:980px; height:50px;}

          .footer li{

                    display:inline;

                    list-style:none;

          }

          #footerMessageRight{

                    float:right;

          }

          </style>

          </head>

           

           

          <body>

          <div class="footer">

           

              <ul><li>Copyright 2012 Clean-A-Tank, Inc.  All rights reserved.</li>

                <li id="footerMessageRight">Copyright message</li>

                </ul>

              <!-- end .footer --></div>

          • 2. Re: Easy Question?
            Prodigy9 Community Member

            Charles...  Thank you!  You approach certainly worked.  However, there was one final catch I found.  I had a background (repeating-x) bottom border.  When you use this method it creates two separate background borders.  I simply, removed the border to fix this problem and your method worked flawlessly.  But I'm curious about the best approach to get that little "repeating-x" background border underneath the copyright text?

             

            I'm still toying with it but if you have a solution you could offer a less experienced person like myself I'd be grateful.

             

            Thanks for your help!

            • 3. Re: Easy Question?
              mytaxsite.co.uk CommunityMVP

              Another method is to use two divs in the footer like this:

                <div class="footer">

                  <div id="left">

                      <p>&copy; Left side: Copyright 2012 Clean-A-Tank, Inc.  All rights reserved.</p>

                  </div>

                  <div id="right">

                      <p>&copy; Right side: Copyright 2012 Clean-A-Tank, Inc.  All rights reserved.</p>

                  </div>

                  <!-- end .footer --></div>

               

              And the related css like this:

               

               

              #left {

                  width: 40%;

                  float: left;

                  color: black;

              }

               

              #right {

                  width: 40%;

                  float: right;

                  color: red;

              }

               

               

              You just need to change 40% to 50% and you are done!

              • 4. Re: Easy Question?
                Charles Bannister Community Member

                To be honest I'm really not sure why it wouldn't work. As long as the BG is set on the footer, then a list shouldn't make a difference - I don't think any way.

                 

                Maybe the above solution will work better.

                • 5. Re: Easy Question?
                  Prodigy9 Community Member

                  Well...  When I first attempted it I went with the 2nd method...  Using two <div> for right and left.  But neither seemed to work correctly, especially with the bg image.  I was able to get Charles's method to work if I removed the bg image and just left it as a solid "blue" color.  But the other method, while more logical to me, didn't work quite right.  My own code may be part of the problem.  I'm not sure.  Seems like such an easy thing to do...

                  • 6. Re: Easy Question?
                    mytaxsite.co.uk CommunityMVP

                    If you want to use the second method then you you need repeat-x and repeat-y for your background image.  I suggest use this css for your footer:

                    .footer {

                        padding: 20px;

                        padding-bottom: 2px;

                        position: relative;/* this gives IE6 hasLayout to properly clear */

                        clear: both; /* this clear property forces the .container to understand where the columns end and contain them */

                        color: #FFF;

                       background-image: url('http://www.alt-end.net/images/background.png');

                        font-size: 80%;

                        background-color: #37A2E7;

                        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                        height: 50px;

                    }

                    #left {

                        width: 50%;

                        float: left;

                        color: black;

                    }

                     

                    #right {

                        width: 50%;

                        float: right;

                        color: red;

                    }

                     

                    I justs tested this on a test page and it worls.  Please note, normally you should be using and Id for footer (Not a class) because there is only one footer on a page with its own styles.  However, don't change anything now except the css I have posted above.

                     

                    Go and have a nice sleep for now.

                     

                     

                    Good luck.

                    • 7. Re: Easy Question?
                      Charles Bannister Community Member

                      I've just done a quick test in Dreamweaver and it works for me:

                       

                       

                      <style>

                      #footer{

                                height:50px;

                                width:980px;

                                background-image:url(http://b9.sustatic.com/DxgV3l-zpvI5P5VrFdtePw);

                                background-repeat:repeat-x;

                      }

                      #left{

                                float:left;

                      }

                      #right{

                                float:right;

                      }

                      </style>

                      </head>

                       

                       

                      <body>

                      <div id="footer">

                      <div id="left">

                      Copyright Left

                      </div>

                      <div id="right">

                      More info Right

                      </div>

                      </div>

                       

                       

                      I haven't hosted the file so you can't see, you'll have to take my word for it.

                       

                      If you use that code, and it doesn't work - it must have something to do with another element messing it up somewhere. Maybe see if FireBug shows anything up.

                       

                      That image is just a randomly hosted one, by the way - looks awesome imo.