Results 1 to 8 of 8

Thread: css layers

  1. #1
    Join Date
    Nov 2007
    Posts
    151
    Thanks
    67
    Thanked 0 Times in 0 Posts

    Default css layers

    How can I display a text box over a image?
    the image is aligned in a div,
    and I want that the text box will stay in this div, and won't go oustide of its dimensions.


    thanks.
    Last edited by d-machine; 09-10-2009 at 10:04 PM.

  2. #2
    Join Date
    Apr 2009
    Location
    Cognac, France
    Posts
    400
    Thanks
    2
    Thanked 57 Times in 57 Posts

    Default

    Have you tried setting the image as the background

  3. #3
    Join Date
    Nov 2007
    Posts
    151
    Thanks
    67
    Thanked 0 Times in 0 Posts

    Default

    The image includes Map links, so I can't do it.

  4. #4
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    461
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default

    i have this example, check it out
    http://www.dynamicdrive.com/forums/a...1&d=1252674869

    good luck...

  5. #5
    Join Date
    Nov 2007
    Posts
    151
    Thanks
    67
    Thanked 0 Times in 0 Posts

    Default

    Hi thank you, but it is based on tables, and the reason I asked it in css forum is because I'm looking for a css based solution

    I tried to use z-index, but it didn't seem to work..

  6. #6
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    461
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default

    oow ya, sorry i don't pay attention on it, hehe

  7. #7
    Join Date
    Sep 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I have the same problem but with overlapping a css menu over a Carousel sliding image js script.

  8. #8
    Join Date
    Sep 2008
    Location
    Seattle, WA
    Posts
    135
    Thanks
    1
    Thanked 11 Times in 11 Posts

    Default

    You should be able to do it by simply having the parent div's position set as 'relative' and the overlaying one as 'absolute'. Then set the coordinates for the overlay from the top and left borders. A 'child' div set to absolute takes its coordinates based upon the parent div. Kinda like this:

    #maindiv {
    position: relative;
    width: 500px;
    height: 350px;
    border: 1px #000 solid;
    }

    That creates your 'box'. Below creates the overlay 'box'.

    #topdiv {
    position: absolute;
    height: 100px;
    width: 150px;
    top: 200px;
    left: 250px;
    }

    HTML:

    <div id="maindiv">blah blah map stuff
    <div id="topdiv">blah blah stuff</div>
    </div>

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
  •