- This topic is empty.
-
AuthorPosts
-
February 21, 2013 at 9:36 am #42900Zell LiewParticipant
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 #125534Paulie_DMemberIt’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 #125574wolfcry911Participantadd padding: 5px 0; to h1 a
February 21, 2013 at 12:34 pm #125579Paulie_DMemberOr just do this
h1 a{
display:block;
}February 21, 2013 at 12:40 pm #125580wolfcry911Participantzellwk 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 #125582AlenParticipant> 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 #125624Zell LiewParticipantHi 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 #125670wolfcry911Participanthello?
February 22, 2013 at 6:52 am #125672Paulie_DMember>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 #123754Zell LiewParticipantAhaha.
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 #123639wolfcry911ParticipantNo, 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 #123627Paulie_DMember>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
February 22, 2013 at 3:59 pm #121825AlenParticipant@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 -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.