I feel like an idiot for asking this, but

[Awesome-O 4000]

How can I have a small image next to a line of text?

I have this "chart" kinda thing with lines of text, and I need to put a little icon on each line, like this:

http://img247.imageshack.us/img247/383/picture1oh4.jpg

Right now I have a div for each row, containing the icon and text:


<div class="bar"> <div class="icon"><p class="text">Something</p></div> </div>But as you imagine, the text is just on top of the icon. I feel completely retarded for not coming up with a better solution, aside from putting like 8 spaces before the text. To my credit, I'm very tired and just out of it today. Gøddamn Monday. lol

[nobody]

Well there's about 100 better ways to do this.

Personally I'd use a list, assuming they're, well, a list.

So you'd do something like

<ul class="attachments">
<li class="doc">Capital_Statements</li>
<li class="pdf">Something_Else</li>
<li class="doc">Something_Again</li>
<li class="jpg">Some_Image</li>
</ul>

Then your CSS would look something like something like this:

.attachments li {
list-style: none;
padding-left: 15px;
}
.attachments .doc {
background: #fff url('path/to/doc/icon.png') no-repeat left center;
}

You could even use the images as the icons for the list, but this way is a little easier.

[fasterthanlight™]

^ your css references the UL class incorrectly :(

also, as nobody said, you could make the icons as list-style-images but they are not fully supported by every browser.

setting them as backgrounds and adding the necessary padding is the most fool proof way

[Awesome-O 4000]

lol, no idea how I didn't think of that. Today sucks.

[nobody]

^ your css references the UL class incorrectly :(

also, as nobody said, you could make the icons as list-style-images but they are not fully supported by every browser.

setting them as backgrounds and adding the necessary padding is the most fool proof way

I'm going to take the effort to respond to you and not fix the code.

[Awesome-O 4000]

Yay. This isn't working either. I like how the easiest thing is giving me grief.

[fasterthanlight™]

post your code!

[Awesome-O 4000]

NO YOU

I will in a bit. Figure I'll just start over and see where I f'd up first.

[Awesome-O 4000]

<ul class="stuff">
<li class="icon"></li>
<li class="text">Something</li>
</ul>


.stuff li {
list-style: none;
padding-left: 25px;
}

.stuff .icon {
background: url(images/acrobat.png) no-repeat;
height: 20px;
width: 20px;
}

[fasterthanlight™]

that won't work,

you need to use one <li> for both text and icon,

If every icon is going to be the same, this will make your job easier,


<ul class="stuff">
<li>Hai I am text</li>
<li>I AM TEXT TOO </li>
</ul>


ul.stuff {
list-style:none;
margin:0;
padding:0;
}

ul.stuff li{
display:block;
padding:5px 0 5px 25px; /* 25 left padding leaves empty space for icon to show*/
background:url(images/icon.gif) no-repeat left center; /*centered to the left to show up in white space*/
}

[fasterthanlight™]

If icons are going to vary:



<ul class="stuff">
<li class="pdf">Hai I am text</li>
<li class="doc">I AM TEXT TOO </li>
</ul>


ul.stuff {
list-style:none;
margin:0;
padding:0;
}

ul.stuff li {
display:block;
padding:5px 0 5px 25px; /* 25 left padding leaves empty space for icon to show*/
/* BACKGROUND IMAGE REMOVED FROM NORMAL LI */
}

ul.stuff li.pdf {
background:url(images/pdf.gif) no-repeat left center;
}

ul.stuff li.doc {
background:url(images/doc.gif) no-repeat left center;
}

Basically you are just leaving space for you to fill in which icon you will use, by applying the proper class to the <li> in question.

[Awesome-O 4000]

I just realized I was uploading stuff to the wrong directory, too. I could not be more of a jackass today. Holy crap.

I'll test that stuff out in a little while. Thanks man.

[Awesome-O 4000]

I just realized I was uploading stuff to the wrong directory, too. I could not be more of a jackass today. Holy crap.

I'll test that stuff out in a little while. Thanks man.

[Awesome-O 4000]

Why the hell did I post that twice

[Awesome-O 4000]

Okay yay. That works. Thanks again. I'm stupid.

[fasterthanlight™]

YAy!

[nobody]

Woo