Ir para conteúdo

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Seu problema ai é com CSS e não diretamente com o WordPress, irei mover para a área adequada e boa sorte com a solução do problema.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Entre para seguir isso  

  • Conteúdo Similar

    • Por 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??
    • Por 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
    • Por 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?
    • Por AlessandroPiaz
      Fala pessoal. Em determinada pagina do meu site, criei uma sequencia de elementos, sendo um em baixo do outro, um alinhado a esquerda e outro a direita e assim procede. Mas sempre que coloco o float:right pros elementos da direita, parece que o position se comporta como absolute, mesmo sendo relative. E a organização dos elementos só fica certa com o position relative funcionando para todos. Preciso dos elementos da direita alinhados a direita e com o position relative funcionando direito. Me ajudem por favor.
    • Por Paradoxu
      Pessoal, boa tarde;
      Tenho essa seguinte lista no meu html,que por algum motivo os elementos dela ficam bugados / saltando espaços no navegador Mozilla, enquanto nos outros não, como posso resolver?
      CSS da li
      .content_pesquisa ul li{ width:250px; height:auto; min-height:210px; float:left; padding:5px; margin-left:5px; margin-bottom:15px; } Link da imagem com bug:
      http://imgur.com/0qH3ano
×

Informação importante

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