3 Replies Latest reply on May 11, 2010 11:13 AM by Nancy OShea

    Creating a text field over a CSS background image.

    IsaacBoda

      If you want to see what I am trying to do:

      GoTinyMiddleSearch.jpg

      I want the user to be able to copy an paste in a URL into the given area that I have defined in the jpeg.

       

      Is there a was to create a text input window specifically in that location so I can later grab it with a php script and smoosh it down in size?

        • 1. Re: Creating a text field over a CSS background image.
          bemdesign Level 4

          In your HTML/PHP code, give your input text form a class name. Then in your CSS, style that class to have the set width/height you want. I'm not sure I understand the 2nd question in your post - why would you want to "smoosh" the form down when you can already set the display dimesnions via CSS? Or are you trying to get the input form to be exactly 100 some pixels from the left and 100 some pixels from the top? I would focus more on making a flexible layout that can work across a variety of rendering platforms and displays then try and get a pixel-perfect layout based off of my visual designs.

          • 2. Re: Creating a text field over a CSS background image.
            IsaacBoda Level 1

            By "Smoosh" I was talking about the link they input... say they input a really long url, I was going to create a script that when they hit go it stores it in a DB and creates a link to a redirect to their bigger link.

             

            Example:

             

            www.Myreallylonglink.com/isreallyreallylonganddoesn'tlookgoodontwitter.html

             

            would smoosh down to:

             

            www.GoTiny.com/R4ND0M

            • 3. Re: Creating a text field over a CSS background image.
              Nancy OShea Adobe Community Professional & MVP

              You can't input anything into a background image.  You'll need to use a form with a text input field and a submit button.  You could put the GoTiny image without the text box into the background of your form.

               

              Copy and paste the following into a new, blank html document.

               

              <!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>Form Input Field</title>
              
              <style type="text/css">
              form {
              background:#71FFB8 url(path/GoTiny-image.jpg) no-repeat;
              width: 500px;
              height: 135px;
              border: 1px solid #666;
              }
              
              input#text {
              float:left;
              background: #EAEAEA;
              border: 1px inset #333;
              color: #999999;
              margin: 50px 0 0 85px;
              padding: 8px;
              }
              
              input#button {margin-top: 58px}
              
              </style>
              
              </head>
              
              <body>
              
              <form action="path/script.php" method="GET">
              <input id="text" name="text" type="text" value="your URL here" size="35"  />
              <input name="button" type="submit" id="button" value="Go" />
              </form>
              </body>
              </html>
              
              

               

              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists
              http://alt-web.com/
              http://twitter.com/altweb
              http://alt-web.blogspot.com