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 daviassumpcao
      Estou buscando uma orientação ou referência para desenvolver algo similar ao formulário dessa página do iPhone https://www.apple.com/shop/buy-iphone/iphone-se ... quando selecionamos alguma opção, a div que contém o formulário centralizar na página e rola feito um carrossel. Estou completamente perdido com essa demanda que recebi... agradeço antecipadamente a todos que derem uma força. Abraço
    • By Alberto Nascimento
      Como faço que consiga colocar parágrafos no campo tipo "text" do formulário?
          <input name="Text1" style="width: 528px; height: 223px" type="text" /></form>
      Se eu pressiono ENTER automaticamente envia o formulário
      Como então consigo digitar ao preencher o formulário da forma abaixo?
       
    • By Marlonsantos
      Olá pessoal, eu estou começando meu curso de programação Full Stack e tive a tarefa de fazer uma página mais parecida possível com essa. Mas estou com muita dificuldade na hora de colocar essa <DIV> branca dentro dessa <DiV> preta. Eu já consegui colocar os links nas imagens do Facebook e do Instagram, porém não consigo alinhar elas no canto direito, meu <h1> vem junto... Muito obrigado pela atenção galera

    • By leandro123456789
      <div id="direito">
             
             <?php 
                      
                 $link = filter_input(INPUT_GET, 'link');
                 
                 $pag[1] = "../admin/home.php";
                 $pag[2] = "../admin/classes/Lista.php";
                 
              
              
                 if(!empty($link)){
                     
                     if(file_exists($pag[$link]))
                        
                      {
                         include $pag[$link];
                      
                      }
                        
                      else
                      { 
                         
                          include "home.php";
                      
                      }
                     
                 }else{
                     include "home.php";
                 }
              
              ?>
             
          </div>
       
       
      Estou tentando colocar a paginação do meu banco em $ pag [2] na minha página: ../admin/classes/Lista.php tem o seguinte código de paginação:

      <? php
          
          include_once ("../ admin / classes / ClassConexao.php");
          
          
          // verifique a página atual se informado no URL, caso contrário, ela será atribuída como 1ª página
          $ pagina = (isset ($ _ GET ['link = 2']))? $ _GET ['link = 2']: 1;
       
          // seleciona todos os itens da tabela
          $ cmd = "selecione * da categoria";
          $ produtos = mysqli_query ($ conn, $ cmd);
          
          // conta o total de itens
          $ total = mysqli_num_rows ($ produtos);
       
          // seta o número de itens por página, neste caso, 2 itens
          $ registros = 2;
       
          // calcula o número de páginas arredondando o resultado
          $ numPaginas = teto ($ total / $ registros);
       
          // variável para calcular o início da visualização com base na página atual
          $ inicio = ($ registros * $ pagina) - $ registros;
       
          // seleciona itens por página
          $ cmd = "selecione * da categoria limite $ inicio, $ registros";
          $ produtos = mysqli_query ($ conn, $ cmd);
          $ total = mysqli_num_rows ($ produtos);
           
          // exibe produtos selecionados
          while ($ produto = mysqli_fetch_array ($ produtos)) {
              echo $ produto ['id_categoria']. "-";
              echo $ produto ['categoria']. "-";
              echo $ produto ['ativo_categoria']. "<br />";
          }

      // Não sei como consertar esta parte para mostrar a paginação nesse $ pag [2] = "../admin/classes/Lista.php";
           
          // exibe paginação
          para ($ i = 1; $ i <$ numPaginas + 1; $ i ++) {
              
             echo "<a href='?pagina=$i'>". $ i. "</a>";
          }
                  
      ?>
      Meu menu fica assim:

      <div id = "sessao"> Categoria </div>
         <ul>
             
            
             <li> <a href="index.php?link=3"> Cadastro </a> </li>
             <li> <a href="index.php?link=2"> Listar / Editar </a> </li>
         
        </ul>
×

Important Information

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