Skip navigation
Currently Being Moderated

How to place a textbox on an image in a specified placement?

Jan 25, 2013 5:11 PM

Tags: #html #dreamweaver #css #layout

Hello All!


I'm an intermediate Dreamweaver user and trying to learn CSS as I'm creating my website.

My problem is that no matter what specified position I enter for the textbox using the style placement, the results are nowhere near what I'm looking for.

I built my website using tables, and want to position the textbox on top of an image that is nested in a cell.


So, here is what I've done so far:


CSS style:


#abouttext {     font-family: Arial, Helvetica, sans-serif;     font-size: 16px;     font-style: normal;     font-weight: normal;     color: #FFF;     text-decoration: none;     background-color: #D0DF4A;     padding: 5px;     height: 260px;     width: 180px;     overflow: hidden;     visibility: visible;     border: 1px solid #D9E46B;     right: auto;     bottom: auto;     z-index: 1;     resize: none;     position: absolute;     left: 331px;     top: 289px; } //below is the assigned div//


<div id="abouttext">

          <p align="center">This text is enclosed in a box.gdsgsfgzfdgfg </p>



I know I'm missing something, and it is probably something to do with the placement. I just don't get how to assign the top, bottom, left & right values.

Could someone please explain?


Thanks in advance!



  • Currently Being Moderated
    Jan 26, 2013 6:20 AM   in reply to OOlala_28

    Hello,  i am newer than you so don't have a go if this is nonsense - i tried!

    But i discovered this week that to make the absolute position work the containg div needs to be set to relative.

    I have a #container div set to relative.  The #content div is then positioned in relation to that container div using an absoulte position.  Move it around adjust the absolute position - in my case i used left=0 top=0 to put it in the top left of the container div. I used the CSS styles panel to click on the #content div and adjusted it there in live view - i cannot write code yet.


    Mark as:
  • Currently Being Moderated
    Jan 26, 2013 7:28 AM   in reply to nilojones

    Nilojones is infact correct. The reason you need to specify relative on the parenting element, is the way the html draft is specified. it states "The static-position containing block is the containing block of a hypothetical box that would have been the first box of the element if its specified 'position' value had been 'static' and its specified 'float' had been 'none'. "  by default all elements are inherently position static and float:none, and all elements of this nature are children of the succeeding element. This creates a normal flow.  Now, If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed' of course the only element that does not inherently have position static and float:none is the  or root element.  Therefore if you don't specify div as being relative or fixed, or even absolute, your spans parent will be the immediate element who's position is specified as the above.

    Mark as:
  • Currently Being Moderated
    Jan 26, 2013 10:53 AM   in reply to OOlala_28

    Text over a foreground image:



    Nancy O.

    Mark as:
  • Currently Being Moderated
    Jan 26, 2013 11:00 AM   in reply to OOlala_28

    Another approach is to put your image into your container's background with CSS:




         #divName {

              background: url(path/image_file.jpg) no-repeat;




         <div id="divName">

              <p>Some text goes here...<p>





    Nancy O.

    Mark as:
  • Currently Being Moderated
    Jan 26, 2013 11:00 AM   in reply to FeZEC

    Woohoo! Lol.  Your explanation was better and now i get the 'child' terminology and understand what was going on before i made this revelation - thanks

    (Still trying to remove the old school nested tables from my mentality).

    Mark as:
  • Currently Being Moderated
    Jan 26, 2013 3:33 PM   in reply to OOlala_28

    yippeee - half the battle is in the terminology!

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points