SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question z-index behaving funny

    Hi,
    I have this page and i am trying to get the big image behind the right sidebar, but when i do z-index on the photo id to -1 it completely disappear and on the right sidebar the z-index doesn't seem to be effecting
    All those who wander aren't lost.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, there is no image there, presumably because (of what I've seen) the image file isn't there.

    But anyway, onto the problem, you should really be giving z-index:1 to the right sidebar to have that appear on top.

    #primary{position:relative;z-index:1;}

    That will allow the sidebar to sit on top of the image due to it having a z-index (which the image does not have one) .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    there is a image . if i give position to sidebar (right) it will loose it flow. i mean floats.
    All those who wander aren't lost.

  4. #4
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I did that primary div to relative and put it to right 0; however now the image of the background, i need to be position to right 0, but i see when i use relative on image and set to right:0. it attaches itself to other relative div. how can i achieve the background image to right of 0?

    Edit:i tried to move to the right but it forms a big horizantal bar on page, plus the photo is covering the content (middle) area.
    All those who wander aren't lost.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You never mentioned anything about the results of my suggestion of z-index:1.

    Did you try it?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    You never mentioned anything about the results of my suggestion of z-index:1.

    Did you try it?
    yes i tried it. and the picture went to background of primary div but its not going behind the content area. i want it behind content div too
    All those who wander aren't lost.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Now the #primary is at the absolute bottom of hte page on the left, why is it not overlapping the right sidebar as before? Could you return the page to how it was before?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    have a look now, i changed it back as u said. however see the image is overlapping the content. i can't send it back
    All those who wander aren't lost.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I'm positive the image isn't loading for me. It's giving this link (actually I can't get to it now because you keep editing the page as I speak.....)

    Anyway the image isn't loading, also there is no z-index set on it (or there wasn't before you edited the page).

    The image is calling something from localhost, I do remember that.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    On my end it work fine, even from server localhost however i tried z-index on image. the primary div has z-index of 1 and when i give image a z-index of -1, it disappear. this is how it looks like now
    All those who wander aren't lost.

  11. #11
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ryan i fixed the page. have a look now
    All those who wander aren't lost.

  12. #12
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    help?
    All those who wander aren't lost.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by nofel View Post
    help?
    I'm lost What big image?

  14. #14
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    have a look now, i had to remove the background image as it wasn't working for me. i was using float before. but as ryan said to use position on #primary div and i did but the image was overlaping the #content div, so i was playing around and i put content div to position too. now it means i lost he liquid layout. but i m more concern about getting a full background image. but after i position the #content div. the footer is also overlapping under the #content
    All those who wander aren't lost.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I still can't really work out what you are trying to do as that page looks odd (especially with all the scrollbars) and I can't follow your logic.

    If you want an image behind elements then why don't you use a background image anyway?

    You can get the image behind the content by raising the z-index on the content.

    Code:
    #content {
        float: left;
        overflow: scroll;
        position: relative;
        width: 70%;
        z-index: 2;
    }
    However I think you need to re-think what you are trying to achieve here as that page looks very messy and everything is all over the place. Get rid of the scrollbars in the middle and side columns and give the header a min-width to stop it wrapping . You can't let it wrap because you have given it a fixed height and it will overlap if it wraps.

  16. #16
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I know its messy, and scrollbars is a big turn off, but strange people do exist out there, who want a design like that. I can make it back imagee but problem is on every page it will change. besides it needs to floar to right side and the background image has more images under it but isn't visible.
    All those who wander aren't lost.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You'll have to mock up a quick design of how its supposed to look as I can't seem to get my head around it

    I don't see how a big image like that is going to work under that column which already has images in place. It's probably just me being thick again

  18. #18
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    well here u see there is background image. that image got like 3 images under each other but only showing two, and there is space between header and content, that i want remove too. initally my question was to how to display a picture in background like that. Ryan helped me and some help i did by putting #content div to position.I hope
    i m not confusing u again?
    All those who wander aren't lost.

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you want the big right column image to bleed under the middle column also then you would need to remove the background colour from #content as that is what is covering it up.

    Code:
    #content{background:transparent}
    That page is almost impossible to use I'm afraid -it's like a sliding block puzzle

  20. #20
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    That page is almost impossible to use I'm afraid -it's like a sliding block puzzle
    what u mean
    All those who wander aren't lost.

  21. #21
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nofel View Post
    what u mean
    I think he means accessiblity wise, it's a nightmare. Users will be extremely confused using it. It looks jumbled and horribly designed.

    If he didn't mean that, then that's what I think of it .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  22. #22
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i just used some css. i think for 4 div's and override its properties. otherwise its all wordpress's shipped with theme. and yes the scrollbars is a nightmare, but that's how a someone wants it. so it is like that
    All those who wander aren't lost.

  23. #23
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    One last question, if i have positioned elements, can i still give div width in % and expect it to be liquid layout?
    All those who wander aren't lost.

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by nofel View Post
    One last question, if i have positioned elements, can i still give div width in % and expect it to be liquid layout?
    You can give a width to positioned elements as required in px ,% , ems or any valid unit.

    However you can't have separate absolutely positioned elements taking part in the flow of the document because they don't care about anything in the flow.

    If you absolutely place an element inside a fluid width container then that element will base its starting point on the nearest ancestor with a value for position other than static and it will keep track with that parent. It will overlap anything that gets in its way unless though you can offset it in some way with padding perhaps on elements around it.

  25. #25
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    so is it possible to use floats and float something at back of a floating image. like giving its z-index of background photo less than the other one. just like i have on the link i posted.
    All those who wander aren't lost.


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
  •