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..!!

       

      Danny_K_

        • 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.

             

            Thanks

             

            Danny_K_

            • 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).

               

               

              FW-gradient-slice.png

               

               

               

               

               

              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..!

                 

                Thanks

                 

                Danny_K_