Budun |
Sep 12, 2010 03:28 AM |
[SOLVED] Beautiful footer
Hi
Sorry for bad English
Help please
I'm trying to simulate a footer site
But I have problems
This is my site
wordpress-2.9.2
Atahualpa - version 3.5.2
Use the settings
PHP Code:
<footer><div id="footer-inner"><section id="things-i-do"><div class="thing-i-do"> <a href="http://wufoo.com"><h5>I work for...</h5><div id="thing-wufoo">Wufoo is an online form builder that makes building even the most complex forms so easy, it's fun!</div> </a></div><div class="thing-i-do"> <a href="http://digwp.com"><h5>Book I co-authored...</h5><div id="thing-digwp">Digging Into WordPress is a book and blog I co-author with Jeff Starr about the world's #1 publishing platform.</div> </a></div> <div class="thing-i-do"> <a href="http://quotesondesign.com"><h5>Words I collect...</h5><div id="thing-qod">Quotes on Design is a collection of design related quotes. With an API for your integration ideas!</div> </a></div></section><div id="author-footer"><h4>About the Author</h4><p> <a href="http://chriscoyier.net">Chris Coyier</a> is a web designer living in Tampa, FL. He loves old time fiddle music, episodic television, building <a href="http://html-ipsum.com/">little useful websites</a>, and <a href="/bookshelf/">tech books</a>. You may <a href="/contact/">contact him</a>.</p><p id="social-icons"> <a id="icon-delicious" href="http://delicious.com/chriscoyier">Delicious</a> <a id="icon-twitter" href="http://twitter.com/chriscoyier">Twitter</a> <a id="icon-flickr" href="http://www.flickr.com/photos/chriscoyier/">Flickr</a> <a id="icon-forrst" href="http://forrst.com/people/chriscoyier/posts">Forrst</a> <a id="icon-facebook" href="http://www.facebook.com/CSSTricks">Facebook</a> <a id="icon-grooveshark" href="http://listen.grooveshark.com/#/user/chriscoyier/">Grooveshark</a></p> <h4>Subscribe!</h4><ul id="subscribe-list"><li><a href="http://feeds.feedburner.com/CssTricks">Articles Feed</a></li> <li><a href="http://feeds.feedburner.com/CSS-TricksSnippets">Snippets Feed</a></li> <li><a href="http://feedburner.google.com/fb/a/mailverify?uri=CssTricks&loc=en_US">Posts by Email</a></li> <li><a href="http://feeds.feedburner.com/CSS-Tricks-Forums">Forums Feed</a></li> <li><a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewPodcast?id=273881728">iTunes Large</a></li> <li><a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewPodcast?id=299818542">iTunes Mobile</a></li> <li><a href="http://feeds.feedburner.com/CSS-Tricks-Screencasts">Screencast Large</a></li> <li><a href="http://feeds.feedburner.com/CSS-Tricks-Screencasts-iPhone">Screencast Mobile</a></li></ul></div></div></footer>
CSS
PHP Code:
footer { background: url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-7/images/css-tricks.png) no-repeat -10px -1254px; background-image: url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-7/images/css-tricks.png); background-repeat-x: no-repeat; background-repeat-y: no-repeat; background-attachment: initial; background-position-x: -10px; background-position-y: -1254px; background-origin: initial; background-clip: initial; background-color: initial; height: 276px; position: relative; width: 100%; } article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } * { margin: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } article, aside, footer, header, hgroup, nav, section { display: block; } Inherited from body.home.blog body { color: #41403F; font: normal normal normal 13px/1.3 Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; orphans: 2; } Pseudo ::selection element ::selection { background: #FFCC89; background-image: initial; background-repeat-x: initial; background-repeat-y: initial; background-attachment: initial; background-position-x: initial; background-position-y: initial; background-origin: initial; background-clip: initial; background-color: #FFCC89; color: #222; }
|