[Resolvido] Porque meu rodapé não fica no fim?
É o seguinte, tentei alguns tutoriais na net, mas ainda não consegui posicionar meu rodapé lá no fim da página quando o conteúdo não é grande o suficiente para deixa-lo lá. Podem me ajudar?
Valeu.
css
/*
Theme Name: midiaweb
Theme URI: http://midiaweb.net
Description: Tema desenvolvido para a agência web midiaweb
Version: 1.0
Author: Daniel Teixeira
Author URI: http://daniel.midiaweb.net
Tags: agência, midiaweb, clean, basic
*/
/ RESET /
/ ----------------------------------------- /
/ Global reset /
/ Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui /
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:''}
/ Global reset-RESET /
/ The below restores some sensible defaults /
strong { font-weight:bold }
em { font-style:italic }
a img { border:none } / Gets rid of IE's blue borders /
/ LAYOUT /
/ ----------------------------------------- /
body { background-image:url(images/bg.png); background-color:#343434; font-family:Arial Narrow, Helvetica, sans-serif; font-size:1em; color:#dadada; height:100%; }
@font-face { font-family: Aller; src: url('Aller.ttf'); }
a { text-decoration:none; }
/ TOP /
/ ----------------------------------------- /
#top { background-color:#242424; padding:20px 0 15px 0; height:66px; border-top:3px solid #8ea800; z-index:9999; }
#top #wrap { width:960px; margin:0 auto; }
#top #wrap h1 { background: url("images/logo.png") no-repeat scroll 0 0 transparent; float: left; height: 58px; text-indent: -9999px; width: 252px; }
#top #wrap #menu ul { margin-top:26px; float:right; }
#top #wrap #menu ul li { background-repeat:no-repeat; text-indent:-9999px; float:left; }
#top #wrap #menu ul li#quemsomos, #menu ul li#solucoes, #menu ul li#portfolio, #menu ul li#clientes, #menu ul li#juntese { background-image:url(images/menu.png); height:24px; }
#top #wrap #menu ul li#quemsomos, #menu ul li#solucoes, #menu ul li#portfolio, #menu ul li#clientes { margin-right:25px; }
#top #wrap #menu ul li#quemsomos { background-position:0 0; width:121px; }
#top #wrap #menu ul li#quemsomos:hover, #top #wrap #menu ul li#quemsomos.active { background-position:0 -24px; }
#top #wrap #menu ul li#quemsomos.active { cursor:default }
#top #wrap #menu ul li#solucoes { background-position: -121px 0; width: 94px; }
#top #wrap #menu ul li#solucoes:hover, #top #wrap #menu ul li#solucoes.active { background-position:-121px -24px; }
#top #wrap #menu ul li#solucoes.active { cursor:default }
#top #wrap #menu ul li#portfolio { background-position:-216px 0; width:98px; }
#top #wrap #menu ul li#portfolio:hover, #top #wrap #menu ul li#portfolio.active { background-position:-216px -24px; }
#top #wrap #menu ul li#portfolio.active { cursor:default }
#top #wrap #menu ul li#clientes { background-position: -315px 0; width: 81px; }
#top #wrap #menu ul li#clientes:hover, #top #wrap #menu ul li#clientes.active { background-position:-315px -24px; }
#top #wrap #menu ul li#clientes.active { cursor:default }
#top #wrap #menu ul li#juntese { background-position: -396px 0; width: 81px; }
#top #wrap #menu ul li#juntese:hover, #top #wrap #menu ul li#juntese.active { background-position:-396px -24px; }
#top #wrap #menu ul li#juntese.active { cursor:default }
#top #wrap #version { left: 906px; overflow: hidden; position: relative; top: -100px; width: 54px; }
#top #wrap #version #pc, #version #mobile { background-image:url("images/pc-mobile.png"); background-repeat:no-repeat; border-radius:3px 3px 3px 3px; cursor:pointer; height:16px; padding:4px; text-indent:-9999px; width: 16px; }
#top #wrap #version #pc { background-color:#2c2c2c; background-position: 4px 69%; float: left; }
#top #wrap #version #pc:hover, #top #wrap #version #pc.active { background-color:#1c1c1c; background-position:-17px 69%; }
#top #wrap #version #mobile { background-color:#2c2c2c; background-position: -38px 50%; float: right; }
#top #wrap #version #mobile:hover, #top #wrap #version #mobile.active { background-color:#1c1c1c; background-position: -57px 50%; }
#top #wrap #search { width:178px; left: 725px; position: relative; top: -72px; }
#top #wrap #search .field { background-color:#2c2c2c; border:none; border-radius: 3px 3px 3px 3px; height: 24px; margin-bottom: 4px; width: 170px; padding-left:4px; font-size:11px; color:#989898; }
#top #wrap #search:hover .field, #top #wrap #search:hover .submit { background-color:#1c1c1c; }
#top #wrap #search .submit { background-color:#2c2c2c; border:0; border-radius:3px; margin-left:-28px; margin-right:5px; color:#494949; font-weight:bold; font-size:9px; height:20px; cursor:pointer; }
/ CONTENT /
/ ----------------------------------------- /
#content #wrap { width:960px; margin:0 auto; font-size:18px; padding-bottom:20px; }
#content #wrap h1 { font-weight:bold; color:#424242; float:left; border-top:1px dashed #343434; padding:3px 9px 5px 9px; border-radius:0 0 3px 3px; height:17px; background-color:#242424; font-size:13px; margin:-7px 20px 0 0; }
#content #wrap #img { margin-left:12%; }
#content #wrap #description { font-size:13px; background:#363636; border-radius:4px; border:2px solid #333; box-shadow:0 0 3px #2d2d2d; float:right; height:300px; margin:0 0 10px 20px; width:250px; padding:10px; font-family: Arial Narrow, Helvetica, sans-serif; }
#content #wrap #description p { margin:0; }
#content #wrap p { text-align:justify; margin:7px 0 0 5px; letter-spacing:1px; line-height:1.2; font-size:14px; margin-bottom:10px; }
#content #wrap span.italic { font-style:italic; }
.helper { cursor:help; border-bottom:1px dashed #999; }
#content #wrap #other { float:right; }
#content #wrap #other #lastwork { margin:10px 0 10px 0; background-color:#242424; width:470px; height:220px; padding:5px; }
#lastwork #slide { margin-top:-30px; }
#lastwork #controls { left: 398px; position: relative; top: 183px; width: 65px; height:30px; z-index: 9; }
#lastwork #controls #prev div, #controls #next div { border-radius:4px; background-color:#313131; text-indent:-9999px; background-repeat:no-repeat; width:30px; height:30px; border-raiuds:3px; background-position: 10px 10px; }
#lastwork #controls #prev div:hover, #controls #next div:hover { background-color:#383838; }
#lastwork #controls #prev div { background-image:url(images/s_arrow-left.png); float:left; }
#lastwork #controls #next div { background-image:url(images/s_arrow-right.png); float:right; }
#lastwork #controls #prev span { visibility:hidden; }
#content #wrap #other #twitter { margin:10px 0 20px 0; width:470px; height:80px; }
#twitter h2 { background-image:url(images/twitterbird.png); background-repeat:no-repeat; text-indent:-9999px; width:104px; height:40px; }
#twitter p { color:#a2a2a2; font-size:13px; font-family:Aller; font-weight:bold; }
section#portfolio ul li { float:left; }
.boxgrid{ width: 300px; height: 260px; margin:10px; float:left; background:#161613; overflow: hidden; position: relative; }
.boxgrid img{ position: absolute; top: 0; left: 0; border: 0; }
.boxgrid p{ padding: 0 10px; color:#afafaf; font-weight:bold; }
.boxcaption{ float: left; position: absolute; background: #000; height: 100px; width: 100%; opacity: .8; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }
.captionfull .boxcaption { top: 260; left: 0; }
.caption .boxcaption { top: 220; left: 0; }
h3 a{}
#panel { position:relative; }
.slide { position:relative; }
.slide .efeito { position:absolute; left:0; bottom:8px; padding:10px; color:#333; }
#panel .efeito {display:none;}
#fechar { cursor:pointer; background:#242424; background-image:url(images/fechar.png); background-repeat:no-repeat; margin:-10px -10px 0 0; float:right; background-position:4px 5px; border:1px solid #252525; width:20px; height:20px; border-radius:0 4px 0 4px; }
.contato { cursor:pointer; position:absolute; top:2px; }
#feedback { background-color:#2c2c2c; width:340px; height:190px; border-radius:4px 4px 0 0; border:1px solid #252525; }
#feedback:hover h1 { background-position:0 0; background-repeat:no-repeat; }
#feedback h2 { float:left; background-image:url(images/feedback.png); background-repeat:no-repeat; background-position:0 -24px; width:112px; text-indent:-9999px; float:left; margin-bottom:2px; }
#feedback ul li:first-child { margin-top:5px; }
#feedback input, textarea { background-color:#2d2d2d; border:none; width:330px; color:#989898; border:1px solid #252525; font-family:Arial, Helvetica, sans-serif; font-size:11.5px; padding-left:7px; }
#feedback input { height:29px; margin-bottom:6px; }
#feedback textarea { height:87px; padding-top:6px; }
#feedback input:hover, textarea:hover { background-color:#292929; }
#feedback .button { background:#242424; width:50px; height:22px; color:#7b7b7a; position:relative; top:-23px; left:288px; border-radius:5px 0 0 0; padding:0 0 2px 0; cursor:pointer; }
#feedback .button:hover { background:#1c1c1c }
ul#social { float:right; }
ul#social li { margin-left:-5px; float:left; }
ul#social li#twitter { background-image:url(images/redes-sociais.png); width:20px; height:20px; text-indent:-9999px; border:none; padding:0; margin-left:100px; }
ul#social li#twitter:hover { background-image:url(images/redes-sociais.png); background-position:0 20px; }
ul#social li#facebook { background-image:url(images/redes-sociais.png); background-position:100px 0; width:20px; height:20px; text-indent:-9999px; }
ul#social li#facebook:hover { background-image:url(images/redes-sociais.png); background-position:100px 20px; }
ul#social li#orkut { background-image:url(images/redes-sociais.png); background-position:80px 0; width:20px; height:20px; text-indent:-9999px; }
ul#social li#orkut:hover { background-image:url(images/redes-sociais.png); background-position:80px 20px; }
ul#social li#flickr { background-image:url(images/redes-sociais.png); background-position:60px 0; width:20px; height:20px; text-indent:-9999px; }
ul#social li#flickr:hover { background-image:url(images/redes-sociais.png); background-position:60px 20px; }
ul#social li#linkedin { background-image:url(images/redes-sociais.png); background-position:40px 0; width:20px; height:20px; text-indent:-9999px; }
ul#social li#linkedin:hover { background-image:url(images/redes-sociais.png); background-position:40px 20px; }
ul#social li#rss { background-image:url(images/redes-sociais.png); background-position:20px 0; width:20px; height:20px; text-indent:-9999px; margin-right:0; }
ul#social li#rss:hover { background-image:url(images/redes-sociais.png); background-position:20px 20px; }
/ FOOTER /
/ ----------------------------------------- /
#footer { position:relative; bottom:0; background-color:#2c2c2c; color: #9A9A9A; font-family: Arial,Helvetica,sans-serif; font-size: 12px; width:100%; border-top:1px solid #252525; clear:both; }
#footer #wrap { width:960px; margin:0 auto; height:30px; padding-top:8px; }
#selo { background-image:url(images/selo.png); background-repeat:no-repeat; text-indent:-9999px; width:69px; height:20px; float:right; }
#footer a { color:#9A9A9A; }
#footer ul { float:left; height:20px; }
#footer ul li { font-size:11px; float:left; margin-right:10px; }
#footer ul li a:hover { text-decoration:underline; }
#footer ul li#inicio { background-image:url(images/inicio.png); background-position:0 -2px; background-repeat:no-repeat; text-indent:20px; margin-top:3px; }
#footer ul li#sitemap { background-image:url(images/sitemap.png); background-position:0 1px; background-repeat:no-repeat; text-indent:17px; margin-top:3px; }
#footer ul li#acessibility { background-image:url(images/acessibility.png); height:20px; background-repeat:no-repeat; text-indent:19px; margin-top:3px; }
#footer ul li#contact { background-image:url(images/contact.png); background-position:0 -1px; margin-bottom:-15px; background-repeat:no-repeat; text-indent:19px; }
#footer ul li#w3c { background-image:url(images/w3c.png); text-indent:-9999px; width:45px; height:22px; background-repeat:no-repeat; }
#footer ul li#html a, #css a { font-size:10px; color:#0e0e0e; }
#footer ul li#html a:hover, ul li#css a:hover { color:#ccc; text-decoration:none; }
#footer ul li#html { margin-top:-2px }
#footer ul li#css { position:relative; left:-73px; top:10px;}
header
<?php include('mobile_device_detect.php');
mobile_device_detect(true,true,true,true,true,true,'http://127.0.0.1/wordpress/mobile/',false); ?><html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<meta http-equiv="content-type" content="<?php bloginfo( 'html_type' ) ?>; charset=<?php bloginfo( 'charset' ) ?>" />
<meta http-equiv="content-language" content="<?php bloginfo( 'language' ); ?>" />
<meta name="description" content="<?php bloginfo( 'description' ); ?>" />
<link rel="shortcut icon" href='<?php bloginfo( 'template_url' ); ?>/favicon.ico' />
<title><?php wp_title( ' | ', true, 'right' ); bloginfo( 'name' ); ?></title>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<script src="<?php bloginfo( 'template_url' ); ?>/js/jquery.tools.min.js"></script>
<script src="<?php bloginfo( 'template_url' ); ?>/js/jquery.cycle.all.js"></script>
<script src="<?php bloginfo( 'template_url' ); ?>/js/jquery.ui.core.js"></script>
<script src="<?php bloginfo( 'template_url' ); ?>/js/jquery.ui.widget.js"></script>
<script src="<?php bloginfo( 'template_url' ); ?>/js/jquery.ui.accordion.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
<script type="text/javascript">
$(document).ready(function(){
//Full Caption Sliding (Hidden to Visible)
$('.boxgrid').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
});
});
$(document).ready(function() {
// init and stop the inner slideshows
var inners = $('.inner').cycle().cycle('stop');
var slideshow = $('#slide').cycle({
fx: 'fade',
speed: 2000,
timeout: 0,
prev: '#prev',
next: '#next',
before: function() {
// stop all inner slideshows
inners.cycle('stop');
// start the new slide's slideshow
$(this).cycle({
fx: 'fade',
timeout: 6000,
autostop: true,
end: function() {
// when inner slideshow ends, advance the outer slideshow
slideshow.cycle('next');
}
});
}
});
});
</script>
</head>
<body>
<div id="top">
<div id="wrap">
<a href="<?php echo home_url( '/' ) ?>">
<h1>midiaweb.net</h1>
</a>
<div id="menu">
<ul id="nav">
<a href="quem-somos/"><li id="quemsomos" class="<?php if (is_page('Quem somos')) { echo "active"; }?>" title="Quem somos">Quem somos</li></a>
<a href="solucoes/"><li id="solucoes" class="<?php if (is_page('Soluções')) { echo "active"; }?>" title="Soluções">Soluções</li></a>
<a href="portfolio/"><li id="portfolio" class="<?php if (is_page('Portfólio')) { echo "active"; }?>" title="Portfólio">Portfólio</li></a>
<a href="clientes/"><li id="clientes" class="<?php if (is_page('Clientes')) { echo "active"; }?>" title="Clientes">Clientes</li></a>
<a href="juntese/"><li id="juntese" class="<?php if (is_page('Junte-se')) { echo "active"; }?>" title="Junte-se">Junte-se</li></a>
</ul>
</div><!-- menu -->
<div id="search">
<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<input type="text" class="field" name="s" id="s" placeholder="<?php esc_attr_e( 'O que você procura?', 'midiaweb' ); ?>" />
<input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'ok', 'midiaweb' ); ?>" />
</form>
</div><!-- search -->
<div id="version">
<a href="<?php echo home_url( '/' ) ?>"><div id="pc" class="<?php if (home_url( '/' )) { echo "active"; }?>" title="Versão para PC">Versão para PC</div></a>
<a href="mobile/"><div id="mobile" class="<?php if (is_page('Mobile')) { echo "active"; }?>" title="Versão para dispositivos móveis">Versão para dispositivos móveis</div></a>
</div><!-- version -->
<div style="clear:both"></div>
</div><!-- wrap -->
</div><!-- top -->loop
<div id="content">
<div id="wrap">
<ul id="other">
<li id="lastwork">
<div id="controls">
<a id="prev" href="#" title="Anterior"><div>Anterior</div></a>
<a id="next" href="#" title="Próximo"><div>Próximo</div></a>
</div><!-- controls -->
<div id="slide">
<div class="inner">
<img src="<?php bloginfo( 'template_url' ); ?>/images/lastwork.png" />
</div>
<div class="inner">
<img src="<?php bloginfo( 'template_url' ); ?>/images/lastwork2.png" />
</div>
</div><!-- slide -->
</li><!-- lastwork -->
<li id="twitter">
<h2>Twitter</h2>
<p><?php /*fn_show_tweets(1);*/ ?></p>
</li><!-- twitter -->
</ul><!-- other -->
</div><!-- wrap -->
</div><!-- content -->footer
<div id="footer">
<div id="wrap">
<div id="selo" title="Midiaweb.net, inovações para o mundo digital">
midiaweb.net, inovações para o mundo digital
</div><!-- selo -->
<ul>
<li id="w3c">w3c</li>
<li id="html"><a href="http://validator.w3.org/check?uri=referer" target="_blank">HTML Válido</a></li>
<li id="css"><a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">CSS Válido</a></li>
<li id="inicio"><a href="<?php echo home_url( '/' ) ?>">início</a></li>
<li id="sitemap"><a href="mapa-do-site">mapa do site</a></li>
<li id="acessibility"><a href="#">acessibilidade</a></li>
<div id="panel" class="slide">
<a class="contato"><li id="contact">contato</li></a>
<div id="feedback" class ="efeito">
<a id="fechar" title="fechar" onclick="escondeDiv('feedback')"></a>
<h2>feedback</h2>
<div style="clear:both"></div>
<ul>
<li><input value="Nome" /></li>
<li><input value="E-mail" /></li>
<li><textarea>Digite aqui a mensagem</textarea><input type="button" class="button" value="enviar" /></li>
</ul>
</div><!-- feedback -->
</div><!-- panel -->
</ul>
<ul id="social">
<a href="http://twitter.com/#!/danielfeelfine"><li id="twitter" title="Siga-nos no Twitter">Siga-nos no Twitter</li></a>
<a href="#"><li id="facebook" title="Facebook">Facebook</li></a>
<a href="#"><li id="orkut" title="Orkut">Orkut</li></a>
<a href="#"><li id="flickr" title="Flickr">Flickr</li></a>
<a href="#"><li id="linkedin" title="Linkedin">Linkedin</li></a>
<a href="#"><li id="rss" title="Really Simple Syndication - RSS">Really Simple Syndication - RSS</li></a>
</ul><!-- social -->
<div style="clear:both"></div>
</div><!-- wrap -->
</div><!-- final -->
</div><!-- wrap -->
</div><!-- footer -->
<script type="text/javascript">
function escondeDiv(div){
$("#"+div+"").slideToggle(400); }
function esconde1Div(div){
$("#"+div+"").mouseout(); }
</script>
<script>
$(document).ready (function() {
$('#panel .contato').click(
function() {
$(this).next().slideToggle();
});
});
</script>
<?php wp_footer(); ?>
</body>
</html>Discussão (12)
Carregando comentários...