Skip navigation
OOlala_28
OOlala_28
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>

        </div>

 

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!

 

~LA

742 Views   8 Replies   Latest reply: nilojones, Jan 26, 2013 3:33 PM
 
Replies
  • nilojones
    Currently Being Moderated
    1. nilojones,
    Jan 26, 2013 6:20 AM   in reply to OOlala_28
    Report

    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:
  • FeZEC
    Currently Being Moderated
    2. FeZEC,
    Jan 26, 2013 7:28 AM   in reply to nilojones
    Report

    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:
  • Nancy O.
    Currently Being Moderated
    3. Nancy O.,
    Jan 26, 2013 10:53 AM   in reply to OOlala_28
    Report

    Text over a foreground image:

    http://alt-web.com/DEMOS/CSS-Sold-Out-Text-over-image.shtml

     

     

    Nancy O.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    4. Nancy O.,
    Jan 26, 2013 11:00 AM   in reply to OOlala_28
    Report

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

     

    CSS

     

         #divName {

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

         }

     

    HTML:

         <div id="divName">

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

         </div>

     

     

     

    Nancy O.

     
    |
    Mark as:
  • nilojones
    Currently Being Moderated
    5. nilojones,
    Jan 26, 2013 11:00 AM   in reply to FeZEC
    Report

    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:
  • OOlala_28
    Currently Being Moderated
    6. OOlala_28,
    Jan 26, 2013 1:53 PM   in reply to nilojones
    Report

    Woohoo indeed! Thanks to all for these great responses. Now, if I understand clearly, I basically need to wrap my div around in a containing block, style both wrap around and div? (a block within a block??)

    @nilojones...and you called yourself a newbie, hhmm?

    @Nancy...Nice approach, I will try it!

     
    |
    Mark as:
  • OOlala_28
    Currently Being Moderated
    7. OOlala_28,
    Jan 26, 2013 3:04 PM   in reply to OOlala_28
    Report

    IT WORKED! Now I get the relationship between parent and child in Dreamweaver! yay.

     
    |
    Mark as:
  • nilojones
    Currently Being Moderated
    8. nilojones,
    Jan 26, 2013 3:33 PM   in reply to OOlala_28
    Report

    yippeee - half the battle is in the terminology!

     
    |
    Mark as:
Actions

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