Need Ideas for Footer for My Constrcution site

[gumspitter]

I want to add a basic footer to my a construction site I have designed for a client. It doesn't need to be fancy. But I want to include my design company info, and other useful information about the site. Any suggestions? I want a fixed height that does not interfere with the content of the page. How would I code?, where do I get ideas?, etc.


www.absherkennels.com/construction_test.html

 

[truebeliever]

for starters - I'd try to find other sites with footers more or less like you want.
post a link here and then it would be much easier to help you....

 

[PixelPusher]

I agree with truebeliever, I would find a concept/idea that inspires you. Maybe search through some template sites? We cant provide advice on how to build something when you are not sure what you want.

 

[anna]

Boby- why are you hijacking threads with your BS spam topics? Don't you have anything better to do?

 

[Advanox]

I sent you some tips.

 

[PixelPusher]

Boby- why are you hijacking threads with your BS spam topics? Don't you have anything better to do?

No worries Anna, I banned him.

 

[Invented Facts]

There's a decent footer on www.remodeleze.com and since you are in a similar field, you might like what they have?

 

[gumspitter]

The example below is what I am looking for. Simple. One side will give a snapshot of the company info (name,address,etc. The other side with give text links to site map, contact page etc. I would like for the footer to have a fixed height. I have tinkered with the current footer and the content makes the footer larger. Or the content doesn't stay in the footer space at all. Any ideas or ways to code would be greatly appreciated.


http://www.venueproperties.com/

 

[PixelPusher]

Ok here is my first crack at coding a footer like the one on Venue Properties. I have not tested it, but it is not a tricky layout by any means.

Markup

<div class="grey-footer">
    <ul class="address">
         <li>&copy; 2010 Venue Properties, Inc.</li>
         <li>1828 E.S.E. Loop 323, Suite 107</li>
         <li>Tyler, TX 75701</li>
         <li>Phone: (903) 561-8000</li>
         <li>Fax: (903) 561-4000</li>
    </ul>
    <ul class="menu">
         <li><a href="">sitemap</a></li>
         <li>|</li>
         <li><a href="">contact</a></li>
         <li>|</li>
         <li><a href="">home</a></li>
         <li class="clear"><a href="">group m7 design</a></li>
    </ul>
</div>

CSS

div.grey-footer, div.grey-footer ul, div.grey-footer li,  div.grey-footer a {
margin:0;
padding:0;
font-family:Verdana, Arial, sans-serif;
font-size:9pt;
color:#fff;
}
div.grey-footer {
position:relative;
width:800px;
height:200px;
background-color:#eee;
}
ul.address {
width:400px;
height:100px;
margin-left:40px;
padding:20px 0;
background: #ddd (images/venue-logo.png) 30px 30px no-repeat;
border-left: solid 1px #ccc;
border-right: solid 1px #ccc;
}
ul.address li {
list-style:none;
padding:2px 0;
text-indent:70px;
}
ul.menu {
float:right;
margin-top:100px;
margin:right:20px;
width:250px;
}
ul.menu li {
list-style:none;
float:right;
margin-top:5px;
margin-left:5px;
}
ul.menu li a {
text-decoration:none;
text-transform:capitalize;
}
ul.menu li a:hover {
color:red;
}
.clear {
clear:both;
}

 

[gumspitter]

Pixel, thanks. I have the footer I want but I need to center it and it needs to be able to move down the page as content is added. Some pages have more content than others.

 

[PixelPusher]

Okay centering is simple. Remember when I helped you with the baseball site? The same type of situation will apply here, use margins.

Margins are the perfect solution if you have an element with a defined width. The "auto" will do, well what is says, automatically add margin to the given side (found this not to be the case for top though, not sure why?).

Note "auto" will not work on fixed or absolute positioned element. To center in this case you will use the left, top, right or bottom value and a negative margin of the same side. (e.g. left:50%; margin-left:-400px)

Basic Horizontal Centering

div.left_right{
margin:0 auto;  
// this will center an element horizontally and set top/btm values to zero.
}

To have the footer adjust based on the given content length, just make sure it is in the natural html flow of the document (page).

 

[gumspitter]

Pixel, I need more help!! I have the footer inserted into the home page but the site map,etc. portion does not sit inside of the div "footer" Please help me with the code of this portion of the page. Also I still cannot get the footer to rest under the content div. There way too much space between the two divs. I would like to get one page fully functional then I can copy to rest of site. Thanks you are a lifesaver.

Also, I have added a form to the contacts page but now the buttons are off. (2 lines)

 

[PixelPusher]

The reason for your alignment issues is the use of absolute positioning. Change that to relative, and organize your main divs as follows: header, content, footer.

The reason the content in the footer is not sitting inside the footer, is one, due to the 50px of padding you have on the paragraph and two, the height of its parent (div) is set to 55px. That leaves 5px to fit the content, not gonna happen.