As the title really. I’ve buit a page as a test using the inline method with a header, page content and footer. I’ve inserted a CSS menu that will use the BAM action and put this into the header. The BAM menu gets cut off when you ‘reach’ the page content section.
I guess I’ve answered my own question, and the menu will need to go into the main page content area instead, but can anyone clarify pls?
… or even worse when the CSS BAM menu is placed inside the ‘page content’ area (and not the header as before)…
No the bloomin body copy appears above the menu.
I think I’m ready for throwing the towel in on inline construction. I can’t see how I can ever use a CSS menu with the BAM action in an inline construction?
Can you draw an example of what you’re really after? It doesn’t have to work, just show the BAM open where you want it to appear.
Most things are possible with CSS. Even more are possible with JavaScript.
Inline construction is not the problem here, and neither is Freeway, it’s just a matter of letting go of WYSIWYG a little and understanding what the page code is actually doing to the browser.
Walter
On Jun 5, 2013, at 2:17 PM, Neil wrote:
… or even worse when the CSS BAM menu is placed inside the ‘page content’ area (and not the header as before)…
I think I’m ready for throwing the towel in on inline construction. I can’t see how I can ever use a CSS menu with the BAM action in an inline construction?
Eventually I’ll be (attempting) to add a CMS to this so decided to go for an inline construction since the main ‘page content’ area will need to be flexible in depth depending on the copy it receives. I’ve also tried a few simple site designs as inline and really like the logical layout approach, but this one has had me tearing my hair out. I’ve spent nearly a whole day on this!
You can get an idea of how the menu should display by the visual hopefully - the CSS / BAM option seemed the most logical (and SEO friendly?) method I could think of.
Adding a higher z-index to the container object of your menu fixes the “underlap” problem. It’s still going to be difficult to get the full effect of your menu graphics using the CSS Menus Action, but it should be possible with some kicking and screaming.
Click once on the HTML box that contains your menu, and assign it a z-index of 100 or so. You may do this using the Item / Extended menu: choose the DIV Style tab, click New, and add Name: z-index, Value: 100. Okay out of the stack of dialogs and see if you see what I do (I did this using the Safari Web Inspector).
Your next trick will be to chop up your lovely tab graphics and insert them into the top-level of your CSS Menu as linked inline graphics. Remove all the borders and other styling from the menu, and you should be able to get quite close to your layout.
Walter
On Jun 5, 2013, at 2:33 PM, Neil wrote:
Hi Walt,
Thanks for the reply, really appreciate it. Below is a link to a PDF of an InDesign visual I produced prior to the Freeway build.
Eventually I’ll be (attempting) to add a CMS to this so decided to go for an inline construction since the main ‘page content’ area will need to be flexible in depth depending on the copy it receives. I’ve also tried a few simple site designs as inline and really like the logical layout approach, but this one has had me tearing my hair out. I’ve spent nearly a whole day on this!
You can get an idea of how the menu should display by the visual hopefully - the CSS / BAM option seemed the most logical (and SEO friendly?) method I could think of.
Thanks for the swift reply. That fixed the underlap issue, many thanks!
The only part I don’t understand is putting chopped up the tab graphics into the menu as inline graphics (unless you mean doing this via the CSS Action menu action as a background?
In your list of menu options, replace the linked text for each main option with an inline image cut from your graphic tabs. Apply a link to each one. I would do the cutting in Photoshop or the local equivalent, and save each slice as a PNG or JPEG graphic at exactly the size you want it to appear. Then in your menu list, choose Insert / Graphic Item, navigate to the first slice, make sure you check the Pass-through option, and okay it. Apply the appropriate link to that image, then use the arrow key to move down to the next list item and repeat the process. When you’re done, the top level of the menu will not have any text in it, just individual sliced graphics. You’ll need to fiddle with the top-level margin and padding and border settings in the Action, but you should be able to make the slices come directly together as a seamless whole.
Walter
On Jun 5, 2013, at 3:22 PM, Neil wrote:
Hi Walt,
Thanks for the swift reply. That fixed the underlap issue, many thanks!
The only part I don’t understand is putting chopped up the tab graphics into the menu as inline graphics (unless you mean doing this via the CSS Action menu action as a background?
After a bit of fiddling around a bit, I’ve managed to (kind of) do it. Here’s a (very, very) rough start in progress:
Obviously the BAM area that appears will be different for each menu item, i’ve just duped it up for now. The ability to change co-ordinates in the BAM menu is a life saver.
Only thing I’m not too sure on yet is the gap between each image used in the CSS menu - could do with reducing since the menu it too long, but I’ll take a look and see if I can figure it.
I know the menu’s not lined up yet but it’s a start!