Jump to content
  • 0
ewertonmartiny

Ajuda com background, div e alinhamento

Question

Estou organizando uma página em HTML e estou com o seguinte problema: as divs não estão ficando na posição centralizada da página e já usei os recursos que conheço, mas nenhum deles funcionou. Apenas uma div funcionou com o "text-align:center", mas tentei aplicar as mesmas características, porém, sem sucesso.

 

Citar

<style type=text/css>

 

.semana{
    font-size:13px;
    font-style:none;
    letter-spacing:1px;
    margin-bottom:-1px;
    line-height:17px;
    width:380px;
    padding-top:10px;
    padding-bottom:4px;
    padding-left:7px;
    padding-right:7px;
    background:#fff;
    -webkit-transition: all .5s;
    text-align:center;
    text-transform:lowercase;
}


.musica{
    font-size:14px;
    font-style:none;
    letter-spacing:0.5px;
    width:380px;
    line-height:19px;
    padding-top:0px;
    padding-bottom:5px;
    padding-left:7px;
    padding-right:7px;
    font-family: "Product Sans";
    background:#fff;
    -webkit-transition: all .5s;
    text-align:center;
}

.album{
    font-size:12px;
    font-style:italic;
    letter-spacing:1px;
    width:380px;
    padding-top:2px;
    padding-left:7px;
    padding-right:7px;
    background:#fff;
    -webkit-transition: all .5s;
    text-align:center;
}

.pagina{
    font-size:14px;
    letter-spacing:1px;
    padding-top:2px;
    padding-left:7px;
    width:550px;
    margin-left:auto;
    margin-right:auto;
    font-style:none;
    padding-right:7px;
    background:transparent;
    -webkit-transition: all .5s;
    text-align:justify;
}

.sobre{
    width:380px;
    font-size:12px;
    letter-spacing:1px;
    margin-bottom:10px;
    padding-top:0px;
    padding-bottom:5px;
    padding-left:7px;
    padding-right:7px;
    border-bottom:1px solid #eeeeee;
    background:#fff;
    color: #aaa;
    -webkit-transition: all .5s;
    text-align:center;
}

 

.fundo-et{
    width:auto;
    height:auto;
    margin-left:auto;
    margin-right:auto;
}

.esquerda-et{
    font-size:13px;
    background:url('https://68.media.tumblr.com/612529a9f9b4a48d181d4095b72b0bab/tumblr_olf0hkAm7Q1smrp6uo2_r6_1280.png') no-repeat, center center;
    font-style:none;
    letter-spacing:0px;
    width:1000px;
    height:auto;
    padding-top:20px;
    padding-bottom:20px;
    padding-left:50px;
    font-family: "Product Sans";
    -webkit-transition: all .5s;
    text-align:center;
}

.fundo-rise{
    background:#919bde;
    width:auto;
    height:auto;
    margin-left:auto;
    margin-right:auto;
}

.direita-rise{
    font-size:13px;
    background:url('https://68.media.tumblr.com/e1f003935d218d886e342517d8ed05c5/tumblr_olf0hkAm7Q1smrp6uo1_r7_1280.png') no-repeat, center center;
    font-style:none;
    letter-spacing:0px;
    width:1000px;
    height:auto;
    padding-top:20px;
    padding-bottom:20px;
    padding-left:570px;
    font-family: "Product Sans";
    -webkit-transition: all .5s;
    text-align:center;
}
</style>

</head>

<body>

<div class="fundo"><center><div class="esquerda-et">
<div class="h2">Músicas com mais semanas na posição No. 1</div>

<div class="semana"><b>
10 semanas</b></div>

<div class="musica"><b>
E.T. </b>
Katy Perry e Kanye West
</div>
<div class="sobre"></div>


<div class="semana"><b>
7 semanas</b>

</div><div class="musica"><b>
DARK HORSE </b>
Katy Perry e Juicy J
</div>
<div class="sobre"></div>


<div class="semana"><b>
5 semanas</b>

</div><div class="musica"><b>
ON THE METRO</b>
Girls Aloud</div>

<div class="musica"><b>
RISE</b>
Katy Perry</div>
<div class="sobre"></div>


<div class="semana"><b>
4 semanas</b>

</div><div class="musica"><b>
BURNING DESIRE</b>
Lana Del Rey</div>

