I have a social network site so I display user photo's often, I am working on some css that will show a user image with there username on top of the image over a transparent label, I have it working so far but I think it needs a few mods maybe some experts can help

Below is a screenshot showing somethings I am concerned about.
You will see 4 images below, I have 3 of them highlighted/selected by dragging my cursor accross the screen.

Notice the 3 images to right that are selected, the bottom name label part seems to expand to the right of the image, as far as the table cell it is in allows it. I have my full css and html below as well, is there a way to stop that? Or improve anything else you might see?

Any help greatly appreciated

PS) photo was taken in google chrome and the images are in table cells but If I take them out of a table, then that bottom div will appear to expand the width of the page instead of the cell, even though it is not visible, I don't think it should be like that?

alt text

<style type="text/css">
div.imageSub img { z-index: 1; margin: 0; display: block; }
div.imageSub img.female { border-top: 2px solid #FF3399; }
div.imageSub img.male { border-top: 2px solid #3399FF; }
div.imageSub div {
    position: relative;
    margin: -15px 0 0;
    padding: 5px;
    height: 5px;
    line-height: 4px;
    text-align: center;
    overflow: hidden;
    font-family:Trebuchet MS,Helvetica,sans-serif;
    font-size:12px;
    font-weight: bold;
}
div.imageSub div.blackbg {
    z-index: 2;
    background-color: #000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 0.5
}
div.imageSub div.label {
    z-index: 3;
    color: white;
}
</style>

<div class="imageSub" style="width: 90px;"> <!-- Put Your Image Width -->
    <img class="female" src="http://cache2.mycrib.net/images/image_group66/0/43/t_6871399b0962b5fb4e29ce477541e165950078.jpg" alt="Something" width="90"/>
    <div class="blackbg"></div>
    <div class="label">Sara</div>
</div>

4 answers

1
point

Have you tried specifying the width of the contained divs, like so:

div.imageSub div {
width: 80px; // Add the width here (image width - 10px padding)
position: relative;
margin: -15px 0 0;
padding: 5px;
height: 5px;
line-height: 4px;
text-align: center;
overflow: hidden;
font-family:Trebuchet MS,Helvetica,sans-serif;
font-size:12px;
font-weight: bold;
}
Answered over 7 years ago by Edward Williams
  • I haven't tried it, however it wouldn't really be useful on my site as I use this css for many different sized images in different areas, SO I would have to reproduce this whole code like 15 times if I set the width in the css part, thats why I set where the image is called Jason over 7 years ago
1
point

You could always try to float the container (div.imgsub) so that it shrink-wraps to fit the content? Also, why not put the transparent background into the div.label using a PNG to remove extra markup (if you need transparency for IE6 you could use microsoft-filters)?

It would look something like this:

HTML

<div class="user">
    <img src="http://fallout.bethsoft.com/images/downloads/avatars/80x80falloutav-tu.gif" height="80" width="80" alt="" />
    <p>John Doe</p>
</div>

CSS

   .user {
        float: left;
    }

    .user img {
        margin: 0;
    }

    p {
        position: relative;
        margin: 0;
        top: -23px;
        padding: 2px 0;
        text-align: center;
        background: url(trans_60_black.png);
        color: #fff;
    }
Answered over 7 years ago by Jens Hedqvist
  • Note: changed negative margins to absolute positioning because of IE bug. Jens Hedqvist over 7 years ago
  • so you think it would be better to use an image for the transparency instead of my css to do it? Jason over 7 years ago
  • I would do it that way. Because PNG-files are so widely supported nowadays. Only IE6 and below lacks proper support. For those cases you could serve an GIF-image (or solid background color depending on situtation) in an conditional stylesheet (http://www.quirksmode.org/css/condcom.html). The main advantage would be that you don't need to add any extraneous markup. Jens Hedqvist over 7 years ago
0
points

Seems like an "overflow:hidden;" definition on the div.imageSub should restrict the width of the div.label.

Answered over 7 years ago by Divya Manian
joneff 28
-1
points

Try something like:

<style type="text/css">
.imageSub {
    margin: .5em .5em 0 0;
    float: left;
    position: relative;
}
.imageSub .sub {
    color: #ffffff;
    font: bold 12px/1 "Trebuchet MS", Helvetica, sans-serif;
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 1;
    overflow: hidden;
}
.imageSub .sub p {
    margin: .5em 0;
}
.imageSub .sub .bg {
    width: 100%;
    height: 100%;
    background: #cccccc;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}
</style>

<div class="imageSub">
    <img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Image" />
    <div class="sub">
        <p>
            John Doe
        </p>
        <div class="bg"></div>      
    </div>
</div>

<div class="imageSub">
    <img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Image" />
    <div class="sub">
        <p>
            John Doe
        </p>
        <p>
            John Doe
        </p>
        <div class="bg"></div>      
    </div>
</div>

<div class="imageSub">
    <img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Image" />
    <div class="sub">
        John Doe
        <div class="bg"></div>      
    </div>
</div>

<div class="imageSub">
    <img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Image" />
    <div class="sub">
        John Doe<br />
        John Doe
        <div class="bg"></div>      
    </div>
</div>

</body>
</html>

Notes:

  • shorthand font
  • floating takes care for the image size;
  • absolute bottom position takes care for two line names (if any)
  • compare paragraphs vs. braeks and choose the one that suits the most

Hope that heps.

Answered over 7 years ago by joneff