Grow your CSS skills. Land your dream job.

Gap between 2 lines in a header text

  • # February 21, 2013 at 9:36 am

    Hi there,

    I’m new to HTML and CSS and I’m in the process of developing a blog for myself as a learning process.

    I’m encountering some difficulties with the H1 text shown in the CodePen IO link
    (http://codepen.io/zellwk/pen/qHzdF “H1 a link with problems”).

    The problem is that when I mouse over the middle of the text (between the lines), there is one small section where the hover effects clear off because it was not part of the area.

    If I change the display to block instead, I find the hover area too large for my preference (it extends all the way to the end of the content area)

    I dont want to reduce the line height either as it will break the vertical rythm.

    Is there anything else I can do?

    Thanks in advance!!

    Zell

    # February 21, 2013 at 10:27 am

    It’s the

    h1 a

    there is no need to do that…style the h1 and a elements separately. http://codepen.io/Paulie-D/pen/wdnHz

    # February 21, 2013 at 12:15 pm

    add padding: 5px 0; to h1 a

    # February 21, 2013 at 12:34 pm

    Or just do this

    h1 a{
    display:block;
    }

    # February 21, 2013 at 12:40 pm

    zellwk already stated that display block makes the hover area too large (the area to the right of the last line becomes hoverable).

    # February 21, 2013 at 12:57 pm

    > If I change the display to block instead, I find the hover area too large for my preference (it extends all the way to the end of the content area)

    Block level elements will stretch across available area.
    Imagine a rectangle around H1 this would be your hit area.

    I don’t see any issues with doing it with display:block;

    see here: http://codepen.io/anon/pen/wKbIh

    # February 21, 2013 at 9:18 pm

    Hi all,

    Thanks alot for the input.

    @Paulie_D. I see your point in styling H1 and a tags differently. Thanks for that info there. However, that doesnt solve my problem of having a slight gap between the heading texts which hover doesnt trigger.

    I guess the best way of doing it right now is still display:block.

    Thanks guys!

    # February 22, 2013 at 6:45 am

    hello?

    # February 22, 2013 at 6:52 am

    >hello?

    Hello…your solution was probably the ideal one for her preference.

    Personally, I think **not** having linked header tag as block is bad UI/UX but that’s just me.

    I dunno…is

    Link text

    better/worse than


    Link Text

    Is one any more semantic / best practise than the other?

    Just asking.

    Obviously, they will work slightly different.

    # February 22, 2013 at 11:16 am

    Ahaha.

    By guys I was referring to @wolfcry911 and @alenabdula. Sorry guys, first time posting online, will take notice from now on. Apologies if i am rude in any way (:

    regarding

    Link text

    or


    Link Text

    I dont think either is more semantic / a better practise imo. There is just some styling issues and I’m more used to the former and I think it works more intuitively.

    Is there any difference anyway? I’d love to hear more opinions about it though.

    # February 22, 2013 at 11:17 am

    No, you weren’t rude – and I wasn’t looking for acknowledgement. I was referring to the fix I posted above which meets you’re criteria…

    # February 22, 2013 at 11:33 am

    >I don’t think either is more semantic / a better practise imo. There is just some styling issues and I’m more used to the former and I think it works more intuitively.

    In effect there is very little difference except if you want the header to automatically clickable across the full block width & height.

    Overall, I think I prefer..


    Link Text

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

    # February 22, 2013 at 3:59 pm

    @Paulie_D what exactly are you trying to demonstrate with your CodePen?

    h1 a {
    display:block;
    }

    Would result in clickable link across full block on h1 a.

    What happens if your design requires long H1 headline that links multiple words to multiple sources? You would be mixing and matching your code. Making styling really difficult. Although, this passes validation, I wouldn’t recommend using it. You would be limiting modularity of your code.

    Keep your CSS simple. Set baseline style for all headings & links. If any specific headline needs altering, can inherit the base style, then you make any necessary changes by being more specific with your code.

    so:

    h1 {
    /*code*/
    }

    then:

    .post h1 {
    /* diff. style /*
    }

    .sidebar h1 {
    /* diff. style /*
    }

    Hope that helps,
    -Alen

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

You must be logged in to reply to this topic.

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