Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

crf_h0m3r

Posicionar elemento no final da div

Por , em Desenvolvimento frontend

Recommended Posts

crf_h0m3r    5

crf_h0m3r
Postado

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:

M9hnj.png

http://intimesoft.com.br/

 

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á:

jUOHF.png

 

Como era pra ficar:

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

O padding adiciona um espaçamento interno ao elemento. Se o conteúdo aumentar, o espaçamento será relativo ao conteúdo existente, ou seja, funciona sempre B).

Compartilhar este post

Link para o post
Compartilhar em outros sites

crf_h0m3r    5

crf_h0m3r
Postado

Não sei se fiz algo errado, mas continua do mesmo jeito. A div de redes sociais ficou embaixo do rodapé. Só aparece se eu diminuir o zoom da tela :ermm:

Dê uma olhada: http://intimesoft.com.br/

Aqui ficou: ndzwj.png

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito