1
resposta

Ajuda

Pessoal da uma olhada: http://tinypic.com/r/zx5kbb/9 eu quero agora adicionar o conteúdo na parte branca da imagem, porém eu tento adicionar e fica em baixo do menu, como na palavra teste que tem na imagem. Alguém pode me ajudar, preciso saber como adiciono o conteúdo que quero na parte branca sem interferir no resto. Seguem os códigos:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="icon" href="imagens/icones/favicon.png">
    <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 <img src="imagens/icones/beta.png" alt="Icone de Configuração"> <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>  

        <div class="widgets">
            <h1>Teste</h1>
        </div>
    </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;
}

.buttons-top {
    margin-right: 0px;
    margin-left: 90%;
    margin-top: 0px;
}
1 resposta

Oi Rafael, tudo bem? Pra resolver seu problema, primeiro você precisa remover a margem a direita do menu lateral. Ele está empurrando o contéudo pra baixo. Esta é a linha:

margin-right: 85%;

Depois disso, você pode usar o float para posicionar o conteúdo ao lado do menu da seguinte forma (código a ser posto no menu lateral)

float: left;

Isso já resolve seu problema, porém seu código tem outros problemas. Estes mais semanticos... Você fez os cursos de HTML e CSS I e II ? Caso não, recomendo fortemente que os faça.