SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Having issues with headings

    Hi there,

    Learner here, having issues with font sizes in my headings.

    This image shows my problem - "Welcome" is h1, "Contact Me" and "Latest Projects" are h2, but all headings should display as the same size.

    Here's the code I've written:

    Code:
    h1, h2 {
     font-family: Georgia, serif;
     color: #fff;
     font-style: normal;
     font-size: 2em;
    }
    
    #welcomeHeader {
     background: #556270;
     width: 100%;
     height: 45px;
    }
    
    #contactHeader {
     background: #556270;
     width: 100%;
     height: 45px;
    }
    
    #projectsHeader {
     background: #556270;
     width: 100%;
     height: 45px;
     text-align: right;
    }
    Where am I going wrong? :\

    Thanks!

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    After looking at your screenshot I am going to guess that you have ran into an em Font-Size Scaling issue here.

    Your "Latest Projects" h2 is a child of your right column and I am guessing that you have set a font-size on that right column parent div.

    We would need to see your complete css/html to pinpoint it for you but hopefully that link I gave above will show you how em font scaling works. This Article also explains em font scaling very well too.

    Post a link to your page or the complete code if you need further help with it.

  3. #3
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am indeed using ems for font size, but can't seem to pinpoint the part of the code you're refering to, Rayzur..

    Here's a link to the page, some detective-work would be appreciated

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    The problem is in the left column on the .contentText class. It is the parent of the h2 headings in the left column and you have set it's base font-size to .8em therefore any children will base their font-size from that.

    web.css line 172
    Code:
    .contentText {
    
     color: #556270;
     font: italic 0.8em Georgia, serif;
    
    }

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    If you want to keep the h2 in the right column the same size as the left column then you can declare the .8em font-size in one of these two selectors. Not both though or more scaling problems will begin.
    Code:
    #projectsInner {
     background: #f4f4f4;
     width: 100%;
     height: 100%;
    /*font: italic 0.8em Georgia, serif;*/
    }
    
    #projectsHeader {
     background: #556270;
     width: 100%;
     height: 45px;
     text-align: right;
    font: italic 0.8em Georgia, serif;
    }
    If you want to target just the h2 then set the font-size on the #projectsHeader. If you want to target the complete right column you could set it on the #projectsInner.

  6. #6
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, of course! A fresh pair of eyes always spots the things you can't see.

    Thanks for figuring that one out for me, Rayzur, and for offering a solution

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Glad to be of help!

    Like the article I linked to above says, "Who's your Daddy?"
    That is always the question at hand when dealing with ems.

    Cheers


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •