[Pro] Inline, a fixed div as a child.

I have one question:
In an inline construction, how do you insert a fixed item as a child item into a wrapper div in a way that this fixed item becomes part of the wrapper?

In Freeway I can insert an html item within another, in an inflow construction, but only if there is no cursor within an html item, choosing ‘insert html’ will result in an item which I can make ‘fixed’. So how do I bring the two items together as parent and child?


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

Hello,

If i understand you question correctly, all you need to do is double click the cursor inside the parent HTML (Wrapper) then select insert HTML/Graphic and a Child item should be created within the wrapper.

Apologies if i have totally misunderstood your Q?


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

I’m struggling to understand what exactly you are asking so forgive me if I’ve got this wrong.

Freeway allows us to position items in several ways; absolutely, fixed and inline.

The easiest to understand is fixed as you can place an item in a fixed position and it won’t move at all. It just stays put in the same spot on the page.

An absolutely positioned item, on the other hand, will always be positioned in relation to a parent item. So if you insert an HTML item with nothing selected on the page then your new item will become a child of the page (strictly the PageDiv) itself. As the page is aligned and moved the child item will move with it. Most of us are familiar with these absolutely placed items.

The cool stuff happens when you realise that you can make HTML items children of other HTML items. To do this you can either use the site panel (with items showing) to move items together in a nested arrangement or cut the child item to the pasteboard and with the new parent item selected paste it back onto them page. The child can quite happily live outside of the parent’s bounds and as a child it will follow the parent as it moves about the page or resizes. The overflow settings of the parent determines if the children are seen or not (if they aren’t contained within the bounds of the parent object). This in itself is a great way to create a ‘clipping mask’ effect that can reveal content as the parent item is resized.

Lastly items can be added as inline items into a parent container (and HTML item or just the page itself). These can then be floated left or right, centred or have their margin’s adjusted to position them exactly where you want. Double-click inside an HTML Item until you see the flashing i-beam and paste or insert your HTML item into the flow of the box.

Finally don’t forget that you can easily mix and match these layout methods so it is easy enough to add an absolutely positioned item within an inline container or a fixed item in an inline one (should you wish).

I hope this answers your question.
Regards,
Tim.

On 6 Jan 2015, at 15:10, Wimdg wrote:

In Freeway I can insert an html item within another, in an inflow construction, but only if there is no cursor within an html item, choosing ‘insert html’ will result in an item which I can make ‘fixed’. So how do I bring the two items together as parent and child?


Experienced Freeway designer for hire - http://www.freewayactions.com


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

Hi ejw,
That’s not what I meant indeed. The child item created that way cannot be changed to ‘fixed’ in the settings of that item.
And I am looking for the technique how to insert a child item which can be changed to ‘fixed’.


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

Thanks Tim, I think you did understood my question. I want to see if I can make a fixed header. If I cut and paste an item to another html item (both as wrappers for my navigation), the pasted (fixed) item will then be a child item of the html item I pasted it on. I think I have to do some tweaking to the z-index probably.


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

The header I made for the Monarch template (http://www.freewaystyle.com/monarch/) isn’t part of the document flow but is an absolutely positioned item stuck at the top of the page. I then used extended attributes to make the item both fixed, have a 100% width and a high z-index do it always appears over the page content;
https://dl.dropboxusercontent.com/u/795566/monarch-header.png

Is this the sort of header you are looking to create?
Regards,
Tim.

On 6 Jan 2015, at 16:17, Wimdg wrote:

Thanks Tim, I think you did understood my question. I want to see if I can make a fixed header. If I cut and paste an item to another html item (both as wrappers for my navigation), the pasted (fixed) item will then be a child item of the html item I pasted it on. I think I have to do some tweaking to the z-index probably.


FreewayStyle.com - Freeway templates and parts to download, use and explore - http://www.freewaystyle.com


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

Yes Tim, that’s the kind of header I have in mind. I only wonder how to insert a absolutely positioned item in my inline construction or can I just change the existing header?


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

Fixed items are removed from the document flow, as are absolute positioned
and floated items. The fixed content of a parent wrapper remains the
“child” of the wrapper in terms of inheritance of styles, but not for
position. If your goal is to have the wrapper travel (position) WITH the
child item, then it’s probably the wrapper you should position as fixed and
then the child element will remain with it.

Apologies if I have misunderstood, having just scanned this thread.


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

Thanks, You did not misunderstood. I was working with it right now. I can get the header in a fixed position. But the content under it moves to the top of the page, so my H1 is then not visible, I know there should be an easy trick/fix?


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

margin-top the same value than the fixed-height item for the item “below” (or the second in the hierarchy).

Cheers

Thomas


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

Thomas is right - remember, because the fixed item is removed from the
document flow, the next item in an inflow layout will want to move up to
fill the now “empty” space.

This can also be a challenge later when expanding content in your fixed
header doesn’t push the inflow items “below” it down the page like it
normally would. These types of constructions are tricky and can test the
limits of even advanced users. I haven’t yet found a perfect solution for
this, just those that work better than others.

You will need all your bags of tricks, and all the patience you can muster.
Best of luck.


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

Thanks both of you!

I think I have a working example. Only thing is; the Linkedin button on the page moves on top the header when you scroll up. While the twitter button does well. How can I fix this?

http://www.appadvies.nl/appblog-1/naamloos.html


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

I think I have a working example. Only thing is; the Linkedin button on
the page moves on top the header when you scroll up. While the twitter
button does well. How can I fix this?

http://www.appadvies.nl/appblog-1/naamloos.html

Give the #Pageheader item a higher z-index value… like 99.

Select the #Pageheader item, choose menu Item > Extended… under Div Style
tab create a new property “z-index” with value “99”.


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

Did that, no success


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

Strange, as soon as I assign z-index:999 to #Pageheader, the LinkedIn button disappears underneath it.

Ernie is right.


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

Yep - I think we need an action for this - one that automagically applies the proper value to parent-DIVs from top to bottom - the magic z-index page action.

It is simply hard to type in the correct types to the correct places. I saw (nearby) everything - even a y-index in one case.

Cheers

Thomas


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

hmm funny, I did apply the 999 value. Still see Linkedin on top. What’s wrong?


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

no - you didn’t - at least you didn’t publish it.


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

Please explain Thomas. I did check everything and did a force republish several times. Where did you see I didn’t publish it?

I have a div style for my pageheader:
position: fixed
z-index: 999
width: 100%
As soon as I change the width, I can see the result on preview. So, what is not working here? I am pulling my hair out here! Though I don’t have much hair left…


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

I have a div style for my pageheader: position: fixed z-index: 999 width: 100% As soon as I change the width, I can see the result on preview. So, what is not working here? I am pulling my hair out here! Though I don’t have much hair left…

How did you create this because it is not being reflected in the page code which shows

#Pageheader {
background-color: #add8e6;
position: fixed;
width: 100%;
}

An easy way to fix this would be to add the following in Page>Html Markup and paste the following in the Before slot on your Master (or Masters)

<style type="text/css">
#Pageheader {
z-index: 999 !important;
}
</style>

D


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