Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Caption Above The h2 Subheading

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #267802
    ian
    Participant

    Hey guys, although I am pretty much a newbie when it comes to coding, I do try very hard to figure stuff out and learn, however, this one I just could not solve.
    First of all, I am not quite sure if caption is the phrase I am looking for but anyway here it goes:

    I want to put a transparent small caption above the H2 tags with a different text.

    To illustrate a life example take a look at the h2 found in this article: https://www.healthline.com/health/exercise-fitness/run-commuting#getting-expert-advice

    I want to implement something like that here:
    https://trendiko.com/5-common-bodybuilding-mistakes/

    Any help would be appreciated.

    #267805
    Beverleyh
    Participant

    What part are you needing help with specifically?

    Transparency? Have a look in to rgba colours (maybe along with the background-color property or color property), or check out the opacity property (if you’re looking to fade out the whole caption for example)

    Positioning? Have a look into CSS margins (can be positive or negative) so that you can pull your H2 closer to your “caption”.

    For specific help, please provide a ** reduced** sample in CodePen, showing us what markup you’re working with and the CSS you’ve tried. It might also help to provide a mock-up image of how you want this title/caption combo to ultimately look (these options are preferable to asking folks to look at a website as there will be less distractions)

    #267809
    ian
    Participant

    Hi Beverley and thanks for the reply!

    “What part are you needing help with specifically?”
    – I want my subheadings to look like this H2 found here:
    https://www.healthline.com/health/exercise-fitness/run-commuting#getting-expert-advice

    Here is the thing:
    There is nothing much to provide as reduced code since I don’t know how to do it, that is why I asked the question at first place. :/

    I mean I tried bunch of stuff by Google-ing, divs classes spans etc, but nothing worth showing as a sample. For the very same reason I shared a link where one can see how it looks and there is also a link where I’m trying to implement it.

    If this makes any difference, this is last thing I did (but this is not the solution): https://codepen.io/anon/pen/zRXgyd

    Thanks again!

    #267810
    Beverleyh
    Participant

    I’m sorry but I’m on mobile so it isn’t clear to me on my screen what you’re referring to, and I can’t look at the web page in the developer console in order to see how anything is done… you can though: it’s F12 in most browsers. Either F12, or right-click the element and inspect it that way. You’ll be able to see what elements they’ve used and also see the styles applied to them in the “styles” pane. From there you should be able to transfer the effect to your own work.

    #267811
    Divergent
    Participant

    You can create another text above the

    <

    h2>

    <span class="subtitle">Subtitle</span>
    <h2 class="text">This is the Title</h2>
    

    And apply styling in css on the .subtitle class, like margins, color, opacity etc.

    Check https://codepen.io/anon/pen/EQzYEd

    #267814
    ian
    Participant

    That actually did the trick thanks Divergent.

    However I do have another issue.

    I’m guessing I need to put them both together in a div (the span and the h2)? Since the regular h2 has it’s own margins (or line spacing, height etc). And in the same time to add class to that div and control it by CSS as well?

    What would you recommend?

    #267816
    Beverleyh
    Participant

    I’m not really sure what you’re saying the next issue is. Are you asking how to target this special H2 in CSS without targeting a “regular H2”, which I’m taking to mean as an H2 without the .title class?

    To target a “regular H2” only, you can use the H2 selector along with not();

    h2:not(.title) {
    /* your styles here */
    

    To target just the H2s with a .title class;

    h2.title {
    /* your styles here */
    

    Or everything with a .title class;

    .title {
    /* your styles here */
    

    To target both elements at the same time (you don’t need to put them in a div in order to target them with the same CSS);

    .title, .subtitle {
    /* your styles here */
    

    Does that answer your question? If not, could you rephrase?

    #267817
    Divergent
    Participant

    Yes you can put them both in a div.

    <div class="title-body">
    <span>
    

    and apply what you want for that block on .title-body class

    #267818
    ian
    Participant

    I’ll try that, thanks Divergent.

    I believe the problem is that WP is creating a paragraph for the span and that’s why I can’t control the margins.

    I tried both, negative top margin (for the h2) and negative bottom margins (for the span), but it appears the paragraph itself is creating the white space.

    I’m heading somewhere and I really appreciate taking the time to respond to my newbie questions.

    p.s Beverleyh thanks for the tips.

    #267819
    Divergent
    Participant

    try adding !important

    like

    margin-top: 8px !important;

    #267820
    ian
    Participant

    Wow, great, it worked! I used Firefox Developer Edition and this was a nice fit:

    margin-top:-38px !important;

    Thank you! :)

    #267845
    ian
    Participant

    Quick Update: Here’s a link to see how it looks like now:

    https://trendiko.com/guinep-fruit-health-benefits/

    Btw, I had to skip the first h2 because I’m using a table of contents plugin and it’s set to show before the first Heading, so if I place a span it’s above the Contents and the h2 is below it, but I’m very happy how this all turned out :) Woohoo!

    Thanks a million!!!

    #267846
    Divergent
    Participant

    Show me that plugin?

    #267847
    ian
    Participant

    It’s the Table of Contents Plus: https://wordpress.org/plugins/table-of-contents-plus/

Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘CSS’ is closed to new topics and replies.