Ir para conteúdo

Arquivado

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

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

  • Conteúdo Similar

    • Por lara1807
      Boa noite pessoal, preciso resolver um algoritmo que o código abaixo descreve. Eu possuo um vetor de porcentagens e cada porcentagem dessas é atribuida de um valor do vetor entrada_pop. Nesse programa eu quero gerar um numero aleatório e ver as porcentagens que são maiores que esse numero aleatório e armazenar o valor, não da porcentagem, mas do valor que representa a porcentagem, em um vetor novo, depois imprimir este vetor, só que não está indo. Alguém pode me ajudar?? Estou variando os valores de 0 a 100
      #include <time.h>
      #include<math.h>
      #define num_individuo 3
      #define tam_vetores 1000
      int main()
      {
          float valor_percen_aptidao[]={6,20,80},v_selecionado[100],vetor_entrada_pop[]={1,2,3};
          int cont=0,i,valor_percen;
          srand(time(NULL));
          while(cont<=num_individuo)
          {
              valor_percen=(rand()%100);
              printf("sorteado %d",valor_percen);
              for(i=0;i<num_individuo;i++)
              {
                  if(valor_percen_aptidao[1]>=(float)valor_percen)
                  {
                      v_selecionado[cont]=vetor_entrada_pop;
                      cont++;
                  }
              }
          }
           for(i=0;i<num_individuo;i++)
          {
              printf("selecionados %.2f \n",v_selecionado);
          }
      }
       
    • Por Aureo Almeida
      O Felipe Guedes Coutinho ajudou na resolução de um problema quanto a como passar valores de variáveis de uma página com um carrinho para um arquivo com a API do PagSeguro. Consegui fazer isso através de sessões, e a passagem ocorre normalmente. O problema que surgiu dessa solução, que para o meu contexto é a melhor, é que a API do PagSeguro Lightbox não está reconhecendo variáveis em tempo de execução. Mesmo que convertidas em STRING. O tópico que abri e que creio que se esgotou o problema original em que o Felipe Guedes Coutinho ajudou a resolver foi este:
      Colocando o problema. Possuo duas variáveis, uma que contém um nome de produto que quero passar como parâmetro para um pagamento no PagSeguro lightbox, e outra com o valor. Ambas são oriundas de um processo em tempo de execução, e não há problema com ele, pois elas são preenchidas normalmente e os valores são impressos no display. A variável $produto_nome e a $ttBrasil. Elas são repassadas para duas variáveis SESSION:
      $_SESSION['descricao'] = $produto_nome; $_SESSION['valorTotal'] = $ttBrasil; Na página em que se encontra o script da API do PagSeguro, chamada pagseguro.php, esses valores são recebidos sem problemas (numa condição que explicitarei), de duas formas:
      $data['itemDescription1'] = $_SESSION['descricao']; $data['itemAmount1'] = $_SESSION['valorTotal']; Ou $data['itemDescription1'] = "'".$_SESSION['descricao']."'"; $data['itemAmount1'] = "'".$_SESSION['valorTotal']."'"; O problema é que este processo funciona normalmente e a variável é reconhecida quando o valor é declarado estaticamente e entre aspas simples. Em tempo de execução não.
      Funciona quando:
      $ttBrasil = '50.00'; $produto_nome = 'Nome de Teste'; Se as variáveis vierem em tempo de execução, mesmo existindo (eu as imprimo no display normalmente), a API do PagSeguro não reconhece. Quando falo em tempo de execução, é as SESSION recebendo diretamente as variáveis:
      $_SESSION['descricao'] = $produto_nome; $_SESSION['valorTotal'] = $ttBrasil;  
      A variável $ttBrasil é DECIMAL no BD, reconhecida como DOUBLE pelo PHP. Eu converti ela para STRING de várias formas, sempre mantendo o problema, mas achei mais adequado usar a função STRING, que converte FLOAT em STRING:
      $ttBrasil = (string) $ttBrasil; Verifiquei após a conversão e ela retorna como do tipo STRING. Uso esses comandos para verificar o tipo de variável e o valor.
      echo gettype($ttBrasil); echo $_SESSION['valorTotal']; Este é o problema que não consegui resolver.
    • Por 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;}  
    • Por 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
       
    • 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??
×

Informação importante

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