Ir ao conteúdo
  • Cadastre-se

Ajuda com div no CSS


Posts recomendados

Oi gente. Eu estou começando a aprender HTML e CSS, mas por enquanto só o basicão mesmo. Aí que num dos meus trabalhos, preciso montar uma página parecida com essa:

post-741125-0-13958200-1413886984_thumb.

 

e eu até estava conseguindo, se não fosse a estrutura do HTML que o professor solicitou. Tem que ser assim:

div 
      h1
      h2
div
      p
div 
      h2
      p
 
 
Só pode ter 3 div. O único jeito que consegui deixar parecido foi trocando a ordem. Tive que mover o segundo h2 pra cima do terceiro div, sem fechar a primeira tag, e aí funcionou, porque se eu seguisse a ordem que ele pediu, o segundo subheading ficava dentro do box laranja (terceiro div). 
 
O arquivo é esse aqui:
 
Alguém sabe se tem algum jeito de eu fazer isso seguindo a ordem solicitada?
Já tentei margem e padding com valores negativos mas não rolou (se eu tiver sido ***** demais fazendo isso não me julguem, primeira vez na vida que to vendo esses códigos haha)
 
Obrigada!  :)
Link para o comentário
Compartilhar em outros sites

  • Moderador

Olá provavelmente você tá definido o mesmo css para os elementos.

pense desta forma:

 

são 3 elementos DIV, cada um tem seus elementos filhos.... e suas regras ... por exemplo:

 

div.um  h1, h2
 
div.dois p
 
div.tres h2, p
 
se você não definir regras específicas.. vai dar esse conflito.. pois aí o navegador não sabe qual elemento você quer renderizar diferente.
Considere também que: cada div seja a nível de bloco. assim ficarão um abaixo do outro.
 
veja seu exemplo online:   http://jsfiddle.net/cbsdxb88/
Link para o comentário
Compartilhar em outros sites

Visitante
Este tópico está impedido de receber novas respostas.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...