Greg
Greg

Reputation: 3063

Place a picture next to my H1 text no matter what the width of the text is

As you can see on the picture below, I placed an arrow image at the head on my H1 text. I did that by playing with margin right and top. It's working but the issue is that if I modify the H1 text then I would have to play with the margin right again. Is there a way to place the arrow at the end of the H1 text no matter what the width of the text is? Many thanks,

enter image description here

<div class="block">
    <h1><span>H1 HEADER EN UIUIUIU MOTS</span> KKJKJJKJJKJKJdJKJJK</h1><img class="arrow" src="images/arrow-down.png" alt="arrow">
  </div>
  <div class="block clear fish shadow">
</div>

CSS:

.block {
    display: block;
    clear: both;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    width: 980px;   
}

.arrow{
margin-right: 290px;
float: right;
margin-top: -45px;

}

Upvotes: 1

Views: 360

Answers (6)

deformhead
deformhead

Reputation: 109

You could use CSS pseudo-element :after (only for iE8 and +) :

HTML :

<h1>Hi there !</h1>

And your CSS code (supposing your image is 50px * 50px) :

h1 {
    background: #eee;
    height: 50px;
    line-height: 50px;
    padding-right: 50px;
    position: relative;
    width: 300px;
}

h1:after {
    background: url('images/arrow-down.png') bottom right no-repeat;
    content: '';
    display: block;
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
}

The H1 padding-right must be equal to your image CSS width.

Or simply use :

 h1 {
        background: url('images/arrow-down.png') bottom right no-repeat;
        padding-right: 50px;
    }

Upvotes: 2

pea.sandwell
pea.sandwell

Reputation: 61

As the image you're using looks like it's for decorative purposes, I would use a background on the h1 instead, position it to the far right, and use padding-right to push the image away from the h1. So for example, try:

CSS:

h1 {
    background: url(images/arrow-down.png) no-repeat right center;
    padding-right: 40px; /* tweak this */
}

Codepen example

As for those who are suggesting using the :after pseudo selector, I would strongly advise against doing so, as :after is not great on older IE browsers (plus it's a needlessly complicated solution for a simple task).

Upvotes: 5

Timotheus0106
Timotheus0106

Reputation: 1586

you also can solve that issue with some jquery.

$(document).ready(function(){

    arrowMargin();
    function arrowMargin() {
        $('.block img').css('margin-left', $('.block h1').width());
    }

    $(window).resize(function(){
        arrowMargin();
    });

});

you have to delete your margin-right in the css.

greetings Timotheus

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 115278

As an alternative, if the image is to be directly after the text, you can use a pseudo-element (:after)

h1:after {
  position:absolute;
  content:"";
  width:50px;
  height: inherit;
   background-image: url(path_to/images/arrow-down.png);
  background-repeat:no-repeat;
  background-position:center;
  margin-left: 10px;
}

Codepen Example

Upvotes: 1

Adam Miller
Adam Miller

Reputation: 777

You could give the H1 tag a class and use the css 'after' selector:

http://www.w3schools.com/cssref/sel_after.asp

Upvotes: -1

Paulie_D
Paulie_D

Reputation: 115278

Can you not put the image in the background of the h1 and use background-position to align it to the right?

Codepen Example

Upvotes: 3

Related Questions