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

Ajudinha Por favor

por Rafael Rodrigo Menon
| 99.2k xp | 18 posts

Boa noite pessoal, estou aprendendo CSS e HTML, preciso de uma pequena ajudinha de vocês. Estou tentando fazer um pequeno sistema com o que estou aprendendo. Comecei deu tudo certo, sem problemas, fiz sozinho aliás (o que me deixa feliz :P). Porém quando vou tentar colocar o conteúdo que realmente preciso não da muito certo, não estou me acertando. Segue o link da imagem pra vocês olharem como está. http://pt-br.tinypic.com/r/52c4rt/9

A parte preta teria que ficar em toda a região branca, porém não sei como faço, por que quando tento dar o tamanho dela, ou muda a parte de cima com o nome, ou muda o menu lateral, queria que isso não ocorre-se. Segue os códigos da página html (da imagem) e o css. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style2.css">
    <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">

</head>
<body>

    <nav class="topo">
        <h1>Gerenciador de Estoque <sub>Beta!</sub></h1>
    </nav>
    <nav class="conteudo">
        <h1>Teste</h1>
    </nav>
    <nav class="menu-lateral">
        <h3><a href="dashboard.html">Painel de Controle</a></h3>
        <h3><a href="produtos.html">Produtos</a></h3>
        <h3><a href="financeiro.html">Financeiro</a></h3>
        <h3><a href="suporte.html">Suporte</a></h3>
        <h3><a href="#">Logout</a></h3>    
    </nav>
</body>
</html>

CSS

.topo {
    background-color: #48D1CC;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    padding-bottom: 24px;
}
.menu-lateral {
    background-color: #00CED1;
    margin-left: 0px;
    margin-right: 85%;
    margin-top: 0px;
    padding-bottom: 33%;

}

.menu-lateral h3 {
    color: white;
    padding-top: 15px;
    font-family: 'PT Sans', sans-serif;
    margin-left: 8px;
}
.menu-lateral h3:hover {
    background-color: #40E0D0;

}

.menu-lateral a {
    color: white;
    text-decoration: none;
}

.topo h1 {
    color: white;
    font-family: 'Bree Serif', serif;
    font-size: 30px;
    padding-top: 8px;
    padding-left: 15px;
}

.topo sub {
    color: white;
    font-family: 'Bree Serif', serif;
    padding-top: 0px;
    font-size: 10px;
}

.conteudo {
    background-color: black;
    margin-left: 205px;
    margin-top: 15px;
}

Se alguém pude me ajudar, espero ter explicado certo de modo que vocês entendam.

4 respostas
solução!
por Saulo de Siqueira
| 103.4k xp | 10 posts
Coordenador de Desenvolvimento

Olá, se eu entendi o seu menu deve ficar dentro do conteúdo, dessa forma:

    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style2.css">
    <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">


<body>

    <nav class="topo">
        <h1>Gerenciador de Estoque <sub>Beta!</sub></h1>
    </nav>
    <nav class="conteudo">
    <nav class="menu-lateral">
        <h3><a href="dashboard.html">Painel de Controle</a></h3>
        <h3><a href="produtos.html">Produtos</a></h3>
        <h3><a href="financeiro.html">Financeiro</a></h3>
        <h3><a href="suporte.html">Suporte</a></h3>
        <h3><a href="#">Logout</a></h3>    
    </nav>
        <h1>Teste</h1>
    </nav>

</body>

E o seu CSS você deve remover a tag margin-left: 205px; da sua class conteudo . Deve ficar assim:

.topo {
    background-color: #48D1CC;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    padding-bottom: 24px;
}
.menu-lateral {
    background-color: #00CED1;
    margin-left: 0px;
    margin-right: 85%;
    margin-top: 0px;
    padding-bottom: 33%;

}

.menu-lateral h3 {
    color: white;
    padding-top: 15px;
    font-family: 'PT Sans', sans-serif;
    margin-left: 8px;
}
.menu-lateral h3:hover {
    background-color: #40E0D0;

}

.menu-lateral a {
    color: white;
    text-decoration: none;
}

.topo h1 {
    color: white;
    font-family: 'Bree Serif', serif;
    font-size: 30px;
    padding-top: 8px;
    padding-left: 15px;
}

.topo sub {
    color: white;
    font-family: 'Bree Serif', serif;
    padding-top: 0px;
    font-size: 10px;
}

.conteudo {
    background-color: black;
    margin-top: 15px;
    width: 100%;
}
por Rafael Rodrigo Menon
| 99.2k xp | 18 posts

Rapaz que maravilha, isso meso. Erros de iniciante kkkkk. Obrigado.

por Saulo de Siqueira
| 103.4k xp | 10 posts
Coordenador de Desenvolvimento

Que bom que era isso que você queria! Boa sorte! Abraços

por Rafael Rodrigo Menon
| 99.2k xp | 18 posts

Então, ainda não estou sabendo kkkkk. Olha só, quero colocar as coisas na parte branca ali, mais quando tento ele fica assim: http://tinypic.com/r/zx5kbb/9 queria que ficasse em cima para colocar as coisas, mais ele continua o menu. Coloquei como você falou dentro da classe conteudo.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style2.css">
    <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">

</head>
<body>

    <nav class="topo">
        <h1>Gerenciador de Estoque <sub>Beta!</sub></h1>
    </nav>
    <nav class="conteudo">
            <nav class="menu-lateral">
            <h3><a href="dashboard.html">Painel de Controle</a></h3>
            <h3><a href="produtos.html">Produtos</a></h3>
            <h3><a href="financeiro.html">Financeiro</a></h3>
            <h3><a href="suporte.html">Suporte</a></h3>
            <h3><a href="#">Logout</a></h3>  

        <nav class="widgets">
            <h1>Teste</h1>
        </nav>
    </nav>

</body>
</html>
.topo {
    background-color: #48D1CC;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    padding-bottom: 24px;
}
.menu-lateral {
    background-color: #00CED1;
    margin-left: 0px;
    margin-right: 85%;
    margin-top: 0px;
    padding-bottom: 33%;

}

.menu-lateral h3 {
    color: white;
    padding-top: 15px;
    font-family: 'PT Sans', sans-serif;
    margin-left: 8px;
}
.menu-lateral h3:hover {
    background-color: #40E0D0;

}

.menu-lateral a {
    color: white;
    text-decoration: none;
}

.topo h1 {
    color: white;
    font-family: 'Bree Serif', serif;
    font-size: 30px;
    padding-top: 8px;
    padding-left: 15px;
}

.topo sub {
    color: white;
    font-family: 'Bree Serif', serif;
    padding-top: 0px;
    font-size: 10px;
}

.conteudo {
    background-color: #FFFAF0;
    margin-top: 0px;
}

.conteudo h1 {
    color: black;
}

.widgets {
    margin-left: 230px;
    margin-top: 0px;
}