Imagem fixa no footer

[mruoppolo 14]

Olá, tudo bem?

 

Eu tenho um selo do certificado SSL do meu site que eu gostaria de fazer ele aparecer no fixo no canto direito inferior do monitor, ou seja, ele vai flutuar pelo site, o usuário pode descer ou subir a tela que ele vai ficar sempre aparecendo no canto direito inferior.

 

Como eu faço isso??

 

O código do selo é o seguinte:

<a href="https://www.instantssl.com/ssl.html"  style="text-decoration:none; ">
    <img alt="SSL" src="https://www.instantssl.com/ssl-certificate-images/support/comodo_secure_100x85_transp.png" style="border: 0px;" /><br/>
    <span style="font-weight:bold;font-size:15px; padding-left:40px; color:#86BEE0;">SSL</span></a><br/>

Muito obrigado

[L. Henrique 179]

Você pode fazer isso de algumas maneiras e aqui vou deixar uma pra ver se você curte.

Lembre-se que no CSS pra você manter algo fixo, você tem o position: fixed, que é o que vou utilizar aqui na resposta. Segue o código que deixei preparado:

HTML:

<div class="wrapper">
    <a href="https://www.instantssl.com/ssl.html" class="ssl_certificate">
        <img alt="SSL" src="https://www.instantssl.com/ssl-certificate-images/support/comodo_secure_100x85_transp.png" class="ssl_img"/>
    </a>
</div>

Sim, esse é o seu código, eu só removi o <span>SSL</span>, pois não há necessidade, já que o <img> do certificado já diz a que veio.

CSS:

.ssl_certificate{
    position: fixed;
    bottom: 0;
    right: 0;
}

.ssl_img{
    border: none;
    padding: 10px 10px 10px 10px;
}

Ao invés de ficar fazendo um monte de styles dentro do HTML, você poderia alterar isso para classes? Ou de alguma forma isso torna inviável? Bem, mas pensando como se pudessem haver classes ao invés de super-lotar o HTML de styles, ai está o CSS do que você vai precisar.

Eu fixei ele no footer através do position:fixed e dos métodos bottom: 0 e right: 0. Isso o faz grudar no canto direito inferior da tela. Com isso eu só me aproveitei do padding (ou margin) pra espaçar ele dos cantos.

Tudo isso eu deixei preparado no JSFiddle pra você ver como ficou, então segue aqui a DEMO.

[mruoppolo 14]

Valeu L. Henrique, funcionou perfeitinho aqui, muito obrigado cara