If you were starting with a blank page you would draw an html element the same width as the page you already set but give it a width value of 100%. Name the box “wrapper” or “container” or anything else.
For the time being give it a height value of say, 400px.
Double-click in the “wrapper” div and insert an html element (this is known as an inline div). Give it a height value so you can see it and a width of 100% and name it “header”.
These aren’t sub-pages but simply inline divs, one inside another. By inserting divs within divs you create the structure you see. Remember that the height values need to be removed in order for the layout to work as intended. I had you apply a height just so the div wouldn’t collapse and be hard to see.
Since FW 5 allows you to insert divs straight into the PageDiv from the working view you could probably skip the wrapper div and use the PageDiv in its place, though it wouldn’t hurt anything if you followed the steps above. Your call.
In my ugly example the right hand column was missing content so it was not visible but that is actually a 3 column layout. Here’s an updated copy, <http://anoptic.com/demo/liquid/Liquid.zip>.
Todd
On May 22, 2008, at 9:20 AM, Tonsils wrote:
Just one question though - I am currently looking at your Liquid example from above, just trying to achieve the same as you but unsure of one thing - how do you create a sub page, i.e you have:
-Home (master1)
-----+wrapper <<=== how is this achieved?
-------+header <<=== again how to u create sub page
Probably a dumb question but can’t seem to acheve same result on Page panel on left hand side.
For a HTML Item in FW 5 Pro - where can I set the float and clear options as these two settings don’t appear under my Dimension section of my Inspector palette?
For a HTML Item in FW 5 Pro - where can I set the float and clear
options as these two settings don’t appear under my Dimension
section of my Inspector palette?
Is your HTML box inside another box? Otherwise, there won’t be any
‘float’ or ‘clear’ items in the Inspector as they’re not ‘floating’
in anything.
The graphic is attached to the class style “.leftnav” (no quotes) and set to tile vertically.
If you’re inserting the inline divs properly and setting the appropriate floats then the structure should be correct. If you like you can send me (off-list) a copy of the FW file you’re working on and I’ll take a look at it.
Todd
On May 23, 2008, at 10:39 AM, Tonsils wrote:
Based on your Liquid example, I managed to get it going by following your set-up but there were two things I wasn’t sure about:
On the left hand side of your website you seem to have a gradient image that looks like your leftnavgraphic.gif - where exactly have you set this up?
How can I achieve the same hierarchy that you have set-up, i.e wrapper then as a sub-item you have header->leftnav etc. ?
(1) Look in the Styles editor at the style named “leftnav”. You will see it has a background image named leftnavgraphic.gif.
(2) First, wrapper is the parent html box that all the others are inside of (inline). To recreate this layout start with an html box that covers the whole page left to right and give it the width of 100%.
a. Click inside “wrapper” to get the text cursor, go to the Insert menu and select Html Item. Name this Header in the inspector and give it a width of 100% and what height of 20px.
b. Click inside wrapper again below Header box you just made to get the text cursor, go to Insert menu and select Html Item. Name this leftnav and set width to 21%, then set float to Left. Type in your list items for menu and turn on bullet list and bottom of inspector pallet. Click on height button to deselest it so height will be determined by content size.
c. Click inside wrapper again below leftnav box you just made to get the text cursor, go to Insert menu and select Html Item. Name this content and set width to 57%, then set float to left. Click on Padding and choose 10px. Add text content as needed.
d. Click inside wrapper again below content box you just made to get the text cursor, go to Insert menu and select Html Item. Name this rightmargin and set width to 16%, then set to float right.
e. Click inside wrapper again below rightmargin box you just made to get the text cursor, go to Insert menu and select Html Item. Name this footer. Set width to 100% and height to 50px, then set clear to Left.
Really appreciate your help. Managed to get the structure right now, but unfortunately still having some issues.
Todd: Appreciate your help but I couldn’t locate an e-mail address to send you my test liquid freeway file.
Chuck: Appreciate your help (very detailed response, so a big thank you to you) but off the list, I have sent you an e-mail with my freeway test file if you could please take a look.
Basically could get the footer positioned properly, that is, right underneath the content html item and the colour scheme isn’t right either.
I wanted to ask also, will using graphic rollovers cause any issues with liquid css with HTML items as I want to transform what I have currently done (using all graphic items) into a liquid format ?
Basically want to know if the combination above works as well as whether you can create a rollover process using HTML items?
I wanted to ask also, will using graphic rollovers cause any issues with liquid css with HTML items as I want to transform what I have currently done (using all graphic items) into a liquid format ?
Basically want to know if the combination above works as well as whether you can create a rollover process using HTML items?
Just put your graphic rollovers inside an inline html box. This will allow you to add float and clear as needed. There are CSS techniques to do this without resorting to full graphic objects, meaning the graphics can be backgrounds using CSS that behave same as standard graphics rollovers.