Left Justified Header Banner

[Hank]

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

[Hank]

No Ideas?

---

Hank Drew
losaltoscf.org

[Kraft]

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
Genesis eNews Extended Support

[ramseyp]

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.

---

Community • Work • Conversations

[Hank]

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

[Hank]

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

[ramseyp]

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.

---

Community • Work • Conversations

[Kraft]

#header > .wrap

Just seeing if I could get it to work with the forum 🙂

update: Guess not.

---

Brandon Kraft
Volunteer
Blog | Twitter
Genesis eNews Extended Support

[ramseyp]

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

---

Community • Work • Conversations

[Hank]

That is ODD. I will give that a try!

---

Hank Drew
losaltoscf.org

[Author]

Posts