Another CSS problem.

Priapus

Priapus

Priapus

Soldato
Joined
30 Jul 2004
Posts
10,572
Location
East Sussex, UK
Howzit guys.

I'm busy making a new website for myself. Now, I am using Notepad2 to make the CSS file.

What I did was set my footer in the CSS file, to where I wanted it. However, every new page with different content I make, the footer moves about the bottom page, it doesn't stay still. :(.

This is the coding in the CSS file I used for the footer:

CSS:

Code: 
#footer {
        
   
         font-family: Tahoma, Arial, Helvetica, San-serif;
         font-size: 10px;
         padding: 113px 30px; 30px;
         
         }
 #footer a:hover {
            color: #db6d16;
            text-decoration: none;
            }
#footer #altnav {
         width: 250px;
         height: 20px;
         float: center;
         text-align: center;
         padding-right: 11px;
         }

I can't see why everytime I change content on the page, it moves. I think it might have to do witht he padding?

Any help would be great!

Thanks!
 
Well when I change the content of my new.html page it normally moves towards the top of the page. If the content is long, it gets pushed down. Like it's not in a fixed position. That is why I thought it might be my padding. :(
 
I haven't got them here at work. Sorry. Well, I positioned the footer at the bottom of page. Now if I make the text (content) shorter then what I originally had it on index.html, then the footer (text) gets moved to the half way up the page to the left.
 
is it a three column layout? If so it sounds like its moving up to fill the gap. Make sure to container div for the layout has the right width and then maybe stick the footer in another container div that's larger than the container div for the main content - then it definitely wont be able to move up!
 
Hi.

Yes, three column layout.

Code: 
<div id="footer">
     <div id="altnav">
     <a href="#">About</a> - 
     <a href="#">Services</a> -
     <a href="#">Portfolio</a> -
     <a href="#">Contact</a>
     <a href="#">Terms of Trade</a>
     
     </div>

That's the DIV for the footer in my HTML page. If I understand what you're saying is that I must seperate the footer out of the main div container and stick it at the bottom? make another container for it on its own? Or have I lost it? :S
 
Yep thats right. You hopefully shouldn't need another container div for it, but that was me just making sure it would definitely work.
 
You need, basically, this:
Code: 
<div id="container">
<div id ="left column"></div>
<div id="right column"></div>
<div id="center column"></div>
</div>
<div id="footer">
</div>

You can stick the footer div in another container, say container1, but it should work without
 
The only thing I have missing there, is the </div> tage, between center column and footer..

So, must just add that?

(Sorry if I semm..silly, just real tired at the moment:()
 
Here is what I have at the moment:
Code: 
<div id="page-container">

<div id="main-nav">

         <dl>
      
          <dt id="about"><a href="#"></a></dt>
          <dt id="services"><a href="#"></a></dt>
          <dt id="portfolio"><a href="#"></a><dt>
          <dt id="contact"><a href="#"></a></dt>
          
          </dl>
         
</div>
<div id="header">
		</div>
<div id="sidebar-a"><div class="padding">

	</div>
</div>
<div id="content"><div class="padding"><h2><img src="images/headings/about.gif" width="98" height="14" alt="Contact Us" /></h2>

		<p>We are currently undergoing a 'face lift', so if you have any questions or would 
	   like more information about the services we provide please feel free to contact us.</p>
	
	<h2><img src="images/headings/contact.gif" width="98" height="14" alt="Contact Us" /></h2>

	<p>Cell:  xxxxxxxxxx<br />
	<p>Tell:    xxxxxxxxx<br />
	<p>Fax:        xxxxxxxxxxxxxx<br />
	<p>Email:   <a href="mailto:[email protected]">[email protected]</a><

	</div>
</div>
<div id="footer">
     <div id="altnav">
     <a href="#">About</a> - 
     <a href="#">Services</a> -
     <a href="#">Portfolio</a> -
     <a href="#">Contact</a>
     <a href="#">Terms of Trade</a>
     
     </div>
 
You had one too many </div> and thus were closing the page container early

Fixed below (hopefully)
Code: 
<div id="page-container">

<div id="main-nav">

         <dl>
      
          <dt id="about"><a href="#"></a></dt>
          <dt id="services"><a href="#"></a></dt>
          <dt id="portfolio"><a href="#"></a><dt>
          <dt id="contact"><a href="#"></a></dt>
          
          </dl></div>  
<div id="header"></div>
<div id="sidebar-a" class="padding"></div>

<div id="content" class="padding"><h2><img src="images/headings/about.gif" width="98" height="14" alt="Contact Us" /></h2>

		<p>We are currently undergoing a 'face lift', so if you have any questions or would 
	   like more information about the services we provide please feel free to contact us.</p>
	
	<h2><img src="images/headings/contact.gif" width="98" height="14" alt="Contact Us" /></h2>

	<p>Cell:  xxxxxxxxxx<br />
	<p>Tell:    xxxxxxxxx<br />
	<p>Fax:        xxxxxxxxxxxxxx<br />
	<p>Email:   <a href="mailto:[email protected]">[email protected]</a><

	</div>
</div>

<div id="footer">
     <div id="altnav">
     <a href="#">About</a> - 
     <a href="#">Services</a> -
     <a href="#">Portfolio</a> -
     <a href="#">Contact</a>
     <a href="#">Terms of Trade</a>
     
     </div>
 
Last edited:
Oh I see. I was under the impression that I had to have a closed div tag at after every open div? If that makes sense.

Thank you. I will test it out tonight. :)
Much appericated!!
 
You do need to close every open div. You had more </div> then you had <div>! This meant you were closing the page container just before opening the content div when you should have been closing it just after the content div.
 
Makes sense now. Well spotted!

Once again, thank you for all your help, much appericaited. I will try it when I get home, to see if it fixes the problem. :D
 
Sure:

CSS File:

Code: 
#page-container {
         width: 760px;
         margin: auto;
         background-repeat: no-repeat;
}
       
       body {
  background: #3b343a;
  background-image: url(../images/background.gif);
  background-position: center; 
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
	color:#53b343a;  
	margin: 50px 0px  0px 110px;
	background-repeat: no-repeat;
	}

 .hidden {
          display: none;
          }


 #sidebar-a {
            float: right;
            width: 280px;
            line-height: 18px;
            }
 #sidebar-a .padding {
             padding: 25px;
          
            }
 #content {
          margin-right: 180px;
          line-height: 18px;
        
          }
 #content .padding {
           padding: 25px;
           }
                 
 #header {
          width: 600px;
          height: 135px;
          Margin-top: 50px;
          background: #b5acac;
          background-image: url(../images/headers/about.jpg);
          background-repeat: no-repeat;
	           
	          
          }
                 
 #footer {
        
   
         font-family: Tahoma, Arial, Helvetica, San-serif;
         font-size: 10px;
         
         
         }
 #footer a:hover {
            color: #db6d16;
            text-decoration: none;
            }
#footer #altnav {
         width: 250px;
         height: 20px;
         float: center;
         text-align: center;
         padding-right: 11px;
         } 
 h1 {
    margin: 0;
    padding: 0;
    float: right;
    margin-top: 57px;
    padding-right: 31px;
    
    }
    
 #content h2 {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
}

#content p {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
}
 
You must log in or register to reply here.
Back
Top Bottom