can a CSS div type include text/image? 1

[johnnygeo]

I am making an HTML document containing many entries. Each entry is one of 3 or 4 categories, and contains a category-identifying icon. Each entry now looks like this:

<div class="entryIcon">
    <img src="iconCategoryA.jpg">
</div>
<div class="entry">
    Here is the text of an entry for category A
</div>

<div class="entryIcon">
    <img src="iconCategoryB.jpg">
</div>
<div class="entry">
    Here is the text of an entry for category B
</div>

and so on. But what I would really like to do is make a different div class for each category, which *includes* the image. Then for each entry I would only have to put:

<div class="entryCategoryA">
    Here is the text of an entry for category A
</div>

<div class="entryCategoryB">
    Here is the text of an entry for category B
</div>

Is it possible (or good practice) to specify *content*, such as repetitive text or images, in a div class definition?

 

[tgreer]

Sure. Use the background style property:

.myDiv
  { 
    width: 656px;
    height: 144px;
    background: #fff;
    margin: 0 auto;
    cursor: pointer;
    background: url(tgreer.gif) no-repeat center;
  }

I think it's a great practice. If you want to change backgrounds, just edit the CSS, rather than search/replace through image tags.



Thomas D. Greer

http://www.tgreer.com

Providing PostScript & PDF
Training, Development & Consulting

If this post was helpful, click some ads! My personal site is also advertiser-supported. Hint, hint!

 

[johnnygeo]

Thanks, Thomas, I should be able to use that for the example I cited.

But I don't think that is the same thing as including *content* in the div class. What if I wanted to include the name of the category as text rather than as an image? Or an image that would precede the text inline, rather than as a background (more like a bullet)?

 

[philote]

I don't think that'd be possible using css. But maybe you could do it with javascript or even server-side scripting.

 

[tgreer]

No, no text. Only a graphic. You can control how the graphic repeats: in the x direction only, y direction only, both, or neither.

CSS is all about separating STYLE from CONTENT. Putting content via CSS (if 'twere possible) would be a step in the wrong direction.



Thomas D. Greer

http://www.tgreer.com

Providing PostScript & PDF
Training, Development & Consulting

If this post was helpful, click some ads! My personal site is also advertiser-supported. Hint, hint!

 

[Vragabond]

Putting content is available through CSS2.1 content property, alas I know that IE does not support that. I think Mozillas and Operas do. Thomas made a good suggestion with putting background in and enforcing no-repeat while padding the rest of the text. That gives the ilusion of a bullet. Also, looking at your code, I would suggest:

<style type="text/css">
.entryIcon {
    width: 200px;
    height: 100px;
    background: #ccc;
    margin: 0 auto;
    cursor: pointer;
    padding-left: 50px;
}

.catA {
    background: url(bulletA.gif) no-repeat;
}

.catB {
    background: url(bulletB.gif) no-repeat;
}
</style>

<div class="entryIcon catA">
 Bla bla
</div>
<div class="entryIcon catB">
 Blah Blah
</div>