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 lezão
      Boa Tarde, pessoal!
      Td bem com vcs?
      Olha eu ai novamente!
      Pesquisei e  fucei e nada, não consegui nada, não de ficar enchendo o saco de vcs, mas qnd a corda aperta, corro aqui para um help.
      Estou com um código que roda perfeitamente, mas qnd eu preciso de um posicionamento, naun vai.
       
      vejam na imagem abaixo para entender?
       
       
      Vejam que o valor e os outros item abaixo dele, dependendo da quantidade de texto ele fica em um ponto.
      Gostaria que ele ficasse, com muito ou pouco texto na posição da 3ª imagem.
      Será possivel isso ?
       
      meu codigo CSS:
      .banner img { max-width: 100% !important; height: 200px; } .container-cards { flex-wrap: wrap; display: inline-flex; width: 400px; align-items: center; justify-content: center; } .box-container { /*border: 1px solid red;*/ display: flex; background: #fcfcfc; font:80%/1 Arial; font-size: 14px; border-radius: 5px; align-items: center; width: 100%; height: 80px; border: 0px solid #AAAAAA; margin: 5px; background-color: #fcfcfc; -webkit-box-shadow: 1px 3px 5px rgba(250, 242, 242, 0.77); -moz-box-shadow: 1px 3px 5px rgba(250, 242, 242, 0.77); box-shadow: 1px 3px 5px rgba(250, 242, 242, 0.77); } .box-image { width: 20%; align-items: center; display: flex; height: 100%; justify-content: left; border-right: 0px solid #AAAAAA; } .box-container .box-image img { width: 75px; height: 75px; } .box-container .box-content { align-items: left; display: flex; height: 75%; justify-content: left; flex-direction: column; padding: 10px; } .title { margin-bottom: 10px; font-size: 16px font-weight: bold; color: #000; } .description { font:80%/1 Arial; font-size: 14px; color: #8a8686; top: 50px; left: 50px; } Codigo HTML:
      <div class="box-container"> <section class=box-image>&nbsp; <img src="<?php echo $Foto_produto; ?>" style="border-radius:10px" width="250px" height="230px"/> </section> <section class="box-content"> <label class="title"> <div align="left"><b><?php echo strtoupper($Nome_produto); ?></b></div></label> <span class="description"><div align="left"><?php echo $Descricao_produto; ?></div></span> </section> <section class=box-image-2> <label class="title"><div align="center"><b><?php echo($Valor_produto) ?></b></div></label> <span class="description"> <div align="left"><br/> <input type="checkbox" name="sabor" id="evento_value2" value="<?php echo $Valor_produto; ?>"> <input type="hidden" name="vl_sabor" value="<?php echo $Valor_produto; ?>"> <SELECT name="qntdade" width="2"> <option value="1">1</option> <option value="2">2</option> </SELECT> </div></span> </section> </div> Desde ja muito obrigado!
    • By lezão
      Bom dia, meus amigos!
      Td bem com vcs?
      Estou precisando de mais uma ajudinha de vcs.
      Tenho um codigo aqui e não estou acertando a mão nele, estou apanhando desse tal de media queries rsrsrs.
      Vejam os exemplos de como estão os meus codigos:
       
      Gostaria que no Desktop ficasse como o Mobile, e os dois centralizado na pagina, notem que não estão.
       
      segue meu codigo:
      <style type="text/css"> /* My opinion */ body { background-image: url(imagens/slide_1.jpg); margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } /* Section clientes */ .container-cards { flex-wrap: wrap; display: inline-flex; width: 100%; align-items: center; } .box-container { /*border: 1px solid red;*/ display: flex; background: #FFFFFF; font:80%/1 Arial; font-size: 14px; border-radius: 5px; align-items: center; width: 100px; height: 120px; border: 2px solid #AAAAAA; margin: 10px; box-shadow: 0 0 10px #ddd; } .box-container .box-image img { width: 93px; height: 93px; text-align: center; } .title { margin-bottom: 10px; font-size: 16px; font-weight: bold; color: #000; } .description { font-size: 14px; color: #8a8686; } </style> </head> <body> <!--My option--> <div align="center"> <img src="imagens/logo.png" width="200px" height="192px"/></div> <br/> <div align="center"> <div class="container-cards"> <div class="box-container" onclick="location.href='cardapio_pizza.php'" style="cursor:pointer;" align="center"> <section class="box-image"> &nbsp;<img src="imagens/banner_pizzas.png"/><br/> <label class="title"><b>Pizzas</b></label> </section> </div> <div class="box-container" onclick="location.href='cardapio_pizza_cone.php'" style="cursor:pointer;"> <section class="box-image"> <img src="imagens/banner_pizzas_cone.png"/><br/> <label class="title"><b>Pizzas no Cone</b></label> </section> </div> <div class="box-container" onclick="location.href=''" style="cursor:pointer;"> <section class="box-image"> <img src="imagens/banner_porcoes.png"/><br/> <label class="title"><b>Porções</b></label> </section> </div> <div class="box-container" onclick="location.href='cardapio_lanches.php'" style="cursor:pointer;"> <section class="box-image"> <img src="imagens/banner_lanches.png"/><br/> <label class="title"><b>Lanches</b></label> </section> </div> <div class="box-container" onclick="location.href='cardapio_fritas.php'" style="cursor:pointer;"> <section class="box-image"> <img src="imagens/banner_cone_fritas.png"/><br/> <label class="title"><b>Cone de fritas</b></label> </section> </div> <div class="box-container" onclick="location.href='cardapio_refri.php'" style="cursor:pointer;"> <section class="box-image"> <div align="center"> <img src="imagens/banner_refri_sucos.png"/><br/> <label class="title"><b>Bebidas</b></label> </div> </section> </div> </div> <div align="center"> <font size="2" color="#FFFFFF" face="arial"> <p>Horário de atendimento:<br/>Segunda á Sexta das 19:00 as 22:00<br/>Sextas, Sábados e Domingos das 19:00 as 23:30</p> </font> </div>  
       
    • By fideles
      Fala pessoal, tudo tranquilo?
       
      Tem uma dúvida e gostaria de uma sugestão.
      Tenho um codigo que faz um upload de um arquivo CSV, gostaria que ao importar ele puxe os dados da descrição em outro banco de dados, seria possivel ?
       
      O codigo abaixo seria, o usuario monta a planilha e coloca somente o codigo do item e a quantidada e faz o upload, mais dessa forma o codigo grava no banco somente o que tem na planilha.
       
      O que precisaria seria,  o usuario monta a planilha e coloca somente o codigo do item e a quantidada e faz o upload e nesse momento do upload, ele puxe a descrição e unidade do item cadastro em outra tabela antes de gravar o processo abaixo. 
       
      <?php //Aciona o codigo somente se clicar no botão enviar if($_POST){ //esconde os erros do navegador error_reporting(E_ALL ^ E_NOTICE); // inclui a conexão include_once('../configuracoes/conexao/config_4.php'); //cria as varias para pegar o arquivo e o nome do arquivo $arquivo = $_FILES["file"]["tmp_name"]; $nome = $_FILES["file"]["name"]; $ext = explode(".", $nome); $extencao = end($ext); //cria uma condição para validar a extenção do arquivo. if($extencao != "csv"){ echo "<script>alert('Extens\u00e3o inv\u00e1lida, verifique o arquivo.');</script>"; } else{ //se a estensao for valida, executa a função abaixo $objeto = fopen($arquivo, 'r'); //abre o arquivo e le os dados while(($dados = fgetcsv($objeto, 1000, ",")) !== FALSE )//faz um loop em todo arquivo. { $item = $dados[0]; $quantidade = $dados[1]; //exibe os dados na tela do usuario echo "<table border='1'>"; echo "<tr>"; echo "<td width='250px'>$nome</td>"; echo "<td width='500px'>$email</td>"; echo "</tr></table>"; $result = mysql_query("INSERT INTO emails (item, quantidade) VALUES('$nome','$email')"); } if($result){ echo "Dados inseridos com sucesso"; } else{ echo mysql_error();//"Erro ao inserir os dados"; } } } ?>  
    • By fideles
      Pessoal, tenho uma dúvida, talvez muito boba.
       
      Tenho um formulario com os input em array, e um alert javascript mostrando que foi registrado com suceso.
       
      O problema maior é que se for gravado 30 registro no banco de dados, ele mostra 30 alertas de registro gravado com suceso, por acaso é possivel limitar esse tanto de alerta para somente 1 independente da quantidade que ele grava no banco ?
    • By Sapinn
      Como mudar o cor da letra de um active em um menu no boostrtrap
       
      <nav class="navbar navbar-expand-lg navbar-light bg-light">         <div class="container">           <a class="navbar-brand" href="#">             <img src="icone.png" height="60px" alt="Logo">           </a>           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">             <span class="navbar-toggler-icon"></span>           </button>                  <div class="collapse navbar-collapse d-lg-flex justify-content-end" id="navbarSupportedContent" style="font-size: 20px;">             <ul class="navbar-nav" >               <li class="nav-item active" >                 <a class="nav-link" href="#">Inicio</a>               </li>               <li class="nav-item" >                 <a class="nav-link" href="#">Login</a>               </li>               <li class="nav-item">                 <a class="nav-link" href="#">Aluno</a>               </li>               <li class="nav-item">                 <a class="nav-link" href="#">Professor</a>               </li>               <li class="nav-item">                 <a class="nav-link" href="#">Fale Conosco</a>               </li>             </ul>           </div>                </div>       </nav>  
×

Important Information

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