-2

I'm trying to show off the best hairstyles that I've done on a web site.

When you hover over the images, it gives a little information about each of the styles. The hover works fine and shows up, but even though I have the height set as 100% on the information div, it only takes up enough space needed for the text. I'm using display: table to get the text centered vertically "on the image". When I change it to display block, it works fine, but the vertical centering is a must. This is extremely annoying & after 2 hours of fiddling with it I simply cannot get it to work. Please help! http://jarahairandmakeup.tumblr.com/

    div.post {
    width: 50%;
    height: auto;
    position: relative;
    float: left;
}

div.information {
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.65);
    text-align: center;
    z-index: 2;
    opacity: 0;
}

div.post:hover .information { opacity: 1 !important; }

div.info {
    color: #fff;
    display: table-cell;
    vertical-align: middle;
    font: 11px/1.4 'Gudea';
    letter-spacing: .3em;
    text-transform: uppercase;
    padding: 0 5%;
}

div.info h3 {
    font: 100 20px/1 'Gudea';
    margin: 0; padding: 0;
    letter-spacing: 6px;
}

div.info hr { color: #fff; background: #fff; margin: 20px auto;}

div.image {
    float: left;
    position: relative;
    z-index: 1;
}

div.image img.hairstyle {
    width: 100%;
    height: 100%;
    display: block;
}


<div class="post">
        <a href="/ciara">
        <div class="information">
            <div class="info">
                <h3>CURLED UPDO</h3>
                <hr />
                A romantic style updo with braided accents for prom
            </div>
        </div>
        <div class="image">
            <img src="http://static.tumblr.com/ww0u3rz/BRjn5dotq/img_0919.jpg" class="hairstyle">
        </div>
        </a>
    </div>

I'd like to make it so the black background of the information div takes up the entire length of the photo.

James Charless Dickinson
  • 446
  • 5
  • 17
  • 41
  • 2
    The point of editing is to clean up the question. To start addressing your code, you have invalid markup. See [this question](http://stackoverflow.com/q/1827965/746045) to see that block level elements (such as divs, etc.) do not go inside an `` tag. I'd start with valid markup and not worry about who is editing your question. – ethorn10 May 11 '14 at 00:31
  • @LeeTaylor It's just very frustrating? What is the point of coming to my post to edit it because it's not "perfect" if you're not going to answer it? This website is meant for people to get help with their code they can't figure out, not English class where you have to have spot-on grammar or formatting. – James Charless Dickinson May 11 '14 at 00:36
  • Did I make your question worse? No, I helped improve it. Why aren't you moaning at everyone else who didn't *do anything at all*? – Lee Taylor May 11 '14 at 00:37
  • 1
    @JamesCharlessDickinson the point is also for **other** people to get help and find the solution to their problem. This is done with properly worded questions ... for that whole SEO thing... – ethorn10 May 11 '14 at 00:38
  • 1
    I answered your question and you didn't like the answer because you needed something else which you didn't clarify in your question. Instead of arguing with people who are trying to help you, be precise in what you need, and people will help you. – Kerim Incedayi May 11 '14 at 00:40
  • @KerimIncedayi I clarified, sorry. – James Charless Dickinson May 11 '14 at 00:41
  • What kind of browser support do you need? – Kerim Incedayi May 11 '14 at 00:41
  • @KerimIncedayi Preferably all browsers but with IE I know nothing will work. I also cannot do the top: 50%; margin-top: -(1/2height)% trick because not all of the information on the separate posts will have the same height. – James Charless Dickinson May 11 '14 at 00:43

1 Answers1

-1

use display:block instead of table.

Edit: Just wrap the info div with a wrapper and have the following css:

display: table;
position: absolute;
height: 100%;
width: 100%;

it works fine: http://cloud.kerim.me/image/2p3W1x011m0I

Kerim Incedayi
  • 645
  • 6
  • 11