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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Two footer problems

    Hi guys, first post here. I'm quite stuck and I don't really no where/how to fix it. I've been using HTML/CSS for 3 months now so it's still relatively new to me, I was wondering could anyone on here help me please.

    I have a footer on my page, and when my page is loaded, the user has to scroll down to the page to see the footer, and also there is a white space under the footer too. I can solve the white space by changing the height of the footer but I don't want to do this as it is then too big. I would prefer to have it as the size I do now but without having the white space underneath it and without having the user to scroll down to see it. I would also like the footer to appear when the page is loaded no matter what screen size so the user wont have to scroll down to see it.

    Here is a screenshot of my footer and how it appears -


  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Here is a screenshot of my footer and how it appears -
    Please post your complete HTML+CSS of that page Or a link to that page.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've solved the white space problem just now actually

    I have a feeling the reason the footer is appearing way down the page is something got to do with the page container possibly?

    Here is the CSS for my footer style -

    Code:
    #eFoot.eInnerWrapper {
    background-color: #EEE;
    background-position: top;
    clear: both;
    }
    
    .eGB {
    background-image: url("images/ebottomgrad.jpg");
    background-repeat: repeat-x;
    }
    
    /*
    input {
    color:#666;
    font-size:90%;
    height:20px;
    padding:7px 0 0 15px;
    }
    */
    
    .eWrapContainer {
    margin: auto;
    max-width: 1280px;
    min-width: 976px;
    text-align: left;
    padding-left: 1.88em;
    padding-right: 1.88em;
    }
    
    /* Set height of footer */
    #eFoot .eWrapContainer {
    background-position: top;
    background-color: #EEE;
    height: 200px;
    clear: both;
    }
    
    #eFootLeft {
    float: left;
    height: 200px;
    width: 15%;
    }
    
    #eFootLogoContainer {
    height: 100px;
    margin: 30px 0 0;
    }
    
    #eFootLogoContainer a {
    display: block;
    height: 50px;
    width: 81px;
    overflow-x: hidden;
    overflow-y: hidden;
    }
    
    a {
    color:#06B;
    text-decoration: none;
    outline: none;
    }
    
    /* Prevents purple box from appearing around image in footer in IE */
    fieldset, img {
    border: 0 none;
    }
    
    #eFootRightT {
    height: 10px;
    padding-top: 30px;
    }
    
    .eFootGroup h3 {
    color: #666;
    font-size: 1em;
    margin: 0 0 .8em 0;
    }
    
    h3 {
    color: #333;
    font-weight: normal;
    }
    
    .eFootGroup ul {
    margin: 0;
    overflow: hidden;
    padding: 0;
    }
    
    #eFoot a {
    color: #2F507E;
    font-size: .9em;
    }
    
    #eFootRightT, #eFootRightB {
    float: left;
    width: 79%;
    }
    
    body {
    font-family: arial,verdana,sans-serif,clean;
    font-size: 75%;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1.231;
    }
    HTML for the above file -

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <link rel="stylesheet" type="text/css" href="footerstyle.css" />
    
    <div id = "eFoot" class = "eInnerWrapper eGB" >
    <div class = "eWrapContainer eGB">
    	<div id = "eFootLeft">
    		<p id = "eFootLogoContainer">
    			<a id = "eFooterLogo" href = "/webpages/TC_Tool/Tool2/tc_tool/index.php" title = "Ericsson Home">
    				<img src = "images/elogo.png" alt = "Ericsson">
    			</a>
    		</p>
    	</div>
    
    <div id = "eFootRightT">
    	<div class  = "eFootGroup">
    		<h3>Useful Links</h3>
    		<ul>
    			<li>
    				<a title = "CDM" href = "http://cdmweb.ericsson.se/TeamCenter/controller/home">CDM
    				</a>
    			</li>
    			<li>
    				<a title = "EriDoc" href = "https://eridoc.ericsson.se/eridoc/component/main?__dmfClientId=1338282152789&__dmfTzoff=-60">EriDoc
    				</a>
    			</li>
    			<li>
    				<a title = "Ericsson External Website" href = "http://Ericsson.com">Ericsson External Website
    				</a>
    			</li>
    			<li>
    				<a title = "Ericsson Internal Website" href = "http://internal.ericsson.com/">Ericsson Internal Website
    				</a>
    			</li>
    			<li>
    				<a title = "PDU OSS Systems Study Project" href = "http://jira.eei.ericsson.se:8081/login.jsp?permissionViolation=true&os_destination=%2Fbrowse%2FTP">PDU OSS Systems Study Project
    				</a>
    			</li>
    			<li>
    				<a title = "Contact Admin" href = "/">Contact Admin (Not Implemented)
    				</a>
    			</li>			
    		</ul>
    	</div>
    	<div id = "eFootRightB"></div>
    	</div>
    </div>


  •  

    Posting Permissions

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