<div class="musica"><b>
YOUTH</b>
Foxes</div>

<div class="musica"><b>
BABY DON'T LIE</b>
Gwen Stefani</div>

<div class="musica"><b>
BACK TO BLACK</b>
Beyoncé e André 3000</div>
<div class="sobre"></div>


</div></center></div>

<div class="fundo"><center><div class="direita-rise">
<div class="h2">Músicas com mais semanas consecutivas na posição No. 1</div>

<div class="semana"><b>
5 semanas</b><br>15 de julho-12 de agosto de 2016

</div><div class="musica"><b>
RISE </b>
Katy Perry
</div>
<div class="sobre"></div>
    


<div class="semana"><b>
4 semanas</b><br>25 de dezembro de 2015-15 de janeiro de 2016

</div><div class="musica"><b>
ON THE METRO </b>
Girls Aloud
</div>
<div class="sobre"></div>


<div class="semana"><b>
3 semanas</b><br>20 de maio-3 de junho de 2011

</div><div class="musica"><b>
E.T.</b>
Katy Perry e Kanye West</div>

<div class="semana">27 de junho-11 de julho de 2014</div>
<div class="musica"><b>
YOUTH</b>
Foxes</div>
<div class="sobre"></div>

</div></center></div>

</body>

 

A <div> com o nome "esquerda-et" fica centralizada na página, mas a "direita-rise" e as demais não ficam. Tentei colocar ambas dentro de divs individuais, e na primeira funcionou.

 

Share this post


Link to post
Share on other sites

3 answers to this question

Recommended Posts

  • 1

Olá @ewertonmartiny,
Creio que o único problema foi um 7 entre o "50" no padding da div que você não conseguiu visualizar dai ficou 570px.
 

Eu coloquei uma div específica para o texto que fica por cima da imagem
(<div class="texto-esquerda"><div class="texto-direita">) daí você pode fazer as alterações apenas pelo padding em questão.

Veja se este código lhe ajuda:

Citar

<!doctype HTML>
<html>
    <head>
    <meta charset="utf-8" />
    <style type=text/css>

    *{
        margin: 0 auto;
        padding: 0;
    }    

    .semana{
        font-size:13px;
        font-style:none;
        letter-spacing:1px;
        margin-bottom:-1px;
        line-height:17px;
        width:380px;
        padding-top:10px;
        padding-bottom:4px;
        padding-left:7px;
        padding-right:7px;
        background:#fff;
        -webkit-transition: all .5s;
        text-align:center;
        text-transform:lowercase;
    }

    .musica{
        font-size:14px;
        font-style:none;
        letter-spacing:0.5px;
        width:380px;
        line-height:19px;
        padding-top:0px;
        padding-bottom:5px;
        padding-left:7px;
        padding-right:7px;
        font-family: "Product Sans";
        background:#fff;
        -webkit-transition: all .5s;
        text-align:center;
    }

    .album{
        font-size:12px;
        font-style:italic;
        letter-spacing:1px;
        width:380px;
        padding-top:2px;
        padding-left:7px;
        padding-right:7px;
        background:#fff;
        -webkit-transition: all .5s;
        text-align:center;
    }

    .pagina{
        font-size:14px;
        letter-spacing:1px;
        padding-top:2px;
        padding-left:7px;
        width:550px;
        margin-left:auto;
        margin-right:auto;
        font-style:none;
        padding-right:7px;
        background:transparent;
        -webkit-transition: all .5s;
        text-align:justify;
    }

    .sobre{
        width:380px;
        font-size:12px;
        letter-spacing:1px;
        margin-bottom:10px;
        padding-top:0px;
        padding-bottom:5px;
        padding-left:7px;
        padding-right:7px;
        border-bottom:1px solid #eeeeee;
        background:#fff;
        color: #aaa;
        -webkit-transition: all .5s;
        text-align:center;
    } 

    .fundo-et{
        width:auto;
        height:auto;
        margin-left:auto;
        margin-right:auto;
    }

    .esquerda-et{
        font-size:13px;
        background:url('https://68.media.tumblr.com/612529a9f9b4a48d181d4095b72b0bab/tumblr_olf0hkAm7Q1smrp6uo2_r6_1280.png') no-repeat, center center;
        font-style:none;
        letter-spacing:0px;
        width:1000px;
        height:auto;
        padding-top:20px;
        padding-bottom:20px;
        padding-left:50px;
        font-family: "Product Sans";
        -webkit-transition: all .5s;
        text-align:center;
    }

    .texto-direita{
        position: relative;
        padding: 0px 0px 0px 400px;
    }
    
    .texto-esquerda{
        position: relative;
        padding: 0px 530px 0px 0px;
    }
    
    .fundo-rise{
        background:#919bde;
        width:auto;
        height:auto;
        margin-left:auto;
        margin-right:auto;
    }

    .direita-rise{
        font-size:13px;
        background:url('https://68.media.tumblr.com/e1f003935d218d886e342517d8ed05c5/tumblr_olf0hkAm7Q1smrp6uo1_r7_1280.png') no-repeat, center center;
        font-style:none;
        letter-spacing:0px;
        width:1000px;
        height:auto;
        padding-top:20px;
        padding-bottom:20px;
        padding-left:50px;
        font-family: "Product Sans";
        -webkit-transition: all .5s;
        text-align:center;
    }
    </style>
    </head>

    <body>
    <div class="fundo">
        <center>
            <div class="esquerda-et">
                
                <div class="texto-esquerda">
                    <div class="h2">Músicas com mais semanas na posição No. 1</div>

                    <div class="semana"><b>10 semanas </b></div>
                    <div class="musica"><b>E.T. </b>Katy Perry e Kanye West</div>
                    <div class="sobre"></div>

                    <div class="semana"><b>7 semanas </b></div>
                    <div class="musica"><b>DARK HORSE </b>Katy Perry e Juicy J</div>
                    <div class="sobre"></div>

                    <div class="semana"><b>5 semanas </b></div>
                    <div class="musica"><b>ON THE METRO </b>Girls Aloud</div>
                    <div class="musica"><b>RISE </b>Katy Perry</div> 
                    <div class="sobre"></div>

                    <div class="semana"><b>4 semanas </b></div>

                    <div class="musica"><b>BURNING DESIRE </b>Lana Del Rey</div>

                    <div class="musica"><b>YOUTH </b>Foxes</div>

                    <div class="musica"><b>BABY DON'T LIE </b>Gwen Stefani</div>

                    <div class="musica"><b>BACK TO BLACK </b>Beyoncé e André 3000</div>
                    <div class="sobre"></div>
                </div>

            </div>
        </center>
    </div>

    <div class="fundo">
        <center>
            <div class="direita-rise">
                
                <div class="texto-direita">
                    <div class="h2">Músicas com mais semanas consecutivas na posição No. 1</div>

                    <div class="semana"><b>5 semanas </b><br>15 de julho-12 de agosto de 2016</div>
                    <div class="musica"><b>RISE </b>Katy Perry</div>
                    <div class="sobre"></div>

                    <div class="semana"><b>4 semanas </b><br>25 de dezembro de 2015-15 de janeiro de 2016</div>
                    <div class="musica"><b>ON THE METRO </b>Girls Aloud</div>
                    <div class="sobre"></div>

                    <div class="semana"><b>3 semanas </b><br>20 de maio-3 de junho de 2011</div>
                    <div class="musica"><b>E.T. </b>Katy Perry e Kanye West</div>

                    <div class="semana">27 de junho-11 de julho de 2014</div>
                    <div class="musica"><b>YOUTH </b>Foxes</div>
                    <div class="sobre"></div>
                </div>
                
            </div>
        </center>
    </div>
    </body>
</html>

 

 

Share this post


Link to post
Share on other sites
  • 1

Eu não tenho tanto conhecimento, contudo, naquela situação creio que você definiu o padding da div que se somou com o tamanho da imagem daí ultrapassou a área visível para o usuário, ou seja, o padding acabou se tornando uma div com 570px somado ao tamanho da imagem.

 

