Grace Sawyer Grace Sawyer -4 years ago 116
CSS Question

What Causes Text in HTML Popup to be Vertically Aligned to the Bottom?

I don't understand why the text in my css/html image hover popup is always aligned to be all huddled up in the bottom of the entire li tag when I hover over an image using this code. I looked at all of my css attributes and took note of what each attribute was for, but none of them changed my problem of having the text all the way at the bottom. Why does this happen, and how do I make it vertically align to be on the top like what it should be like?

For example, here is a screenshot of the code below in action when I hover over an image and what I would like it to do:

I'm just confused about why the code does what it does.

Here's the code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>StackoverFlow Question</title>
</head>
<style type="text/css">

li {display: inline-block; /*Removes Bullet Points*/}

ul.columns {width: 1350px;}

ul.columns li {
width: 120px; /*Space between thumbnails*/
float: left;
margin: 50px; padding: 0; /*Space between thumbnails*/
position: relative;

}
ul.columns li:hover {z-index: 99;} /*Place popup over other content on page*/

ul.columns li img {
position: relative;
opacity: 1;
}
ul.columns li:hover img{
opacity: 0.5;
}

ul.columns li .info {
position: absolute;
left: 179px; top: 0px; /*Location of Popup*/
padding: 200px 10px 0px; /*Side lengths of Popup (200px is height)*/
width: 250px; /*Width of Popup*/
display: none; /*Hide when not hovering*/
background: white;/*Color & Opacity of Popup*/
border: 1px solid black;
}
ul.columns li:hover .info {display: block;} /*Show popup when hovering*/

</style>

<body>

<h1>Simplified Sample</h1>

<ul class="columns">
<li>
<a href="Teams of Teams, Hierarchy of Teams, and Hierarchy Essay.html"><img class="thumbnails" src="Cover.jpg" alt="" height="250"/></a>
<div class="info">
<h2>Post 1</h2>
<p>Nostrud nostrud quidns. Feugiat valetudo praemitto molior abdo. </p>
</div>

</li>
<li>
<a href="The Raven by Edgar Allen Poe Analysis Essay.html"><img class="thumbnails" src="The Raven Cover Image.jpg" alt="" height="250" /></a>
<div class="info">
<h2>Post 2</h2>
<p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
</div>
</li>

<li>
<a href="SecretPlants.html"><img class="thumbnails" src="file:///E:/Grace/Art/Animation-Computing/Website/ContentTABS/ResourceFiles/Literature/TheSecretsHeldInPlants/SecretLifeofPlantsCover.jpg" alt="" height="250" /></a>
<div class="info">
<h2>Post 3</h2>
<p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
</div>
</li>
<li>
</ul>

</body>
</html>


Thanks in advance!

Grace

Answer Source

The padding of your .info is causing the problem and it makes sense to set a min-height of 250px.

li {display: inline-block; /*Removes Bullet Points*/}

ul.columns {width: 1350px;}

ul.columns li {
    width: 120px; /*Space between thumbnails*/
    float: left;
    margin: 50px; padding: 0; /*Space between thumbnails*/
    position: relative;

}
ul.columns li:hover {z-index: 99;} /*Place popup over other content on page*/

ul.columns li img {
    position: relative;
    opacity: 1;
}
ul.columns li:hover img{
    opacity: 0.5;
}

ul.columns li .info {
    position: absolute;
    left: 179px; top: 0px; /*Location of Popup*/
    width: 250px; /*Width of Popup*/
    display: none; /*Hide when not hovering*/
    background: white;/*Color & Opacity of Popup*/
    border: 1px solid black;
    min-height: 250px;
}
ul.columns li:hover .info {display: block;} /*Show popup when hovering*/
<h1>Simplified Sample</h1>

<ul class="columns">
    <li>
        <a href="Teams of Teams, Hierarchy of Teams, and Hierarchy Essay.html"><img class="thumbnails" src="http://placehold.it/250" alt="" height="250"/></a>
        <div class="info">
            <h2>Post 1</h2>
            <p>Nostrud nostrud quidns. Feugiat valetudo praemitto molior abdo. </p>
        </div>

    </li>
    <li>
        <a href="The Raven by Edgar Allen Poe Analysis Essay.html"><img class="thumbnails" src="http://placehold.it/250" alt="" height="250" /></a>
        <div class="info">
            <h2>Post 2</h2>
            <p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
        </div>
    </li>

    <li>
        <a href="SecretPlants.html"><img class="thumbnails" src="http://placehold.it/250" alt="" height="250" /></a>
        <div class="info">
            <h2>Post 3</h2>
            <p>Nostrud nostrud quidne pneum imputo, capio quis. Feugiat valetudo praemitto molior abdo. </p>
        </div>
    </li>
    <li>
</ul>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download