6
respostas

deixar a imagem e menu lado a lado

Estou tentando deixar a imagem e menu lado a lado, eu já coloquei inline-block. Mas não está dando certo. E é a aula 07 do curso de HTML e CSS3.

6 respostas

Você pode mostrar o código HTML e o CSS?

aside li { display: inline-block; }

SEGUE CÓDIGO HTML insira seu código aqui

<!DOCTYPE html>

Sobre mim

Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de qualidade, durabilidade e que agregam valor para meus clientes.

Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript). Crio sites para todos, seguindo as principais diretivas de acessibilidade, responsividade e web semântica, sem descuidar da qualidade de código.

Como trabalho

João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas!

José Souza, Fiat

Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. Não trabalho com escopo fechado: o cliente é que decide quando o produto está pronto.

Também não trabalho com prazos fechados: qualidade é importante demais para ser sacrificada.

Experiência

João domina as tecnologias como ninguém. Eu apresentava um problema, ele tinha na ponta da língua a solução mais adequada com as tecnologias mais recentes.

Manoel Santos, Petrobrás

Já desenvolvi projetos para grandes empresas como BMW, UOL e IBM. Neles, o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.

Também já fui contratado para transformar grandes portais, como Terra e G1, em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável.

Comunidade

Procuro repassar meu conhecimento para a comunidade. Para isso, já dei diversas palestras e mantenho um blog.

Foto de João da Silva

João da Silva

© João da Silva 2014

segue código css insira seu código aqui

body { font-family: "Crimson Text", "Times New Roman", serif; background-color: #F2FFFC; font-size: 120%; line-height: 1.5; }

h1, h2 { font-family: "Open Sans Condensed", "Arial", sans-serif; }

main h1 { text-align: center; background-color: #851944; color: #FFF; padding: 25px; border-bottom: 10px solid black; font-size: 60px; }

p { text-align: justify; margin: 20px 0; }

blockquote { background-color: #D9E5E3; border: 10px solid #C2CCCA; width: 250px; box-sizing: border-box; margin: 20px 40px; }

aside { background-color: #3C1D3D; color: #F2FFFC; }

footer { background-color: #000; color: #F2FFFC; }

nav a { color: #F2FFFC; }

main a { color: #851944; }

aside a { color: inherit; font-family: "Open Sans Condensed", sans-serif; }

blockquote, aside, footer { padding: 20px; }

main div { width: 720px; margin: auto; padding: 30px 0; }

aside { text-align: center; }

aside h1 { font-size: 30px; margin-bottom: 25px; }

strong { font-weight: bold; }

em { font-style: italic; }

h2 { font-size: 30px; }

aside li { display: inline-block; }

Olá Valéria; joia?

Da próxima, troque a frase "insira seu código aqui" pelo seu código. Clique em "inserir código" (acima da caixa de texto do post) e substitua a frase.

Abraço

A melhor forma é usando flexbox por exemplo:

.nav {
    display: flex;
}

só isso já colocará tudo lado a lado. Se quiser distribuir de ponta a ponta os elementos dentro dele tem que colocar:

.nav {
    display: flex;
    justify-content;
}

E pra alinhar verticalmente tudo:

.nav {
    display: flex;
    justify-content;
    align-items: center;
}