Jump to content
thenerb

Como centralizar o texto de uma div em cima de outra div com imagem

Recommended Posts

Eu estou fazendo um html com uma imagem de fundo com o atributo background e utilizei a tag div com o intuito de colocar uma imagem centralizada e dentro dessa imagem e texto, porém o texto não está sobrepondo a imagem,segue o código:

 

 

<!DOCTYPE.html>
<html>
  <head>
    <title>testando</title>
    <link rel='icon' href='favicon (2).ico' type='image/x-icon' >
    <meta charset=utf-8>
  </head>
  <body background="_Space Love_, de Scott Brian madeiras.jpg" >
    <font size="4" color="lavender" face="bradlay hand ITC regular">
      <p style="text-shadow: 0.1em 0.1em 0.15em #ffffff">datas
             <br/>
        <div style="position:relative; z-index:-1 " align="center" >

         <img width="45%" height="1000px"src="img_como_colocar_fundo_preto_nas_fotos_16171_orig.jpg" />
        </div>
          <div style="position:relative; z-index:1; width="100%";heght="100%" align="center">
             <p align="center"style="text-shadow: 0.1em 0.1em 0.15em #ffffff "> teste
             </p>
          </div>

        
    </font>
  </body>
</html>

Share this post


Link to post
Share on other sites

@thenerb Pelo que entendi você quer centralizar dentro da imagem os textos/palavras que você quer. 

Sugiro que você leia mais sobre CSS e HTML: 

Nesses sites, você pode aprender bastante coisa e acrescentar ao seu projeto.

Importante, que você já aprenda a separar o CSS para não ficar muito código em suas tags e você não saber mais o que está fazendo cada uma. Sugiro, também, que dê nomes fáceis a suas imagens que queira colocar como fundo ou em divs, e também colocar o caminho correto para que a tag possa "achar". Espero que tenha entendido, e qualquer coisa pode chamar.

<!DOCTYPE.html>
<html>
  <head>
    <title>testando</title>
    <link rel='icon' href='favicon (2).ico' type='image/x-icon' >
    <meta charset=utf-8>
    <style>
      .container {
        /*Alinha tudo que tiver dentro da div com a class container,
          conforme como ela está sendo configurada.
          Sugiro alinhar conforme sua tela, ajustando os campos de margin e left;*/
        position: absolute;
        left:30%;
        margin-left:-110px;
        margin-top:40px;
        color: lavender;
      }
      #image{
        /*Alinha a img de fundo preto ao centro da tela.
          Sugiro alinhar a sua tela, caso fique fora do padrão;
          Só acrescentar ou diminuir os a altura e largura*/
        height: 85%;
        width: 100%;
      }
      #texto{
        /*Tudo que receber o id texto irá ser configurado conforme descrito abaixo,
            caso queira acrescentar algo a sua fonte, pode adicionar aqui.*/
        position: absolute;
        font-size: 32px;
        left: 15px;
        top: 15px;
        text-align: justify;
      }
      #personalizado {
        /*Se tiver algumas palavras específicas que queira chamar a atenção no texto,
          sugiro colocá-las entre labels e acrescentar a id personalizado*/
        text-shadow: 0.1em 0.1em 0.15em #ffffff
      }
      #fundo{
        /*Aqui é para colocar a imagem de fundo na tela.*/
        background-image: url(imagens/spacelove.jpg);
      }
    </style>
  </head>
  <body id="fundo" >
    <div class="container" >
      <img id="image" src="imagens/img_como_colocar_fundo_preto_nas_fotos_16171_orig.jpg"  align="center"/>
      <label id="texto">TESTE</label>
      <p id="texto"> teste <br>
        <label id="personalizado"> datas </label>
        <br>
        Aqui posso digitar o texto que quiser... Se eu quiser ir para outra linha, acrescento a tag &lt;br&gt; <br>
        E aqui estou eu em outra <label id="personalizado"> linha </label>
      </p>
    </div>
  </body>
</html>

 

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 Anonicah
      Olá preciso de ajuda com esse exercício. Montei até a parte de formulário + validação de javascrip no dreamweaver mas buguei com o resto. O que eu fiz:
       

      <html>
      <head>
      <title> Formulário CPF validado com Java Script </title>
          
          <script language="javascript" type="text/javascript">
      function validar() {
      var cpf = form1.cpf.value;
          
      if (cpf == "") {
      alert('Preencha o campo com seu cpf');
      form1.cpf.focus();
      return false;
      }
          
      }
      </script>
          
          
      </head>
      <body>
      <form name="form1" action="enviar.php" method="post">
      CPF:
      <input name="cpf" type="text"><br /><br />
      <input type="submit"  onclick="return validar()">
      </form>
      </body>
      </html>
       
       
      EXERCÍCIO
      Criar um formulário simples em html com um único campo CPF;
      Fazer uma validação em javascript antes de fazer o post;
      Consumir o WS https://bi.vidaclass.com.br/utils para consultar informações do CPF enviado pelo form;
      Do retorno obtido exibir na tela:
      Nome, email, telefone
      Se tem compra em saude: Sim | Não
      Quantas compras: (5) ex.
      Se tem farma: Sim | Não
      Se tem dependente: Sim | Não
      Qtd. de dependentes: (2) ex.

      Obtem o token para consumir os endpoints;
      https://bi.vidaclass.com.br/auth
      {
          "company_id": 1,
          "username": "webmaster@vidaclass.com.br",
          "password": "Teste20170705"
      }
      Endpoint para consultar o CPF
      https://bi.vidaclass.com.br/utils
      {
          "action": 4,
          "key": {
              "cpf": 25383193820
          }
      }
    • By iagomonteiro
      Estou criando um jogo de cartas em web, o jogo é bem estilo HS, e estou tendo problemas para adicionar condições de movimentação no drag and drop. Como vocês podem ver eu tenho uma variável mana, e a movimentação das cartas só seria possível de acordo com ela, porém quando adiciono as condições o D&D acaba nem se movimentando mais, pensei em chamar cada função do d&d dentro de uma condição, mas também não funcionou, alguém pode ajudar?
       
      JS
      // Jogador 1
      const fillplace1 = document.querySelector('#fillplace1');
      const fillplace2 = document.querySelector('#fillplace2');
      const fillplace3 = document.querySelector('#fillplace3');
      var fill;
      const empties = document.querySelectorAll('.empty');
      fillplace1.addEventListener('dragstart', enterstart);
      fillplace2.addEventListener('dragstart', enterstart);
      fillplace3.addEventListener('dragstart', enterstart);
      for (const empty of empties) {
          empty.addEventListener('dragover', dragOver);
          empty.addEventListener('dragenter', dragEnter);
          empty.addEventListener('dragleave', dragLeave);
          empty.addEventListener('drop', dragDrop);
      }
      function enterstart(){
          fill = this;
      }
      function dragOver(e) {
          e.preventDefault();
      }
      function dragEnter(e) {
          e.preventDefault();
          this.className += ' hovered';
      }
      function dragLeave() {
          this.className = 'empty';
      }
      function dragDrop(id) {
          this.className = 'empty';
          this.append(fill);
      }
       
      HTML
      <link rel="stylesheet" href="../css/jogar.css" />
       
      <div id="barraGeneral">
          <img src="../imagens/Campo/barraGeneralalfa.png" id="imggeneral" />
      </div>
       
      <div id="persona">
          <img src="../imagens/Personagem/cucapersonagem.png" id="imgpersonagem" />
      </div>
       
      <button id="btpassar" onclick="cont();">Passar Rodada</button>

      <H1 id="campomana">1</H1>
       
      <!-- Mesa das cartas jogador 1-->
      <div class="empty" id="emptyplace1">
      </div>
      <div class="empty" id="emptyplace2">
      </div>
      <div class="empty" id="emptyplace3">
      </div>
      <div class="empty" id="emptyplace4">
      </div>
      <div class="empty" id="emptyplace5">
      </div>
       
      <!-- Mão do jogador 1 -->
      <div class="emptyhand1">
          <div class="fill" draggable="true" id="fillplace1">
              <img src='../imagens/Sorteio/aa.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand2">
          <div class="fill" draggable="true" id="fillplace2">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand3">
          <div class="fill" draggable="true" id="fillplace3">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
    • By Dallas20
      Então pessoal,  estou fazendo um pequeno projeto para me aperfeiçoar em javascript e acabei me deparando com o seguinte problema. Eu queria pegar o valor de um input quando o usuário desse um click em um botão e isso foi simples de fazer, porém ao utilizar conceitos de POO e aplicando classes no javascript não consigo fazer essa ação. Gostaria de saber se isso é possível? E como fazer?
       
      Segue o code HTML:
      <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="author" content="Dallas"> <meta http-equiv="refresh" content="1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="../CSS/withdrawal.css" rel="stylesheet"> <script src="../javascript/withdrawal.js"></script> <title>Banco do Brasil</title> </head> <body> <h1>Quanto deseja sacar ?</h1> <input type="number" id="cashInReal"> <button type="button" onclick="alter()"> AQUI</button> </body> </html> code javascript:
      class withdrawal { alter() { alert(document.getElementById('cashInReal').value); } } Desde já muito obrigado.
       
      Att. Dallas
    • By vinihhylian0103
      Olá, Boa Noite.
      Estou usando o Iframe pra exibir meu form de login na minha página central, porém, quando eu clico no botão login, o profile parece somente no iframe, teria como eu fazer o profile ser redirecionado  na página principal.
       
      Segue o código:
        <div class="modal fade" id="modalLRFormDemo2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">     <div class="modal-dialog cascading-modal" role="document">       <!--Content-->       <div class="modal-content">                            <iframe marginwidth="50" height="500px" width="500px" src="CADASTROS_LOGINS\LOGIN\index.html"> Seu navegador não suporta frames )= </iframe>                 <center><button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Fechar</button></center>                 <br>               </div>             </div>             <!--/.Panel 8-->           </div>         </div>       </div>  
    • By Emilio Saymon
      tenho um site que precisa que assim que eu aperte um botão ele verifiquei se a variavel sala for sala 1 ele abre no modal da sala1 se não abre no modal da sala2. Dei uma pesquisada e vi que da pra fazer com a função onclik(), mas não tenho noção como fazer. Aqui vai o código.
      botão <td><a href="#" class="btn btn-primary" data-toggle="modal" data-target="#modalLoginForm">XXX</a></td> <!-- sala 1 --> <div class="modal-body mx-3"> <div class="md-form mb-4"> <form method="POST" action="valida.php"> <h6>Sala 1</h6> <input type="password" class="form-control validate" name="senha"> </div> </div> <button type="submit" class="btn btn-primary" name="enviar">Entrar</button> </form> </div> </div> </div> </div> </div> <!-- sala 2 --> <div class="modal fade" id="modalLoginForm2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header text-center"> <h4 class="modal-title w-100 font-weight-bold">Senha</h4> <button type="btn-primary" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body mx-3"> <div class="md-form mb-4"> <form method="POST" action="valida.php"> <p>Sala 2</p> <input type="password" class="form-control validate" name="senha2"> </div> </div> <div class="modal-footer d-flex justify-content-center"> <button type="submit" class="btn btn-primary" name="enviar1">Entrar</button> </form> </div> </div> </div> </div>  
×

Important Information

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