Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10

Thread: Footer division

  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    Footer division

    My footerhas a sitemap link in the middle, but at the end I want to put the copyright info, and the web site developer.
    At the moment I have the sitemap as a list, and the copyright as a p float right.

    But as soon as I add the web developer under the copyright, the footer display out of propertion and shows a white margin. How would I align them all up. I can only think of using divs, but that is silly for the footer. www.seniors260.org/venue/home.html

    Code:
    #footer {
    	width: 100%;
    	color: #fff;
    	clear: both;
    	height: 60px;
    	background-image: url('../images/box_foot.jpg');
    	background-repeat: repeat;
    	text-align: center;
    	width: 100%;
    }
    footer p {
    	text-align: center;
    	font-weight: bold;
    }
    
    p.right {padding: .30em; text-align: right;}
    ul.foot_list {width: 100%; display: inline; margin: 0; padding: 0;}
    ul.foot_list li{list-style: none;}
    my image is 60px high.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    You mean like side by side? You could put them in a list and float them that way.
    Teed

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    Could I float a single list item then?

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Maybe I'm confused. I thought you wanted them all lined up side by side, similar to a nav bar.
    Teed

  • #5
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    NO, I want the sitemap link in the center of the footer, and on the same line I want the copyright and then underneath the copyright my link.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello quartzy,
    Your ul, and child li ... though one item is hardly a list, are 100% width.

    Wouldn't that work better as a floated anchor on it's own?
    The secret to fitting floats is their width, 100% is obviously too wide.

    Since #container is 915px wide it doesn't make a lot of sense to set p.right at 48% width. Just give it a px width as well. Not a big deal, just a bother of my own.

    Have a look at this attempt -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #FC6;
    }
    #container {
    	height: 600px;
    	width: 912px;
    	margin: 30px auto 0;
    	background: #999;
    }
    #footer {
    	height: 60px;
    	width: 912px;
    	margin: 0 auto;
    	background: url(http://www.seniors260.org/images/box_foot.jpg);
    }
    a#map {
    	width: 200px;
    	margin: 0 auto;
    	display: block;
    	line-height: 60px;
    }
    	a#map:link {
    		color: #CC9900;
    		text-decoration: underline;
    	}
    	a#map:visited {color: #CC9900;}
    p.right {
    	width: 200px;
    	float: right;
    	padding: .30em;
    	margin: 0 0 1em 0;
    	text-align: right;
    	overflow: hidden;
    }
    </style>
    </head>
    <body>
        <div id="container">
        <!--end container--></div>
        	<div id="footer">
                    <p class="right">
                        &copy; Seniors 2011<br />
                        <span class="black">WebSite:</span><a href="www.christinesweb.co.uk"> Christine</a>
                    </p>
            	<a href="#" id="map">Site Map</a>
            <!--end footer--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    quartzy (02-22-2011)

  • #7
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    Hello Excav

    That works well much better than it was, less of a margin at the bottom of the footer, although the sitemap link is not in the centre of the footer. Tried expanding the width and doing percents but it does not want to shift. It is only for two pages, so it should be fine.

    Your thanks has got stuck at 13

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by quartzy View Post
    although the sitemap link is not in the centre of the footer.
    Put a background color on that so you can see why...
    Like this
    Code:
    a#map {
    	width: 200px;
    	margin: 0 auto;
    	display: block;
    	line-height: 60px;
    background: #f00;
    }
    Maybe this will fix it for you?
    Code:
    a#map {
    	width: 200px;
    	margin: 0 auto;
    	display: block;
    	line-height: 60px;
    text-align: center;
    background: #f00;
    }
    That should center until you go back as far as IE7. Then the left/right margins work differently. To center it in all browsers you would need to float that anchor and do the math to get the margins right.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by quartzy View Post
    Your thanks has got stuck at 13
    My lucky number!
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    Hi again
    Tried that but it did not work, tried a float too and now it is stuck to the left and will not move. Added text align center to the footer so now it is back where it was before.

    Code:
    a#map {
    width: 200px; 
    float:right; 
    margin: 0 auto; 
    height: 60px; 
    display: block; 
    text-align: center;}
    
    #footer {
    	width: 100%;
    	color: #fff;
    	clear: both;
    	height: 60px;
    	text-align: center;
    	background-image: url('../images/box_foot.jpg'); background-repeat: repeat;}
    footer p {font-weight: bold;}
    thanks anyway


  •  

    Posting Permissions

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