Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa noite.
Estou fazendo uma "página de construção" da empresa que trabalho, e me surgiu essa dúvida, de como posicionar elemento no final da div.
Tenho o seguinte layout:
/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/M9hnj.png&key=54f793f8e80349a47af18c09fe3e6e64dd9ec3402bbe5770be832aa47eedbfc6" alt="M9hnj.png" />
Na parte que está em vermelho, seria onde vai ficar as redes sociais. Com o site, mostrado logo abaixo da imagem, vocês irão entender.
Outra dúvida, para algumas resoluções o rodapé ficou em cima da div das redes sociais:
Como está:
/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/jUOHF.png&key=3cd3c947f6125efa83e894dd1f2a90eeb43b64104cfd9abe0a313f6dc6cc5cbe" alt="jUOHF.png" />
Como era pra ficar:
/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/fJ8He.png&key=f6ba252d08799b5cf9f8bbf15edb57049d11404f437183de74ef94646a6469d1" alt="fJ8He.png" />
CSS:
/*
**CSS RESET
*/
html, body {height: 100%;}
* {
margin: 0 auto;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
list-style: none;
}/*
**CONTAINER
*/
#container {width: 900px; margin: 0 auto; padding: 0; font-family: 'Abel'; min-height: 100%; height: auto !important; height: 100%; clear: both;}
/*
**LOGOTIPO
*/
#logo {width: 900px; height: 262px; margin: 0 0 10px 0; padding: 0; background: url(imagem/logotipo.png) no-repeat;}
/*
**CONTEÚDO
*/
#conteudo {width: 894px; height: 250px; padding: 3px; margin: 40px 0 0 0;}
#conteudo p {text-align: center; margin: 0 0 10px 0;line-height: 45px; font-size:20px;}
#conteudo img {margin:0 10px 0 0; vertical-align: middle;}
/*
**REDES SOCIAIS
*/
#redes_sociais {width: 900px;}
#elementos ul li {display: inline; margin: 0; float: right;}
#elementos ul li a {margin: 0 3px; float: right; cursor: pointer; }
/*
**RODAPÉ
*/
#footer {background: #3242DE; margin: 0 auto; border-top: 5px solid #999; list-style: none; position:absolute; bottom:0; width:100%;}
#rodape {width: 950px; margin: 15px auto; padding: 0; list-style: none;}
.endereco {padding: 0 0; margin-top: 70px; width: 690px; padding: 10px;}
.endereco p {font-family: 'Abel'; font-size: 15px; text-align: center; color: #FFF;}
.clear {clear: both;}
HTML:
<body>
<div id="container">
<div id="logo"><!--<img src="imagem/pps2web.png" alt="" />--></div>
<div id="conteudo">
<p><img src="imagem/construcao.gif" alt="Intimesoft Sistemas" /></p>
</div>
<div id="redes_sociais">
<div id="elementos">
<ul>
<li><a href="http://intimesoft.com.br/os/" target="_blank"><img src="imagem/contact.png" alt="" /></a></li>
<li><a href="http://twitter.com/#!/intimesoft" target="_blank"><img src="imagem/twitter.png" alt="" /></a></li>
<li><a href="http://www.facebook.com/pages/INTIMESOFT-SISTEMAS/273946635978712" target="_blank"><img src="imagem/facebook.png" alt="" /></a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<div id="rodape">
<div class="endereco">
<ul>
<li><p>Rua Joaquim Nabuco, 634 - Farol. Maceió. AL | 82 - 3313.0345 // 9965.2179</p></li>
<li><p> </p></li>
<li><p>© 2000 - 2011 | Intimesoft® Software Ltda. Todos os direitos reservados.</p></li>
</ul>
</div>
</div>
</div>
</body>Desde já, obrigado.
Carregando comentários...