Forums

akurtula

hi

i just wanted to add a background image to a h2 tag:


     <!---    HTML -->
<h2>aurel</h2>

   /*-----------------  CSS  -----------*/

H2{
            padding: 60px; /*   <----  THIS IS MY PROBLEM  --->
            width:325px;
            height:114px;
            background: url(images/tag.jpg) no-repeat;
}

the padding at the moment is ok - however (i had this problem before) - if the h2 text grows to "aurel kurtula" - the padding would need to be modified - i know by wrapping the h2 with another div, the problem is solved, something like:

<div class="title">
<h2>aurel</h2>
</div>
CSS
.title{
width:325px;
height:114px;
background: url(images/tag.jpg) no-repeat;
}
h2{
width:200px; /*margin would have no effect without a width*/
margin:auto; }

i have been wondering about this before, IF there is a way to center elements that do not have a specific width.

hope you know how to do this
thanks

Makeshift

you can fix this using jQuery by putting an inline level element like a span within a block level element like a div or h2.

Html:

<h2><span>aurel</span></h2>

CSS:

h2 { padding: 60px; height: 114px; }

jQuery:

$(function(){
    $('h2').each(function(){
        $(this).width($('span', this).width())+120; //add paddingx2
    });
});

birdrockdesigns

Are you using the same background image for h2 tags?

If so, then use text-align: center; for your h2 tag - should help with padding issues , at least left and right padding that is...

treehouse : what would you like to learn today?

Forums

is there another way