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

Difucldades para organizar elementos

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS

por Matheus Simões Matheus
| 46.6k xp | 2 posts

Estou tendo dificuldades para organizar os itens da lista a seguir. Uma das minhas dúvidas é: por que o espaço que está em azul existe? https://imgur.com/a/QMn3hk8 não consigo centralizar a lista e acho que é por causa desse espaço

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mesa</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">

</head>
<body>
    <header>
        <h2>Mesa x</h2>
    </header>
    <div id="divmesa">
        <ul>
            <li>
                <img src="burguer.jpg">
                <p class=cardapio>X-bacon</p>
                <input type="number">
            </li>
            <li>
                <img src="burguer.jpg">
                <p class=cardapio>Bacon egg</p>
                <input type="number">

            </li>
            <li>
                <img src="burguer.jpg">
                <p class=cardapio>Padrão</p>
                <input type="number">
            </li>
            <li>
                <img src="burguer.jpg">
                <p class=cardapio>Cheddar</p>
                <input type="number">
            </li>


        </ul>
    </div>

    <input type="submit" value="Enviar pedido" id="enviarpedido">

</body>
</html>

CSS /// ESSE CSS TEM ITENS QUE NÃO ESTÃO PRESENTES NESSA PAGINA POIS ESTÃO SENDO USADOS EM OUTRA

header{
    background-color: rgb(221, 0, 0);
}

h1{
    font-size: 60px;
    text-align: center;
    padding: 20px;
    font-family: Verdana;
}

h2{
    font-size: 60px;
    text-align: center;
    padding: 20px;
    font-family: Verdana;
}

#numeromesa{
    position: absolute;
    right:500px;
    margin-top: 100px;
    font-family: Verdana;
    font-size: 50px;
}

#numeromesa input{
    padding: 10px;
    font-size: 30px;
}

#desc{
    text-align: center;
    font-size: 40px;
    padding: 50px;
    font-family: Verdana;
    font-weight: bold;
}

ul li img{
    width: 20%;
}

.cardapio{
    font-size: 30px;
}

ul li{

    display: inline-block;
    margin-left: 100px;

}

#enviarpedido{
    padding:10px;
    font-size: 20px;
    position: absolute;
    right: 900px;
    bottom: 60px;
}

#divmesa{
    margin-left: 20px;
}
2 respostas
solução!
por Gabriella Andrade Domingos
| 63.8k xp | 7 posts
Estagiária

Minha sugestão:

  1. Retire a margem do item "ul li" no seu css, o exemplo que vou mostrar não precisará dessa margem.
  2. Troque a "margin-left" do item "#divmesa" por "margin: 0 auto;". Fazendo isso, você define margin top e bottom como 0, e as margens laterais como "auto", fazendo com que a #divmesa fique centralizada.
  3. Ainda na "divmesa", como a tag "ul" fica dentro da "divmesa", aplicaremos o "display: flex" (propriedade que auxilia na centralização dos itens dentro da tag que é aplicada), na propriedade "divmesa". Além disso, utilizaremos a propriedade "justify-content: center" ainda na div mesa.
  4. Criaremos no css, uma configuração para a tag "ul", também com o "display: flex" para flexibilizar a manipulação do posicionamento conteúdo de dentro da tag (no caso, os "li"), e para definir o formato de centralização que queremos, utilizaremos a propriedade "justify-content: space-between;", fazendo com que os elementos da ponta fiquem grudados na borda da tag "ul" e os do meio fiquem centralizados. Também não podemos esquecer de definir um tamanho para a nossa "ul". No exemplo, eu defini como "width: 70%", mas se você quiser, diminua essa porcentagem para os itens ficarem mais próximos. A última coisa a ser feita na "ul" é definir o padding como "0", porque ele já vem com um valor de 40px atribuído.

O código css ficará assim:

header{
    background-color: rgb(221, 0, 0);
}

h1{
    font-size: 60px;
    text-align: center;
    padding: 20px;
    font-family: Verdana;
}

h2{
    font-size: 60px;
    text-align: center;
    padding: 20px;
    font-family: Verdana;
}

#numeromesa{
    position: absolute;
    right:500px;
    margin-top: 100px;
    font-family: Verdana;
    font-size: 50px;
}

#numeromesa input{
    padding: 10px;
    font-size: 30px;
}

#desc{
    text-align: center;
    font-size: 40px;
    padding: 50px;
    font-family: Verdana;
    font-weight: bold;
}

ul li img{
    width: 20%;
}

.cardapio{
    font-size: 30px;
}

ul li{

    display: inline-block;
}

#enviarpedido{
    padding:10px;
    font-size: 20px;
    position: absolute;
    right: 900px;
    bottom: 60px;
}

#divmesa{
    margin-left: 20px;
    display: flex;
    justify-content: center;
}

ul{
    display: flex;
    justify-content:space-between;
    width: 70%;
    padding: 0;
}
por Matheus Simões Matheus
| 46.6k xp | 2 posts

Obrigado Gabriella, não conhecia algumas dessas propriedades, agora ficou melhor só falta ajustar os tamanhos, obrigado pela resposta