Ir para conteúdo

POWERED BY:

Arquivado

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

soaresra

Posicionar Div em um espaço específico

Recommended Posts

Boa noite, time.

 

Eu estou criando um site de quadrinhos e estou querendo colocar as histórias de forma que sejam traduzidas, a ideia é posicionar as div em cima dos balões de textos.

eu fiz um modelo que pode ser visto aqui...

http://www.sagacomics.com.br/preTeste/ComicView/index2.htm

 

O problema é que as div com os textos, não acompanham o posicionamento da imagem quando a janela não está maximizada, ou seja, se houver alguma redução do tamanho da janela, horizontalmente, ou seja, a imagem acompanha o navegador mais a imagem, não.

 

Uma segunda dúvida, existe alguma forma de deixar o texto alinhado verticalmente dentro da div?

 

os arquivos desse modelo estão em http://www.sagacomics.com.br/preTeste/ComicView/ComicView.rar

 

Obrigado pela ajuda, time.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Rapadura, muito obrigado pelo sua contribuição.

 

A idéia aqui é fazer isso sem o ambiente responsivo, porque no anbientr respinsivo a proporção fonte e imagem ficam distorcidas.

 

No site highwaycomics.com eles conseguiram esse resultado, mas eu não entendi bem como eles fizeram. Ainda sou inexperiente com o css. Se puder dar uma olhada no que eles fizeram e entender, eu ficaria muito grato. Eu não sei se fizeram manualmente ou se usaram alguma ferramenta para consefuirem fazer. Eu mandei um e-mail para eles mas não obtive respostas ainda. Valeus.

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bora tentar desenvolver, né? Eu que sou o pai desse recurso... eu em 2012 que criei esse negócio de fazer histórias em quadrinhos com tradução... só quero melhorar o resultado. E está tão difícil quanto foi inventar isso...

 

Mas vou continuar tentando e quando conseguir posto aqui. Dá uma olhada na seção Freetour, no Seiren tem uma história chamado O Cabeção, que tem esse recurso funcionando, só que a página de texto e imagem ficam todos centralizados na esquerda, onde o recurso funciona bem, o duro mesmo está sendo fazer isso tudo ficar centralizado, eis a ideia do post.

 

Mas valeu pelas ajudas, Rapadura.

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por ILR master
      Fala pessoal.

      Não estou conseguindo converter .jpg para .webp
       
      Alguém pode me ajudar? Segue código abaixo:
       
      $fotob = 'imagem.jpg'; $foto = explode('.',$fotob); $f = $foto[0]; $forigem = $fotob; $origem = 'fotos_noticias/'.$forigem; $fdestino = $f.'.webp'; $destino = 'fotos_capa/'.$fdestino; $imagem = imagecreatefromjpeg($origem); $imgX = imagesx($imagem); $imgY = imagesy($imagem); $novaImagem = imagecreatetruecolor($imgX, $imgY); imagealphablending($novaImagem, false); imagesavealpha($novaImagem, true); imagecopyresampled($novaImagem, $imagem, 0, 0, 0, 0, $imgX, $imgY, $imgX, $imgY); imagewebp($novaImagem, $destino, 100); imagedestroy($imagem); // Importante para limpar o cache
    • Por ILR master
      Fala pessoal, tudo bem?
       
      Eu tenho o seguinte código:
       
      <script>
         $(function(){
      var jElement = $('.fixar_banner');
      $(window).scroll(function(){
          if ( $(this).scrollTop() > 120 ){
              jElement.css({
                  'position':'fixed',
                  'top':'10px'
              });
          }else{
              jElement.css({
                  'position':'relative',
                  'top':'auto'
              });
          }
      });
      });
      </script>
       
      Porém, eu quero que a div fique fixa até que outro elemento apareça na tela, tipo o rodapé da página por exemplo. É mais ou menos como a página de notícia do uol.
      https://noticias.uol.com.br/internacional/ultimas-noticias/2025/01/19/sonho-americano-brasileiros-moram-em-carro-e-buscam-comida-no-lixo-nos-eua.htm
       
      Espero ter sido claro.
       
      Obrigado :)
       
    • Por Alessandro Bodão
      Fala galerinha, 
       
      Tenho um container com um título (h1) no cabeçalho do meu site, esse container ocupa metade da tela (50vw), e eu gostaria que esse título ocupasse toda a largura desse container, independente do seu tamanho ou do tamanho do monitor, de forma com que a palavra tenha exactamente o mesmo tamanho do container (vou anexar uma foto de exemplo). Já tentei todos os valores pra essa h1, como % e vw... mas nada parece fazer sentido.
       
       

    • Por Giovanird
      Olá a todos!
      tenho varias divs com o mesmo ID e nome de classe. Preciso que a cor da div seja conforme uma escala de valores.
      Estou tentando pegar o valor pelo nome da classe, pois as divs possuem o mesmo id e não tive sucesso. Segue script:
      <div class="planos" id="1" value="74">74</div> <div class="planos" id="1" value="29">29</div> <div class="planos" id="1" value="55">55</div> <div class="planos" id="1" value="74">74</div> <div class="planos" id="1" value="63">63</div> <div class="planos" id="1" value="55">55</div> <script type="text/javascript"> var valueElement = document.getElementsByClassName('.planos').getAttribute('value'); console.log(valueElement); if (valueElement >= "70") { document.getElementsByClassName('.planos').style.backgroundColor == '#4caf50'; } else if (valueElement >= "50" && valueElement <= "69") { document.getElementsByClassName('.planos').style.backgroundColor == '#ffbc00'; } else { document.getElementsByClassName('.planos').style.backgroundColor == '#f44336'; } </script>  
       
    • Por GOD
      Quero um código div ou qualquer outra forma, para atingi esse resultado do link
       https://drive.google.com/file/d/0B8Ssi9zuKdQWMExWeVpGUXN0MlRsUzdmdGRuTFl2eU1yejB3/viewocal
       
      Para ficar nesse local.
      https://drive.google.com/file/d/0B8Ssi9zuKdQWeGZSSnVBaFBxM1FUN1hEeWdrRzhTNWI0Q01Z/view
       
      Meu objetivo é que em cada quadro da div, fique uma noticia de um site especifico, que pretendo colocar através de plugin rss.
       
       
      Enfim espero uma ajuda sobre como posso fazer isso
       
       
×

Informação importante

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