Been playing with ideas for a website I’m starting on and I’ve run into a slight problem.
I am planning to build the site as inline - just to keep it quick and simple (hah!), but I have a logo that needs to overlap an image (blue box on test page). When I have the logo as a layer it shifts off my centred page over to the left edge. While I actually don’t mind it doing that, I would like to know if there is a way to keep it in position within my 960px wide page? It should sit on the left side of my centred page NOT the left edge.
Dave makes a good point, though it is not an absolute rule - you need to
learn parent/child relationships in relative structures and their
hierarchy.
Items that are inline - inside of their parent items (not just visually
“inside” them) will appear indented to them in the page/site pane at the
left of the workspace (You need to have “show items” enabled in the cog
menu at the bottom left to see this). This is the easiest way to note
parent/child relationships.
Why is this important? Because inline/inflow construction is relative.
Literally. All your positioning is relative NOT to where your item sits in
the FWP workspace, but relative to it’s parent structure. And sometimes
that relativity is inherited down many levels. So the first thing to do is
change your thinking from FWP’s spatial workspace to a sort of mental one…
this is a big learning step, so try to set small goals or you’ll burn
yourself out.
Your logo(s) and blue box will have to be inline inside a wrapper to keep
them together.
You’ll see that the green ‘quote-icon’ panel has been set to overlap the boundary of its parent by setting the padding to a negative amount (in this case 50% of the panel’s width). Download the file and have a closer look at how each of the items is placed inline and how they work together to form the whole panel.
Regards,
Tim.
Right, so I’ve got my head around the parent and child items - seems that I have already been doing it to a degree.
I have got it ‘almost’ the way I want it. My only problem now is that my full width items are in front of my logo and when I put them behind (within the same item) they stop being full width.