I’m able to make a photo responsive in FW7 as long I use it as a graphic-item (height auto, width auto, max width 100%) great!
Now I want to have some html text on top of it so that I try to achieve the same effect but using it as a background image within the div. It does not seem to work out. There are already some posts here but for me they are not 100% clear…
Any step by step help appreciated and maybe - a simple FW example file???
I’d say that you need to wrap the image in an additional “HTML item (if not to say div)” to have a parent item available for hosting further items. The text could be placed as “absolute positioned” item in this wrapper.
An image Tag is - let’s say “the end of line” if it comes to nested items which can’t keep further content (inline).
BTW - I’d recommend to use “Pass Through” because this is truly responsive.
What is it with the way people have been re-defining terms here - a
background image is not the same as a placed image… it’s a characteristic
of an existing element, like a div or table or whatever. A placed image
layered behind something else is not and never shall be a background image.
It can only be an unproductive figment of the imagination.
Place an html item in your layout, set it’s background-image property,
place some text and graphics into it, done. Make that item responsive and
you are double-done.
I don’t know the video, but had the same question yesterday in a responsive design. I use a pass-through image in an html item first.
Next I draw at the pasteboard another smaller html item, which should hold the text, give it a name, grab it and move it on top of the first html item (not inside).
IN the side-panel I grab the second and put it on the first item (“checkbox” is white).
To position it on the photo and for the smaller breakpoints, I find it helpful to work with in the horizontal and vertical align in %.
In my case in 320 media tab the text is to squeezed inside the html-box and I disable it.
I don’t know if this is the best method, but the first that worked for me, but with limits
Ernie, please be patient. The vocabulary is not so easy
So to be pedant, “background-…” is a css-property preserved for the terminology of the output. Because it is a block-level element it allows us to wrap further content. (my preferred method to combine image and text in an inline layout).
Images, no matter of pass-through or graphic-item in Freeway terms ends up in creating an img TAG
This is a block level item “end of line”. For this reason you can’t place “further items” into it (although a pass-through looks like a regular DIV).
####Inline vs. block-level
The first is grouping content, the second is structuring it in order to get a proper outline.
####WYSIWYG vs. Output
So it is possible to create web-projects ignoring the second, persisting on the first - for sure. But it is getting harder and harder to discuss with those coming from the second.
“The truth is in the browser” - so decide yourself from which side you view the medal.
Scaling text is not that easy to achieve. I theoretically know three methods:
####1. Using @media query
This method isn’t supported in FW7 yet and means, that you reduce the text-size from breakpoint to breakpoint. It can be achieved by building your own media query - like I did in Walk thru the park" for the mobile version:
There are some out there, but it should be noted, that this approach is honestly (a lil bit) cheesy - just because you have the smallest FONT on the smallest device (so either long or short arms to read)
####3. Viewport Sized Typography (Experimental)
Using Viewport sized units. I haven’t tested this yet - honestly I even do not understand it, but will have a second or third view on this:
If it is a single term, I’d have no real problem to solve it by your first approach. Giving it a meaningful alt-Tag and you should be fine.
This “scaling by browser-window resizing” is anyway not daily practice. This is just “developer’s playground”, therefor the @media way should be the alternative. Remember: Your page will be initially loaded on a device - and none will change it.
I am pretty sure, there will be a Freeway solution for it one day (sooner or later). I could think of supporting the @media idea.
How can text and photo of example 2 scale down like in example1?
Follow my instruction than the PHOTO scales. For the text be aware that we cannot yet influence html text-sizes in FW7 in smaller media width tabs.
Is there a way to „tell“ FW that a line of text shall stick always at the bottom of a responsive html-item?
Follow my instruction: To position html-text on the photo and for the smaller breakpoints, I find it helpful to work with in the horizontal and vertical align in %. Not the perfect method, but a start.
Are you a native German speaker from Germany? Your domain ends on .de. Just in case you are stuck, maybe a short phone call would come in handy.
Hanna
PS: If you like to talk, send me your number via email, I call back.
I’ve put a file on my test space at http://users.softpress.com/keith/breakpointtexxt/ which explains the steps for using extended code to make HTML text (whether it’s a custom CSS style or an existing tag) change at certain breakpoints.
Make the browser window narrower and wider to see the size of the text on the left side change.
You will see a link to download the file at the bottom of that page.
Keith Rigley
Support Technician, Softpress Systems
