Hi Laura,
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: