Forums

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

Home Forums CSS [Solved] Larger font dislodging image

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #171705
    Everton
    Participant

    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.

    #171707
    Atelierbram
    Participant

    You 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'>
    
    #171710
    Everton
    Participant

    That 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!

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