4 Replies Latest reply on Apr 20, 2009 6:20 AM by Danny_K_

    Transparent HTML box

      Hi all,

      I have created a really good website in fireworks CS4 & have an HTML text area. The actual background is grey which tapers off to white. Whenever i export this to Dreamweaver, the HTML area is always white, with the non-HTML area showing as it should. Is there away to export the HTML text area so that it keeps my original grey tapered background..??


      I have been searching for a solution for quite a while now..!!



        • 1. Re: Transparent HTML box
          Nadia-P Level 5

          This sounds like you are exporting the html from Fireworks.  This is not a great idea - html code generated by a graphics program is very fragile and can cause you problems in the long run if you have no understanding of html/css.    You should really be slicing up the images and then building the site itself in Dreamweaver (or editor of your choice).


          What you need to do is slice up a piece of that background and use it as a repeating background image via css when creating the html/css for the page.

          The height of the image would go from the grey at the top to the white section at the bottom and then use repeat-x in the box html, also setting the background colour to white - so that if the text is going to expand verticially, the white will show at the bottom and still blend in with the rest of the box.

          1 person found this helpful
          • 2. Re: Transparent HTML box
            Level 1

            HI Nadia & thanks for the response.

            As my site is only a few pages, I haven't really had any problems building it in Fireworks, exporting (images/slices etc) then importing Fireworks HTML into Dreamwever & and adding my text & hyperlinks. It's only when i try to have a tapered background in a specific area of the site that I also want to type text into that doesn't work. I already have a scrolling background image outside of the main website that is repeated via CSS to give the borders.


            I've attached a jpg that illustrates (hopefully..!) what i'm trying to achieve.





            • 3. Re: Transparent HTML box
              Nadia-P Level 5

              I don't believe attachments are working with the forums - they get placed in a queue but never seen to get out of this queue  :-)


              What you may need to do is manually add to your current stylesheet that was created when you did the original export I guess.  I have no idea what is exported as I never use this, I only export images and build the sites in Dreamweaver  :-)


              Firstly you'll need to slice up a piece of the image in that box - width about 2-5px;  height from the top of grey to the white section.  Export the image to your images folder (where all your other images are stored).









              Then in the stylesheet find the style for the  div for the box (where you have the text) and add a background declaration..


              this is an example only:


              #box {
              background-image: url(images/backgroundpic.gif);   /*change to suit*/
              background-repeat: repeat-x;     /* this repeats the background horizontally */
              background-color: white;     /*  this so it blends with the bottom of your sliced background image */



              There may be an easier way to do this via FWs but I can't help there - maybe someone else can pop in if there is  :-)

              1 person found this helpful
              • 4. Re: Transparent HTML box
                Level 1

                Hi Nadia & thanks again.

                I'll try you suggestions & hopefully get a result.

                If not then I'll just have the area as a solid colour & solve the problem that way..!