Grow your CSS skills. Land your dream job.

RESOLVED: Module Headers: Background Image with font only padding

  • # October 8, 2012 at 9:20 am

    Hi everyone, I’ve been searching in vain for what I’m sure must be a simple thing, but no matter what I try (yes, I have Firebug) I cannot get it to work and am almost desperate in my stupidity :)

    I wish to create a standard header for all modules with the same background image stretched to fill the width of the module, i.e no padding. I have no problem here, as you can see at http://www.classicromancerevival.com.

    My problem is when I try to put padding to font only, i.e. 7px left and right so that the text is not right against the border. I have tried every #nav h3 and #right h3 (including those with js_header) anything with header span….. in fact anything I can find in any and all of the css files.

    When I finally get the test to move, it pads the background image as well. Is there a way to “separate” these so that I can pad the font and not the image??

    I would greatly appreciate your help, thank you.

    # October 8, 2012 at 10:07 am

    I would use a pseudo element if you can:

    http://codepen.io/Paulie-D/pen/ikdtB

    # October 8, 2012 at 10:14 am

    Try to Edit Your Code & Add these values.

    .menuhorizontal_menu li {float: left;
    font-size: 1.2em;
    padding: 0 20px;
    border-right: 1px solid white;
    line-height: 28px;
    text-decoration: none;
    height: 30px;
    list-style-type: none;}

    You can use different image instead of right border for separation.

    # October 8, 2012 at 10:33 am

    Ah…I see you need to have text in there.

    You could do that with my previous example (as the content) but it wouldn’t be semantic.

    You could add a background image to the ‘h3′ tag.

    http://codepen.io/Paulie-D/pen/xLJbd

    Frankly, I would just throw a ‘header’ element in there and but the ‘h3′ in there.

    So many more options – http://codepen.io/Paulie-D/pen/xzqhL

    # October 8, 2012 at 12:19 pm

    Hi there, thanks for responding :). I confess, I’m lost, being something of a novice… sigh. Are you suggesting that I create a generic “module header” element? That would make sense, and I was thinking along the lines of a .moduletable_header. I’m just not sure how I would “write” this to make it work. Lol, I’m learning as quickly as I can.

    I had a look at the first example here… in order to get the background image into the modules I had to add it to both #nav module h3 and #right module h3 – would a generic header element do this for all modules? Would it help if I posted the css and layout.css?

    # October 8, 2012 at 12:21 pm

    Hmmm… looking at the control 2 on the second example, I’m going to give this a try….

    # October 8, 2012 at 12:30 pm

    Eeeeek! I added the code between . moduletable and .moduletablemenu like this:

    .moduletable
    {
    border:1px solid #370843;
    background: #fefed2;
    margin-bottom:8px;
    padding:0px 0px 0px 0px;
    }

    div {
    width:250px;
    height:350px;
    margin:25px auto;
    background:#bada55;
    }

    header {
    background-image: url(../images/modheader.png);
    background-repeat:no-repeat;
    color:white;
    padding:5px 0;
    }

    .moduletable header h3 {
    padding-left: 7px;
    }

    .moduletable_menu
    {
    border:1px solid #380743;
    background: #fefed2;
    padding: 0px 0px 0px 0px;
    margin-bottom:8px;
    }

    Clearly the wrong thing to do, lol… whole site has moved to the right, a module is floating above the header and every last bit of text has vanished!

    # October 8, 2012 at 7:59 pm

    span.backh3 {
    padding: 0 7px;}

    look for these and change the padding as shown

    # October 9, 2012 at 12:48 am

    Hi there… thanks for the suggestions, tried them all, had no luck, then had a brainwave…. I found the header text and added “text-indent:7px;” and it worked like a charm. The W3schools validator didn’t pick up an error so I assume it’s ok. All help much appreciated

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

You must be logged in to reply to this topic.

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