Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

pagina de produtos não centraliza

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Design responsivo e atividade Adaptar uma página para celular

por MICHELE QUEIROZ DOS SANTOS
| 98.3k xp | 13 posts

minha pagina de produtos não centraliza, e eu não consigo vê onde está o erro. poderiam me ajudar? 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Produtos - Barbearia Alura</title>

        <link rel="stylesheet" href="reset.css"> 
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <div class="caixa">
                <h1><img src="logo.png"></h1>

                <nav>
                    <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="produtos.html">Produtos</a></li>
                    <li><a href="contato.html">Contatos</a></li>
                    </ul>
                </nav>
            </div>
        </header>

        <main>
            <ul class="produtos">
                <li>
                    <h2>Cabelo</h2>
                    <img src="cabelo.jpg">
                    <p class="produto-descricao">Na tesoura ou maquina, como o cliente preferir</p>
                    <p class="produto-preco">R$ 25,00</p>
                </li>
                <li>
                    <h2>Barba</h2>
                    <img src="barba.jpg">
                    <p class="produto-descricao">Corte e desenho profissional de barba</p>
                    <p class="produto-preco">R$ 18,00</p>
                </li>
                <li>
                    <h2>Cab

.produtos {
    width: 940px ;
    margin: 0 auto;
    padding: 50px 0;
}

.produtos li{
    display: inline-block;/*Um bloco inline é colocado inline (ou seja, na mesma linha do conteúdo adjacente), mas comporta-se como se fosse um bloco.*/
    text-align: center;
    width: 30%;    /* Cada produto ocupa 30% dos 940px */
    vertical-align: top;
    margin: 0 1.5%; /* margem nas laterais (esquerda e direita) de todos os produtos, somando com os 90% dos 940px, chegando em 100%. */
    padding: 30px 20px;  /* espaçamento (cima e baixo) de 30px e <direita e esquerda) de 20px. */
    box-sizing: border-box; /*Os 30% são definitivos e os pixels do padding estão dentro dele */
    border: 2px solid #000000; /* Tamanho | Tipo | Tamanho */
    border-radius: 10px; /*Arredonda as bordas*/

}

.produtos li:hover { /* Aplica uma mudança na cor da borda quando o usuário passa o cursor sobre o elemento. */
    border-color: #C78C19;
}

.produtos li:active { /* Aplica uma mudança na cor da borda quando o usuário está ativando um elemento. */
    border-color: #088C19;
}

.produtos li:hover h2 { /*O h2 quando o mouse estiver por cima dos li dos produtos */
    font-size: 34px;

}

.produtos h2 {
    font-size: 30px;
    font-weight: bold; /* Define o peso de importância. */
}

.produto-descricao {
    font-size: 18px;
}

.produto-preco {
    font-size: 22px;
    font-weight: bold;
    margin: 10px 0 0;
}

footer {
    text-align: center;
    background: url("bg.jpg"); /*No background, referenciamos uma imagemc com "url()" */
    padding: 40px 0;
}

.copyright {
    color: #FFFFFF;
    font-size: 13px;
    margin: 20px 0 0;
}

main {

}

form {
    margin: 40px 0;
}

form label, form legend { /*  criar uma etiqueta para o input, com a tag <label> */
    display: block; /*Faz com que ocupe a linha inteira */
    font-size: 20px;
    margin: 0 0 10px;
} 

.input-padrao { /* A tag <input>, para a entrada de dados do usuário */
    display: block;  /*Faz com que ocupe a linha inteira */
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}

.checkbox {
    margin: 20px 0;
}

.enviar {
    width: 40%;
    padding: 15px 0;
    background: orange; /* cor de fundo*/
    color: white; /* cor do texto*/
    font-weight: bold; /*fonte em negrito*/
    font-size: 18px; /* tamanho da fonte*/
    border: none; /* tirando a borda padrão*/
    border-radius: 5px; /* criando canto arredondado*/
    transition: 1s all; /* espera de 1 segundos p mudar de cor*/
    cursor: pointer; /*qdo o mouse estiver por cima o cursor muda*/
}

.enviar:hover { /*Quando o mouse está por cima do botão*/
    background: darkorange; /* mudar a cor de fundo qdo o mouse passa por cima*/
    transform: scale(1.2); /* aumenta o tamanho*/
}

table {
    margin: 20px 0 40px;/*espaçamento externo*/
}

thead {
    background: #555555; /*cor de fundo*/
    color: white;
    font-weight: bold; /*fonte em negrito*/
}

td, th {
    border: 1px solid #000000; /*tamanho da borda e com cor*/
    padding: 8px 15px; /*espaçamento interno*/
}
4 respostas
por MICHELE QUEIROZ DOS SANTOS
| 98.3k xp | 13 posts

`

por Laís Cavalcanti
| 2576.8k xp | 4815 posts
Instrutor

Oi, Michele, tudo bem?

Você não estilizou a sua tag main, depois do .copyright, adicione:

main {
    width: 940px;
    margin: 0 auto;
}

Veja que a tag main ela envolve os produtos da página e tem a caracteristica de envelopar o conteúdo principal da sua página. Aqui, colocamos uma largura de 940px e valores para o margin que irão centralizar esse conteúdo que o main envelopa, no caso: 0 auto. Testa e me fala se deu certo :}

por MICHELE QUEIROZ DOS SANTOS
| 98.3k xp | 13 posts

oi Laís, tudo bem? Eu estilizei e não aconteceu nada , continua do mesmo jeito : dois conteúdos centralizados e o ultimo, embaixo do primeiro.

solução!
por Laís Cavalcanti
| 2576.8k xp | 4815 posts
Instrutor

Oi, Michele.

Como você não colocou o arquivo inteiro do css, eu adicionei a parte que faltava do projeto do curso, segue:

body {
  font-family: "Montserrat", sans-serif;
}

header {
  background: #bbbbbb;
  padding: 20px 0;
}

.caixa {
  position: relative;
  width: 940px;
  margin: 0 auto;
}

nav {
  position: absolute;
  top: 110px;
  right: 0;
}

nav li {
  display: inline;
  margin: 0 0 0 15px;
}

nav a {
  text-transform: uppercase;
  color: #000000;
  font-weight: bold;
  font-size: 22px;
  text-decoration: none;
}

nav a:hover {
  color: #c78c19;
  text-decoration: underline;
}

.produtos {
  width: 940px;
  margin: 0 auto;
  padding: 50px 0;
}

.produtos li {
  display: inline-block; /*Um bloco inline é colocado inline (ou seja, na mesma linha do conteúdo adjacente), mas comporta-se como se fosse um bloco.*/
  text-align: center;
  width: 30%; /* Cada produto ocupa 30% dos 940px */
  vertical-align: top;
  margin: 0 1.5%; /* margem nas laterais (esquerda e direita) de todos os produtos, somando com os 90% dos 940px, chegando em 100%. */
  padding: 30px 20px; /* espaçamento (cima e baixo) de 30px e <direita e esquerda) de 20px. */
  box-sizing: border-box; /*Os 30% são definitivos e os pixels do padding estão dentro dele */
  border: 2px solid #000000; /* Tamanho | Tipo | Tamanho */
  border-radius: 10px; /*Arredonda as bordas*/
}

.produtos li:hover {
  /* Aplica uma mudança na cor da borda quando o usuário passa o cursor sobre o elemento. */
  border-color: #c78c19;
}

.produtos li:active {
  /* Aplica uma mudança na cor da borda quando o usuário está ativando um elemento. */
  border-color: #088c19;
}

.produtos li:hover h2 {
  /*O h2 quando o mouse estiver por cima dos li dos produtos */
  font-size: 34px;
}

.produtos h2 {
  font-size: 30px;
  font-weight: bold; /* Define o peso de importância. */
}

.produto-descricao {
  font-size: 18px;
}

.produto-preco {
  font-size: 22px;
  font-weight: bold;
  margin: 10px 0 0;
}

footer {
  text-align: center;
  background: url("bg.jpg"); /*No background, referenciamos uma imagemc com "url()" */
  padding: 40px 0;
}

.copyright {
  color: #ffffff;
  font-size: 13px;
  margin: 20px 0 0;
}

main {
  width: 940px;
  margin: 0 auto;
}

form {
  margin: 40px 0;
}

form label,
form legend {
  /*  criar uma etiqueta para o input, com a tag <label> */
  display: block; /*Faz com que ocupe a linha inteira */
  font-size: 20px;
  margin: 0 0 10px;
}

.input-padrao {
  /* A tag <input>, para a entrada de dados do usuário */
  display: block; /*Faz com que ocupe a linha inteira */
  margin: 0 0 20px;
  padding: 10px 25px;
  width: 50%;
}

.checkbox {
  margin: 20px 0;
}

.enviar {
  width: 40%;
  padding: 15px 0;
  background: orange; /* cor de fundo*/
  color: white; /* cor do texto*/
  font-weight: bold; /*fonte em negrito*/
  font-size: 18px; /* tamanho da fonte*/
  border: none; /* tirando a borda padrão*/
  border-radius: 5px; /* criando canto arredondado*/
  transition: 1s all; /* espera de 1 segundos p mudar de cor*/
  cursor: pointer; /*qdo o mouse estiver por cima o cursor muda*/
}

.enviar:hover {
  /*Quando o mouse está por cima do botão*/
  background: darkorange; /* mudar a cor de fundo qdo o mouse passa por cima*/
  transform: scale(1.2); /* aumenta o tamanho*/
}

table {
  margin: 20px 0 40px; /*espaçamento externo*/
}

thead {
  background: #555555; /*cor de fundo*/
  color: white;
  font-weight: bold; /*fonte em negrito*/
}

td,
th {
  border: 1px solid #000000; /*tamanho da borda e com cor*/
  padding: 8px 15px; /*espaçamento interno*/
}

E gravei um videozinho que mostra a página produtos centralizada: https://imgur.com/a/ahIQjZn Testa com o arquivo completo e me fala de deu certo :}