1

Boas,

Eu tenho aqui um problema que em meter um <h1> seguido de uma imagem e de um <hr> como na seguinte imagem.

inserir a descrição da imagem aqui

Com o seguinte código:

<div id="bola"><h4 style="text-align: left; display:block">Bibliotecas</h4>
<div id="bola2">
      <img src="http://culturalis.pt/wp-content/uploads/2015/06/circun.png" alt="curva" style="float:left; display:inline-block"/>
      <hr style="height:3px;width:100px;border-width:0;color:#D29E1D;background-color:#D29E1D;float:left">
</div>
</div>

E eu não consigo pôr isso como deve de ser. Alguém sabe porque?

4
  • 1
    O último exemplo da resposta à sua pergunta anterior parece resolver isso, não?
    – bfavaretto
    Commented 18/06/2015 às 17:34
  • @BrunoGilbellino Veja minha resposta. Não existe a necessidade de utilizar imagem para fazer este ícone.
    – MoisesGama
    Commented 18/06/2015 às 18:02
  • Mas e se ele quiser colocar uma imagem diferente ali futuramente? Acho que você deveria dar uma segunda opção de código. Seria útil para muitos no futuro. @MoisesGama
    – Florida
    Commented 18/06/2015 às 18:16
  • 1
    @Florida Editei e está feito. Veja.
    – MoisesGama
    Commented 18/06/2015 às 18:23

3 Respostas 3

3

Iae eu só faria com CSS, sem utilizar imagens e usando absolute.

Execute e veja o resultado. Claro você pode mudar como desejar.

Segue o Scritp:

div.baseLogo {
  position: relative;
  width: 300px;
}
h4.textoLogo {
  text-align: left;
  font-size: 25px;
  display: block;
}
div.bolaCss {
  position: absolute;
  border: 3px solid #D29E1D;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  top: 5px;
  left: 130px;
}
div.linhaDireita {
  position: absolute;
  border-top: 3px solid #D29E1D;
  top: 16px;
  left: 153px;
  width: 100px;
}
<div class="baseLogo">
  <h4 class="textoLogo">Bibliotecas</h4>
  <div class="bolaCss"></div>
  <div class="linhaDireita"></div>
</div>

VERSÃO COM UTILIZAÇÃO DE IMAGEM

div.baseLogo {
  position: relative;
  width: 300px;
}
h4.textoLogo {
  text-align: left;
  font-size: 25px;
  display: block;
}
div.bolaImagem {
  position: absolute;
  top: 5px;
  left: 130px;
}
div.linhaDireita {
  position: absolute;
  border-top: 3px solid #D29E1D;
  top: 16px;
  left: 153px;
  width: 100px;
}
<div class="baseLogo">
  <h4 class="textoLogo">Bibliotecas</h4>
  <div class="bolaImagem">
    <img src="http://culturalis.pt/wp-content/uploads/2015/06/circun.png" alt="curva">
  </div>
  <div class="linhaDireita"></div>
</div>

5
  • Muito arriscado fazer assim. Commented 18/06/2015 às 17:35
  • 2
    @DiegoSouza Porque?
    – MoisesGama
    Commented 18/06/2015 às 17:36
  • Eu sei que o AP está usando css inline na pergunta, mas acho que facilitaria muito o entendimento se você separasse o html do css, btw +1. Commented 18/06/2015 às 18:27
  • @re22 vou montar assim, e já atualizo.
    – MoisesGama
    Commented 18/06/2015 às 18:28
  • 1
    @re22 Feito, veja.
    – MoisesGama
    Commented 18/06/2015 às 18:35
2

Boas,

Em primeiro lugar tens que ter cuidado com o fechar das tags.

Uma das maneiras que tens para alinhares elementos é usando o float

<div id="bola"><h4 style="text-align: left; display:block">Bibliotecas</h4></div>
<div id="bola2">
      <img src="http://culturalis.pt/wp-content/uploads/2015/06/circun.png" alt="curva" style="float:left; display:inline-block"/>
      <hr style="height:3px;width:100px;border-width:0;color:#D29E1D;background-color:#D29E1D;float:left"></hr>
</div>

Aqui só te fechei as tags que não estavam fechadas

Acrescentei este CSS

#bola{
   float: left;
}

#bola2 {
     float: left;
     margin-top: 20px;
}

Tens aqui o FIDDLE onde podes testar

P.S. Utilizei o margin-top para centrar mais ou menos a #bola2 em relação à #bola

ALTERNATIVA

Caso não pretendas usar um ficheiro CSS para guardar os estilos, podes sempre adicionar ao próprio HTML

  <div id="bola"style="float: left">
        <h4 style="text-align: left; display:block">Bibliotecas</h4>
    </div>
    <div id="bola2" style="float: left;margin-top: 20px;">
      <img src="http://culturalis.pt/wp-content/uploads/2015/06/circun.png" alt="curva" style="float:left; display:inline-block"/>
    <hr style="height:3px;width:100px;border-width:0;color:#D29E1D;background-color:#D29E1D;float:left"></hr>
</div>

Tens aqui o FIDDLE deste caso

3
  • @Florida Tem a certeza? Commented 18/06/2015 às 17:38
  • @Florida o do autor esta: prntscr.com/7ihurf e o exemplo que fiz está prntscr.com/7ihv41 Commented 18/06/2015 às 17:39
  • Acho que equivoquei, não entendi muito bem a pergunta, vou remover o post e deixar que o autor se pronuncie.
    – Florida
    Commented 18/06/2015 às 17:41
1

Eu tirei seu CSS inline do HTML. Nunca mais faça isso a não ser que seja assinatura de e-mail. Enfim, não vem ao caso.

Nos elementos abaixo distribuí por meio de display:inline-block e usei a propriedade line-height com vertical-align:middle deixando assim a imagem centralizada na DIV e também o HR.

#bola {
  display: inline-block;
  width: 15%;
  font-size: 22px;
  font-weight: bolder;
}
#bola2 {
  display: inline-block;
  margin-left: 20px;
  width: 70%;
  line-height: 60px;
}
#bola2 img {
  vertical-align: middle;
}
hr {
  vertical-align: middle;
  margin-left: -7px;
  background-color: #D19D1C;
  height: 3px;
  border: none;
  width: 70%;
  display: inline-block;
}
<div id="bola" class="alinhar">
  <h4>Bibliotecas</h4>
</div>
<div id="bola2" class="alinhar">
  <img src="http://culturalis.pt/wp-content/uploads/2015/06/circun.png" alt="curva" />
  <hr></hr>
</div>

2
  • 1
    Podia colocar esse código parar rodar em um snippet, mas tudo bem, +1. Commented 18/06/2015 às 18:23
  • 1
    Quem negativou deveria no mínimo justificar, pelo menos das respostas até o momento essa me pareceu a mais elegante. Commented 18/06/2015 às 18:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .