I wonder how I can use <div> instead of <table> tag to get the same result. Ideally I’d like to use the image as a background image because the icon is used many times per page so calling it from a background image reduces the number of http requests.
The only thing you need to change is the dimensions of the .img div (to match the dimensions of the background image), plus an extra 5px in width to create a space on the right.
Yes, much better! I actually didn’t notice that you wanted a background image until the last minute, and just replaced the image element with a background image when I re-read your first post. I should have started from scratch and seen that the solution was much simpler with a background image. Thanks rainner.
Ideally, though, if you are going to use this setup multiple times, it’s better to pull out the inline CSS and just apply the styles via a class. I’m sure the inline styles were just for demo purposes.
it’s a good idea to target your HTML using class names or IDs and style them from a .css file like it was shown above instead of applying the styles directly on the tags.
I’m sure the inline styles were just for demo purposes.
Definitely!
I wonder how I can calculate the padding-left:40px dynamically so that any icon I choose the padding-left value changes according to the image width. Since it’s a JavaScript matter I open a new thread.
If you are using different icons, it might be better to place the images in the HTML anyway. In your original post, it sounded like it was the same image being used over and over. It would probably be easier to make calculations with JS if the image is in the HTML.
Ok, no offense guys, but I REALLY have to laugh at the responses so far… Now, I’m just guessing, but shouldn’t this be a HEADING tag as it looks like something that goes BEFORE some content? (or is it a single list item without the content?)
Either way, DIV is the wrong tag for the job as is table.
I’m thinking:
<h2>
<span>
<span>
John Doe
<span>11/14/2010 3:23:44</span>
</span>
No. 1
</span>
</h2>
Or whatever the appropriate SEMANTIC outer tag would be (H3? H4? LI?) – I mean, these look like content and/or headings.
O well, you should thank us then. Laughter is healthy.
Hmm, your code doesn’t quite sit as the OP requested (everything sitting right for me). But anyhow, the OP has started another thread asking for the left padding to be dynamically set, depending on the width of the image. For me, that means it would be better to have the image in the HTML. What do you think? Do you know enough JS to show how to do that?
Actually I’m developing a commenting widget in which the user can customize the comment icon. Since the comment icon might be wider/narrower than the fixed padding-left I use in the embed code, the padding-left value needs to be flexible and change dynamically based on the image width.
Sure, that makes sense. What I meant, though, is that it will probably be harder to detect the width of a background image than an on-page image with JavaScript.
On any particular page or site, will the icon always be the same size? In that case, the ideal would be to give the user a way to set the padding, but I’m not exactly sure how this will be used.
