footer help

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

ebgames56
Forum Contributor
Posts: 103
Joined: Thu Oct 06, 2011 10:43 am

footer help

Post by ebgames56 »

Just wondering is there a way to make text and images not pass my footer. Like a way to keep the footer at the bottem and not have content go past the footer
User avatar
manohoo
Forum Contributor
Posts: 201
Joined: Wed Dec 23, 2009 12:28 pm

Re: footer help

Post by manohoo »

Your solution might require CSS.
You can have your footer always at the bottom. Assume that you footer looks like this:

Code: Select all

<div id='footer'> 
   footer content
</div>
in CSS do this:

Code: Select all

#footer {
   position: absolute; 
   bottom:0px;
}
ebgames56
Forum Contributor
Posts: 103
Joined: Thu Oct 06, 2011 10:43 am

Re: footer help

Post by ebgames56 »

this is all my CSS i have that already

Code: Select all

h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
margin:0;	
padding:0;
	}

hr {
border: 0;
color: white;
background-color: white;
height: 1px;
width: 100%;
text-align: left;
}

IMG.logo {
    display: block;
    margin-left: auto;
    margin-right: auto 
	}
	
h2 {text-align:center}
h4 {text-align:center}
p {text-align:center}

#header { 
height: 220px;
}

#content { 
position: relative;
top: -35%;
}

#content2 {
top: 35%
}

* {
margin: 0;
}
html, body {
height: 80%;
}
.wrapper {
min-height: 95%;
height: auto !important;
height: 95%;
margin: 0 auto -4em;
}
#footer, .push {
height: 3px;
text-align: center;
margin: 0px;
position: absolute;
bottom: 2%;
width: 100%;
}
#tabs {
height: -25%;
}

#bio {
width: 60%;
}

#roll {
position: relative;
top: -5%;
}
User avatar
manohoo
Forum Contributor
Posts: 201
Joined: Wed Dec 23, 2009 12:28 pm

Re: footer help

Post by manohoo »

Right now #footer and .push have the same directives.
I suggest that you separate them and try a footer div like this:

Code: Select all

#footer {
height: 3px;
text-align: center;
margin: 0px;
position: absolute;
bottom: 0px;
width: 100%;
}
ebgames56
Forum Contributor
Posts: 103
Joined: Thu Oct 06, 2011 10:43 am

Re: footer help

Post by ebgames56 »

didnt work. Do you have teamviewer
icesolid
Forum Regular
Posts: 502
Joined: Mon May 06, 2002 9:36 pm
Location: Buffalo, NY

Re: footer help

Post by icesolid »

Looks like it would work if you changed the following:

Code: Select all

#footer, .push {
     height: 3px;
    text-align: center;
    margin: 0px;
    position: absolute;
    bottom: 2%;
    width: 100%;
}
TO:

Code: Select all

#footer {
     height: 3px;
    text-align: center;
    margin: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
}
You need to define the "footer" ID independently and define the "push" Class on its own. If this does not solve your problem, then you should post your other HTML code, it is possible you have some issues there.
ebgames56
Forum Contributor
Posts: 103
Joined: Thu Oct 06, 2011 10:43 am

Re: footer help

Post by ebgames56 »

Here is my html well php

if you want to edit the code on my computer we can teamview

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Guitar Manifesto</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<?php
require("getbrowser.inc.php");
?>

</head>
<body>
<div class="wrapper">
<center><div id="header"><img class="logo" src="Szerykblue_sm.png" alt=".." /> 
          <div id="dolphinnav">
                <ul>
      		    <li><a href=""class="current"><span>Home</span></a></li>
                    <li><a href="tour.php"><span>Tour</span></a></li>
                    <li><a href="album.php"><span>Album</span></a></li>
                    <li><a href="bandScott.php"><span>Band</span></a></li>
                    <li class="parentmenu">
                        <a><span>Media</span></a>
                        <ul class="submenu">
                            <li><a href="photos.php"><span>Photos</span></a></li>
                            <li><a href="videos.php"><span>Videos</span></a></li>
                        </ul>
                    </li>
                    <li><a href="contact.php"><span>Contact</span></a></li>
                </ul>
            </div>
        </div></center>
        <br />
        </div>
 <br />
 <br />
 <div id="content" align="center"><h1>Lastest Information</h1> <br />
Here will be the lastest information to keep you up to date
<br />
<img src="scott.jpg" width="304" height="228"> <br />
I want to try to see how much text and images we can fit in on this page 
jsadfkjlsdjlfksdja <br />
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p><p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
<p>asdf</p>
</div>
<div id="footer">
        <hr /><center>Site Designed by: Matt Brown</center>
		</div><!-- #footer -->
		</body>
</html>
icesolid
Forum Regular
Posts: 502
Joined: Mon May 06, 2002 9:36 pm
Location: Buffalo, NY

Re: footer help

Post by icesolid »

I don't see where you are including your stylesheet?
ebgames56
Forum Contributor
Posts: 103
Joined: Thu Oct 06, 2011 10:43 am

Re: footer help

Post by ebgames56 »

<link rel="stylesheet" href="styles.css" type="text/css" /> srry right under the <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
icesolid
Forum Regular
Posts: 502
Joined: Mon May 06, 2002 9:36 pm
Location: Buffalo, NY

Re: footer help

Post by icesolid »

So what exactly is the problem? You want the footer to stay stationary at the bottom of your page?

If you make the adjustments we suggested here, it works?

PS - Find a alternative for the <center> tag. That is deprecated.
Last edited by icesolid on Wed Nov 02, 2011 1:50 pm, edited 1 time in total.
ebgames56
Forum Contributor
Posts: 103
Joined: Thu Oct 06, 2011 10:43 am

Re: footer help

Post by ebgames56 »

do you have teamviewer? so you can see my issue?
icesolid
Forum Regular
Posts: 502
Joined: Mon May 06, 2002 9:36 pm
Location: Buffalo, NY

Re: footer help

Post by icesolid »

No, explain your issue. What are you trying to accomplish?
ebgames56
Forum Contributor
Posts: 103
Joined: Thu Oct 06, 2011 10:43 am

Re: footer help

Post by ebgames56 »

Dude, your code for css didnt fix my issue
icesolid
Forum Regular
Posts: 502
Joined: Mon May 06, 2002 9:36 pm
Location: Buffalo, NY

Re: footer help

Post by icesolid »

So explain exactly what you are trying to accomplish?

If you want your "Site Designed by: Matt Brown" to stay fixed at the bottom of your web page, the code I gave does exactly that. I just tested on my computer. So you must have some other issues that we are not seeing here.

If there is something else you are trying to accomplish, then please explain?
icesolid
Forum Regular
Posts: 502
Joined: Mon May 06, 2002 9:36 pm
Location: Buffalo, NY

Re: footer help

Post by icesolid »

Are you trying to disable all scrolling on your web page? So like a fixed but yet flexible width / height web page (because of course everyone has differing resolutions)?
Post Reply