Left Justified Header Banner

Community Forums Forums Design Tips and Tricks Left Justified Header Banner

This topic is: not resolved

Tagged: , ,

This topic contains 9 replies, has 3 voices, and was last updated by  Hank 1 year, 7 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #3633

    Hank
    Participant
    Post count: 15

    Hi All,

    So, I have a banner that that want to align to the left line of my inner body. On one of my monitors it is working perfectly. One a few others it isn’t

    Any idea why this is happening?

    losaltoscf.org/test

    Regards,

    Hank


    Hank Drew
    losaltoscf.org

    #3783

    Hank
    Participant
    Post count: 15

    No Ideas?


    Hank Drew
    losaltoscf.org

    #4551

    Kraft
    Participant
    Post count: 86

    I only have a second so I can’t nail it down, but for the others checking out this thread:

    It appears that the logo is horizontally responsive–that the header background (CSS on page, line 41) isn’t set to a position so it’s moving around based on how wide the window is.

    For me, it appears to be too far left, but if I reduce the width of the window, it eventually lines up. My guess is one monitor is wider than the other?


    Brandon Kraft
    Volunteer
    Blog | Twitter | Business
    Genesis eNews Extended Support

    #4552

    ramseyp
    Participant
    Post count: 97

    Hi Hank,

    You have a couple of steps to take to make this work. First, you’ll need to set a constraint on the div in #header with the class of wrap. In your style.css, you can set this declaration:

    #header > .wrap { width: 960px; margin: 0 auto; }

    This sets the contents of the header to the width of the #inner div and aligns the div with #inner.

    You want to next edit the style.css to remove the left margin from the title area. Look for this in style.css:

    .header-image #title-area,.header-image #title, .header-image #title a

    Remove this line from that style declaration: margin-left: 400px;

    You now have a header that will align content with the left & right sides of the #inner div. Your header image, though, is a bit out of place. You’ll want to edit the image so its contents are shifted approximately 30 or so pixels left.


    • This reply was modified 1 year, 7 months ago by  nickthegeek.
    • This reply was modified 1 year, 7 months ago by  nickthegeek.
    #4553

    Hank
    Participant
    Post count: 15

    Hey,

    Thanks for the suggestions Will give that a try.

    Was beating my head against my monitor looking for the correct css settings.


    Hank Drew
    losaltoscf.org

    #4576

    Hank
    Participant
    Post count: 15

    Sorry to be a bother again, but I appear to still have that same problem. Now it aligns to my 16:9 monitor. But not to my co-workers. And not on any of the 4:3 monitors.

     


    Hank Drew
    losaltoscf.org

    #4631

    ramseyp
    Participant
    Post count: 97

    Hrmm… I didn’t notice that the first line of CSS I wrote down got mangled. It should read:

    #header > .wrap { width: 960px; margin: 0 auto; }

    (There’s a greater-than symbol after #header.)

    I don’t see any CSS applied to the .wrap div inside #header, looking at your site. Double-check the CSS & see if it changes things.


    • This reply was modified 1 year, 7 months ago by  ramseyp.
    • This reply was modified 1 year, 7 months ago by  ramseyp.
    #4634

    Kraft
    Participant
    Post count: 86
    #header > .wrap

    Just seeing if I could get it to work with the forum :-)

    update: Guess not.


    Brandon Kraft
    Volunteer
    Blog | Twitter | Business
    Genesis eNews Extended Support

    • This reply was modified 1 year, 7 months ago by  Kraft.
    • This reply was modified 1 year, 7 months ago by  Kraft.
    #4637

    ramseyp
    Participant
    Post count: 97

    Gah. Trying to get code snippets in here is a wee-bit frustrating.

    You can see the proper line of CSS at this link: http://pastie.org/5514534


    • This reply was modified 1 year, 7 months ago by  ramseyp.
    • This reply was modified 1 year, 7 months ago by  ramseyp.
    #4744

    Hank
    Participant
    Post count: 15

    That is ODD. I will give that a try!


    Hank Drew
    losaltoscf.org

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.