Another CSS problem.

Priapus · 11 Dec 2007 at 13:52

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!

Priapus · 11 Dec 2007 at 14:01

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.

Priapus · 11 Dec 2007 at 14:04

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.

Priapus · 11 Dec 2007 at 14:14

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

Priapus · 11 Dec 2007 at 14:24

`The code above is already in my HTML page. Do I need to make another div? :confused:

Priapus · 11 Dec 2007 at 14:30

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

)

Priapus · 11 Dec 2007 at 14:33

Nevermind, I see why that tag is there. I have all those tags at the moment, though..?

Priapus · 11 Dec 2007 at 14:38

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>

Priapus · 11 Dec 2007 at 15:16

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!!

Priapus · 11 Dec 2007 at 15:25

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.

Priapus · 11 Dec 2007 at 17:10

If I remove the 'extra' tag, the whole page moves about, out of line and gets messed up.

Priapus · 11 Dec 2007 at 17:19

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;
}