[Pro] Fixed header Inline Box Model

Hi there,

I’m working on a 1 page “vertical site” and use the inline box technique. What I want is a fixed header (with the menu in it) is there a simple way to accomplish this? and everything stays aligned centre?

thx

Erik


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

I did this once even with a downloadable example.

Probably a start?

http://kimmich-dm.de/wordpress/?p=147

Cheers

Thomas


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

and you naturally should have a look at the sticker-action:

http://www.actionsforge.com/actions/view/230-sticker

Cheers

Thomas


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

This is what I would do.

  1. Create a custom style…

    Tag Name: .fwNavContainer1
    Extended Styles: width: intrinsic; margin: 0 auto

  2. Select the #Header element and choose menu Item > Extended, and create
    these new styles…

    position: fixed
    z-index: 99

  3. Select the #SegmentOne element and set the top padding to 77px.

  4. Finally - the body element has 10px margin all around… please remove it.

  5. Victory dance!

On Sunday, August 18, 2013, Erik email@hidden wrote:

Hi there,

I’m working on a 1 page “vertical site” and use the inline box
technique. What I want is a fixed header (with the menu in it) is there a
simple way to accomplish this? and everything stays aligned centre?


Ernie Simpson


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

Hi Erns,

Gonna try that tommorow, thx both for your feedback!


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

Last adjustment: select the #SegmentTwo element, set the background image
to no-repeat and center x y position. Extend the item with the following:

 background-size: cover

:slight_smile:

On Sunday, August 18, 2013, Erik email@hidden wrote:

Hi Erns,

Gonna try that tommorow, thx both for your feedback!


Ernie Simpson


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

Erik - Not quite sure how you have put this page together but you appear to have a complete page inside another.

It looks very much like you have copied the entire accordion page from elsewhere and stuck it inside the Body of this one.

Bound to lead to disaster!

David


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

… ahh I missed the example - sorry - so Ernie is the star :slight_smile:

Pretty cool design, but there is a body margin of 10px. Any reason for this?

Cheers

Thomas


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

You can also do this by placing a CSS positioned item at the top of the page and changing the Position option to Fixed. Make it 100% wide and place a centered fixed width inflow item inside it to contain the centered content. Don’t forget to add a top margin equal to the height of the fixed item to the first inflow item in the page!

Joe


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

Looks good, but I’d devise a way to get the user back to the top of the page once he or she has clicked on a link. Otherwise, they’ll be a lot of scrolling involved. :slight_smile:


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

And yes, 10 px border should go.


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

Thank you all,

Short on time now but try the suggestions as soon as possible!
and Raven, yes you are right", thats why I need the fixed header with menu in it :slight_smile:

Erik


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

Hi Erns,

Followed your steps, but the result is that the pictures is fixed at the top and my Header with menu is gone.

Can you have a look whats wrong?

thx

Erik

www.classy.graphicid.nl


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

Followed your steps, but the result is that the pictures is fixed at the top and my Header with menu is gone.

Select your header item and look under Item>Extended - have you put z-index:99 and position:fixed under the Div tab?

If so delete them and add z-index:99 under the Div Style Tab instead. You can use the Inspector to change Absolute to Fixed in Window (just under the Name/ID box)

That should get your Menu back and then we can look at the rest.

D


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

Hi Erik,

If your link is correct, and you have made no edits since your last
posting, then I would have to say that you did not follow my instructions
at all. Aye, yi, yi…

FIRST… ALL THE FIRST LEVEL INLINE ITEMS (#Header, #SegmentOne, etc. etc.
through to #Footer) HAVE ALL BEEN FLOATED LEFT. THIS IS REALLY NOT HELPFUL
BECAUSE IT SCREWS WITH THE POSITION ATTRIBUTE. SO, UNDO IT.

SECOND… YOU HAVE INCORRECTLY MODIFIED THE HEADER ELEMENT, AND THAT MAY BE
PART MY FAULT FOR NOT INSTRUCTING YOU TO MODIFY THE “DIV STYLE” TAB (FWP
HAS THE “DIV” TAB SELECTED BY DEFAULT WHEN EXTENDING STYLES FOR AN HTML
ITEM). GO BACK TO THE EXTENDED ITEM FOR THE #HEADER ELEMENT AND UNDO THE
POSITION AND Z-INDEX SETTING, THEN CLICK THE DIV STYLE TAB AT THE TOP OF
THE WINDOW, THEN REDO THEM BOTH.

THEN, GO BACK OVER ALL OF MY PREVIOUS INSTRUCTIONS. :slight_smile:

On Monday, August 19, 2013, Erik email@hidden wrote:

Hi Erns,

Followed your steps, but the result is that the pictures is fixed at the
top and my Header with menu is gone.

Can you have a look whats wrong?

thx

Erik

www.classy.graphicid.nl


Ernie Simpson


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

Ernie (and the others)

I followed your steps again and everything is working fine now!

Great help Thank You!!


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

Excellent! Good job!


Ernie Simpson

On Aug 20, 2013, at 5:51 AM, “Erik” email@hidden wrote:

Ernie (and the others)

I followed your steps again and everything is working fine now!

Great help Thank You!!


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


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

Thx,

Not finished yet :slight_smile:

In segment FAQ I import a Markup element (html script of accordion) it uses a different style sheet in the same page
can I use the action"external style sheet" for this?


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

As soon as I insert the markup element with the HTML code, my send form section doesn’t work anymore, can’t they work together?


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

I would try inserting the form as markup code as well. Freeway Pro has what
I think of as a bad habit of coding forms as if the whole page were the
form. (Better form tools has been on my list since FOREVER)

Also, double-triple-check any markup code that you insert - spelling
mistakes and improperly-written code can also gum up the works.

(I would also not use a table to layout the form… CSS can make the form
appear as you like.)

If only the answers were as simple as a button click. Welcome to The
Learning Curve… it’s all uphill from here :slight_smile:


Ernie Simpson

On Tue, Aug 20, 2013 at 6:57 AM, Erik email@hidden wrote:

As soon as I insert the markup element with the HTML code, my send form
section doesn’t work anymore, can’t they work together?


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


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