Jump to content
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.

Share this post


Link to post
Share on other 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.

 

 

Share this post


Link to post
Share on other 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.

 

 

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

  • Similar Content

    • By LucasLV
      Olá.
      Tenho um site onde as imagens são geradas através de um arquivo PHP - utilizo esse método para retornar imagens webp ou jpg - e vi que o navegador não utiliza, ou não salva em cache, as imagens geradas dessa forma.
      Já as onde informo o caminho completo da imagem com a extensão, aparecem como utilizadas do cache.

      Esse comportamento é normal quando as imagens são geradas desse jeito ou é por não ter feito nenhuma configuração de cache no arquivo PHP que gera as imagens?
       
      Coloquei uma imagem do resultado exibido no navegador.

    • By rcsbnu27
      Estou tentando ajudar um amigo a desenvolver seu site pessoal ele me passou um modelo, onde não estou conseguindo fazer um link de menu quando clicar nos anos iniciais ir para as turmas dos anos iniciais no menu atividade educacionais, segue em anexo o código. Endereço para ter ideia do que estou falando: https://www.profrodrigo.com/temporario/index.html. Nesta parte:
      HTML
      <div class="container"> <div class="row"> <div class="col-sm-2"> <a href="#anosiniciais" > <img src="images/anos/anosiniciais.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#anosfinais" > <img src="images/anos/anosfinais.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> </div> </div> </div> </div> </div> <div class="section news-section" id="anosiniciais"> <div class="container"> <div class="row"> <div class="col-sm-2"> <a href="#" target="_blank"> <img src="images/turmas/pres.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#" target="_blank"> <img src="images/turmas/1sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/2sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/3sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/4sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> </div> </div> </div>

      <div class="section news-section" id="anosfinais">
      <div class="container">
      <div class="row">
      <div class="col-sm-2">
      <a href="#">
      <img src="images/turmas/5sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="https://www.ebmalbertostein.com" target="_blank">
      <img src="images/turmas/6sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="https://www.profgarrido.com" target="_blank">
      <img src="images/turmas/7sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="#">
      <img src="images/turmas/8sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="#">
      <img src="images/turmas/9sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      </div>
      </div>
      </div>
    • By lezão
      Ola pessoal!
      Td bem com vcs?
       
      Estou tentando fazer esse item ficar em css e naun estou conseguindo alguem pode me ajudar?
      <table width="75%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="15%" height="35"><b>Moda da Casa</b></td> <td width="55%" style="border-bottom: dotted; border-width: 1px 3px 3px 1px; border-color: black black #000000 #000000"></td> <td width="7%"><b>R$ 25,00</b></td> <td width="3%" rowspan="2" align="left"><img src="https://clipartart.com/images/delete-button-clipart.jpg" width="75px" heigth="50px"/></td> </tr> <tr> <td colspan="3" height="35"> <div class="label-float"> <input type="text" value="Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano." size="100%" placeholder="" required=""> </div> </td> </tr> </table> obrigado!
       
       
       
    • By lezão
      Boa noite!
      Td bem com vcs?
       
      Meus amigos, estou precisando de um css que eu não faço ideia por onde começar ja pesquisei e nada.
      só encontrei como imagem, vejam.

       
      será que tem como fazer em css desse modelo, o texto tem q ficar sobreposto a cor do fundo.
       
    • By FabianoSouza
      Pessoal, é possível abrir uma nova aba/janela do navegador dentro de uma DIV?
      Como faço?
       
      Pergunto isso porque o IFRAME não vai funcionar para o meu objetivo (já testei).
       
      Estou tentando adaptar esse código JQUERY para o Javascript puro, pra saber se a ideia funciona (não manjo de JQUERY).
      https://stackoverflow.com/questions/33296867/how-to-open-the-content-inside-a-div-tag-in-new-tab
       
      Grato.
×

Important Information

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