12 Replies Latest reply on Apr 7, 2011 6:40 AM by mwgarrett

    Help with Export CSS and Images

    mwgarrett Level 1

      Hi

      I am working on a website designed in Photoshop and Fireworks and exported from Fireworks using "CSS and Images..."

      I have followed several tutorials on how to accomplish this but I can not figure out what I am doing wrong... The alignment is way off.

      I have used rectangles (no border, no fill) to establish the divs. They are lined up as close as I can tell.

      Can you please look here and tell me what the problem is?

       

      The support files are here: csspng.

       

      Thank you,

      MattG

       

      I have read countless articles and used these tutorials and others:

      http://www.adobe.com/devnet/fireworks/articles/fireworks_web_design_css.html

      http://www.adobe.com/devnet/fireworks/articles/export_css_images.html

      http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design.html

        • 1. Re: Help with Export CSS and Images
          Jim_Babbage Level 4

          Rename the slice called "main" to something else. FW generates a wrapper div called #main, so in your CSS and HTML files, you end up with two div id's called main.

          • 2. Re: Help with Export CSS and Images
            mwgarrett Level 1

            "Gold Star". Thanks so much. As much as I looked at this, I never noticed that.

            Matt

            • 3. Re: Help with Export CSS and Images
              mwgarrett Level 1

              It seems as though I fix one problem and create another or two...

              Can you please look at this again...

               

              I am trying to use the 3-slice option (to allow the content to grow).

              The problem seems to be in that div. Am I suppose to make another div inside that div?

              Thanks for your help.

              • 4. Re: Help with Export CSS and Images
                Jim_Babbage Level 4

                Have you considered building your site in a proper web design application like Dreamweaver? It's "do-able" in Fireworks, but I get the feeling you'll be spending more time going that route than using Dreamweaver.

                 

                That said, I will take a look at it again. Please provide a link to your most recent PNG file.

                • 5. Re: Help with Export CSS and Images
                  mwgarrett Level 1

                  Thanks,

                  Here is the link.

                  Honestly, I would rather use DW, but my knowledge of it is no greater than that of FW. The learning curve is large and I have a hard time keeping up with tutorials.

                   

                  Matt

                  • 6. Re: Help with Export CSS and Images
                    Jim_Babbage Level 4

                    So this isn't your full-time job, then? You're just doing this as a favor for your church? If so, I will do what I can to help. If it is your goal to get into this industry professionally, you will HAVE to learn the basics (HTML and CSS) and the tools you wish to use to get the job done. FW is the tool to design the look of the web site, and to prototype it for testing. DW is the tool for building professional-level websites.

                     

                    I'll get back to you tonight regarding the three slice issue.

                     

                    Cheers

                    • 7. Re: Help with Export CSS and Images
                      mwgarrett Level 1

                      No, this isnt my fulltime job (thats apparent )

                      I work mostly in Print Design. But more and more I am asked to do multimedia work.

                      For this church it is volunteer work as I am not a Web Designer per se.

                      I work in Illustrator and Photoshop and InDesign and did the protoype in FW.The person that would take it from there (DW) is no longer available.

                      I plan on doing intensive studying on DW very soon.

                      I am grateful for your help.

                      Matt

                      • 8. Re: Help with Export CSS and Images
                        Jim_Babbage Level 4

                        >>No, this isnt my fulltime job (thats apparent )<<

                         

                        I just had to ask, is all. :-)

                         

                        >>I work mostly in Print Design. But more and more I am asked to do multimedia work.

                        For this church it is volunteer work as I am not a Web Designer per se.

                        I  work in Illustrator and Photoshop and InDesign and did the protoype in  FW.The person that would take it from there (DW) is no longer available.<<

                         

                        OK, got it.

                         

                        >>I plan on doing intensive studying on DW very soon.<<

                         

                        I highly recommend James Williamson's video training on Lynda.com

                         

                        >>I am grateful for your help.<<

                         

                        No problem, but I can already tell you, most of the work to clean things up can't be done in Fireworks. You'll need to tweak the CSS.

                         

                        I'll try to give you detailed instructions on what I did to get the page displaying properly, along with a completed page and revised PNG file.

                        • 9. Re: Help with Export CSS and Images
                          Jim_Babbage Level 4

                          OK I made a couple changes to your PNG file. Please compare my version to your version.

                           

                          Here’s what I did:

                           

                          ·      Moved the container divs to the bottom layer. I just find it easier to get them out of the way.

                           

                          ·      Added a NEW container div called main_content, set to the same size as the content pod (NOT the same size as the col1 div). This keeps the background image mostly in place.

                           

                          ·      Set the alignment of the three background slices to Top, Middle

                           

                          ·      Set the repeating bg element to 10 pixels in height  for easier selection (not mandatory)

                           

                          ·      Sliced the divider image and adjusted the height of the Nav div so the two objects did not overlap

                           

                          ·      Exported as CSS and Images.

                           

                          DREAMWEAVER

                           

                          ·      Opened the file

                           

                          ·      In the CSS panel, I changed the background color of the #pagecontent div to match the grey background.

                           

                          ·      Removed the margin-top padding from the bg1_top div

                           

                          ·      Removed the height or min-height from the following divs:

                           

                          ·      html > body #col1

                           

                          ·      #col1

                          ·      #main_content

                          ·      html > body #main_content

                          ·      Removed the border properties from the container divs, col1 and col2

                           

                          You may have some tweaking to do to Col2 if you make that top pod expandable, but the steps I took here should give you the right direction to update that area if necessary.

                           

                          You can find a zip file at http://www.jimbabbage.ca/resources/cbc.zip

                           

                          HTH

                          1 person found this helpful
                          • 10. Re: Help with Export CSS and Images
                            mwgarrett Level 1

                            I sure do appreciate your help!

                            It all looks great save one thing...

                            I am trying to create rollovers on the 5 rectangle buttons. For some reason DW is not allowing it.

                            I am using  >Insert >Image Objects >Rollover Image

                             

                            Do I have these buttons in the wrong type of container? I only tried this on the Map, Facebook and Heaven buttons.

                            Not expecting you to fix all my problems, I have looked online all morning for the problem and solution.

                            Thanks again.

                            Matt

                            • 11. Re: Help with Export CSS and Images
                              Jim_Babbage Level 4

                              Use CSS for this, rather than javascript rollovers.

                               

                              You'll need to restyle your CSS for the navigation list to do it.

                               

                              Jim Babbage

                              1 person found this helpful
                              • 12. Re: Help with Export CSS and Images
                                mwgarrett Level 1

                                Thank you, I will do that.