1 reply [Last post]
Anonymous
Anonymous's picture
Guru
calgary,alberta
calgary,alberta

I need help figureing out what code was use to create the footer on cnn.com. I have been trying every code that I learned but my code never ends up looking like it. also how do I get the google search bar.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 13 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

If you right click and view

If you right click and view source you can see the HTML

		<div class="cnnFooterBoxFooter"><img src="http://i.cdn.turner.com/cnn/.element/img/2.0/global/nav/footer/corner_footer_bl.gif" id="cnnFootCnrBL" width="4" height="4" border="0" alt=""></div>
	</div><!-- /cnnFooterBox -->
	<div class="cnnFooterSub">
		<div class="cnnFootRight">
			<div><a href="/espanol/">CNN en Espa&#328;ol</a> &nbsp;|&nbsp; <a href="http://arabic.cnn.com" target="new">Arabic</a> &nbsp;|&nbsp; <a href="http://www.cnn.co.jp" target="new">Japanese</a> &nbsp;|&nbsp; <a href="http://cnn.joins.com" target="new">Korean</a> &nbsp;|&nbsp; <a href="http://www.cnnturk.com" target="new">Turkish</a></div>
 
			<div class="cnnPad9Top"><a href="http://edition.cnn.com">International Edition</a> &nbsp;|&nbsp; <a href="/CNN/Programs/">CNN TV</a> &nbsp;|&nbsp; <a href="/CNNI/">CNN International</a> &nbsp;|&nbsp; <a href="/HLN/">HLN</a> &nbsp;|&nbsp; <a href="/TRANSCRIPTS/">Transcripts</a></div>
 
		</div>
		<div class="cnnFootLeft">
			<div>&copy; 2009 Cable News Network. <a href="/tbs/index.html">Turner Broadcasting System, Inc.</a> All Rights Reserved.</div>
			<div class="cnnPad9Top"><a href="/interactive_legal.html" rel="nofollow">Terms of service</a> &nbsp;|&nbsp; <a href="/privacy.html" rel="nofollow">Privacy guidelines</a> &nbsp;|&nbsp; <a href="/services/advertise/main.html" rel="nofollow">Advertise with us</a> &nbsp;|&nbsp; <a href="/about/">About us</a> &nbsp;|&nbsp; <a href="/feedback/" rel="nofollow">Contact us</a> &nbsp;|&nbsp; <a href="/help/" rel="nofollow">Help</a></div>
 
		</div>
		<div class="clear"><img src="http://i.cdn.turner.com/cnn/images/1.gif" width="1" height="4" border="0" alt=""></div>	
		<div><a href="http://www.novell.com/" target="_blank"><img src="http://i.cdn.turner.com/cnn/.element/img/2.0/sect/main/novell.gif" alt="novell" border="0" width="54" height="19"></a></div>
		<div class="clear"><img src="http://i.cdn.turner.com/cnn/images/1.gif" width="1" height="1" border="0" alt=""></div>
	</div>
</div>

CSS is

/* Footer box */
.cnnFooterBox .cnnFooterBoxHeader
{height:4px;overflow:hidden;background:#fff url(<a href="http://i.cdn.turner.com/cnn/.element/img/2.0/global/nav/footer/corner_footer_tr.gif" rel="nofollow">http://i.cdn.turner.com/cnn/.element/img/2.0/global/nav/footer/corner_footer_tr.gif</a>) 100% 0 no-repeat;}
.cnnFooterBox .cnnFooterBoxContent
{background:#ebebeb;}
.cnnFooterBox .cnnFooterBoxFooter
{height:4px;overflow:hidden;background:#fff url(<a href="http://i.cdn.turner.com/cnn/.element/img/2.0/global/nav/footer/corner_footer_br.gif" rel="nofollow">http://i.cdn.turner.com/cnn/.element/img/2.0/global/nav/footer/corner_footer_br.gif</a>) 100% 0 no-repeat;}
#cnnFooter .cnnFooterBox 
{margin:12px 9px;}
#cnnFooter .cnnGFooterBoxLinksTop
{padding-top:11px;text-align:center;color:#aaa;font-size:10px;}
#cnnFooter .cnnGFooterBoxLinksBot
{padding-top:8px;padding-bottom:18px;text-align:center;border-bottom:1px solid #dadada;color:#aaa;font-size:10px;}
#cnnFooter .cnnGFooterBoxSearch
{padding:12px 0;text-align:center;}
 
/* footer search form */
#cnnFooter .cnnGFooterBoxSearch form
{display:inline;margin:0;padding:0;}
#cnnFooter .cnnGFooterBoxSearch input,
#cnnFooter .cnnGFooterBoxSearch img
{vertical-align:middle;margin-right:4px;}
#cnnFooter .cnnGFooterBoxSearch input.cnnGFooterSearchField
{width:435px;height:15px;font-size:11px; font-weight:bold;padding:3px 0px 0px 3px; background-color:#ffffff; border:2px solid #646464; border-right-color:#d9d9d9; border-bottom-color:#d9d9d9;}
#cnnFooter .cnnGFooterBoxSearch input.cnnGFooterSearchBtn
{margin-bottom:2px;}
 
.cnnFooterSub
{font-size:10px;margin:0 9px 56px 9px;color:#727272;}
.cnnFooterSub .cnnFootRight
{float:right;text-align:right;}

There are other small "global" classes they have used such as

which is just a class with a top padding of 9px

Also - http://www.google.com/coop/cse/

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph