2
respostas

O menu ficou ao lado mas não ficou alinhado com o topo do "minha empresa", ficou bem mas baixo.

<body>
<img src="logo.jpg">
<nav>
    <ul>
        <li><a href="contato.hmtl">contato</a></li>
           <li><a href="serviço.hmtl">serviço</a></li>
        <li><a href="sobremim.hmtl">sobre mim</a></li>
    </ul>
</body>

no CSS:
nav{ width:250px;
    background-color:#CCC;
    display:inline-block;
}
img{ display:inline-block;
    width:250px;
    height:200px;
}
2 respostas

Nesse caso seus elementos precisam de uma classe para conte-los, pois assim os dois são ''filhos'' do mesmo elemento e assim podem ficarem lado a lado na mesma ''caixa'' .

<html>
<head>
    <style>
        nav,img {float:left;}
aside{ 

    background-color:#CCC;
    display:inline-block;
}
aside ul{
    float:left; width:50px;
}
img{ 
    display:inline-block;
    width:250px;
    height:200px;
}</style>
</head>
<body>
    <aside>
    <img src="foto.jpg">
        <nav>
            <ul>
                <li><a href="contato.hmtl">contato</a></li>
                   <li><a href="serviço.hmtl">serviço</a></li>
                <li><a href="sobremim.hmtl">sobre mim</a></li>
            </ul>
        </nav>
    </aside>
</body>
</html>

Deu certo, porém não aprendemos ainda essa propriedade float, fiquei curiosa pq queria ver isso funcionar apenas com a propriedade display: inline-block. Que era o que o exercício em questão ensinada. Detalhe, pelo que constatei o que fez os elementos ficarem em cima e alinhados foi a propriedade float ne? pq tirei o display: inline-block da regra img no CSS e continuou funcionando... enfim a dúvida continua... kkk