- This topic is empty.
-
AuthorPosts
-
October 8, 2012 at 9:20 am #40193
judahraine
MemberHi 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 #111415Paulie_D
MemberI would use a pseudo element if you can:
October 8, 2012 at 10:14 am #111416HemZone
MemberTry 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 #111301Paulie_D
MemberAh…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 #111424judahraine
MemberHi 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 #111425judahraine
MemberHmmm… looking at the control 2 on the second example, I’m going to give this a try….
October 8, 2012 at 12:30 pm #111427judahraine
MemberEeeeek! 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 #111458wolfcry911
Participantspan.backh3 {
padding: 0 7px;}look for these and change the padding as shown
October 9, 2012 at 12:48 am #111473judahraine
MemberHi 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
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.