SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to left align some text in a footer that has text right aligned

    Hi everyone,

    I am trying to put copyright info on the left of footer and the rest of the copyright info on the right of my footer. Having some difficulties though...

    Here is my css:

    #footer span{text-align: left;}

    #footer {
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 8pt;
    color: #ffffff;
    clear: both;
    margin: 0;
    background: #BDBDBD;
    padding-top: 7px;
    padding-left: 10px;
    padding-bottom: 7px;
    text-align: right;
    width: 778px;
    position: relative;
    }
    * html #footer{width:788px;}


    #footer a{
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 8pt;
    color: #ffffff;
    text-decoration: none;
    }

    #footer a:hover{
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 8pt;
    color: #ffffff;
    text-decoration: underline;
    }


    Here is my HTML:

    <div id="footer"><span>Copyright &copy; 2005 </span><img src="graphics/check_bottom.gif"><a href="linkgoeshere" target="_blank" class="footer">Link</a></div>


    Any takers?? I'd love your help!

    Thanks,

  2. #2
    SitePoint Member
    Join Date
    Jan 2004
    Location
    MN, USA
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Floats should do the trick. Try this:

    CSS:
    Code:
    #footer {
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 8pt;
    color: #ffffff;
    clear: both;
    margin: 0;
    background: #BDBDBD;
    padding: 7px 10px 7px 9px;
    text-align: left;
    width: 778px;
    }
    
    * html #footer {width:788px;}
    
    #footerleft {
    float: left;
    }
    
    #footerright {
    float: right;
    }
    
    #footer a{
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 8pt;
    color: #ffffff;
    text-decoration: none;
    }
    
    #footer a:hover{
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 8pt;
    color: #ffffff;
    text-decoration: underline;
    }
    
    .clear {
    height: 1px;
    overflow: hidden;
    clear: both;
    }
    HTML:
    Code:
    <div id="footer">
    	<div id="footerleft">Copyright &copy; 2005 </div>
    	<div id="footerright">
    		<img src="graphics/check_bottom.gif">
    		<a href="linkgoeshere" target="_blank" class="footer">Link</a>
    	</div>
    	<div class="clear"></div>
    </div>
    I'm assuming you want the image to the right along with the link.

    Also, check out Floatutorial if you are new to floats and want to learn more.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,340
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Thats a little bit convoluted lol as all you needed was to change this:
    Code:
    #footer span{text-align: left;}
    To this:
    Code:
    #footer span{float: left;}
    and leave the footer as it was:
    Code:
    <div id="footer"><span>Copyright &copy; 2005 </span><img src="graphics/check_bottom.gif"><a href="linkgoeshere" target="_blank" class="footer">Link</a></div>
    The float should probably have a width for older browsers but newer ones will shrinkwrap the content.

    Also, check out Floatutorial if you are new to floats and want to learn more
    and don't forget the faq on floats


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •