SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Float p left and half of pic

    Hi

    I'm trying to float some text next to a pic, but I'd like for the text to overlay the image from half way down. So if the image is 100px in height, the text will float next to it until the line of the text is 50px from the top of the pic, when it will start overlaying the pic.

    I've tried to give the image a negative margin-bottom, which works but the text goes underneath the image, even when I set the images z-Index to 0 and the text to 1.

    Any suggestions how I can overcome this

    Thanks
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  2. #2
    SitePoint Zealot marbly's Avatar
    Join Date
    Nov 2005
    Location
    Croatia
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    are the pic and the text in the same container? Its important to consider the containers when stacking elements on top of one another.

    Is the image relevant for the content or is it a background image?

  3. #3
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    hi marbly,

    yes, the image and text are to be in the same container,
    Code:
    <div>
    <img style="float:left;margin-bottom:-50px;z-Index:0">
    <p style="z-Index:1">Some text here</p>
    </div>
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  4. #4
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Maybe I should try and explain what my objectives are as someone may have an alternative method to suggest. I am creating a website for a friend who makes mirrors, www.desiringreflection.co.uk. The name gave me the idea for the design, which was to have the images reflected in the page. This is easy enough for his stock pages as there will be only one image per section so can be positioned absolutely. What I'm trying to do now is his about page. This is editable by Dan, with the uploaded images turned into png files and reflected server side (image and reflection saved as single image). I would like the text that goes with each section to partly overlay the reflected part of the image, as it does with the homepage, but with text and images aligned to the left. The images will be alot smaller than the homepage's image.

    Any other suggestions on how I could do this?
    Last edited by Markdidj; Oct 27, 2007 at 10:17.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  5. #5
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I've put a test page up at www.desiringreflection.co.uk/test.html

    But as soon as I did I thought "wonder what happens if I define the p as position:relative". Well, that did the trick! It seems you can get past most of the problems in various browsers if you define things that are thought of as set by default....... cool.....it's working. Onwards and Upwards. Thanks for reading.....
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if


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
  •