centered image full width, fixed height, overflow hidden, hmmm

Hello all,

my name is Philipp and I live in Germany and I am using Freeway since 13 years.
I am not the big Coder - I love clean design - and that’s why I love Freeway from the fist day I saw it on a screen - anywhere in an ad agency, long long time ago. I am working as a designer and photographer.

I start asking my question, that keeps me busy for a long time!
I would like an image to be full width of viewport but with a fixed height (e.g. 400 px).
I tried to position the image as inline object with centered alignment and the markup at (width: 100%; height: 400px; overflow: hidden). But it really doesn’t work the way I want. I do not want the page to be responsive. I only want the images to be shown the way like in the sample.

Many many thanks in advance!

Philipp

http://demo.themelovin.com/slurp/portfolio/katon-redgen-mathieson-identity/


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

Sorry, didn’t find a way to edit my post.
What I forgot to say is, that I am working with FW 6 PRO.

Cheers


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

Do you have Freeway 6 yet? There are a lot more controls in that version that you could use to create such a layout. The trick is going to be to use the image as a background image to an HTML item that you size as 100% horizontal width and some number of pixels height. Then you will need to add a special bit of CSS to your page to make the image resize automatically to cover (not fill) that HTML box. This will keep it sized proportionally, even as it scales to fill the screen. Freeway can’t add this for you automatically, but you can paste in an edited version of the following (change the item42 to match the actual Name/ID of the HTML element you have applied your background image to).

<style type="text/css">
#item42 { background-size: cover }
</style>

You’d paste that into your Page / HTML Markup dialog, in the Before section.

To get other elements on the same page to not be full-width, you would either give them a defined width and percentage positioning (for positioned elements) or you would place them inline and use margin:auto to space them that way. Freeway 6 has about 100 more possible layouts than 5.5 or previous, because they have separated the ideas of page width and item width from one another, and embrace the max and min variants of each of the dimension attributes.

Walter

On Jul 17, 2013, at 3:14 PM, Philipp wrote:

Hello all,

my name is Philipp and I live in Germany and I am using Freeway since 13 years.
I am not the big Coder - I love clean design - and that’s why I love Freeway from the fist day I saw it on a screen - anywhere in an ad agency, long long time ago. I am working as a designer and photographer.

I start asking my question, that keeps me busy for a long time!
I would like an image to be full width of viewport but with a fixed height (e.g. 400 px).
I tried to position the image as inline object with centered alignment and the markup at (width: 100%; height: 400px; overflow: hidden). But it really doesn’t work the way I want. I do not want the page to be responsive. I only want the images to be shown the way like in the sample.

Many many thanks in advance!

Philipp

http://demo.themelovin.com/slurp/portfolio/katon-redgen-mathieson-identity/


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

Yeah, this is a mailing list, so once you send, it’s in everyone’s in-box where you cannot edit it unless you’re the NSA!

Walter

On Jul 17, 2013, at 3:29 PM, Philipp wrote:

Sorry, didn’t find a way to edit my post.
What I forgot to say is, that I am working with FW 6 PRO.

Cheers


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

Oh, sorry for that NSA thing first, Walter. I hoped, they or our BND would fix it for me, they already should know, what I am solely talking about for the last weeks…flexible images and so on…

I am already working with FW 6 - I will try what you wrote an will report again. It sounds really easy to achieve the effect, many thanks for that kick!

Philipp


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

Here’s what I mean: Example

Walter

On Jul 17, 2013, at 3:31 PM, Walter Lee Davis wrote:

The trick is going to be to use the image as a background image to an HTML item that you size as 100% horizontal width and some number of pixels height.


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

Oh yes, I see - but I still do not get it working - please look:

http://www.hdca.de/frw_show.html

Thanks, Philipp


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

Walter, you made my day!

It works - even without cats.

Really happy and much obliged!

Philipp


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

Oh, well I am too fast…sorry.

If the item is fixed in window - it works fine.
But if I want the image scrolling away with the content - what to do then?

Philipp


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

No, it should work either way. Post a link and I’ll see if I can figure out what went wrong.

Walter

On Jul 17, 2013, at 4:29 PM, Philipp wrote:

Oh, well I am too fast…sorry.

If the item is fixed in window - it works fine.
But if I want the image scrolling away with the content - what to do then?

Philipp


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

http://www.hdca.de/frw_show.html


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

I don’t see anything on here that is fixed in window, but I do see some things that are not set to a percentage width. Is that what you meant? Do you want the two boxes at the bottom to narrow down and enlarge as the page is resized?

Walter

On Jul 17, 2013, at 4:39 PM, Philipp wrote:

http://www.hdca.de/frw_show.html


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

No Walter, I made the image’s position absolute. When I set it to fix, the image (#samplepic) is 100% in viewport. In absolute position it is like now. It’s all about the image…

Philipp


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

Oh, I get it. The issue is that you have set a width for the page and centered the page. There’s a way around this: you have to use percentages to position your elements that you want to appear centered, and you can either use percentage widths or fixed widths and everything will just work out.

page
left
right

Now an element placed from left to right on the page, and set to 100% width, will appear to span from one side of the browser to the other, regardless of how wide that browser gets.

Walter

On Jul 17, 2013, at 4:57 PM, Philipp wrote:

No Walter, I made the image’s position absolute. When I set it to fix, the image (#samplepic) is 100% in viewport. In absolute position it is like now. It’s all about the image…

Philipp


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

Oh I see my fault! Now we really got it.
My page was set to be centered.
I will position all the items per % now.

Many many thanks Walter.

Regards from Germany,

Philipp


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