Greetings!
I am setting up anchors on graphics, on a long page, linking from the navigation at the top. When I did this the graphics re-positioned themselves all over the place. NOW, as a test, I have only one graphic, “Books”, with an anchor linking from books at the top. I placed the graphic “Books” centered right above the books. But when I preview and/or publish it shows up further down the page and on the right.
How do I get the graphics to stay put, where I’ve placed them? I would rather not use text in this case.
Well, to make matters worse - I set up “classes” in the navigation at the top to link to the Text anchor Classes - right where I want it to go. Only it takes you to the bottom of the page. What am I missing here?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
I think there might be two problems that you are running into:
Your design is based on “layers” (absolute-positioned items in CSS terminology). It’s tempting to use layers as a CSS alternative to table-based layout, but they’re actually problematic because a “layer” (or absolute-positioned item) is positioned independently of other items that are on the page (if we exclude the relationship of a layer to its parent). If the text on a page is viewed with a larger font, or if it reflows because the page is narrower on some devices, layer items can end up overlapping each other, or they can appear in a different position to their intended position.
[Table layouts don’t have this problem because table rows that are further down the page will be pushed down when text in a previous row grows or reflows. But table layouts are old and people are encouraged to avoid them.]
The way to avoid this problem with CSS layouts is to use “inflow layouts” (relative-positioned items in CSS terminology). Inflow layouts are somewhat difficult to use in Freeway (Xway makes them easier), but essentially the way to create an inflow layout (in Freeway) is to use boxes that are inserted when there is a text cursor. An inflow HTML (non-graphic) box also has some useful characteristics: (1) if you set its width to be undefined, it takes up the width that is available within its parent (the page or another HTML box), and (2) if you set its height to be undefined, its height will grow or shrink to fit its content. The other important point is that if an inflow box grows or shrinks, any inflow box that is further down the page (beneath it) will also change its position accordingly (similar to table layouts).
So what I would do, to create a CSS layout, would be to start by inserting a series of inflow HTML boxes on a page. Your particular page divides conceptually into a series of sections, so if you have (say) five sections (I haven’t counted), you could insert five inflow boxes — or perhaps six: the first box may be a navigation area rather than a section.
To do this, start with a blank page and insert a text cursor within the page. Then choose “HTML item” from the Insert menu (while CSS Layout is turned on in the toolbar). This will insert a 100x100 box, which isn’t terribly useful — but go to the Dimensions section of the Inspector palette and click on the Width icon to turn it off (and set the width to be undefined). Now the box stretches across the width of the page. If the first box is going to be a navigation box, you could change its type from “HTML” to “Nav” (in the HTML output pane of the Inspector). If the other boxes are sections you could change their type from “HTML” to “Section”. Changing the type isn’t necessary, but it’s recommended as good practice.
Now you have the issue of how to link from your navigation area at the top of the page to each of these sections. Personally, I would forget “anchors”: these are kind of old school, and you don’t need them. Instead of using anchors, give your section boxes appropriate names (IDs): “books”, “classes”, and so on. Freeway names the boxes “item1”, “item2” etc., but you can rename them in the Name/ID field of the Inspector palette. Now you can link directly to the sections. Let’s say that the first section (after the navigation box) is “books” and you’ve renamed “item2” to “books”. Select the text “books” in your navigation box and set it the link to be “#books” (without the quotes) in the External pane of the Link dialog (I know it’s not an external link, but it’s a way that you can create an ID link within Freeway). Now if you preview within a browser, you should find that clicking on “books” in the navigation area takes you to the “books” section (if it’s just below the navigation area, the page may not change, but for sections that are further down the page will scroll).
Within each section, you can have text, images, and other inflow boxes. Try to avoid using layers as much as possible. The images should also be inflow rather than layers.
The advantage of creating a layout in this way is that it will adapt to different devices (phones, tablets, desktop browsers) so long as the page and inflow boxes aren’t given a fixed width. This kind of layout is much easier in Xway, but it’s also possible to do it in Freeway.
Jeremy
freewaytalk mailing list
email@hidden
Update your subscriptions at:
P.S. I see that the Freeway Talk forum has formatted my email in a confusing way. If you’re reading this in a web browser (instead of an email), ignore the way that the forum has created two separate lists. There are two main numbered sections in my reply: (1) Everything from “Your design is based on layers” to “it’s recommended as good practice”, (2) The paragraph that begins “Now you have the issue of how to link from your navigation area” (this is numbered 1 in the forum). The following paragraph (“Within each section”) is numbered 2 in the forum, but was numbered 3 in my email.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Oh, and I see that I also missed out a step: after you’ve inserted the first box and set its width to be undefined, use the Duplicate option (in the Item menu) to duplicate it a number of times - so you have a series of inflow boxes, one beneath the other.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
I love the solution for anchors - I’ve rarely used them – this is a more elegant solution. Thank you!
As to the instructions: “Then choose “HTML item” from the Insert menu (while CSS Layout is turned on in the toolbar). This will insert a 100x100 box, which isn’t terribly useful — but go to the Dimensions section of the Inspector palette and click on the Width icon to turn it off (and set the width to be undefined). Now the box stretches across the width of the page.”
My experience:
With CSS Layout turned on, I inserted HTML item. In the Inspector pallete, “Layer” is already automatically checked. Is that right? Leave it checked?
When I go to the Dimensions section, I can’t tell what icon to click on. Anything I click takes the box width to “0”. I don’t see anything to set it to Undefined. And it shrinks to “0px” wide.
If, as you describe, it stretches across the page, what if I don’t want the box that wide?
Thanks again Jeremy!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
With CSS Layout turned on, I inserted HTML item. In the Inspector pallete, “Layer” is already automatically checked. Is that right? Leave it checked?
No, this is inserting a “layer” item, which you don’t want. The trick is to insert the box when there is a text cursor showing: either double-click on the page (sometimes that’s tricky) or click once to select it and press return. When you see a text cursor flashing in the top left, choose “HTML Item” from the Insert menu. Now, if you look at the Inspector palette, you should see a “CSS” checkbox instead of a “Layer” checkbox. Leave this selected, so you have a CSS inflow item.
When I go to the Dimensions section, I can’t tell what icon to click on. Anything I click takes the box width to “0”. I don’t see anything to set it to Undefined. And it shrinks to “0px” wide.
This is what happens with layers, but when you do this with a CSS inflow item, it will stretch across the page.
(If you look in the Measurements section of the Inspector palette, the Width popup will say “Available”.)
If, as you describe, it stretches across the page, what if I don’t want the box that wide?
You could set a maximum width for the box, or you could set it to be a percentage of the width of the page. But don’t forget that you can put inflow boxes within each section, so the text doesn’t have to stretch across the entire width. You might have a left-floated image in one section, with text to the right, and a right-floated image in another section, with text to the left.
What is more tricky is if you want to have two inflow HTML boxes side by side. There are various “hacky” ways of doing this, including having one of the boxes be floated — but I don’t recommend them (it’s OK to float images, but you can run into problems if you try to use floats in other ways). There is a way of having CSS boxes side-by-side (CSS flexbox), but you would need to use extended style properties to do this in Freeway. It’s worth remembering that most people who visit a website are using a mobile phone, and there isn’t a lot of space for boxes to be side by side on phone screens.
Amazing! And success - did just what you described. Also so helpful knowing how to design to work better with mobile devices. A whole new world.
Thank you!
freewaytalk mailing list
email@hidden
Update your subscriptions at: