Jump to content

Recommended Posts

Fala pessoal, meu primeiro poste e gostaria de tirar uma dúvida que estou quebrando a cabeça no Wordpress.

 

Eu quero alinhar 3 imagens diferente e ancoradas em 3 links.

 

Preciso que as imagens fiquem uma ao lado da outra sem espaço e sem ultrapassar o limite uma da outra.

 

 

Este é o exemplo que eu preciso fazer.

 

N7JcV2f.png

 

 

 

Este é o código que estou usando:

 

<center>

<div style="float: left; width: 33%;"><a href="https://www.c3u.com.br"><img style="float: left;" src="https://c3u.com.br/wp-content/uploads/2015/12/Atleta-Rudy1.png" alt="" width="448" height="416" border="0" /></a></div>

 

 

<div style="float: left; width: 33%;"><a href="https://www.c3u.com.br"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://c3u.com.br/wp-content/uploads/2015/12/Diego-Diego1.png" alt="" width="448" height="416" border="0" /></a></div>

 

 

<div style="float: left; width: 33%;"><a href="https://www.c3u.com.br"><img style="float: right;" src="https://c3u.com.br/wp-content/uploads/2015/12/Diego-Luan1.png

" alt="" width="448" height="416" border="0" /></a></div>

 

</center>

 

 

Podem ver no link: https://c3u.com.br/home-page-default-wp/

 

 

Problemas

 

Porem existe dois problemas. O primeiro é que a ultima imagem não cola no canto direito deixando um espaço de uns 20px fora a barra de rolagem. O segundo é que o tema que eu uso tem o mouseover que ao passar o mouse a imagem fica branca, não trato isso como um problema, no entanto ao passar o mouse o efeito aparece em uma parte das imagens vizinha.

 

Preciso colocar uma imagem ao lado da outra com estilo fullscreen sendo que cada uma contem seu link e que uma respeite a margem da outra.

 

Nota

 

Depois que conseguir fazer isso, preciso mudar esse mouseover para que quando passe o mouse aparece outra imagem. Não sei se precisa mudar no css pois o comando seguinte não funcionou.

 

<a href="ENDEREÇO-DO-LINK"><img src="ENDEREÇO-DA-IMAGEM-1" border="0" onmouseover="this.src='ENDEREÇO-DA-IMAGEM-2'" onmouseout="this.src='ENDEREÇO-DA-IMAGEM-1'"></a>

 

 

 

Declaro que estou começando a aprender agora.

Qualquer ajuda é bem vinda e desde já agradeço a atenção de todos, abraço.

Share this post


Link to post
Share on other sites

Pra organizar as imagens, você pode definir uma largura para a div e definir propriedades de width e height para o mg dentro.

Ex.:
HTML

<div class="wrapper">
   <div class="imagem">
      <img src="#">
   </div>
   <div class="imagem">
      <img src="#">
   </div>
   <div class="imagem">
      <img src="#">
   </div>
</div>

CSS

.imagem {
   display: inline-block;
   width: 33%;
}
   .imagem img {
      width: 100%;
      height: auto;
   }

Você pode conferir esse código funcionando no JSFiddle. Redimensione a página pra ver como funciona.

Share this post


Link to post
Share on other sites

Fala Henrique. Mano, mas assim elas ficam uma embaixo da outra.

 

No JSFiddle funcionou legal, mas comigo a imagem foi uma pra baixo da outra.

 

Preciso colocar uma do lado da outra completando a tela e responsivo para que em outros dispositivos ela permaneça uma do lado da outra e completando a tela verticalmente.

 

Estou tão puto com isso que aceito ate sugestão de plugins pois nem isso eu consegui encontrar.

 

Ou mais dicas e soluções, quero tentar ate conseguir.

Share this post


Link to post
Share on other sites

Opa Saul, tranquilo?

Essa é uma solução bem simples. Quando você possui elementos em uma mesma linha, eles possuem um white space entre eles (como se fossem margins/paddings? creio que sim) e esse white space é o responsável por desalinhar toda a estrutura de largura.

 

Pra corrigir esse problema, basta inserir isso no seu código CSS:

body {
   white-space: nowrap;
}

Se você quiser testar, eu atualizei o JSFiddle.

Share this post


Link to post
Share on other sites

Fala Henrique, bom dia.

 

Funcionou para telas maiores e aumentou com sucesso. Porem em mobile quebrou a linha.

Porque no JSFiddle ele diminui a imagem quase em icone e comigo trava nessa resolução ?

IsEe5ZA.png

 

Esta tudo certo agora e erá para ter funcionado.

