Skip navigation
Currently Being Moderated

Easy Question?

May 24, 2012 12:28 PM

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

 
Replies
  • Currently Being Moderated
    May 24, 2012 1:01 PM   in reply to Prodigy9

    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>

     
    |
    Mark as:
  • Currently Being Moderated
    May 24, 2012 8:15 PM   in reply to Prodigy9

    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!

     
    |
    Mark as:
  • Currently Being Moderated
    May 24, 2012 8:55 PM   in reply to Prodigy9

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 24, 2012 9:35 PM   in reply to Prodigy9

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 24, 2012 9:34 PM   in reply to Prodigy9

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points