SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    May 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question My images wont display inside my footer?

    I can't figure out how to display the images in my footer. If you go to www.cteteleco.com you can see at the bottom in the footer that the images are not on the blue background but slightly below it. I want these images to display in the blue background as if they would on any normal footer on another website. Here's my code below:

    HTML Code:
    #footer  {
    	position: relative;
    	width: 100%;
    	height: 65px;
    	bottom: 0;
    	left: 0;
    	background: url(images/blackbg.png);
    	margin-bottom: 40px;
    	z-index: 2;
    }
    
    #copyrightlogo {
    text-align: left;
    margin-left:220px;
    margin-right:auto;
    padding: 25px 0px 0px 0px;
    z-index: 3;
    }
    
    #logos {
    position: relative;
    float: right;
    margin-left:auto;
    margin-right:220px;
    z-index: 1;
    }

    And this is the page where the footer code is written:

    HTML Code:
    <style type="text/css">
    a:link {text-decoration:none;}    /* unvisited link */
    a:visited {text-decoration:none;} /* visited link */
    a:hover {text-decoration:underline;color:#304152}   /* mouse over link */
    a:active {text-decoration:underline;}  /* selected link */
    </style>
    
    
    
    
    <div id="footer">
    <font color="#ffffff">
    <div id="copyrightlogo">Copyright 2009 Corbell Telephone & Electronics, Inc.</div>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <div id="logos"><a href="https://twitter.com/cteteleco" target="_blank"><img src="images/twitter.png"></a>
    <a href="https://www.facebook.com/cte.telecoCTE" target="_blank"><img src="facebook.png"></a>
    <a href="http://lincolnschool.cteteleco.com/" target="_blank"><img src="images/lincolnlogo.png"></a></div>
    	</font>
    	
    	</div>

    And here is the section of the index page that calls up the footer to display (this is listed on each individual page of my site):
    HTML Code:
    </div>
    </div>	
    </div>
    
    <centeR>
    
    <?php require("page/footer2.php")?>
    
    </center>
    
    
    </body>
    </html>

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    FL
    Posts
    33
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cteteleco View Post
    I can't figure out how to display the images in my footer. If you go to www.cteteleco.com you can see at the bottom in the footer that the images are not on the blue background but slightly below it. I want these images to display in the blue background as if they would on any normal footer on another website. Here's my code below:

    HTML Code:
    #footer  {
    	position: relative;
    	width: 100%;
    	height: 65px;
    	bottom: 0;
    	left: 0;
    	background: url(images/blackbg.png);
    	margin-bottom: 40px;
    	z-index: 2;
    }
    
    #copyrightlogo {
    text-align: left;
    margin-left:220px;
    margin-right:auto;
    padding: 25px 0px 0px 0px;
    z-index: 3;
    }
    
    #logos {
    position: relative;
    float: right;
    margin-left:auto;
    margin-right:220px;
    z-index: 1;
    }

    And this is the page where the footer code is written:

    HTML Code:
    <style type="text/css">
    a:link {text-decoration:none;}    /* unvisited link */
    a:visited {text-decoration:none;} /* visited link */
    a:hover {text-decoration:underline;color:#304152}   /* mouse over link */
    a:active {text-decoration:underline;}  /* selected link */
    </style>
    
    
    
    
    <div id="footer">
    <font color="#ffffff">
    <div id="copyrightlogo">Copyright 2009 Corbell Telephone & Electronics, Inc.</div>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <div id="logos"><a href="https://twitter.com/cteteleco" target="_blank"><img src="images/twitter.png"></a>
    <a href="https://www.facebook.com/cte.telecoCTE" target="_blank"><img src="facebook.png"></a>
    <a href="http://lincolnschool.cteteleco.com/" target="_blank"><img src="images/lincolnlogo.png"></a></div>
    	</font>
    	
    	</div>

    And here is the section of the index page that calls up the footer to display (this is listed on each individual page of my site):
    HTML Code:
    </div>
    </div>	
    </div>
    
    <centeR>
    
    <?php require("page/footer2.php")?>
    
    </center>
    
    
    </body>
    </html>
    There is some other stuff that is wrong on that page too but just to give you a quick fix add the following to your #copyrightlogo:

    so it will be:

    #copyrightlogo {
    float: left;
    text-align: left;
    margin-left:220px;
    margin-right:auto;
    padding: 25px 0px 0px 0px;
    z-index: 3;
    }

    Also remove the <font color="#ffffff"> and its closing tag </font> that is around the #copyrightlogo div.

  3. #3
    SitePoint Member
    Join Date
    May 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fazthegreat View Post
    There is some other stuff that is wrong on that page too but just to give you a quick fix add the following to your #copyrightlogo:

    so it will be:

    #copyrightlogo {
    float: left;
    text-align: left;
    margin-left:220px;
    margin-right:auto;
    padding: 25px 0px 0px 0px;
    z-index: 3;
    }

    Also remove the <font color="#ffffff"> and its closing tag </font> that is around the #copyrightlogo div.





    This moves the images up slightly, but it is not actually moving the Twitter, Facebook, and other logo up to where it is inside the blue background.

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    FL
    Posts
    33
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Why do you have all this: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    in there, remove this and check.

    After that if you need some padding on top of the copyright text, just add some top padding to #copyrightlogo {}


Tags for this Thread

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
  •