HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Desert Combat Theme - Having a Padding problem (SOLVED)

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#55787 (In Topic #12125)
Avatar

Community saint

How to frame a Flash banner, apply texture to standard boxes and various small css modifications

Fellow Themers,

I'm in the process of preparing a new tutorial, using my Desert Combat gaming theme to show how to frame a Flash banner, apply texture to standard boxes and various small css modifications, but I'm having a bit of a problem with a stubborn text label that will not adjust vertically, no matter what I try from my limited knowledge.

Padding, just pushed the image up or down without affecting the text, which stays glued to the bottom of the image container. I've done an identical one for the side panels, using padding and had no problem.

My guess is that I'm doing this one all wrong, as I beleive that the classic box is made of several graphical elements that are replicated left, center, and right. I am attempting to change this with one fixed-width image.

Here is the global.css code, I've used:

Code

.standardbox_title_classic, .tabletitle_internal, .standardbox_title_med, .standardbox_title_curved, .standardbox_title_curved_iesucks {
/* Structure */
background-color: #ece0c4; /* {$,wizard, 100% seed} */
background-image: url("{$IMG,standardbox/title_desert}");
background-repeat: no-repeat;

/* Text */
color: #ffffff; /* {$,wizard, 100% W/B} */
text-align: center;
font-weight: bold;
text-decoration: none;
}
Counsel would be greatly appreaciated, thank you!

Jean

You can view the test site here: Desert Combat


Last edit: by Jean
Back to the top
 
Posted
Rating:
#55814
Avatar

Wow looks awesome :)

To adjust the vertical alignment of that text, I used Firebug, clicked on the problem area, that showed me you have this on line 723:

Code

.standardbox_title_classic, .standardbox_title_med, .standardbox_title_light {
padding-top:1em;
}

So I played with that by clicking to the left of the padding declaration which temporarily shut it off, so I could see the height was being driven by that padding property.

After a litle bit of playing, replacing it with this seems to do the trick:

padding-bottom:0.5em;
padding-top:0.5em;

Back to the top
 
Posted
Rating:
#55817
Avatar

Community saint

Thank you again, Allen!

I'm angry at myself:$, since I'm the one who changed the original to a drastic "1em" to see how it would react and forgot about it, trying to add padding under the **text** structure instead. So, it was constantly overruled by the other statement all the time. I even saw it with firebug and decided it belonged to the side-panel boxes for some strange reasons.

Sorry to have taken your time again, but honestly glad for your response, as this has been annoying me for countless hours of trial and errors.

Glad you like the desert theme. This is my favorite!

Best regards,:)
Jean
Back to the top
 
Posted
Rating:
#55833
Avatar

No worries, I'm happy to share a quick fix or so given the amount of work you put in creating it. Thanks for showing it :).

Back to the top
 
Posted
Rating:
#55904
Avatar

Honoured member

S I C K!

I have no words.
 :thumbs:  :thumbs:  :thumbs:
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: