[Pro] Sticked photo in responsive layout

I’m struggling with a responsive site where 3 wishes conflict with each other.

  • navigation bar has to stay visible on top.
  • the photo next to the text keeps its position while the text is scrollable.
  • the site is responsive (with another appearance at the small devices).

The site is constructed in freeway 6 in a box-in-box model (Thanks Thomas).
The navigation on top is a separate layer with a fixed position. In the inline construction is doesn’t stay visible.
The photo-container has Walters sticker-action applied to it.

On the desktop it seems to work but on the i-pad the photo gets another position when you scroll back down.

Also tried a solution with jQuery where the menu stays on top (in the box-in-box construction). The photo stays (not completely) in its position but when de text reaches the bottom it pushes the photo up and the photo pushes the top-nav up (at the breakpoint for the small devices).
This construction is (temporarily) removed from the server.

Is there anyone who can help with a solution?

Johan

http://www.drukkerijbongers.nl/sitebouw/overmij.html


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

So let’s try to solve this step by step:

  1. The fixed navigation on top:

Remove the absolute positioned stuff.

Use the relative positioned “section-header” and “area-header” div (preferably re-name them to “section-navigation” and “area-navigation”) Remove all module and grid DIVs.

Into the “area-navigation” add directly a list of your links and apply the css menu to this area. Here is some help how:

http://www.kimmich-digitalmedia.com/articles/css-menu-challenge

Style your menu.

Once done, select the “section-navigation”, choose “item ->extended” and in the DIV-style (Tab) dialogue enter the following name/value pair:

####position
(name)
####fixed
(value).

By this method you keep the hierarchy of the code (navigation on top) and you can even work on with the “inline construction”.

The rest we try to solve preferably on the fly (have to mind a little bit about it).

Cheers

Thomas


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

Hi Thomas,

Thanks for the advice already. The menustuff is adapted according your suggestions. Now some new problems appear.

The menu was intended to fill the site (area-section).
I first build the site flexible but that caused the Pinned/Sticked photo to hop allover the place so the area’s are in fixed widths.
When i resize the browser window the menu disappears. Think adapting the @media breakpoint css will fix that.
First the next problem to solve.

Next problem: the new menu stays on top but the text scrolls over it instead of underneath. Another thing is that the content has no room anymore. In the freeway-layout there is room between the nav and the content. In the browser they are stuck together.

Johan


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

Yeah - I saw it already:

First typo: You wrote: z-indec - please correct it to z-index.

Add there keeping the dialogue open

top (name)

0 (nil zero as value)

as another name/value pair.

Make the #section-navigation background color white.

If you really want to make the navigation full width (100%) then you can even add the menu list into the section, cause you won’t need an area in this case or set area to 100% (currently there is a fixed pixel-value in).

If you keep the area, please remove those DIV styles from the extended dialogue.

Cheers

Thomas


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

I see, x is next to c, too fast typo, very handy indeed.

Think to keep the area.

Tried 100% but the menu doesn’t fill the space. It’s meant to be like so: left button aligned with left site of the photo. Most right button aligned with right side of the (centered) text-colomn.

When the state of the smallest site is reached the buttons to appear underneath each other, left aligned. (Have to build a second version I think, as done with the photo in that state, first hidden, than inline-block.)

In the @media query in between, the buttons have to stay next to each other, eventually a little bit smaller.

The bullets in front of the buttons now are a background images. Perhaps there is a better solution for this with a (google) font and css?

Than (for this moment) the last fix. The content appears under the navigation. Tried padding and margin in the inspector but in the browser the added space disappears.

In advance: when this all works in freeway, the challenge is to bring it all to WordPress…

Johan


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

when this all works in freeway, the challenge is to bring it all to WordPress

Good luck with that as it may not be directly transferable.

David


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

Think to keep the area.

No problem - but remove the (inline) styles anyway. Am still not sure why they are there:

Furthermore set the WIDTHs of all areas to be percentage. Otherwise you’ll get SIDESCROLLING.

Tried 100% but the menu doesn’t fill the space. It’s meant to be like so: left button aligned with left site of the photo. Most right button aligned with right side of the (centered) text-colomn.

That’s an operation that I do not really understand. Could you draw me this quick down? Basically I set the menu this way to make it more adaptive:

Creating the following style-sets via styles-dialogue

#fwNav1 {
width:100%;
}

The following depends on the number of menu entries. In your case 4 which will mean 100%/4=25%

#fwNav1 .fwNavItem {
width:25%;
}

which should look like this:

From now - the single menu-entries are declared to be percentage.

When the state of the smallest site is reached the buttons to appear underneath each other, left aligned. (Have to build a second version I think, as done with the photo in that state, first hidden, than inline-block.)

In Freeway6 yes - in 7 no cause there is a feature that solves this automatically. But we could even play with the second style at the latest breakpoint and see what happens (never tried)

In the @media query in between, the buttons have to stay next to each other, eventually a little bit smaller.

The bullets in front of the buttons now are a background images. Perhaps there is a better solution for this with a (google) font and css?

Please allow me a quick word about those buttons:

I am pretty sure that you find a much nicer solution than this.

Suggestion:

Remove them entirely. They are 80s, redundant and ugly - they share no function but much of confusing.

Than (for this moment) the last fix. The content appears under the navigation. Tried padding and margin in the inspector but in the browser the added space disappears.

Add a margin-top of (guess) 90px on section-content:

In advance: when this all works in freeway, the challenge is to bring it all to WordPress…

It is possible to do but requires a good amount of:

“The author needs to know what he/she does”. Literally!

I’d be happy if some more authors would step in the Freeway/WordPress world, cause it would strengthen the community (my goal to reach) - but honestly (and this is nothing against the skills of each single author here) I see not much users that are currently able to do.

I did a proposal how to integrate and I documented it:

http://www.kimmich-digitalmedia.com/videos/001_wpc-installing-wordpress

… and the next few episodes.

But this is just a proposal and highly experimental. The page-link in my footer is done by this method.

The question is:

Is it necessary to use such a monolith in this case? And for what purpose?

Cheers

Thomas


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

Many thanks till so far…

I planned to adapt all your mentioned improvements immediately but some unexpected work did not allow it to take the time.

A WP-site is a client request. This also counts for the appearance of the buttons. And personally i don’t dislike it. Probably because i am very 60s myself.

I’ll take an decent look at your suggestions, work them out and hope to get any progress soon.

Thanks,

Johan


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

Learnt at lot again - i think - but some things are coming from the deep dungeons under freeway. The inline-styles appear when the SCC-menu action is applied to the list. I cant’t get rid of them.

For making the description of the (old) menu a little bit more understandable it is put back in the layout underneath the new version with the ul containing the four menu-items. The old version is constructed with four grids in a module. Each grid contains an ul with one item. Maybe a not so google-friendly way but for me a hack with a visual satisfactory solution (it seems than google can even find things that are meant to be not findable).

The area widths are put back in percentages and now i remember why they were put in px at certain breakpoints. The Fixed (actionised) photo is conflicting with the flexible harness it is contained in.

When the action is removed, the photo and text play well together growing and shrinking till a certain breakpoint and then suddenly reappear an continue their play. But it is a wish for the photo to stay in its vertical position while the text scrolls during the reading.

Maybe there is a way to let the action change its behaviour.
Keep the vertical position from the top and maintain the vertical flexibility in its parent-container including the ability to grow and shrink at different screen sizes.

There’s still a lot to learn to be able to tame the beast.
Till next time,

Johan


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

1 step beyond

The photo is sticked in its position by the same CSS as used in the header. It works in Safari (5), Firefox (31), Opera (12) and iPad (mini). Still have to do a test on IE…

http://www.drukkerijbongers.nl/sitebouw/overmij.html

Still struggling with the menu. The upper menu is a list with the CSS-menu action applied to it and in the style-menu extended to 100% (#fwNav1) and 25% for the #fwNav1 .fwNavItem. But it doesn’t fill out the area-navigation.
The second menu has four 25%-area’s in it containing each a 1 item list. This version fills out the complete area of navigation.

Maybe a tip?

Johan


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

Have you looked at this page on an iPhone - it is virtually unreadable because of the fixed navigation.

David


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

I wonder why things working for me but not for others?

All I can do now is to offer, to wrap your project in a zip-file, sending it to me on whatever way. There are lot’s of things in that are simply misplaced and I have to examine this in the file. And I have to review my screencasts if I really did the wrong advices.

The second approach of menu is simply critical, cause you are working with x-number of menus. This feels pretty strange (such as just creating a bunch of single links, declaring this as menu) - but I might be wrong.

As soon as SP is bringing the next major release (and as soon I got my broken home-office machine repaired back), I sit down and review the already seen and flavor it by stuff like this.

Cheers

Thomas


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

Hi David and Thomas,

I know about the messy look in the iPhone-state.
The menu is still experimental.

This is my first responsive project and the second with a css-menu in it. In other sites the menu was made with the roll-over action (freeway 3, 4 and 5). Then they were also single links. In that way i feel i have more control over the appearance and my thinking is still in that way of constructing.

http://www.svelan.nl

Thomas,

I can zip the freewayfile, can i use the e-mail on jour website?

Johan


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

yep - you can.

Cheers

Thomas


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

Johan,

from what I can see, the CSS-Menu Action on #area-navigation is screwing up some things, whatsoever.

I removed it entirely and re-applied the action and everything worked as expected - which will mean that each single entry is now taking 25% space. I added a black frame just to show you the current situation:

And now it’s time to get back on the left and right alignment of your menu (and the reason why I din’t get it):

If you align left, the left entry is fine. But aligning the last entry to the right side is simply (at least for me) impossible to solve.

I honestly do not see any reason why this should work, but it’s anyway your decision:

If you’d ask me - remove the bullet-points and set the alignment to center.

But this is your decision - cause you’re the designer (or your client).

Cheers

Thomas

Later this day (or in the evening) I send you the file back so you can see how I did it (slightly different then you.


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

slightly different

Thanks again Thomas,

When I receive the adapted file I’ll study it and then reproduce it again (learning by doing).

Hope there is the possibility for (maybe) a new question and hope also be able to contribute to the aid of other users with the growth of my knowledge.

JohanW


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

It took a while to continue (looking at wordpress structure_s, foil, epee an saber fencing, other projects etc.) but now its a step further.

Even managed “filling out” the menu by giving it a negative padding of -15% at the right. Rest still has to be filled out, but this was the “difficult page”.

Now trying the step to a wp-theme…

Question:
what is the best way or moment for complete externalizing styles?

Still playing with Externalize. After publishing had to put !important after some styles in the breakpoint-css. Read somewhere that its better to not overuse it.

JohanW


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

This:

http://www.kimmich-digitalmedia.com/videos/001_wpc-installing-wordpress

and the followings

is all I know about WP and Freeway.

Cheers

Thomas


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

Looked at it for several times already. Find it very impressive. Almost like putting dog and cat in the same cage. And with the proper instructions they can live well together. So there is some hope…

JohanW


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