14 Replies Latest reply on Oct 27, 2006 1:35 PM by *mista*

    How do I add a layer to this

    Alfred Hitch
      I need to put text over the image that is in the div container and I want it to stay attached ( remain in the same place ) over what is below it when the browser window is resized.
      Whats the best way to do it?

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns=" http://www.w3.org/1999/xhtml">
      <style type="text/css">
      <!--
      body {
      text-align:center;
      background-color: #000000;
      }
      #wrapper { text-align:left; width:831px; margin:0 auto;position:relative; }
      /* 760px will display on an 800px screen maximized browser window without */
      /* horizontal scrollbars. */
      -->
      </style>
      </head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
      <title>Tech</title>
      <style type="text/css">
      <!--
      .style1 {
      color: #000000;
      background-color: #000000;
      }
      gifimg {
      top: 1px;
      }
      swflayer {
      }
      -->
      </style>
      <script type="text/javascript">
      <!--
      //-->
      </script>
      <script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
      </head>

      <body onload="MM_preloadImages('../images/formimages/indexrogal.jpg','../images/form images/indexrocom.jpg','../images/formimages/indexrotech.jpg','../images/form images/indexroinfo.jpg','../images/formimages/indexroexpo.jpg','../images/form images/indexroprints.jpg')">
      <div id="wrapper">
      <tr>
      <td align="left" valign="top" class="style1">
      <img src="../images/form images/textpage.jpg" width="825" height="866" border="0" id="Image1" /></td>
      </tr></table>

      <!-- /wrapper -->
      </div>
      </body>
      </html>
        • 1. Re: How do I add a layer to this
          Level 7
          * Start with valid code. Yours is not. Mine posted here, is.

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns=" http://www.w3.org/1999/xhtml">
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
          <title>Tech</title>
          <style type="text/css">
          <!--
          body {
          text-align:center;
          background-color: #000000;
          }
          #wrapper { text-align:left; width:831px; margin:0 auto;position:relative; }
          /* 760px will display on an 800px screen maximized browser window without
          */
          /* horizontal scrollbars. */

          .style1 {
          color: #000000;
          background-color: #000000;
          }
          gifimg {
          top: 1px;
          }
          swflayer {
          }
          -->
          </style>
          <script src="../Scripts/AC_RunActiveContent.js"
          type="text/javascript"></script>
          </head>

          <body
          onload="MM_preloadImages('../images/formimages/indexrogal.jpg','../images/form
          images/indexrocom.jpg','../images/formimages/indexrotech.jpg','../images/form
          images/indexroinfo.jpg','../images/formimages/indexroexpo.jpg','../images/form
          images/indexroprints.jpg')">
          <div id="wrapper">
          <tr>
          <td align="left" valign="top" class="style1">
          <img src="../images/form images/textpage.jpg" width="825" height="866"
          border="0" id="Image1" /></td>
          </tr></table>

          <!-- /wrapper -->
          </div>
          </body>
          </html>

          * Think hard about the advisibility of a rule like this -

          .style1 {
          color: #000000;
          background-color: #000000;
          }

          Black text on a black background is hard to read.

          * these rules will never be expressed -

          gifimg {
          top: 1px;
          }
          swflayer {
          }

          since they are not valid HTML tags. Perhaps you meant them to be custom
          classes (note the leading period), which would then be applied like <img
          class="gifimg"...>?

          .gifimg {
          top: 1px;
          }
          .swflayer {
          }

          * assigning a top position for anything that is not absolutely or relatively
          positioned has no effect on the element.

          * recognize that even your noblest attempts to superimpose text on graphics
          using layers is going to fail when I resize the text in my browser, and it
          pushes the layer out of shape.

          Are you sure you want to proceed with this?

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.dreamweavermx-templates.com - Template Triage!
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
          ==================


          "Alfred Hitch" <webforumsuser@macromedia.com> wrote in message
          news:ehoig8$eoj$1@forums.macromedia.com...
          >I need to put text over the image that is in the div container and I want
          >it to
          > stay attached ( remain in the same place ) over what is below it when the
          > browser window is resized.
          > Whats the best way to do it?
          >
          > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          > " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          > <html xmlns=" http://www.w3.org/1999/xhtml">
          > <style type="text/css">
          > <!--
          > body {
          > text-align:center;
          > background-color: #000000;
          > }
          > #wrapper { text-align:left; width:831px; margin:0
          > auto;position:relative; }
          > /* 760px will display on an 800px screen maximized browser window without
          > */
          > /* horizontal scrollbars. */
          > -->
          > </style>
          > </head>
          > <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
          > <title>Tech</title>
          > <style type="text/css">
          > <!--
          > .style1 {
          > color: #000000;
          > background-color: #000000;
          > }
          > gifimg {
          > top: 1px;
          > }
          > swflayer {
          > }
          > -->
          > </style>
          > <script type="text/javascript">
          > <!--
          > //-->
          > </script>
          > <script src="../Scripts/AC_RunActiveContent.js"
          > type="text/javascript"></script>
          > </head>
          >
          > <body
          > onload="MM_preloadImages('../images/formimages/indexrogal.jpg','../images/form
          > images/indexrocom.jpg','../images/formimages/indexrotech.jpg','../images/form
          > images/indexroinfo.jpg','../images/formimages/indexroexpo.jpg','../images/form
          > images/indexroprints.jpg')">
          > <div id="wrapper">
          > <tr>
          > <td align="left" valign="top" class="style1">
          > <img src="../images/form images/textpage.jpg" width="825" height="866"
          > border="0" id="Image1" /></td>
          > </tr></table>
          >
          > <!-- /wrapper -->
          > </div>
          > </body>
          > </html>
          >
          >


          • 2. Re: How do I add a layer to this
            Alfred Hitch Level 1
            I'm sure I don't know what I'm doing and that is about all I am sure of!
            My first page.

            Let me explain what I want to do and maybe you could be so kind to tell me how or show me how to best do it.

            I have an image that looks like a window frame.
            Like a stage window or rectangle.
            In the window / center, I want to be able to put text or links on a black background that would be easy to update.
            I would like to do this so that if the browser window is resized only the black surrounding changes.
            I was thinking maybe a table and break the image up into 4 pieces?
            • 4. Re: How do I add a layer to this
              Level 7
              I think your explanation of what you are trying to achieve is not clear.
              Hence no response.


              • 5. Re: How do I add a layer to this
                daveCph
                why dont you just asign the picture to be a nonrepeating background-image? then you can write ýour txt inside the tag:

                #wrapper{background-image: url(pathToYourImage);
                repeat:none;
                width:widthOfYourImageInPixel;
                height:heightOfYourImageInPixel;}
                p#imageTxt{width:?px;
                height?px;
                position: relative;
                top:?pix
                left:?px}


                <div id="wrapper"><p>your Txt goes here</p></div>
                • 6. Re: How do I add a layer to this
                  daveCph Level 1
                  forgot one thing:

                  <div id="wrapper"><p id="imageTxt">your Txt goes here</p></div>
                  • 7. Re: How do I add a layer to this
                    Level 7
                    Expanding the text in the browser will break the alignment.

                    Trying to align text to a background image as a way of building web pages is
                    a bad method.

                    --
                    Murray --- ICQ 71997575
                    Adobe Community Expert
                    (If you *MUST* email me, don't LAUGH when you do so!)
                    ==================
                    http://www.dreamweavermx-templates.com - Template Triage!
                    http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                    http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                    http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                    ==================


                    "daveCph" <webforumsuser@macromedia.com> wrote in message
                    news:ehso7p$i7v$1@forums.macromedia.com...
                    > forgot one thing:
                    >
                    > <div id="wrapper"><p id="imageTxt">your Txt goes here</p></div>


                    • 8. Re: How do I add a layer to this
                      Level 7
                      On Fri, 27 Oct 2006 10:47:36 +0000 (UTC), "daveCph"
                      <webforumsuser@macromedia.com> wrote:

                      > #wrapper{background-image: url(pathToYourImage);
                      > repeat:none;


                      repeat:none ?

                      Did you mean:

                      background-repeat: no-repeat; ?

                      Gary
                      • 9. Re: How do I add a layer to this
                        Alfred Hitch Level 1
                        Thanks for help.

                        I'm going to try and decipher whats been posted but I will also try and give a better description.
                        My image ( for simplicity ) looks like a wooden window frame like you would buy at the hardware store to replace a window in your house. Wood on 4 sides like a rectangle. The area in the middle is where I want to put text. There is no image in this area, just black. The only part of the image is the frame surrounding the empty / black background middle area.
                        Now I just want this all on a black background so that it all stays centered when a viewer changes the size of there browser window.
                        • 10. Re: How do I add a layer to this
                          Level 7
                          What happens when the viewer changes the text to a larger size?

                          --
                          Murray --- ICQ 71997575
                          Adobe Community Expert
                          (If you *MUST* email me, don't LAUGH when you do so!)
                          ==================
                          http://www.dreamweavermx-templates.com - Template Triage!
                          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                          http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                          ==================


                          "Alfred Hitch" <webforumsuser@macromedia.com> wrote in message
                          news:eht6l5$5ko$1@forums.macromedia.com...
                          > Thanks for help.
                          >
                          > I'm going to try and decipher whats been posted but I will also try and
                          > give a
                          > better description.
                          > My image ( for simplicity ) looks like a wooden window frame like you
                          > would
                          > buy at the hardware store to replace a window in your house. Wood on 4
                          > sides
                          > like a rectangle. The area in the middle is where I want to put text.
                          > There is
                          > no image in this area, just black. The only part of the image is the frame
                          > surrounding the empty / black background middle area.
                          > Now I just want this all on a black background so that it all stays
                          > centered
                          > when a viewer changes the size of there browser window.
                          >


                          • 11. Re: How do I add a layer to this
                            *mista* Level 1
                            <table>
                            <tr>
                            <td width="7" background="topleft_curve.gif"><img src="spacer.gif"></td>
                            <!-- The top left wooden frame of your window goes here -->

                            <td height="7" background="top_center.gif"><img src="spacer.gif"></td>
                            <!-- The top middle part ofthe frame goes here - shouldbe made repeating-x -->

                            <td width="7" background="topright_curve.gif"><img src="spacer.gif"></td>
                            <!-- The top right wooden frame of your window goes here -->
                            </tr>
                            <tr>
                            <td width="7" background="middle_bg.gif"><img src="spacer.gif"></td>
                            <!-- The left vertical wooden frame goes here. Should be repeating-y -->

                            <td > This is where you links go</td>

                            <td width="7" background="middle_bg.gif"><img src="spacer.gif"></td>
                            <!-- The right vertical wooden frame goes here. Should be repeating-y -->
                            </tr>
                            <tr>
                            <td width="7"background="bottomleft_curve.gif"><img src="spacer.gif"></td>
                            <!-- The bottom left wooden frame of your window goes here -->

                            <td height="7" background="bottom_center.gif"><img src="spacer.gif"></td>
                            <!-- The bottom middle part ofthe frame goes here - shouldbe made repeating-x -->

                            <td width="7" background="bottomright_curve.gif"><img src="spacer.gif"></td>
                            <!-- The bottom right wooden frame of your window goes here -->
                            </tr>
                            • 12. How do I add a layer to this
                              *mista* Level 1
                              Basically you make a table with three rows(r1,r2,r3) and three columns(c1,c2,c3).
                              All the outer cells take the wooden frame parts of your window. The single inner cell (r2c2) takes the actual text of your links.
                              Since the text size would change, so the cells
                              (r1c2) and (r3c2) have background repeating on X-axis
                              and cells (r2c1) and (r2c3) have background repeating on the Y-axis
                              Just to put things in the correct perspective the table cells would look like this
                              r1c1 r1c2 r1c3
                              r2c1 r2c2 r2c3
                              r3c1 r3c2 r3c3
                              • 13. Re: How do I add a layer to this
                                *mista* Level 1
                                lastly, if you still have problems, I'll make the page for you and upload it
                                • 14. Re: How do I add a layer to this
                                  *mista* Level 1
                                  Didn't close the table tag at the bottom </table> ..