1

Eu quero uma uma imagem (a curva amarela em baixo) e um hr dessa forma:

inserir a descrição da imagem aqui

E tenho o código assim:

<div>
<img src="http://culturalis.pt/wp-content/uploads/2015/06/curva.png" alt="curva"/>
<hr style="height: 3px; width: 250px; border-width: 0; color: #d29e1d; position:absolute; background-color: #d29e1d; margin-bottom:10px;"/>
</div>

E eu não entendo porque é que isso acontece. Alguém sabe o porque?

3 Respostas 3

5

Você pode adicionar o display: block na imagem (já que logo após vem o <hr>) e também não vejo necessidade do position: absolute, algo como:

.container img {
   display: block;
}

.container hr {
    width: 250px;
    height: 3px;
    border-width: 0;
    background-color: #d29e1d;
    margin: 0 0 10px 0;
}
<div class="container">
    <img src="http://culturalis.pt/wp-content/uploads/2015/06/curva.png" alt="curva"/>
   <hr/>
</div>

Ou com border (sem <hr>):

.container img {
  display: block;
}

.container {
    width: 250px;
    border-bottom: 3px #d29e1d solid;
    margin: 0 0 10px 0;
}
<div class="container">
    <img src="http://culturalis.pt/wp-content/uploads/2015/06/curva.png" alt="curva"/>
</div>

Se quiser adicionar conteúdo ao lado direito da imagem você pode usar background: ...; combinado com margin ou padding:

.container h1 {
   margin: 0 0 0 30px;
}
.container {
    width: 250px;
    border-bottom: 3px #d29e1d solid;
    margin: 0 0 10px 0;
    background: url(
http://culturalis.pt/wp-content/uploads/2015/06/curva.png) bottom left no-repeat;
}
<div class="container">
    <h1>Test</h1>
</div>

Exemplo de texto a direita:

.container h1 {
  width: 100px;
  margin: 0;
  float: left;
}

.sub-container {
   float: left;
    width: 250px;
    border-bottom: 3px #d29e1d solid;
    margin: 0 0 10px 0;
    display: inline-block;
}
.sub-container img {
  display: block;
}
<div class="container">
    <h1>Texto</h1>
    <div class="sub-container">
        <img src="http://culturalis.pt/wp-content/uploads/2015/06/curva.png" alt="curva"/>
    </div>
</div>

Recomendo estudar os princípios básicos do CSS (como float e display) recomendo o seguinte links:

  1. https://developer.mozilla.org/en-US/docs/Web/CSS
  2. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started
  3. http://www.w3.org/Style/CSS/learning
  4. http://www.maujor.com/tutorial/joe/cssjoe1.php (Maujor das CSS em Português :) )
4
  • Guilherme se eu quiser adicionar um <h1>SOBRE</h1> antes da imagem mas tudo na mesma linha? como faço? Já tentei com inline mas não resultou Commented 17/06/2015 às 23:10
  • lado direito da imagem Commented 17/06/2015 às 23:11
  • algo tipo isto gyazo.com/97f3af3cf2bb1082ddd5ea1c38ae54f6 Commented 17/06/2015 às 23:20
  • @BrunoGibellino editado a resposta, adicionei alguns links para estudo
    – Syzoth
    Commented 17/06/2015 às 23:31
3

Pra ficar lado a lado podes usar o display:inline e regular a altura com margin:

margin:29px 0 0;
display:inline;

Exemplo:

.linha{
height: 3px; width: 250px; border-width: 0; color: #d29e1d; position:absolute; background-color: #d29e1d; margin:29px 0 0;
  display:inline;
}
<div >
<img src="http://culturalis.pt/wp-content/uploads/2015/06/curva.png" alt="curva"/>
<hr class="linha"/>
</div>

2

Uma edição a resposta do @GuilhermeNascimento seria fazer da seguinte forma caso não possa colocar um display:block

.container img {
  float:left;
  padding: 0;
  margin: 0;
}

.container hr {
    position:relative;
    top:31px;
    padding: 0;
    margin: 0;
    width: 250px;
    height: 1px;
    border-width: 0;
    color: #d29e1d;
    background-color: #d29e1d;
    margin: 0 0 10px 0;
}

<div class="container">
    <img src="http://culturalis.pt/wp-content/uploads/2015/06/curva.png" alt="curva"/>
   <hr/>
</div>

Esta solução é menos elegante e mais engessada (pois tem de saber o height da imagem) porem tem o mesmo resultado.

jsfiddle

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 .