0

This is so simple with graphics. I have an 'external' CSS file that simply lists the graphics for two different positions on each web page. Each page's containers are individually numbered (i.e., ID=upper6, lower6, upper7 and so forth). The external CSS file (imageref.css) merely has a list: #upper6 {background:url(path to graphic) no-repeat;) etc.

These load just fine.

Why can't I do this with blocks of text (i.e., #uppercaption6, #lowercaption6). I've tried every permutation I can think of (backgrounds, etc.).

I'd like to do the same to populate audio clips on each page. Do I have to learn jQuery? Help a rank beginner out here will ya?

Per request, I've expanded my dilemma thusly:

On the page/s in question, I initially load the CSS, and a text file like this:

<link rel="stylesheet" type="text/css" href="../includes/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="../includes/imageref.css" />

The second file could just be text, as it is formatted like this:

#upper6 {background:url(../images/phone.png) no-repeat right 0px;}
#lower6 {background:url(../images/writing_utensils.png) no-repeat right 0px;}

. . .

The image links listed there are called from this point in the HTML:

<figure id="photo_1"><a href="javascript:" onclick="upvis();" >
    <div class="figure_photo" id="upper6"></div></a></figure>

and all web pages work just fine.

Question: How can I do the same thing with video clips and blocks of text?

These areas have the same type of lists, but do NOT work.

<video class="video-container" preload="none" controls>
    <source class="vid_mp4" id="vid01" />
</video>

or,

<div class="CC_container">
    <div class="closed_caption" id="caption1" ></div>
</div>

I'm confused that I can easily call in graphics and photos by referencing their "ID", but not video clips or blocks of text.

Musa
  • 96,336
  • 17
  • 118
  • 137
user2196982
  • 1
  • 1

1 Answers1

0

That can be done using 'content' property.

For instance, you can do :

<div class="CC_container">
<div class="closed_caption" id="caption1" >your dynamic text here: </div>
</div>

.closed_caption:after {
    content : " some text";
}

jsFiddle

Please let me know if it worked out well.

Romain Pellerin
  • 2,470
  • 3
  • 27
  • 36
  • This will work if I wish to have a separate stylesheet for each page in the website. What I would like to do is give each element an ID that will access an external list (of URL's?) like I have with the graphics. – user2196982 Mar 26 '13 at 17:41
  • I'm not sure about what you mean. If the text is stored somewhere else, then you have to use javascript. And it's the same for video clips. – Romain Pellerin Mar 26 '13 at 21:12
  • Why don't I have to use javascript for the images? I call them from a CSS (text) file simply by referencing their ID. Just as I've shown above. It's a simple list of ID's, with their background method as a URL to the file in the image directory. I envision the same thing with video/audio clips and blocks of closed captioning text. That way I can edit entire sites (this is training related) by merely editing a single page! – user2196982 Mar 26 '13 at 21:29
  • because images can set as background with CSS. But you cannot edit your HTML content with CSS, excepted with 'content' property as I said. That thread may help you : http://stackoverflow.com/questions/7896402/how-can-i-replace-text-through-css – Romain Pellerin Mar 27 '13 at 12:12