I was recently looking for help creating a footer navigation/Site map but no-one seemd to know how to do it so i decided to go playing with code and make my own one. I have coded it myself to get my own desired effect. I decided I would share it with everyone. I made this on a HTML document so it may need to be adapted to work with SM forums.
The code is pretty straight forward but may be a bit messy as I am still learning.
What the footer looks like
The CSS code is as follows:
<style type="text/css">
#footer-container { /* Footer CSS Start */
margin: 0 auto;
padding: 10px 0;
width: 920px;
}
.footer {
height: 300px;
}
.footer {
background-image:url(images/footerbg.png);
background-repeat:repeat-x;
color:#FFF;
position: relative;
text-align: left;
width: 100%;
}
#footer .first {
width: 250px;
padding-bottom: 20px;
}
#footer .col {
float: left;
margin-right: 30px;
unicode-bidi: embed;
display:block;
}
#footer .second {
width: 260px;
}
#footer .third {
float: right;
width: 260px;
}
#qvposts {
list-style: none outside none;
margin: 0;
padding: 0 !important;
width: 250px;
}
.clear {
clear: both;
}
ul, li {
padding-bottom: 20px;
}
#footer h5 {
border-bottom: 2px solid #FFFFFF;
color: #FFFFFF;
font-family: 'PT Sans Narrow',arial;
font-size: 140%;
font-weight: bold;
letter-spacing: -0.01em;
line-height: 1em;
margin: 10px 0 15px;
padding-bottom: 5px;
} /* Footer CSS Finish */
</style>The HTML code is as follows:
<body>
<div id="footer" class="footer"><!-- Page Footer Main -->
<div id="footer-container">
<div class="col first">
<h5>Site/Owner Description</h5>
<img alt="Image of your choice" src="http://cdn.dejanseo.com.au/wp-content/uploads/2011/05/image-optimisation.jpg">
<p><strong>Brian</strong>
is a web designer and this has been adapted from other sites to create a footer navigation that can be used on your website .
</p>
<p>Feel free to
<a href="http://www.Hallynet.com">say hi</a>
to me, or follow
<a target="_blank" href="http://twitter.com">@myfooter</a>
on twitter.
</p>
</div>
<div id="qvposts" class="col second">
<h5>Links Of Interest</h5>
<li>
<a href="http://www.google.com" target="_blank">Link1</a>
<div class="clear"></div>
</li>
<li>
<a href="http://www.google.com" target="_blank">Link2</a>
<div class="clear"></div>
</li>
<li>
<a href="http://www.google.com" target="_blank">Link3</a>
<div class="clear"></div>
</li>
<li>
<a href="http://www.google.com" target="_blank">Link4</a>
<div class="clear"></div>
</li>
<li>
<a href="http://www.google.com" target="_blank">Link5</a>
<div class="clear"></div>
</li>
<li>
<a href="http://www.google.com" target="_blank">Link6</a>
<div class="clear"></div>
</li>
<li>
<a href="http://www.google.com" target="_blank">Link7</a>
<div class="clear"></div>
</li>
</div>
<div id="qvposts" class="col third">
<h5>Helpfull Websites</h5>
<li>
<a href="http://www.google.com" target="_blank">Link1</a>
<div class="clear"></div>
</li>
<li>
<a href="http://www.google.com" target="_blank">Link2</a>
<div class="clear"></div>
</li>
<li>
<a href="http://www.google.com" target="_blank">Link3</a>
<div class="clear"></div>
</li>
<li>
<a href="http://www.google.com" target="_blank">Link4</a>
<div class="clear"></div>
</li>
<li>
<a href="http://www.google.com" target="_blank">Link5</a>
<div class="clear"></div>
</li>
<li>
<a href="http://www.google.com" target="_blank">Link6</a>
<div class="clear"></div>
</li>
<li>
<a href="http://www.google.com" target="_blank">Link7</a>
<div class="clear"></div>
</li>
</div>
</div>
</div><!-- Page Footer End -->
</body>If you could reference me when using the code it would be great as it took me quite a while to get right and I am giving this to you as open source to use as you wish. My website is
http://www.hallynet.com which is currently under construction so not accessable at the moment.
Thanks
Brian
