Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Posicionamento cabeçalho e nav Rem e Px

Tentei colocar o posicionamento do cabeçalho ao invés de 940px, 94 rem e do nav, o top, ao invés de 110 px coloquei: 11rem e não ficaram a mesma coisa porque em relação ao espaçamento, sendo que 1rem=10px? Meu pensamento é já fazer em rem pra treinar responsividade.

meu arquivo produtos.css

html{ font-size: 62.5%; }

body{

}

header{ background: #BBBB; padding: 2rem 0; }

.cabecalho{ position: relative; width: 94rem; margin: 0 auto; }

nav{ position: absolute; top: 11rem; right: 0; } nav li{ display: inline; margin: 0 0 0 1.5rem; }

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

5 respostas

Realmente era pra funcionar, coloca o código inteiro aqui para eu avaliar.

Até funcionou só que com outros tamanhos de rem, o padding tá somando será?

Logo Barbearia

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

<main>
    <ul class="produtos">
        <li>
            <h2>Cabelo</h2>
            <img src="/assets/img/cabelo.jpg" alt="Cabelo">
            <p class="produto-descricao">Na tesoura ou na máquina, como o cliente preferir</p>
            <p class="produto-preco">R$ 25,00</p>
        </li>
        <li>
            <h2>Barba</h2>
            <img src="/assets/img/barba.jpg" alt="Barba">
            <p class="produto-descricao">Corte e desenho profissional de barba</p>
            <p class="produto-preco">R$ 18,00</p>
        </li>
        <li>
            <h2>Cabelo + Barba</h2>
            <img src="/assets/img/barba.jpg" alt="Cabelo + Barba">
            <p class="produto-descricao">Pacote completo de cabelo e barba</p>
            <p class="produto-preco">R$ 35,00</p>
        </li>
    </ul>
</main>

html{ font-size: 62.5%; }

header{ background: #BBBB; padding: 2rem 0; }

.cabecalho{ position: relative; width: 60rem; margin: 0 auto; }

nav{ position: absolute; top: 7rem; right: 0; } nav li{ display: inline; margin: 0 0 0 1.5rem; }

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

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

.produtos{ width: 60rem; margin: 0 auto; padding: 5rem 0; }

.produtos li{ display: inline-block; text-align: center; width: 30%; vertical-align: top; margin: 0 1.5%; padding: 30px 20px; box-sizing: border-box; border-color: #000000; border-width: 0.2rem; border-style: solid; border-radius: 10px; }

.produtos li:hover{ border-color: #C78C19; }

.produtos li:active{ border-color: #088c19; }

.produtos li:hover h2{ font-size: 2.2rem; }

.produtos h2{ font-size: 2rem; font-weight: bold; margin-left: -0.3rem; }

.produtos img{ margin-left: -0.8rem; }

.produto-descricao{ font-size: 1.2rem; margin-left: 0.4rem; }

.produto-preco{ font-size: 1.5rem; font-weight: bold; margin: 1rem 0 0; }

solução!

oi, tentei rodar aqui e ficou uma bagunça, mas! veja o padding mesmo, veja o inspetor (f12) e veja se há padding atrabalhando. se der manda o codigo da página completo, aqui ficou zoado. qualquer coisa, manda direito o arquivo pra mim, devdemetrio@gmail.com

eu mudei pra px mesmo hahahhahaha, ficar procurando root vai dar um trabalho desnecessário agora, deixar rem só pra responsivo mais a frente. Mas obrigado cara.

nada mano