Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Text on top of Image on top of image

    I want to position text on top of an image(the second image in the code below). How do I do that, preferably in the div if it's possible?

    Code:
    <center>
    <div style="position: relative; left: 0px; top: 0px; width: 1020px; height: 1350px;">  
     <a href="http://www.google.com" target="_blank">
     <img src="http://blah.gif" style="position: absolute; top: 7px; left: 9px;"/>
     </a>
     <img src="http://blah.jpg" style="position: absolute; top: 79px; left: px;"/> 
     
    
    </div></center>

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    try changing top: 79px; left: px; to top: 0; left: 0; from the 2nd image
    Last edited by Sammy12; 11-24-2011 at 07:11 PM.

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    well, no, thanks but, the images are just find and dandie. I need to position text at a specific point on top of the second image in that code. I dont want it to be on the side, I need it specifically on top. and i need to control exactly where it is.

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    by setting something to position: absolute; you are taking it out of the flow of the page, therefore it is on top of everything. Try posting a live link or your entire code, so we can better understand the problem!

  • #5
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, how 'bout this - I want text on top of an image, at a specific spot(lets say... top-right corner) of that image. However, I also want that image at a specific spot(lets say... top-right corner) of an image, or just a div, table etc. property(height, width) behind it. Is that possible, and if so, how? I appreciate the help.

    It's to my, somewhat ignorant understanding, that if what I'm specifically trying to do is all in a div set to center, the flow should stay intact, even regardless of screen resolution, seeing as everything's set relative to that div(that's centered).

    Pardon me if I sound like a dick, or just too ignorant to deal with. I humbly ask for your assistance.
    Last edited by wrayimmediate; 11-24-2011 at 09:16 PM.

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    plug this into a new html document. see if it's what your looking for! When you set the parent to position: relative;, whatever within it that's set to position: absolute; will be RELATIVE to it. So if you have a box that is set to position: relative, and you absolute something in that box, it will be relative to the dimensions of that box

    Code:
    <!DOCTYPE html>
    <html>
    	<body>
    		<div class="layers" style="position: relative; width: 400px; height: 400px;">
    			<img width="400px" height="400px" src="http://4.bp.blogspot.com/-69vBzuJzkoQ/TWY80WzNdxI/AAAAAAAADRk/RmTE3cj9lOA/s1600/The-best-top-desktop-grey-wallpapers-hd-grey-wallpaper-31.jpg"/>
    			<span style="position: absolute; top: 0; right: 0;">text</span>
    		</div>
    	</body>
    </html>
    An even better way would be to use a background-image: instead!
    Last edited by Sammy12; 11-24-2011 at 10:03 PM.

  • #7
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, I figured it out. Happy Thanksgiving
    Last edited by wrayimmediate; 11-24-2011 at 11:03 PM.

  • #8
    New Coder
    Join Date
    Apr 2011
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Same here i am also searching for the same solution. Anybody can add little bit more.

  • #9
    New to the CF scene
    Join Date
    Nov 2011
    Location
    Chennai
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can get the result like shows as below



  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •