Jump to content
rodrigofv1994

Alinhar uma div no centro da página na horizontal

Recommended Posts

.conteudoMenu { position: relative; float: left; width: 1000px; height: 100px; background-color: #000E20; left: 50%;  margin-left:-500px;}

Mesmo código, agora está funcionando. Muito estranho. Nem precisei usar esse seu. De qualquer forma, valeu!

Esse margin: 0 auto; automaticamente define zero pra top e left?

Share this post


Link to post
Share on other sites

Como faço pra colocar uma div(1) colada no canto esquerdo e flutuar respeitando a div(2) de cima sem ficar sob e sobre a div(2), tem que ficar abaixo dela sem a necessidade de distanciar com margens? Já tentei com float:left; position:relative; left:0; e não funcionou. 

Share this post


Link to post
Share on other sites
17 horas atrás, rodrigofv1994 disse:

.conteudoMenu { position: relative; float: left; width: 1000px; height: 100px; background-color: #000E20; left: 50%;  margin-left:-500px;}

Mesmo código, agora está funcionando. Muito estranho. Nem precisei usar esse seu. De qualquer forma, valeu!

Esse margin: 0 auto; automaticamente define zero pra top e left?

 

O zero é para top e bottom, left e right ficam automáticos e por isso centralizados horizontalmente.

Se você coloca dois valores no seu margin (margin: 1px 2px; por exemplo) o primeiro se refere sempre a top e bottom e o segundo refere-se sempre a left e right.

 

17 horas atrás, rodrigofv1994 disse:

Como faço pra colocar uma div(1) colada no canto esquerdo e flutuar respeitando a div(2) de cima sem ficar sob e sobre a div(2), tem que ficar abaixo dela sem a necessidade de distanciar com margens? Já tentei com float:left; position:relative; left:0; e não funcionou. 

 

Essa eu não entendi muito bem.

Veja se é mais ou menos isso que você precisa: link

Se não for deixa mais detalhes ai.

 

Recomendo que utilize um framework css para essas situações, vai te economizar algumas hrs de desenvolvimento.

Share this post


Link to post
Share on other sites

O link que me enviou faz o que eu já sei, quero colocar uma div embaixo da outra sem precisar definir o top, a div precisa respeitar o espaço da div de cima entendeu?

Preciso refazer um curso de html5 e css3, mas é muita coisa pra estudar de uma vez, misturar códigos é f***. 

Share this post


Link to post
Share on other sites
14 horas atrás, rodrigofv1994 disse:

O link que me enviou faz o que eu já sei, quero colocar uma div embaixo da outra sem precisar definir o top, a div precisa respeitar o espaço da div de cima entendeu?

Preciso refazer um curso de html5 e css3, mas é muita coisa pra estudar de uma vez, misturar códigos é f***. 

 

mas a posição das divs deve ser como está no link?

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.