CODEWITHSUNDEEP
htmlcssimage
xan
xan

Reputation: 4696

Image text on same line

I've been trying for a long time to display an image alongside text. I want to display the resources/rupee.png image in the same line as the cost but the cost appears on the bottom of the image. Here's my php code:

...
    $display_query = mysql_query("SELECT * FROM eportal");

                        echo "<table id='pageTable'><thead><tr><th>Item code</th><th>Image</th><th>Description</th><th>Cost</th></tr></thead>";
                        echo "<tbody>";
                        while($row = mysql_fetch_array($display_query)){
                            echo "<tr><td>".$row['itemid']."</td><td>";
                            echo '<img src="resources/wh/'.$row['itemid'].'.png" title="'.$row['itemid'].'"/>';
                            echo "</td><td>".$row['description']."</td><td><span>";
                            echo '<img src="resources/rupee.png" />';
                            echo '</span><span class="cost">'.$row['cost'].'</span></td></tr>';
                        }
                        echo "</tbody>";
                        echo "</table>";
...

and the relevant CSS: (I may have messed up my CSS code trying to do this for a long time)

#pageTable span{
    float:left
}
#pageTable .cost{
    float:left;
}
#pageTable span img{
    padding:3px 0 0 0;
    display : inline !important;
}

Upvotes: 1

Views: 9448

Answers (6)

Vilius Gaidelis
Vilius Gaidelis

Reputation: 450

    <html>
    <head>
    <style>
    img{
        display : inline !important; 
    }
    </style>
    </head>
    <body>
    <table>
    <tr>
    <td><img src="img.png"><span class="cost">cost</span></td>
    </tr>
    </table>
    </body>
    </html>

Upvotes: 0

user354346
user354346

Reputation:

Although this may not directly answer your specific query, I would argue that you shouldn't be trying to accomplish the task in this way (if you're still looking to use the 'img' element as in your current markup, some of the other suggested solutions should work fine).

If I was creating this application I'd either use the relevant Unicode symbols to express currencies (http://en.wikipedia.org/wiki/Indian_rupee_sign), or I'd just use text ("Indian Rupees" or whatever). If you do want to use a special image symbol, I would tend to discourage you from using 'img' before every amount of money as this will create a lot of repetition and in my opinion isn't very clean. A nice solution might be to use some CSS pseudo-elements on some custom classes:

HTML:

​<span class="currency rupee">500</span>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS:

.currency:before {
    vertical-align:-2px;
    margin-right:5px;
    width: 16px;
    height: 16px;
}
.rupee:before {
    content: url(resources/rupee.png); /* Little 16x16 currency symbol */
}

​

Upvotes: 5

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

It seems that you just want to use a currency symbol as an image in text. Use a simpler approach then:

<img src="resources/rupee.png" alt="Rs " style="height: 1em" />42.00

(replace 42.00 by whatever code you use to insert an actual number).

Depending on the design of the image, you may need to tune its vertical position using CSS (vertical-align or, better, relative positioning), so that the symbol appears to sit on the baseline of text. To get help with such tuning, post the URL of the image.

Upvotes: 1

Sudip
Sudip

Reputation: 2051

use align on image tag

<img src="" align="texttop" />

Upvotes: 3

tradyblix
tradyblix

Reputation: 7569

Can't you just simply align them like this? I don't think you need some fancy CSS for it unless your layout requires it.

<img src="resources/rupee.png" style="vertical-align: middle"> COST_TEXT_HERE

Upvotes: 4

Daniel van Dommele
Daniel van Dommele

Reputation: 550

you could of course just have the image and text in seperate tds...

like: (left out all attributes etc)

<tr>
    <td><img /></td>
    <td><span></span></td>
    <td><img /></td>
    <td><span></span></td>
    <td><img /></td>
</tr>

Upvotes: 0

Related Questions