image and hr side-by-side

Asked

Viewed 878 times

1

I want an image (the yellow curve at the bottom) and an hr that way:

inserir a descrição da imagem aqui

And I have the code like this:

<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>

And I don’t understand why it happens. Does anyone know why?

html

3 answers

5


You can add the display: block image (as soon after comes the <hr>) and I also don’t see the need for position: absolute, something like: 

.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>

Or with border (without <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>

If you want to add content to the right side of the image you can use background: ...; combined with margin or 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>

Example of text on the right:

.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>

I recommend studying the basic principles of CSS (such as float and display) recommend the following 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 in Portuguese :) )

  • William if I want to add a <H1>ABOUT</H1> before the image but all in the same line? how do I? I’ve tried inline but it didn’t work

  • right side of the image

  • something like this http://gyazo.com/97f3af3cf2bb1082ddd5ea1c38ae54f6

  • @Brunogibellino edited the answer, I added some links to study

3

To stand side by side you can use the display:inline and adjust the height with margin:

margin:29px 0 0;
display:inline;

Example:

.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

An edit to @Guilhermenascimento’s reply would be to do as follows if you cannot place a 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>

This solution is less elegant and more cast (as you must know the height image) but has the same result.

jsfiddle

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.