[Pro] Graphic with vertical CSS Menu Action

Hello,
I am building a website on a grid and converting it using the Relative Page Layout Folder action. I’ve inserted a vertical css menu action item and I’m trying to add a graphic just below the menu. Unfortunately I can only place it at the bottom of the LIST box, not the displayed menu which is much shallower in depth, so that when it’s displayed there is a big gap between the menu and the graphic object below. (When I place it over the css menu box it doesn’t display at all). Any ideas how to remedy this? If you set the view in your browser to text only and increase the size, you’ll see that eventually the menu reaches the red rectangle and starts to push it down, but I want the red rectangle to be right under the menu. In the regular view, the gap between the two is created because Freeway won’t let me place it below the menu, just below the list box itself. (I know I’m repeating myself). Thanks so much for any help.

http://www.themeuse.com/freeway/seedlings.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The CSS menu item has a minimum height set

min-height: 350px;

Change that and you should be sorted (about 120 if you actually want to use min-height).

Probably better using flexible

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks David,
Unfortunately, setting the css menu box to flexible didn’t make any difference. I placed the graphic just below the box it didn’t snug up in the browser. When I put the graphic image up next to the css menu preview in the layout window it doesn’t show at all in the browser. :frowning: Any other ideas? Did I do what you recommended correctly?
Thanks!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Unfortunately, setting the css menu box to flexible didn’t make any
difference. I placed the graphic just below the box it didn’t snug up in
the browser…

I think your problem here is that the mauve box is not inline with the menu

  • that is, the item id=m3 needs to be inside the item id=m2, inline after
    the menu. Otherwise, how else will it snug up?

Also, David is absolutely right about the height - flexible will work, but
I think only if you inline the one below it. Then you can use the
margin-top setting to adjust the space it sits below the menu.

Best wishes,


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you. Ok I made the box a child of the menu, but when I view it in the browser there is an error message saying:

"ACTION CANNOT BE USED. The following actions have been incorrectly applied and will be ignored. Action: CSS Menus, Page “seedlings”.

It doesn’t like it that I made the graphic a child. Is this what you meant by inline?

Thanks again…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It doesn’t like it that I made the graphic a child. Is this what you meant
by inline?

Inline… as in, insert the cursor into the box - like you were going to type
something - then use the arrow key to move that text cursor to the end of
the line of whatever is in the box. Use the menu Insert > Insert HTML Item…
and now you have a box inside your box. Click on it to insert text or color
it or whatever you’re trying to do. Be sure to set its width and height to
flexible - the outer box will constrain it, and it will grow/shrink with
whatever you put into it. Use the margin-top setting to space it from the
menu bottom and don’t forget to set the outer box height to flexible.

:slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks so much for your patience! As you can tell I’m pretty new to this. I’m getting there. I got the inline html element to work and it sits underneath the menu just fine, until… I put something in it, then it shoots up to the top and covers the menu. There doesn’t seem to be a “flexible” setting for width, only “fixed”, “fixed%” and “available”. Height has flexible though. As I said, I sure don’t know why putting text in the html item makes it shoot to the top. Regarding setting the top margin, I only see a setting for “margin” with no options for the other directions, so it ends up working like padding. I’m probably not looking in the right places. Thanks again!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Of course, I can’t tell what is happening either without seeing it… maybe
update your online example?

Available width is what I meant… FWP6 has a slightly different vocabulary
than previously. Available means it will expand as much as the container
will let it.

When you select an html item (an html div) and then look at the
Measurements or Dimensions pane of the Inspector, you will see an entry for
margin. There will be a little tab for a popup on one or both of them (I
usually use the Dimensions pane). Pop it up and select “custom” and there
you will see entries for Top, Right, Bottom, and Left margin settings.
Margins are kinda like padding, except padding deals with space inside
the html box and margins describe space outside the box edges. You could
use the padding-top setting instead, but margin poses less impact on the
interior size of the box.

Update your sample with whatever is in your inline box that is throwing it
out of whack and I’ll look at it if there is a chance.

Best wishes,

Ernie Simpson, aka The Big Erns

Thanks so much for your patience! As you can tell I’m pretty new to this.

I’m getting there. I got the inline html element to work and it sits
underneath the menu just fine, until… I put something in it, then it
shoots up to the top and covers the menu. There doesn’t seem to be a
“flexible” setting for width, only “fixed”, “fixed%” and “available”.
Height has flexible though. As I said, I sure don’t know why putting text
in the html item makes it shoot to the top. Regarding setting the top
margin, I only see a setting for “margin” with no options for the other
directions, so it ends up working like padding. I’m probably not looking in
the right places. Thanks again!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Ernie,
Almost ready to hire you, but I gotta learn this stuff. I changed the inserted html box settings to available and flexible and added some type. When I add the type, the box expands upward to within 40 px of the top of the menu (I added the custom top margin value of 40px :). I don’t understand why the box goes up and the text stays below. I want the text and the box to stay 40px below the menu.
http://themeuse.com/freeway/seedlings.html
Thanks again,
Kristin


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What’s happening is the menu action is using floats, which allows things to
shift a bit. To fix it, select the blue html box (m3) and in the General
section of the Inspector find the Clear option and choose Clear Left.

This only partially fixes things as at least Safari still thinks the top of
the blue box is still at the top. A clearing fix is required, but because
of the menu I can’t use the simple one. You have to add enough margin to
clear the menu - more than 127px - OR you can select the blue box, choose
menu Item > Extended > div style and enter these two new style rules:

position    relative

top          20px (or whatever you want)

This may seem strange and it will not affect how the fwp workspace behaves,
but Freeway Pro will write the correct code needed.


Ernie Simpson

Hi Ernie,

Almost ready to hire you, but I gotta learn this stuff. I changed the
inserted html box settings to available and flexible and added some type.
When I add the type, the box expands upward to within 40 px of the top of
the menu (I added the custom top margin value of 40px :). I don’t
understand why the box goes up and the text stays below. I want the text
and the box to stay 40px below the menu.
http://themeuse.com/freeway/seedlings.html
Thanks again,
Kristin


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks so much again. I’m actually not seeing what you are in Safari (maybe I have a different version), and it looks like the problem is fixed with the Clear Left setting. I do have another question though. How did you determine the height of the previewed menu? I only see the dimensions of the list box. Is it in the code and not visible in the fwp inspector?
Thanks again,
Kristin


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

How did you determine the height of the previewed menu? I only see the
dimensions of the list box. Is it in the code and not visible in the fwp
inspector?

Actually, I worked it out by viewing the menu in Safari using the Developer
inspection tools. I could have just looked at the computed code, but I
admit to increasing the margin-top amount until I could see the box
actually move.

:slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Great! Thank you so very much for all your timely advice!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Well, here I am again. I was hoping that RPL would solve my problems with the rest of this page, but it moves all the boxes around. So, if people use Zoom text only with this current build, it doesn’t work. Is there anything I can do to have the footer text move down with the rest of the page. Right now it doesn’t “grow” with the page. I’m beginning to see what I should have done, but I’m wondering, just in case, if there is a fix for this.
http://themeuse.com/freeway/seedlings.html
Thanks so much!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Replying to my own thread again… I added the footer to the html element that holds the sidebar and added a table to it. It grows better now, but now the spacing is off on the sidebar. Would you be willing to explain how to fix the spacing? thank you!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options