Hey folks!

I can't best describe this in words, so I'll show you with pictures.

Here's how my designer intends the Gravatar images to look in the sidebar of our site:

how the designer wants it

Here's the overlay image I made (screenshotted from Photoshop):

my overlay image

Here's how it looks right now...

not quite ideal

Not quite ideal, I think you'll agree. This is the CSS code I am using:

.gravatarsidebar {
    float:left; 
    padding:0px;
    width:70px;
}

.gravataroverlay {
 width:68px;
 height:68px;
 background-image: url('http://localhost:8888/images/gravataroverlay.png');
}

And here's the XHTML (and a sprinkle of PHP to fetch the Gravatar based on the user's email address, which is fetched from our database):

<div class="gravataroverlay"></div>

        <div class="gravatarsidebar">
            <?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68';
            echo '<img src="' . $gravatar_link . '" alt="Gravatar" />'; ?>  
        </div>

So what can I do? I can't use relative positioning as it makes the word 'Search' in the div below stay moved to the right.

Thanks for your help!

Jack

6 answers

Nick W. 10
2
points

I think you could do something like this - haven't tested it though.

<div class="gravatar">
  <img src="<?= $gravatar_link ?>" />
  <div class="gravatar_overlay"></div>
</div>

<style>
  .gravatar {
    position: relative;
    width: 70px;
    height: 70px;
    overflow: hidden;
  }
  .gravatar_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 70px;
    height: 70px;
    background: transparent url('http://localhost:8888/images/gravataroverlay.png') top left no-repeat;
  }
</style>
Answered over 6 years ago by Nick W.
1
point
<style>
  .gravatar {
    position: relative;
    width: 70px;
    height: 70px;
    overflow: hidden;
z-index:1;
  }
  .gravatar_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 70px;
    height: 70px;
    background: transparent url('http://localhost:8888/images/gravataroverlay.png') top left no-repeat;
z-index:2;
  }
</style>
Answered over 6 years ago by Kyle Sevenoaks
0
points

You can use absolute positioning... but the simplest solution would just be to make a new PSD image wouldn't it?

Answered over 6 years ago by KyleBooth
  • Could you give me an Absolute positioning example? When I try setting position:absolute, top:0, left:0 it puts it in the topleft corner of the viewport. And also it's a gravatar, we can't make a new PSD of a dynamically generated image :) Jack Webb-Heller over 6 years ago
  • the container should be position:relative; and then it's absolutely positioned children will use it, not the viewport as the reference. Tony Crockford over 6 years ago
0
points

Negative margins would probably do it.

Answered over 6 years ago by Nathan Duran
0
points

How about this:

You put the div WITH the image INSIDE the overlay element. Then just amke sure the overlay element has a higher z-index then the image itself.

<div class="gravataroverlay">
 <div class="gravatarsidebar">
        <?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68';
        echo '<img src="' . $gravatar_link . '" alt="Gravatar" />'; ?>  
    </div>
</div>

.gravataroverlay
{
  z-index:99;
}
.gravatarsidebar
{
  z-index:-99;
}

Ofcourse you can play around with the z-index to match what youd ebst need, but it should do the trick.

Answered over 6 years ago by Menno Geelen
0
points

You can do this pretty easily with phpThumb:

http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php#x50

phpThumb is great, I use it on a number of my projects. It will even cache the final image for you so you don't have to keep hitting the Gravatar service every time the page loads.

Answered over 6 years ago by Alex Ford