It’s still in the process of being created but I would like suggestions as to how to solve the problem with the navigation bar. When viewed at default text size it looks fine, but increase the browser text size, and the HTML items increase in depth leaving the 2 non-html end bars the same size. I’ve also noticed that by default viewing the site on an ipod shows the navigation enlarged already.
Try setting the background color of you menus to the same as the color at the bottom of the gradients in the images you are using. So for Normal it will be a reddy color, for Hover it will be a bluey color.
This means that when the container grows past the size of the graphic inside it you will see the background color - since this will be the same color as the bottom of the graphic it will look like the graphic just continues forever.
It’s still in the process of being created but I would like suggestions as to how to solve the problem with the navigation bar. When viewed at default text size it looks fine, but increase the browser text size, and the HTML items increase in depth leaving the 2 non-html end bars the same size. I’ve also noticed that by default viewing the site on an ipod shows the navigation enlarged already.
Just to clarify, I mean the background color inside the Action palette, not in the Inspector.
Joe
On 23 Feb 2010, at 14:05, Joe Billings wrote:
Hi Neil,
Try setting the background color of you menus to the same as the color at the bottom of the gradients in the images you are using. So for Normal it will be a reddy color, for Hover it will be a bluey color.
This means that when the container grows past the size of the graphic inside it you will see the background color - since this will be the same color as the bottom of the graphic it will look like the graphic just continues forever.
It’s still in the process of being created but I would like suggestions as to how to solve the problem with the navigation bar. When viewed at default text size it looks fine, but increase the browser text size, and the HTML items increase in depth leaving the 2 non-html end bars the same size. I’ve also noticed that by default viewing the site on an ipod shows the navigation enlarged already.
Thanks for that Joe, I was aware of that problem, and thanks for solving it, but that wasn’t actually the one I was referring to!
Can you see how the navigation bar stretches from the left to the right of the page? and then (when you increase the point size) the middle chunk enlarges vertically whilst the far left and right-hand bars do not (because they’re not HTML). Is there a way to either increase the left and right hand bars at the same time as the middle, or can I restrict the growth of the middle HTML items so that the whole bar stays the same depth?
Robert is right, that would be the way to do it. Your design in Freeway will look a little different though because when you set the menu item to have an undefined height it will extend to the height of the list inside it. It will look as expected when you preview it in a browser though. You’ll also need to use the trick I mentioned before too, otherwise the same thing that is happening now will happen to the edges.
Joe
On 23 Feb 2010, at 14:26, neil.west1 wrote:
Hmmm, I’d not thought of that - I’ll give it a go - thanks Bob.
So, do I paste each of the 8 parts (the 2 ends and the CSS menus) into a single HTML box? In which case how do I get the ends to enlarge along with the menus?
Presumably if I paste an overlarge graphic into the box (for the ends), it’ll force the enclosing box to enlarge to suit - making it too deep. Likewise, if I paste in the correct size graphic, it’ll not increase it’s depth at all whilst the rest of the enclosing box will.
I’m new to this HTML box model method of making web sites so I’m still finding my way around.
Draw an HTML item on the page, make it the width you want the bar to be and set its background image to be the gradient image. Cut your existing menu, double click inside the new HTML item and paste.
You want to remove the height from the container item so it shrinks to the size of the menus. Select the menu item, open up the Margin dropdown menu in the Inspector and choose Custom. In here you want to make the Left Margin 20 or 25px. Ok the dialogs and preview in the browser to see the desired result.
Hope this helps,
Joe
On 23 Feb 2010, at 16:11, neil.west1 wrote:
I tried that, but it wouldn’t allow me to have ‘empty’ cells.
I’ve used the same background for each of the states, so there is no visual difference when you do a mouse-over. Now I just need to chop up the top right logo and create a graphic to place into the right hand end.
That doesn’t appear to work for me. I’ve tried with both a photoshop and png file, but both (with or without the FW drop shadow) end up with a grey square around them obscuring everything else.
Make sure your PNG file is set to Colors: millions, in the Inspector.
HTH. Colin
On 23 Feb 2010, at 17:04, neil.west1 wrote:
Thanks Dave
That doesn’t appear to work for me. I’ve tried with both a photoshop
and png file, but both (with or without the FW drop shadow) end up
with a grey square around them obscuring everything else.
