SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Overlapping images & sidebar alignment

    Hi!

    URL: http://goo.gl/7yk4zm

    I am having trouble with the social icons in the sidebar. They are supposed to overlap Karin's photo so they are half on the photo and half in the white space. I've added position: relative to the photo and a z-index to the icons, but it's not working. What am I missing?

    Also, I have a split sidebar further down the page where you see the 125x125 ads and a 160x600 ad. I cannot figure out why the right split sidebar is pushed all the way to the edge of the sidebar container. Do you see what's causing it?

    Thanks for any ideas!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,206
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You need to add position: relative to the element with the z-index:

    Code:
    .menu-sidebar-social-container .menu {
    clear: both;
    height: 45px;
    margin: -48px auto 0;
    padding: 0;
    text-align: center;
    width: 272px;
    z-index: 999;
    position: relative;
    }
    Regarding the sidebar issue, the element is floated right, and there's nothing to stop it going to the right edge:

    Code:
    .split-sidebar-right {
    float: right;
    }
    You could add a right margin if you wish.


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
  •