- This topic is empty.
-
AuthorPosts
-
June 3, 2014 at 2:26 pm #171705EvertonParticipant
Hello
I have a page here: Main page
In the original code, I had an <h3> font for the ‘How to get there’ subheading (to the left in the green box), just like subheading2 below it. An <h3> font is too small, however, so I enlarged it to <h2 class=”thick”>How to get here</h2>.
Unfortunately, enlarging the font-size has pushed the yellow graphic underneath this subheading so far down that it is not visible! The graphic in my CSS is:
#sidebar h3 { background: url(images/headerbg.gif) repeat-x top left; height: 40px; font-size: 2em; }
How can I change my code, please, so that I can have both the <h2 class=”thick”>How to get here</h2> AND the yellow ‘underline’
graphic for both of these two subheadings?Thank you.
June 3, 2014 at 3:08 pm #171707AtelierbramParticipantYou are not only changing the font-size, but also changing semantics, which is ok here I suppose, as long as you are aware of this. The background-image is not declared on the
#sidebar h2
, so that is the reason for not showing up (but you might as well use a border on the bottom for this).#sidebar h2 { padding-bottom: .125em; border-bottom: 8px solid #dbdd68; }
BTW there is a faux bolding on the
h2
. You can fix this by including the bold weight from google-webfonts in the head:<link href="http://fonts.googleapis.com/css?family=Tangerine:400,700" rel="stylesheet" type="text/css">
When only using the bold weight do:
<link href='http://fonts.googleapis.com/css?family=Tangerine:700' rel='stylesheet' type='text/css'>
June 3, 2014 at 3:33 pm #171710EvertonParticipantThat is magnificent, Atelierbram.
I didn’t realise that background-image was not declared on the #sidebar h2. I have used this:
#sidebar h2 { padding-bottom: .185em; border-bottom: 7px solid #dbdd68; }
and the page looks so much better now.
I have not heard of faux-bolding. I have bookmarked the page, but it seems better to avoid ‘curly’ fonts altogether!
Thanks, too, for the google font links.
Your approach and thoroughness are both refreshing and professional!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.