Mon, 2009-02-23 18:48
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.
Mon, 2009-02-23 21:34
#1
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ňol</a> | <a href="http://arabic.cnn.com" target="new">Arabic</a> | <a href="http://www.cnn.co.jp" target="new">Japanese</a> | <a href="http://cnn.joins.com" target="new">Korean</a> | <a href="http://www.cnnturk.com" target="new">Turkish</a></div> <div class="cnnPad9Top"><a href="http://edition.cnn.com">International Edition</a> | <a href="/CNN/Programs/">CNN TV</a> | <a href="/CNNI/">CNN International</a> | <a href="/HLN/">HLN</a> | <a href="/TRANSCRIPTS/">Transcripts</a></div> </div> <div class="cnnFootLeft"> <div>© 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> | <a href="/privacy.html" rel="nofollow">Privacy guidelines</a> | <a href="/services/advertise/main.html" rel="nofollow">Advertise with us</a> | <a href="/about/">About us</a> | <a href="/feedback/" rel="nofollow">Contact us</a> | <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