Reputation: 3063
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,
<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
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
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 */
}
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
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
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;
}
Upvotes: 1
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
Reputation: 115278
Can you not put the image in the background of the h1 and use background-position to align it to the right?
Upvotes: 3