SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot eLePHANT's Avatar
    Join Date
    Feb 2010
    Location
    RI, USA
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Header Affected By Picture Change

    My website header was some how affected by a picture I updated here: http://nkdogwalking.com/about.html

    I edited the picture, and then I realized it had affected the title in the header. Why did it do that, and what is the fix? The navigation tabs also shifted towards right. I just don't understand why something in the sidebar would affect the header. I did flip flop the paragraphs on the very same page with the same update... It could've been that, too. But I think it was the picture that did it.

    Would greatly appreciate your help.

  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 Mike,

    Could you be a little more specific on exactly HOW the title changed, we did not see it before like you did.

    I agree though, an edit to the sidebar should not have any effects on the header.

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Whole layout is busted here (your menu buttons are all broken up, stuff blowing out of their containers)... I suspect the cause is the use of dynamic fonts (%/em) inside elements that are relying on images... since as a large fonts user fonts start out 25% larger by default.

    I think some of the problem might be you are over-thinking your markup... you've got multiple pointless DIV, classes, paragraphs around non-paragraph elements, cite when you aren't citing, one cite wrapping multiple separate sources, strong and em around things there's no reason to be emphasizing, etc, etc...

    But yeah, we'd have to see before and after to really help on this.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,330
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    It actually looks fine to me. (I don't see any change from the last time you posted.) What browser are you viewing this in? Have you scaled up / zoomed your font size by accident?

    EDIT:

    Possible one way to stop the header breaking at bigger font sizes would be do something like this (a bit crude, I know, but just a rough try):

    Code:
    #header h1 {max-width: 240px}
    #header ul {max-width: 170px}
    #contact {max-width: 350px;}

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,330
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    That's happening because the line-height inherited from the body is not enough for the H1 (I think). You could try adding this to your CSS:

    Code:
    h1 {
      float: left;
      font-family: "Britannic Bold","Trebuchet MS",Helvetica,Arial,sans-serif;
      font-size: 195%;
      line-height: 1;
      padding-left: 0.5em;
      padding-top: 0.3em;
      margin: 12px 0 0 0;
    }

  6. #6
    SitePoint Zealot eLePHANT's Avatar
    Join Date
    Feb 2010
    Location
    RI, USA
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey everyone. Hi ralph! Always there when I need you. I will give your code a try later on.

    I'm using IE8. I've attached a screen shot of the problem. Looks like I got major problems with my code, deathshadow. Wow. Which divs in particular can be deleted?

    cut-off.GIF

  7. #7
    SitePoint Zealot eLePHANT's Avatar
    Join Date
    Feb 2010
    Location
    RI, USA
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    That's happening because the line-height inherited from the body is not enough for the H1 (I think). You could try adding this to your CSS:

    Code:
    h1 {
      float: left;
      font-family: "Britannic Bold","Trebuchet MS",Helvetica,Arial,sans-serif;
      font-size: 195%;
      line-height: 1;
      padding-left: 0.5em;
      padding-top: 0.3em;
      margin: 12px 0 0 0;
    }
    Thanks, ralph! Wow was that fast!! You and I came here at same time. I'm sorry about order of posts now. I deleted mine because I had two images attached and I couldn't figure out how to delete the other image. So I deleted the post entirely.

    EDIT: Your fix did the trick. Now I need to put those tabs back towards left a little. I should be able to do that myself with padding fix. Your logo skills haven't developed have they? I still haven't gotten a logo. We're two years on now almost.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,330
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by eLePHANT View Post
    Now I need to put those tabs back towards left a little. I should be able to do that myself with padding fix.
    If you mean the navigation tabs at the top, just adjust this:

    Code:
    #navigation ul {
      border-left: medium none;
      border-right: medium none;
      border-top: medium none;
      margin-bottom: 0.1em;
      margin-top: 0;
      overflow: hidden;
      padding-left: 1em;
      padding-top: 0.7em;
    }
    Your logo skills haven't developed have they?
    I'm afraid not.


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
  •