Welcome to WebmasterWorld Guest from 54.166.220.138

Forum Moderators: not2easy

Message Too Old, No Replies

Image next to a Division

     
11:22 am on Nov 27, 2010 (gmt 0)

5+ Year Member Top Contributors Of The Month



Hi,

How can I put an <img> next to a <div> so the image vertically aligns in the middle?

<img src="comment-icon.gif"><div style="font:10pt Arial;padding:5px;background-color:#ccc;"><span style="float:right">No. 1</span><span style="font-weight:bold;padding-right:10px">John Doe</span><span style="color:#808080">11/14/2010 3:23:44</span></div>


I know how to do it using a table:

<table style="font:10pt Arial">
<tr>
<td style="vertical-align:middle"><img src="comment-icon.gif"></td>
<td style="width:100%">
<div style="padding:5px;background-color:#ccc;border-top:1px solid #DEDEDE"><span style="float:right">No. 1</span><span style="font-weight:bold;padding-right:10px">John Doe</span><span style="color:#808080">11/14/2010 3:23:44</span></div>
</td>
</tr>
</table>


But I wonder if I could do it without a table.


Thanks in advance!
Rain Lover
9:55 pm on Dec 20, 2010 (gmt 0)



Hi,
here is the solution in DIV

<div style="margin:0 auto;">
<img src="1.jpg" style="float:left; width:100px;">
<div style="width:200px;float:left; font:10pt Arial;padding:5px;padding-right:10px;background-color:#ccc;">
No. 1
<span style="font-weight:bold;">John Doe</span>
<span style="color:#808080">11/14/2010 3:23:44</span>
</div>
</div>

hope it helps :)
12:26 pm on Dec 30, 2010 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



another suggestion: one of the best way to align an image, especially an icon, vertically is to use it as a background image.

Typically icons are used many times per page (like the red balls here) so calling it from a background image reduces the number of http requests. It also allows you to change the image and "resize" the space required via the CSS alone - no matter if the image changes, or it's a different one depending on the "state" of the thing it pertains to, i.e. "new" post "read" post..

it also means you can take the presentation out of the HTML

so with code like this:
<div class="comment">
<span class="number">No. 1</span>
<span class="name">John Doe</span>
<span class="date">11/14/2010 3:23:44</span>
</div>


you can pretty much do anything with the CSS.. an example given your requirements is:

.comment {
font: 13px/2 arial, verdana, sans-serif;
/* line-height of 2 used instead of top/bottom padding the div either/or will do */
background: #ccc url(youricon.gif) no-repeat 5px 50%;
/* the 50% centers the background vertically then adjust the left position to suit */
border-top: 1px solid #dedede;
padding: 0 5px 0 40px;
/* adjust left padding to leave enough room to show the icon background and a "whitespace" border around it */
margin: 3px;
}


.comment .number {float: right;}
.comment .name {font-weight: bold; padding-right: 5px;}
.comment .date {color: #808080;}
2:52 pm on Dec 30, 2010 (gmt 0)

5+ Year Member Top Contributors Of The Month



@ SuzyUK,

Thanks for the answer, although it's not the result I'm looking for.
3:14 am on Apr 16, 2011 (gmt 0)

5+ Year Member Top Contributors Of The Month



Dear Suzy,

Hope you don't mind me getting back to you after a long time!

and a "whitespace" border around it

I wonder if you could tell me how to do it.

Thanks again!
4:02 am on Apr 16, 2011 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



and a "whitespace" border around it

I wonder if you could tell me how to do it.

She did ;-) The line you quoted was an explanation of the immediately preceding bit of CSS. The "padding" property is visually the same as making an invisible border. (That is, a border that takes up space but uses your existing background color.) Unlike a "margin", it doesn't overlap with anything else. So two adjoining images with 1em padding will be 2em apart.

A quick-and-dirty way to see how padding works is to add something like {border: 1px solid red} and preview the page. The border is applied outside the padding. Experiment with the size of the padding; your thin red line will show you how far it extends.
9:26 am on Apr 16, 2011 (gmt 0)

5+ Year Member Top Contributors Of The Month



@Lucy,

The padding doesn't create the effect I'm after. Would you mind trying my table code and compare it with Suzy's embed code result?
12:58 am on Apr 18, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Hi rain_lover,

I'm late to this issue, but because Suzy usually creates ideal solutions I did compare it to your table to try to identify the trouble. I usually wouldn't try to figure out the OP's problem for them though, so perhaps think about helping us to help by identifying the issue yourself. I'm sure "It's not the result I'm looking for" made sense to you, but I've had that after solving a layout issue because the solution used an unwanted colour :)

Ok, your issue: Suzy's use of background-images to avoid server hits is sound reasoning (of course), but the background-color is displaying "around/behind" the image. I think that's the issue you want to solve.

If I have that right, this layout has traditionally been easier in tables because some browsers were slow to implement suitable css properties, others didn't conform to the recommendations.

But things have changed and there are several ways to achieve this. The one that suits your situation best will depend on what browsers you have to support - so if you can indicate which older browsers you are supporting (or not), it would be easier to make suggestions.
2:25 am on Apr 18, 2011 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



Your original question was about centering the icon vertically. For experimental purposes, I recommend changing one of your text segments-- I used the "John Doe" one-- to a much longer slab of text. This will force the browser to wrap the text, letting you verify that the image is vertically centered. I tried the original short-text version in five browsers* and got four different results depending on what happens when you make the window absurdly narrow (trying to force a wrap). Once I changed to longer text, I could confirm that the image is always vertically centered, so that can't be the problem you're having. Unless, ahem, MSIE** has chosen to go its own merry way.

A side benefit is that this shows what happens to "No. 1" if other text slams right up against it. You'll want to add a bit of left padding there. You can also see the difference between top/bottom padding and line-height, since it affects display of the wrapped line.


* I'm on a Mac, so subtract Internet Exploder and add Camino to the standard list. I've also got the text editor's HTML preview, but that uses the Apple Web Kit so it's generally the same as Safari.

** In real life I make e-texts. They have to display as intended all the way back to MSIE 6-- without using javascript or anything fancy. Our last resort is the Conditional Comment.
2:00 pm on Apr 18, 2011 (gmt 0)

5+ Year Member Top Contributors Of The Month



Suzy's use of background-images to avoid server hits is sound reasoning (of course), but the background-color is displaying "around/behind" the image. I think that's the issue you want to solve.


I like the idea of using the image in the background, but the problem is in her solution the area around/behind the image is colored and this problem isn't browser-based. I tested her code in different browsers and saw the same issue.
3:03 pm on Apr 18, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Yes, rain_lover, but as I said, there are several ways to achieve what you want.
The issue isn't dependent on browser version, but the most suitable solution is.
4:04 am on Apr 21, 2011 (gmt 0)



Make line-height of fonts same as image height.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month