Abraço e obrigado.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By RodrigoCesar
      Boa noite,
      estou tendo a seguinte questão,  estou precisando posicionar elementos (divs) um do lado do outro de forma que fiquem responsivos então os mesmos desçam em fiquem um em baixo do outro em telas menores. Ou seja, quando em tela grande de pc um do lado do outro, em telas menores móveis um em cima do outro. O recomendado pra isso seria usar float, porém preciso que ao ficar um em cima do outro os elementos fiquem centralizados na tela e a propriedade float sempre joga os elementos pra direita ou pra esquerda, não deixa ficar centralizado. Preciso então posicionar um do lado do outro sem uso de float ou encontrar outra solução, segue código abaixo. Desde já agradeço.
       
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="estilo.css" /> </head> <body> <div class="blocos_caracteres"> <div class="blocos_caracteres_content_1"> <p>oi</p> </div> <div class="blocos_caracteres_content_2"> <p>oi</p> </div> <div class="blocos_caracteres_content_3"> <p>oi</p> </div> <div class="blocos_caracteres_content_4"> <p>oi</p> </div> </div> </body> </html> /****reset****/ html { margin:0; padding:0; border:0; height:100%; } body { margin:0; padding:0; border:0; height:100%; } ul, ol, li {list-style:none;} /****reset****/ .blocos_caracteres {width:94%; margin: 0 auto; } .blocos_caracteres_content_1 {width:25%; height:300px; min-width: 250px; background-color: yellow; float: left; } .blocos_caracteres_content_2 {width:25% ; height:300px; min-width: 250px; background-color: green; float: left; } .blocos_caracteres_content_3 {width:25% ; height:300px; min-width: 250px; background-color: blue; float: left;} .blocos_caracteres_content_4 {width:25% ; height:300px; min-width: 250px; background-color: red; float: left;}  
    • By 11closed
      Olá, boa tarde! 
      Estou com uma duvida, que pelo o que pesquisei, é bastante discutida nas comunidades de programadores e cada um fala uma coisa, por tanto vim até aqui para tentar chegar a uma conclusão.
       
      Gostaria de gravar valores financeiros no BD de alguma forma que não traga problemas futuros, por causa de possiveis arredondamentos automaticos.
      Quero saber qual o melhor mecanismo para gravar no campo de valores financeiros, valores com decimais e dizimas, exe: 0.2308, 128.997, 1.28989 ..etc independentemente da quantidade de numeros no dizimas, eu preciso saber a quantidade exata.
       
      Obrigado, no aguardo
       
    • By TheOicle
      EU quero que voces veja o numero abaixo como um exemplo.
       
      float numero = 28.846;
       
      Voces conseguem ver que essa variavel "numero" tem 2 unidades antes da virgula e mais 3 depois da virgula neh??
       
      Mas como eu consigo contar em c++?? Tem alguma funcao??
    • By RogerTi
      Fala pessoal, eu baixei um banco de dados aqui para fazer uns exercícios e vi que nele ao criar uma conta ele pega a data atual, isso o PHP que eu preciso fazer deve informar na query, porem o tipo do campo data é double, eu já vi converter data para int, para double nunca vi, é possivel? Se sim como faço isso, até estou pesquisando no google mas não estou tendo respostas exatas, apenas aquele tipo básico (double)date('Y-m-d'); 
       
      então como eu faço para converter a data atual para double? Ou isso é um erro na estrutura do banco que devo mudar para int ou date
    • By JSA
      Olá a todos.
      Observem o seguinte código extremamente simples:
       
      #include <stdio.h>
       
      int main()
      {
      float n1 = 9.8;
       
      if (n1 == 9.8)
      {
      printf("ok!\n\n");
      }
       
      printf("Fim do programa...!\n");
      scanf("%*c");
      return 0;
      }
       
      Esse código não gera a frase ok! porque o compilador não enxerga n1 igual 9.8 apesar de, visualmente, a condição ser verdadeira devido a comparação entre números reais idênticos.
      Porém, quando eu insiro cast antes do 9.8 na condição do if o código funciona corretamente: if (n1 == (float) 9.8)
      Esse problema só existe quando eu uso números reais do tipo float diferentes de 9.0 e 9.5, ou seja, escrevendo dessa forma if (n1 == 9.0) ou desta outra forma if (n1 == 9.5), sem cast, o código funciona perfeitamente.
      Para números dos tipos int e double esse problema de comparação na condição do if não ocorre.
      Estou usando o codeblocks, com compilador GCC, no windows 7, processador i3, 64bits.
       
      Alguém com mais anos de prática na Linguagem C poderia esclarecer por qual razão o tipo floatnecessita de casting na condição do if?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.