Semântica e Posicionamento?

Front-end
,
#1

Estou com duas dúvidas, vejam esta imagem:

Minhas dúvidas são:

1) Estou usando o seguinte HTML:

<header>
	<img src="images/logo.png" alt="Logotipo">
	<p>Minha carteira</p>
	<p>Saldo: R$500,00</p>
    <nav></nav>
</header>

P seria a tag mais semântica para colocar as frases “Minha carteira” e “Saldo: R$500,00” uma embaixo da outra e ao lado da imagem?

2) Como colocar as frases “Minha carteira” e “Saldo: R$500,00” uma embaixo da outra e ao lado da imagem? Tentei com o Float, mas não estou sabendo como colocar a segunda frase. Só consegui a primeira.

Meu CSS:

html{
	font-size: 120%;
}
header{
	background-color: #F00;
	padding: 1em;
}
header img{
	float: left;
}
header p{
	float: left;
}
header nav{
	clear: both;
}
1 curtida
#2

O erro está ocorrendo porque você não inseriu divisórias para os objetos, assim fica complicado de resolver seu problema.

Tente o seguinte:

 <header>
         <div id="img"><img src="images/logo.png" alt="Logotipo"></div><!-- END IMG-->
         <div id="imgcomments">
         <p>
           <spam>Minha carteira</spam><br>
   	       <spam>Saldo: <b>R$500,00</b></spam>
         </p>
         </div><!-- END IMGCOMMENTS -->
</header>

Agora é só você dividir o tamanho das duas divisórias no css levando em consideração o tamanho total da sua header! Espero ter ajudado, abraço!

Observação: coloque um width e um height na sua header.

1 curtida