Caso você não tenha entendido coloque naquela sentença um background-color: #ff0000; que você verá de fato o que ocorre.

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 lucasseribeiro
      Bons dias, fórum!
       
      Procurei uma área específica para o JavaFX e não encontrei... Estou aprendendo a usar essa biblioteca, está ficando interessante, se assemelha às tecnologias web com as quais tenho muita familiaridade pois uso há anos. Mas o CSS do JavaFX é diferente daquele do consórcio W3, e não estou encontrando material para entender esse -fx-CSS... A referência CSS da Oracle (https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html) é obscura e não contém as infos que preciso, apesar de esclarecer muitas coisas... Passa uma impressão de que eles não querem que todos saibam!
      Por exemplo: ao estilizar uma menu-bar, mudei seu background, alterei a cor da fonte dos menus, mas eles ficaram colados uns nos outros, e eu não entendi como escolher a propriedade CSS adequada do FX para controlar a distância dos menus. Pude usar um padding, mas ao executar, quando abrimos um menu, os outros ainda são empurrados pois ainda que suas inscrições estejam separadas, os botões do menu ainda estão colados. O tutoriais não abordam o CSS do FX em profundidade, focam-se nos objetivos dos projetos e suas abordagens...
      Rsrs, podia ter no W3Schools... Alguém pode me ajudar com isso???
       
      Grato desde já!
       
      Lucas Ribeiro
    • 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 Sapinn
      Estou com dificuldade para chamar um arquivo CSS usando a configuração de um arquivo php. O bootstrap também não surte efeito na paginas
       
      Vejam só
      Config.php
       
      <?php define('APP_NOME','Projeto GIBI'); define('URL','http://localhost/bora_php');  
       
      index.php
       
      <?php include './../app/configuracao.php'; include './../app/Libraries/Rota.php'; include './../app/Libraries/Controller.php'; ?> <!DOCTYPE html> <html lang="pt-br"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link rel="stylesheet" href="<?=URL?>/public/css/estilos.css">     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" >         <title><?= APP_NOME?></title> </head> <body>     <?php         $rotas = new Rota();     ?>     <script src="https://code.jquery.com/jquery-3.5.1.min.js" ></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" ></script> <script src="<?=URL?>/public/css/script.js" ></script> </body> </html> estilo.css
      html{     background-color: red; }  
      Estou tentando seguir a padronização MVC(que por sinal eu tenho certa dificuldade), então não consigo achar onde estou errando
    • By luiz monteiro
      Tudo bem pessoal!
      Estou há alguns dias pesquisando e usando diferentes dicas para resolver o problema para que a borda inferior de 1px aplicada em quatro boxes sejam exibidas igualmente no chrome, safari, mozilla, opera e IE.
      A estrutura é a seguinte:
       
      ==========CSS
       
      html, body, span, p, form, img, a, ul, ol, li, table, tr, td, div
      {
          margin: 0px;
          padding: 0px; 
          border:none; 
          outline:none;
          list-style-type:none;
          box-sizing: border-box;
      }
       
      *
      {
          font-size: 14px;
          font-family: verdana, arial;
      }
       
      .container
      {
          width: 608px;
          height: 421px;
          margin: auto;
          margin-top: 50px;
          overflow: hidden;
      }
       
      .box_one, .box_two
      {
          display: inline-block;
          width: 300px;
          height: 250px;
          overflow: hidden;
      }
       
      .border_bottom
      {
          border-bottom: #f5f5f5 solid 1px;
      }
       
      .border_bottom_white
      {
          border-bottom: #fff solid 1px;
      }
       
      .espaco
      {
          margin-right: 2px;
      }
       
      .box_tree, .box_four, .box_fift
      {
          display: inline-block;
          width: 198px;
          height: 149px;
          margin-top: 20px;
          overflow: hidden;
      }
       
      .vertical
      {
          vertical-align: top;
      }
       
       
       
      ============HTML
       
         <content>

              <div class="container">
       
                  <div class="box_one border_bottom_white espaco vertical">box one in first line</div>
                  <div class="box_two border_bottom vertical">box two in first line</div>
                  <div class="box_tree espaco border_bottom vertical">box tree in second line</div>
                  <div class="box_four espaco border_bottom vertical">box four in second line</div>
                  <div class="box_fift border_bottom vertical">box fift in second line</div>
            
          </div>
       
       </content>
       
      O que ocorre é que cada navegador exibe de uma maneira diferente, mesmo resetando o box-sizing: border-box;  o font-size e o font-family.
      Essa configuração do CSS foi a mais próxima do desejável.
      A estrutura do HTML precisa ser essa aí.
      Agradeço desde já.
       
       
       
       
×

Important Information

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