Jump to content


Photo

Newb Having Problems With CSS Export


  • Please log in to reply
1 reply to this topic

#1 jaatendi

jaatendi

    FireworksCommander

  • Members
  • Pip
  • 4 posts

Posted 24 May 2011 - 06:46 PM

I have created a 5 page website in Fireworks, which includes a master layer, a few hotspots linking to other pages, and a button linking to an external URL. I am trying to export CSS and Images. After I click Export, I get the following messages:


"Objects "rectanglePrimitive" and "RectanglePrimitive bounderies overlap, switching to absolute positioning mode"

and then...

"Only slice images from the current state will be included in this export. Hotspot and Behavior attributes will be ignored."


None of the interactivity is working, and also, I am selecting page align: center in the General tab of Options in the Export interface, but my website is appearing Left aligned in a browser.

What am I doing wrong? How can I properly export my website?

#2 DaveH

DaveH

    FireworksNut

  • Members
  • PipPipPipPipPipPip
  • 343 posts
  • Location:San Francisco CA USA

Posted 25 May 2011 - 09:37 AM

I have created a 5 page website in Fireworks, which includes a master layer, a few hotspots linking to other pages, and a button linking to an external URL. I am trying to export CSS and Images. After I click Export, I get the following messages:


"Objects "rectanglePrimitive" and "RectanglePrimitive bounderies overlap, switching to absolute positioning mode"

and then...

"Only slice images from the current state will be included in this export. Hotspot and Behavior attributes will be ignored."


None of the interactivity is working, and also, I am selecting page align: center in the General tab of Options in the Export interface, but my website is appearing Left aligned in a browser.

What am I doing wrong? How can I properly export my website?


There are few things happening here:

(1) CSS and Images export does not support the Javascript-based behaviors applied to slices. For CSS and Images export slices are only used to define background and foreground bitmap images - no behaviors will be included in the export. If you need a link or a standard HTML button, you can use symbols from the HTML folder in the Common Library and assign a link in the Properties Panel.

(2) When FW detects overlapping design elements, it does not know what your intent is for the design and layout of the page, so it switches to absolute positioning mode to ensure that all of the design elements are in the correct place. Absolution positioning mode overrides the option to center align the page - absolute positioning requires a left-aligned page to guarantee proper placement of the design elements.

(3) FW determines the placement of design elements (text, bitmaps, rectangles that define divs) based on the position on the FW page, and these objects cannot have overlapping bounding boxes. This is probably too complex to get into in this post, but there are many other posts here on this forum where I have given more detail (just do a search for CSS export and they'll show up), and there are several helpful articles and videos in the Fireworks Developer Center on Adobe.com and on tv.adobe.com (just look for Fireworks videos and you'll find them.)

Hope this helps,

Dave

PS - the Javascript behaviors assigned to slices are intended for prototyping with the HTML and Images export option; this will export a table-based version of your design using bitmaps and Javascript to simulate what the page will look like, but it is not intended to be published and serve as a web page.