RESOLVED: Module Headers: Background Image with font only padding

[judahraine]

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.

[Paulie_D]

I would use a pseudo element if you can:

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

[HemZone]

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.

[Paulie_D]

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

[judahraine]

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?

[judahraine]

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

[judahraine]

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!

[wolfcry911]

span.backh3 {
padding: 0 7px;}

look for these and change the padding as shown

[judahraine]

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

[Author]

Posts