Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

shifting a piece of text down using CSS

Tags:

html

css

I want to shift a text label down by about 6px I am attaching the style:

.price-label{
    font-family:Arial, Helvetica, sans-serif;
    font-size:small;
    position:relative;
    bottom:-6px;
    vertical-align:bottom;
}

The HTML is:

<table border="0" cellspacing="1" cellpadding="0">
    <tr>
        <td height="45" colspan="2" align="center"><p><span class="text">Name</span><span class="name-label"></span></p></td>
        </tr>
            <tr>
                    <td>&nbsp;</td>
                    <td class="price-label">54.67</td>
                  </tr>
                  <tr>
                    <td width="28" bgcolor="#CCCCCC">&nbsp;</td>
                    <td height="45">&nbsp;</td>
                  </tr>
                  <tr>
                    <td width="28" bgcolor="#CC3300">&nbsp;</td>
                    <td height="112">&nbsp;</td>
                  </tr>
                  <tr>
                    <td width="28" bgcolor="#CCCCCC">&nbsp;</td>
                    <td height="22">&nbsp;</td>
                  </tr>
                </table>

Visually I want the 54.67 label to appear horizontally parallel - to the gap where the grey cell (top one) and red cell (second from top) meet. As the number represents that point in the bar to the left.

So if some other technqiue is better, please let me know, maybe I should be using DIVs would that give me more control?

like image 502
Ankur Avatar asked Oct 04 '09 08:10

Ankur


People also ask

How do I move text to the bottom right in CSS?

position: absolute; bottom: 0; right: 0; If you need to space the text farther away from the edge, you could change 0 to 2px or similar.


5 Answers

If you want to shift it down, you need to shift it a positive 6px, not a negative 6px, and set the top property, not bottom

position: relative;
top: 6px;
like image 177
David Avatar answered Oct 01 '22 00:10

David


If I'm reading this correctly, then you're trying to straddle the border between two table cells which won't work. You'll need to consolidate the first two cells in the right column and then rowspan="2" the new cell with the number in it. Then top or bottom vertically align the text in the cell and add some padding-top until it's aligned properly.

like image 34
jon_brockman Avatar answered Sep 30 '22 00:09

jon_brockman


Label is an inline element, margin/padding would only work when you make it a block (inline-block, block or float). Try this:

.price-label {
        padding:6px 0 0;
    display: inline-block;
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    vertical-align: top;
    zoom: 1;
    *display: inline; }
like image 45
eozzy Avatar answered Sep 30 '22 00:09

eozzy


You might be better off using:

.price-label { margin-top: 6px; }

It's difficult to know more without some context of what else is around that table cell though.

like image 40
Dominic Rodger Avatar answered Oct 01 '22 00:10

Dominic Rodger


Use padding-top:6px; instead of positioning, which can get very messy with relation to sibling elements etc.. and has other-side effects.

like image 44
annakata Avatar answered Oct 02 '22 00:10

annakata