Results 1 to 8 of 8

Thread: footer not at bottom???

  1. #1
    Join Date
    Jan 2009
    Location
    NH
    Posts
    675
    Thanks
    98
    Thanked 26 Times in 26 Posts

    Question footer not at bottom???

    On this page I am testing the W3C logos are in the middle of the page, not the bottom. Also the footer is not showing correctly.

    What did I do wrong? EDIT: I can't enter the HTML I get error it's too long. I changed the .html file format to .txt and added it as an attachment.

    This page is the main page. I want the Star page to mimic this look.

    CSS:
    Code:
    html, body {
    padding : 0;
    margin : 0;
    height : 100%;
    background-color : #000000;
    background-position : center top;
    }
    #banner {
    height : 120px;
    width : 960px;
    margin : auto;
    background-image : url(images/logo2.jpg), url(images/Banner.gif);
    background-position: top left, top right;
    background-repeat: no-repeat;
    }
    #img.source-image {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
    }
    #container {
    position : relative;
    width : 960px;
    padding : 0;
    min-height : 100%;
    margin : auto;
    font-family : sans-serif;
    color : #FFFFFF;
    background-color : #000000;
    }
    #pcm{display:none;}
    ul.pureCssMenu ul{display:none}
    ul.pureCssMenu li:hover>ul{display:block}
    ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
    ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
    ul.pureCssMenu,ul.pureCssMenu ul {
    	margin:0px;
    	list-style:none;
    	padding:0px 1px 1px 0px;
    	background-color:#F8DC00;
    	background-repeat:repeat;
    	border-color:#F8DC00;
    	border-width:0px;
    	border-style:solid;
    }
    ul.pureCssMenu {
            width:729px;
            padding-left:230px;
     }
    
    ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
    	display:block;
    	zoom:1;
    	float: left;
    }
    ul.pureCssMenu ul{
    	width:210px;
    }
    ul.pureCssMenu li{
    	display:block;
    	margin:1px 0px 0px 1px;
    	font-size:0px;
    }
    ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
    outline-style:none;
    }
    ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
    	display:block;
    	vertical-align:middle;
    	background-color:#F8DC00;
    	border-width:0px;
    	border-color:#F8DC00;
    	border-style:solid;
    	text-align:left;
    	text-decoration:none;
    	padding:5px;
    	_padding-left:0;
    	font:16px Arial;
    	font-weight:bold;
            color: #000000;
    	text-decoration:none;
    	cursor:pointer;
    }
    ul.pureCssMenu span{
    	overflow:hidden;
    }
    ul.pureCssMenu li {
    	float:left;
    }
    ul.pureCssMenu ul li {
    	float:none;
    }
    ul.pureCssMenu ul a {
    	text-align:left;
    	white-space:nowrap;
    }
    ul.pureCssMenu li.sep{
    	text-align:left;
    	padding:0px;
    	line-height:0;
    	height:100%;
    }
    ul.pureCssMenu li.sep span{
    	float:none;	padding-right:0;
    	width:3;
    	height:100%;
    	display:inline-block;
    	background-color:#FF6600;	background-image:none;}
    ul.pureCssMenu ul li.sep span{
    	width:100%;
    	height:3;
    }
    ul.pureCssMenu li:hover{
    	position:relative;
    }
    ul.pureCssMenu li:hover>a{
    	background-color:#FFFF00;
    	border-color:#FFFF00;
    	border-style:solid;
    	font:16px Arial;
    	font-weight:bold;
            color: #000000;
    	text-decoration:none;
    }
    ul.pureCssMenu li a:hover{
    	position:relative;
    	background-color:#E45E17;
    	border-color:#E45E17;
    	border-style:solid;
    	font:16px Arial;
    	font-weight:bold;
            color: #000000;
    	text-decoration:none;
    }
    ul.pureCssMenu li.dis a {
    	color: #AAAAAA !important;
    }
    ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:5px;width:16px;
    height:16px;
    }
    ul.pureCssMenu ul img {width:16px;
    height:16px;
    }
    ul.pureCssMenu img.over{display:none}
    ul.pureCssMenu li.dis a:hover img.over{display:none !important}
    ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
    ul.pureCssMenu li:hover > a img.def  {display:none}
    ul.pureCssMenu li:hover > a img.over {display:inline}
    ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
    ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
    ul.pureCssMenu a:hover ul{display:block}
    ul.pureCssMenu span{
    	display:block;
    	background-image:url(./images/arrv_blue_2.gif);
    	background-position:right center;
    	background-repeat: no-repeat;
       padding-right:8px;}
    ul.pureCssMenu li:hover>a>span{	background-image:url(./images/arrv_white_2.gif);
    }
    ul.pureCssMenu a:hover span{	_background-image:url(./images/arrv_white_2.gif)}
    ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_blue_2.gif)}
    ul.pureCssMenu ul li:hover > a span{	background-image:url(./images/arr_white_2.gif);}
    ul.pureCssMenu table a:hover span{background-image:url(./images/arr_white_2.gif)}
    ul.pureCssMenu li a.pureCssMenui0{
    font:n;
    }
    ul.pureCssMenu li a.pureCssMenui0:hover{
    font:o;
    }
    
    div.one {
    padding : 50px;
    font-family : sans-serif;
    font-size : 16px;
    color : #FFFFFF;
    height : 100%;
    }
    div.one a:link {
    color : #F88017;
    text-decoration : underline;
    }
    div.one a:visited {
    color : #F88017;
    text-decoration : underline;
    }
    div.one a:hover {
    color : #000000;
    background-color : #FFFFFF;
    text-decoration : underline;
    }
    div.one a:active {
    color : #F88017;
    background-color : #ffffff;
    text-decoration : underline;
    }
    h1 {
    padding : 15px;
    text-align : center;
    }
    h3 {
    padding : 5px;
    }
    .centered {
    text-align : center;
    }
    UL.YELLOW {
    	list-style-type: disc;
    	color: yellow;
    }
    #footer {
    position : absolute;
    width : 100%;
    left : 0;
    bottom : 0;
    padding : 5px 0;
    font-family : sans-serif;
    font-size : 15px;
    text-align : center;
    background-color : #F8DC00;
    color : #000000;
    }
    #footer a:link {
    color : #000000;
    text-decoration : underline;
    }
    #footer a:visited {
    color : #000000;
    text-decoration : underline;
    }
    #footer a:hover {
    color : #000000;
    background-color : #E45E17;
    text-decoration : underline;
    }
    #footer a:active {
    color : #000000;
    background-color : #FFFFFF;
    text-decoration : underline;
    }
    Last edited by mlegg; 11-07-2011 at 04:34 AM.

  2. #2
    Join Date
    Jan 2009
    Location
    NH
    Posts
    675
    Thanks
    98
    Thanked 26 Times in 26 Posts

    Default

    When you look at the HTML please ignore the line
    Code:
    div class="c2"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict" height="31" width="88">   
           &nbsp<img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"></div>
    I took that off of every page. The owner of the business didn't want it there.

  3. #3
    Join Date
    May 2011
    Location
    SFBA, CA, USA
    Posts
    94
    Thanks
    6
    Thanked 7 Times in 7 Posts

    Default

    Got a link?

  4. #4
    Join Date
    Jan 2009
    Location
    NH
    Posts
    675
    Thanks
    98
    Thanked 26 Times in 26 Posts

    Default

    I put it at the top where it says this page I am testing.
    This is the link to said page: http://www.pscompetitiveedge.com/star2.html

    I just use TinyUrl to keep the link shorter

  5. #5
    Join Date
    Jan 2009
    Location
    NH
    Posts
    675
    Thanks
    98
    Thanked 26 Times in 26 Posts

    Default

    it's also happening on this page I just made to test too
    http://www.pscompetitiveedge.com/star-test.html

  6. #6
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Changing the footer css from position: absolute; to position: relative; seems to work when I try it out in firebug.
    Code:
    #footer {
    position : relative;
    width : 100%;
    left : 0;
    bottom : 0;
    padding : 5px 0;
    font-family : sans-serif;
    font-size : 15px;
    text-align : center;
    background-color : #F8DC00;
    color : #000000;
    }
    give it a shot and see if helps!

  7. #7
    Join Date
    Jan 2009
    Location
    NH
    Posts
    675
    Thanks
    98
    Thanked 26 Times in 26 Posts

    Default

    the relative fixed it and I added margin: 0 auto;
    width: 960px; just to make sure

    Code:
    #footer {
    position : relative;
    margin: 0 auto;
    width: 960px;
    bottom : 0;
    padding : 5px 0;
    font-family : sans-serif;
    font-size : 15px;
    text-align : center;
    background-color : #F8DC00;
    color : #000000;
    }
    sometimes I just don't know why I don't quit when I am tired

  8. #8
    Join Date
    May 2011
    Location
    SFBA, CA, USA
    Posts
    94
    Thanks
    6
    Thanked 7 Times in 7 Posts

    Default

    Glad you figured it out. I was just about to ask what the problem was because, upon review, I couldn't see anything wrong.

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
  •