SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Mar 2002
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    need help positioning text over an image

    I have been trying to position a text link over an image like this www.styrofirm.com/css/the-way-it-should-look.gif

    And this is what i tried

    <div class="shell">
    <div class="text"><a href="v">+ Enlarge</a></div>
    <img src="snare_pic_lrg.jpg" width="200" height="200">
    </div>

    The link is absolutly postioned over the img and everything works fine but i get a space the same height of the link added to the top of the image.

    HTML _ www.styrofirm.com/css/blah.html
    CSS _ www.styrofirm.com/css/1-a.css

    I have tried a couple other things all with no luck.

    Basicly all i need is to get rid of that space so the css border around the img is the same all the way around.

    Has anybody tried anything like this before? if so i would love to know how you did it.

    Thanks heaps

    bobjones

  2. #2
    Alt+F4= User Control ;-) rabmurdy's Avatar
    Join Date
    Mar 2002
    Location
    Ecosse
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Use backgound picture

    I ain't no expert but could you not use the image (drum) as a background in a table cell then insert text into another cell above it?
    "If something is too hard,give it up. The moral my boy is too never try anything"
    "Just because I don't care doesn't mean I don't understand"

  3. #3
    SitePoint Member
    Join Date
    Mar 2002
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes you could do it that way and it would be quite simple but with CSS you shouldnt have to use tables for stuff like that.

    Thanks

    bobjones

  4. #4
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because you are positioning absolutely (BTW I got an access denied in your css so I couldn't view it). Try not nesting the <div>. you shouldn't need to nest them if everything is being positioned exactly.

    If you need to position within the DIV you should just be able to position relative. I would think.
    Code:
    <div class="shell" style="position:absolute; right:200px; top:200px"> 
    	<div class="text" style="position:relative;top:120px;left;120px">
    		<a href="v">+ Enlarge</a>
    	</div> 
    	<img border="1" src="NewLovenestLogo.gif" alt="" width="200" height="150" border="0">
    </div>
    That seemed to work the way you wanted in IE6.0
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  5. #5
    SitePoint Member
    Join Date
    Mar 2002
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I still have the same problem when i set the border on the first div. Without the border it looks fine cause you cant see the space.

    this bit of code still has the space in IE6:

    <div style="border: 1px solid #333; width: 200px;"><div style="position:relative;top:194px;left:135px"><a href="v">+ Enlarge</a></div><img src="snare_pic_lrg.jpg" width="200" height="200"></div>

    thanks

    bobjones


Bookmarks

Posting Permissions

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