Question

Okay so I’m using Mosaic (a jQuery plugin for hover text, etc.) Anyways, I’ve got that working but now my problem is text aligning properly to what I’m trying to do. I’m trying to get the the words: “sale items” to appear on top of each other with very little space. However, if I use a line break “br/” it leaves a large gap in the space between line. I’ve tried setting the display property to block. Setting two “p” elements as “top” and “bottom” and aligning them that way. I’m just trying to get someone who is VERY proficient with CSS to help.

Basically I’m trying to get the text to align properly.

The HTML:

<div class="mosaic-block demo" id="sale">
    <div class="mosaic-overlay">
        <h1 class="mosaic">sale items</h1><br/>
        <p><strong>get them before they're gone!</strong></p>
    </div>
    <div class="mosaic-backdrop"><img src="img/sale.png" /></div>
</div>

The CSS:

h1.mosaic {
    display: inline;
    font-family: "ONRAMP";
    margin: 0;
    padding-left: 90px;
    padding-top: 0;
    font-size: 60px;
    text-transform: capitalize;
    width: 110px;
}
.mosaic-block {
    position: absolute;
    overflow: hidden;
    width: 320px;
    height: 150px;
    left: 50%;
    top: 475px;
   -webkit-filter: grayscale(1);
}
.mosaic-block:hover {
    -webkit-filter: grayscale(0);
}
.mosaic-backdrop {
    display: none;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
}
.mosaic-overlay {
    display :none;
    z-index: 1;
    position: absolute;
    height: 300px;
    bottom: -150px;
    color: #FFF;
    text-decoration: none;
}
.mosaic-overlay p {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: #fff;
    padding-top: 90px;
    padding-left: 30px;
}

The jQuery aspect works fine, it does it’s job. But my CSS is lacking.

Answer 1

You’re probably looking for the CSS property line-height which I don’t see defined in your CSS so this should be easy. First force the two words on seperate lines:

<div class="mosaic-block demo" id="sale">
    <div class="mosaic-overlay">
        <h1 class="mosaic">sale<br/> items</h1><br/>
        <p><strong>get them before they're gone!</strong></p>
    </div>
    <div class="mosaic-backdrop"><img src="img/sale.png" /></div>
</div>

Add the line-height property and asign a value, I took a guess on what might be alright on 60px font-size but since I don’t know which font, you should probably tweak it higher/lower.

h1.mosaic {
    display: inline;
    line-height: 50px;
    font-family: "ONRAMP";
    margin: 0;
    padding-left: 90px;
    padding-top: 0;
    font-size: 60px;
    text-transform: capitalize;
    width: 110px;
}

If the text is being clipped by the box you can add padding to the top/bottom if necessary to get the look you want.