Jump to content
codercss

Criar dois "Blocos" dentro de tag pai (header)

Recommended Posts

Olá,

 

Como é que consigo dividir a tag header em duas partes, uma com 30% do seu tamanho e a segunda com 70%?

 

Vejam aqui s.f. https://jsfiddle.net/z2hjL2fd/

 

O que pretendo é colocar a imagem no lado esquerdo e o paragrafo do lado direito. Não consigo entender o porque que ele imprime a tag figure numa "linha" e a tag p noutra linha! Se repararem o texto "Mensagem" está abaixo, depois da parte inferior da imagem. Como fazo para que consiga ter dois blocos dentro da tag header?

 

Nota:

Pelo que percebi, o float faz o elemento flutuar dentro da tag pai, neste exemplo a tag header. Os filhos das tags que tem propriedade float, neste caso figure e p, irão ser ajustados dentro dessas mesmas tag's.

É correcto pensar que os filhos de figure e p respondem perante eles, e não perante a tag header?

O que pretendo exemplificar é que se caso pretenda criar uma nova tag img dentro de figure apenas me terei que preocupar com o tamanho de figure, pois o tamanho das duas tag's img irão se calculadas considerando o tamanho do pai (figure), certo?

 

Desculpe se com a minha nota acabei por confundir mais o assunto, mas digam coisas :)

Obrigado e bons códigos

Share this post


Link to post
Share on other sites
Olá!


Inspecionamento a página pelo Google Chrome, dá para ver que o elemento figure possui algumas propriedades padrões (não sei se é só o Chrome que faz isso, ou se outros browsers também fazem). As propriedades são estas:



figure {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 40px;
-webkit-margin-end: 40px;
}


Além do mais você também adicionou margem de 5px no figure. Se você quer que os dois elementos fiquem na mesma linha, eles juntos não podem ultrapassar 100% de largura (30% + 70% + margem > 100%).

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Mewmew
      Bom dia!
       Teria como alguém me ajudar? 
      Sou bem iniciante nos códigos e acabou me surgindo uma duvida/problema a qual estou tentando resolver desde hoje cedo...
       
       Preciso criar um contêiner dentro de outro contêiner igual a imagem 1.
       
      Só que ele está ficando igual a imagem 2.
       
       Estou utilizando o bootstrap para tentar arrumar isso de uma forma que também traga a responsividade. 
      Basicamente eu criei um container fluid e dentro dele tinha outro container, só que não estou conseguindo posicionar ambos corretamente! 
       



    • By Marcos Vinícius
      Pessoal,
       
      Já tentei de todas as formas que encontrei mas não consegui evitar que a impressão do browser saia sem o cabeçalho/rodapé. Sei q o usuário pode tirar isso das configurações de impressão mas serão muitos usuários e deixar pra que isso seja feito manualmente é complicado. Alguém sabe uma solução pra isso?
    • By DinhoPHP
      Estou com o seguinte problema.
      Desenvolvi um site em flex box com width de 100% na Section.  O problema é que o header com 100% fixed ultrapassa a section ficando mais larga que tudo na página no modo mobile mesmo utilizando break points.
       
      @media screen and (max-width: 984px){ header{ background-color: #1a1a1a; width: 100%; position: fixed; top: 0px; z-index: 999; display: flex !important; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space--around; line-height: 6; font-size: 0.8em; } }  

    • By Rogerio Pancini
      Bom dia pessoal.
       
      Eu trabalho com com PHP, Html, Css e Jquery, mas, depois de um pouco de resistência, estou fazendo um curso de Wordpress.
      Tenho site pronto que posso mexer, feito por outra pessoa.
      Ainda não cheguei na parte mais avançada, mas estou com uma dúvida em uma parte da header.
      Na imagem em anexo tem o link "Sobre nós" (na tarja verde, mais ao lado direito).
      Eu gostaria de mudar o link dele, mas na parte de menus, ele não está.
      Procurei nas opções do tema (The 7 - https://the7.io/), mas também não encontrei.
      Onde poderia estar a opção para mudar esse link?
       
      Obrigado!

    • By dn.net7@gmail.com
      Meus caros amigo, quero sua ajuda, eu crie um um cabeçalho em html e javascript, ao lado um menu suspenso  que funciona muito bem, e
      estou fazendo a inserção deste cabeçalho na header.php do  site em wordpress, porém o único problema que estou enfrentando é que a class="open-menu"> não funciona, ou seja deveria abrir o sub-menu, mas nada acontece. Poderiam me ajudar por gentileza, desde já agradeço.
       
      O html funcionando http://hospebrasil.com/header/index
      Agora neste site deixou de abrir o menu https://rrmartinsconsultoria.com.br/rrmartins/
       
       

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.