Grow your CSS skills. Land your dream job.

is there another way

  • # June 13, 2010 at 3:01 pm

    hi

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

    Code:

    aurel

    /*—————– 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:

    [url]

    <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; }
    [/url]

    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

    # June 14, 2010 at 3:29 am

    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:

    Code:

    aurel

    CSS:

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

    jQuery:

    Code:
    $(function(){
    $(‘h2′).each(function(){
    $(this).width($(‘span’, this).width())+120; //add paddingx2
    });
    });
    # June 17, 2010 at 4:11 am

    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…

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".