Hello all!

I'm doing a site for a client which is all very easy -- except for a very snazzy header. I beg the help of people who really get how to set position and deal with things moving around!

Here are three images -- first, the idea header, from her business card.

Second, I've got it pretty okay in a very static way.

Third, how it all falls apart.

I need help making the one image in the header (the "C") resize smaller (it never needs to be bigger than 200px). And to have the font and HR both resize down with it, and stay *right in the middle of the C*.

Anyone have anyone have *any* help for me? I would offer cookies in reward -- but this being the internet, you'll just get my undying gratitude!

Hi Elisabeth,
Can you share you project?

Heh, Eric. My first response was to say, of course, and attach it. However, despite it being a perfectly reasonable .rsd file, which opens just fine, I keep getting "Sorry, we couldn't add your post for the following reasons:
Your attachment must be one of: .TXT, .SNP, .ZIP, .RSD, .RLM, .RLMP, .RED, .GIF, .JPG, or .PNG format."

So I *would*. But I *can't*!

ZIP the file first and then try and attach it.

Oh. Of course. Sorry, it's been a loooong week!

Here is project, zipped!

(And thanks Eric, for responding. And Scott, for making things idiot-proof!)

How about making the whole thing an image?

I tried that, Eric. That would be the easy thing, right?

But had more trouble there! First, I could not get a good crispness on the font, keeping the file size suitably low (keeping in mind that I want the line to stretch across the whole of the header, the file has to be pretty large, horizontal-wise.)

But then -- and I'm sure this is fixable, but I could not figure out how -- the header image just kept dropping down behind the main text area. If that can be easily resolved, then maybe I can deal with A.) a less crisp font and B.) that not having the name of the site as text seems so very early 2000s.

But after all those disappointments with the "just an image" header, I just went back to the mix of graphic and font and HR header, and hoped people could help me!

Elizabeth, have you tried adjusting the size of the header items for smaller screens?
From your photo, it looks like the design holds up down to tablet size. Find out where it starts to go wonky (700px?, 640px?...) and add a breakpoint so you can adjust the font size and make the C smaller as needed. You may need to experiment with some vertical positioning to keep the text centered within the C.

I'm wondering whether the following might fill the bill -

1. putting the horizontal rule in a very narrow separate row below the top row and
a. floating it right
b. giving it a negative top margin to bring it back to the position between the two heading elements;
c. giving it a % width to make the left end of it line up with the headings.

2. playing with the top row at various breakpoints as follows -
a. using Effects Scale to scale down the size of that row (the contents get scaled automatically as this is done);
b. with each adjustment making sufficient negative right margin and top margin adjustments to bring the picture and words to the correct position.

3. at those various breakpoints also making the necessary adjustments to the horizontal rule.

Frank

Try making two images.
A png with the big C with the words and the second one for the rule.