Ir para conteúdo
Latorre

Imagem em cima de um texto

Recommended Posts

Bom dia, estou com um problema com posicionamento de imagem no meu css.

 

Tenho uma escrita e uma imagem, preciso posicionar a imagem em cima do escrito segue o html e o css

 

 

HTML

<div class='footer'>
	   <div class='img-footer'>
          <img src='../src/assinaturas/{$imagem}.png . '/>
       </div>
       <h4 class='text-center'><b><u> {$laudo['NM_MEDICO_CRM']} </u><b></h4>
</div>

 

css

        .footer {
            position:absolute;
            bottom: 20;
            width:90%;

        }

        .img-footer{
          width: 40%;
          text-align: center;
          font-size: 30px;
          margin: auto;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
        }

Não consigo por nada deixar a imagem por cima da assinatura, alguém consegue me ajudar?

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara do jeito que você mostrou ai, teoricamente era pra dar certo, mas mesmo eu copiando a sua estrutura ele não vai. Estou montando isso no mpdf.

 

 

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

  • Conteúdo Similar

    • Por rodrigoalgeri
      BOA NOITE
      OLHA ISSO onde esta escrito isso aqui "Health star ratings Kellogg reveals the cereal Rodrigo Algeri", tem uma pequena imagem em cima se voce perceber ela e uma imagem redonda so que nao aparece inteira voce sabe algum jeito pra aparecer ? tipo ela tem que ficar 75px altura e largura a altura fica, so que ela corta, EU GOSTARIA QUE FICASSE UM QUADRADO TIPO 75PX X
      75PX E ISSO E PRA FICAR EM TODAS ESSAS IMAGENS AI QUE TEM 

    • Por guilherme.audi
      Olá, pessoal,
      Sou meio-leigo e logo mais serei vesgo... não entendi onde está o problema:
       
      Tenho uma situação de submenu bem simples, que deve mostrar (display="table") e esconder (display="none") algumas divs, conforme a seleção do usuário.
      No início da página antes do <head> criei a seguinte estrutura:
       
      <!-- CONTROLE DE ABAS :: MENU DETALHES -->
      <script>
          function SelecCarac() {
              var caracteristicas = document.getElementById('div_carac');
              var dimensoes = document.getElementById('div_dimensoes');
              var projeto3d = document.getElementById('div_3d');
              var videotutorial = document.getElementById('div_video');
              var esquemafios = document.getElementById('div_esquemafios');
              
              caracteristicas.style.display = "table";
              dimensoes.style.display = "none";
              projeto3d.style.display = "none";
              videotutorial.style.display = "none";
              esquemafios.style.display = "none";
          }
          function SelecDimensoes() {
              var caracteristicas = document.getElementById('div_carac');
              var dimensoes = document.getElementById('div_dimensoes');
              var projeto3d = document.getElementById('div_3d');
              var videotutorial = document.getElementById('div_video');
              var esquemafios = document.getElementById('div_esquemafios');
              
              caracteristicas.style.display = "none";
              dimensoes.style.display = "table";
              projeto3d.style.display = "none";
              videotutorial.style.display = "none";
              esquemafios.style.display = "none";
          }
          function Selec3D() {
              var caracteristicas = document.getElementById('div_carac');
              var dimensoes = document.getElementById('div_dimensoes');
              var projeto3d = document.getElementById('div_3d');
              var videotutorial = document.getElementById('div_video');
              var esquemafios = document.getElementById('div_esquemafios');
              
              caracteristicas.style.display = "none";
              dimensoes.style.display = "none";
              projeto3d.style.display = "table";
              videotutorial.style.display = "none";
              esquemafios.style.display = "none";
          }
          function SelecVideo() {
              var caracteristicas = document.getElementById('div_carac');
              var dimensoes = document.getElementById('div_dimensoes');
              var projeto3d = document.getElementById('div_3d');
              var videotutorial = document.getElementById('div_video');
              var esquemafios = document.getElementById('div_esquemafios');
              
              caracteristicas.style.display = "none";
              dimensoes.style.display = "none";
              projeto3d.style.display = "none";
              videotutorial.style.display = "table";
              esquemafios.style.display = "none";
          }
          function SelecEsquemaFios() {
              var caracteristicas = document.getElementById('div_carac');
              var dimensoes = document.getElementById('div_dimensoes');
              var projeto3d = document.getElementById('div_3d');
              var videotutorial = document.getElementById('div_video');
              var esquemafios = document.getElementById('div_esquemafios');
              
              caracteristicas.style.display = "none";
              dimensoes.style.display = "none";
              projeto3d.style.display = "none";
              videotutorial.style.display = "none";
              esquemafios.style.display = "table";
          }
      </script>
      (ridiculamente extenso, até suponho que haja um caminho menor..)
       
      As abas desse "submenu" estão no corpo da página (asp clássico) assim:

      <!-- ABAS :: MENU DE DETALHES DO PRODUTO -->
      <div class="container-principal" style="text-align: center;">
          <% if Len(VetProd(97,0)) > 5 Then %>
              <div class="detalhe-menu-abas" id="bt_carac" onclick="SelecCarac()" >Características</div>
          <%End if
          if Len(VetProd(11,0)) > 0 Then %>
              <div class="detalhe-menu-abas" id="bt_dimensoes" onclick="SelecDimensoes()">Dimensões</div>
          <%End if
          if Len(VetProd(92,0)) > 1 Then %>
              <div class="detalhe-menu-abas" id="bt_3d" onclick="Selec3D()">Desenho 3D</div>
          <%End if
          if Len(VetProd(135,0)) > 3 Then %>
              <div class="detalhe-menu-abas" id="bt_video" onclick="SelecVideo()">Video tutorial</div>
          <%End if
          if Len(VetProd(22,0)) > 0 Then %>
              <div class="detalhe-menu-abas" id="bt_esquemafios" onclick="SelecEsquemaFios()">Ligação dos fios</div>
          <%End if%>
      </div>
      <!-- -->
       
      ..E essas id chamadas "div_carac", "div_dimensoes", "div_3d", "div_video" e "div_esquemafios" estão assim:
       
      <!-- DIMENSÕES -->
      <div class="container-principal" style="text-align: center; display: none;" id="div_dimensoes">
          <h3 style="text-align: left;">Dimens&otilde;es<span class="letramed2">&nbsp;(mm)</span></h3>
          <a href="admin/imgs/icones/<%= VetProd(11,0) %>" target="_blank"><img src="admin/imgs/icones/<%= VetProd(11,0) %>" alt="Dimens&otilde;es de <%= VetProd(1,0) %> em mm" title="<%= VetProd(136,0) %>&nbsp;<%= VetProd(2,0) %>&nbsp;<%= VetProd(1,0) %>" class="detalhe-dimensoes"/></a>
      </div>
      <!-- -->
       
      <!-- CARACTERÍSTICAS ESPECIAIS -->
      <div class="container-principal" id="div_carac">
          <h3>Caracter&iacute;sticas especiais</h3>
          <%= VetProd(97,0)%>
      </div>
      <!-- -->
          
      <!-- VÍDEO INCORPORADO  -->
      <div style="background-color: #000000; width: 100%; display: none;" id="div_video">
          <div class="container-principal" style="background-color: black; text-align: center; padding: 1% 0;">
              <iframe class="detalhe-video" src="<%= VetProd(135,0) %>" frameborder="0" allowfullscreen></iframe><br />
              <a href="https://www.youtube.com/user/weightechbrasil/search?query=<%=VetProd(1,0)%>" style="color:#FFFFFF;" title="Veja mais em Youtube/WeightechBrasil" target="_blank" class="submenu"><img src="http://www.weightech.com.br/imgs/site/Logo_Youtube_color_horizontal.png" height="30" title="Canal WeightechBrasil no Youtube" alt="Youtube.com/WeightechBrasil" style="margin-bottom:5px;"/><br>Youtube.com/WeightechBrasil</a>
          </div>
      </div>
      <!-- -->
       
      <!-- PROJETO 3D -->
      <% if Len(VetProd(92,0)) > 1 Then %>
          <div class="container-principal" style="text-align: center; margin-top: 20px; display: none;" id="div_3d">
              <iframe style="width: 100%; height: 680px;" src="<%=VetProd(92,0)%>" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" frameborder="0"></iframe>
          </div>
      <%End if%>
      <!-- -->
       
      <!-- ESQUEMA DE LIGAÇÃO -->
      <div class="container-principal" style="display: none;" id="div_esquemafios">
          <h3>Esquema de liga&ccedil;&atilde;o dos fios</h3>
          <img src="admin/imgs/icones/<%= VetProd(22,0) %>" alt="Esquema de liga&ccedil;&atilde;o" title="<%= VetProd(136,0) %>&nbsp;<%= VetProd(2,0) %>&nbsp;<%= VetProd(1,0) %>" style="width:90%; max-width:400px;"/>
      </div>
      <!-- -->
       
      Tudo funciona, exceto o VÍDEO INCORPORADO (id="div_video").
      Por quê?!
       
      Obrigado!
    • Por Blogger
      Boa noite pessoal, eh meu primeiro topico aqui, preciso muito da ajuda de voces para resolver uma questao em meu site...
      Tenho um aplicativo que puxa algumas informacoes do meu site via http.. certo..
      uma delas sao 2 horarios, de abertura e de fexamento, supoe o seguinte:
       
      HorInicio: 8:00
      Horfim: 18:00     
      No php fica assim..
      (esse date(`w`) == 2) confere se hoje eh terca feira, tenho um desse para cada dia da semana)
      if(date('w') == 2){ // caso a hora atual for maior ou igual a hora inicio e menor ou igual ao fim ele manda true para meu app e ele entende que esta aberto if(date('H:i') >= $ini AND date('H:i') <= $fim){ echo true; } else { echo 0; } } Eu consegui configurar de uma forma que ele entenda que o estabelecimento fica aberto entre esses dois horarios, porem, surgiu a necessidade de colocar o seguinte:
      HorInicio:18:00
      Horfim: 2:00 (Sendo esse horario duas horas da madrugada do dia seguinte)
       
      a questao eh, como fazer meu codigo de php entender que essas 2:00 se trata do dia seguinte? pois da forma atual ele pega o intervalo entre 2:00 e 18:00 (3:00, 4:00, ate as 18:00)
      e eu gostaria que fosse das 18:00 para frente (19:00, 20:00, ate as 2:00)
       
      No meu banco esta definido apenas como tempo atual sem a data, eh possivel fazer sem cadastrar uma data no banco? apenas com o tempo... e se nao for possivel, como fazer isso ser automatico? toda vez que ele for entrar nesse php ele entender qual dia eh hoje e que fica aberto ate amanha ate que horas..
       
      Desculpe se ficou meio confuso.. mas qualquer duvida podem perguntar que eu vou responder, espero alguma luz, obrigado!
       
    • Por BryanSamuel
      Quando eu puxo a imagem ela vem deitada, uma imagem tirada em um Smartphone por exemplo, esse problema não acontece com todas as imagens, mas com as tiradas no meu celular por exemplo são todas. eu puxo somente o link da imagem do banco de dados mysql , a imagem fica salva em uma pasta separada, quando eu abro a imagem na pasta ela está na orientação normal, "em pé".
      Agradeço muito se alguém puder me ajudar.
    • Por Evair Peterson
      Boa noite.

      Estou montando um layout de 3 colunas, no qual as colunas esquerda e direita devem ter larguras fixas de 300px e a coluna central se ajustar no que sobra. Quanto ao layout está tudo OK, exatamente como preciso. Porém, no interior da DIV central, coloquei uma IMG, a qual quero que sempre ocupe 100% da altura dessa DIV e que ela fique centralizada no horizontal, não importando se a largura da DIV na qual esta IMG está contida tenha largura maior ou menor do que a largura da própria IMG. Quanto a ocupar 100% da altura está OK, não importa o como eu redimensione a janela do browser ela está se auto-ajustando como desejado. Porém, ela não está ficando centralizada na horizontal, como é o objetivo. Ela está ficando sempre alinhada à esquerda, exceto quando a largura da DIV é maior que a largura da IMG, aí neste caso sim a IMG está ficando perfeitamente centralizada da DIV contêiner, como é o objetivo. Agora, quando a largura da DIV é menor do que a largura da IMG, a IMG está ficando alinhada à esquerda, cortando partes da imagem somente no seu lado direito.

      Estou fazendo os testes em um desktop com resolução de 1920x1080 e a imagem que estou usando na IMG tem 1680x945px.
      Seguem os códigos HTML e CSS:
       
      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!doctype html> <html lang="pt-br"> <head>     <link type="text/css" rel="stylesheet" href="code/css/estudo.css"> </head>   <body>     <div id="main">         <div id="viewport_left" class="viewports">         </div>         <div id="viewport_center" class="viewports">             <img id="imagem_teste" src="imagem_teste_01.jpg">         </div>         <div id="viewport_right">         </div>     </div>     <div id="footer">     </div> </body> </html>  
      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 * {     margin: 0;     padding: 0;     text-align: center;     overflow: hidden; } #main {     width: 100%;     margin: 0; } #viewport_left {     min-height: calc(100vh - 25px);     margin-bottom: 25px;     width: 324px;     background-color: #333333;     position: fixed;     left: 0;     top: 0; } #viewport_center {     min-height: calc(100vh - 25px);     width: calc(100vw - 650px);     margin-bottom: 25px;     border-left: 1px solid #FFFFFF;     border-right: 1px solid #FFFFFF;     background-color: red;     position: absolute;     left: 50%;     top: 50%;         margin-left: calc(((100vw - 648px) / 2)* -1);         margin-top: calc((100vh / 2)* -1);     display: table;     overflow: hidden; } #imagem_teste {     max-height: calc(100vh - 25px);     position: absolute;     width: auto;     height: auto; } #viewport_right {     min-height: calc(100vh - 25px);     margin-bottom: 25px;     width: 324px;     background-color: #333333;     position: fixed;     right: 0;     top: 0; } #footer {     position: fixed;     bottom: 0;     left: 0;     height: 24px;     width: 100%;     background-color: #333333;     border-top: 1px solid #FFFFFF;     text-align: center;     font-family: Verdana, Geneva, sans-serif;     font-size: 12px;     color: #FFFFFF; }
      Alguém sabe como posso corrigir este problema?
      Desde já agradeço a toda e qualquer ajuda e colaboração.

      Grato, Evair Peterson.
×

Informação importante

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