Applying CSS file to a <div> section

#1

Hi,

I have a web application which uses external CSS files extensively.
Now, I need to port this application to run inside a portlet. So, it
will not generate a complete HTML document, but just a fragment. How
can I apply an external CSS file not to the whole HTML document, but
just to a div section ?

I see 2 alternatives:
1) to use a system prefix in every ID and CLASS attribute. This will
be generate a lot of work for me.
2) to code a JavaScript code to load the CSS file and apply it to the
document. I think this is possible, but I don´t know how to do it.

Any ideas are welcome,

Alessandro Coelho Ribeiro
alessandro.ribeiro (AT) integritas (DOT) com.br
Integritas Technologies - Open Solutions

#2

"alexrib" <alessandro.c.ribeiro (AT) gmail (DOT) com> wrote:

Quote:

I have a web application which uses external CSS files extensively.
Now, I need to port this application to run inside a portlet. So, it
will not generate a complete HTML document, but just a fragment. How
can I apply an external CSS file not to the whole HTML document, but
just to a div section ?

If you are not able to write in the document's head section, your only
option is to supply inline styles via the style attributes in each HTML
element.

--
Spartanicus

#3

alexrib napisaÅ‚(a):

Quote:

Hi,

I have a web application which uses external CSS files extensively.
Now, I need to port this application to run inside a portlet. So, it
will not generate a complete HTML document, but just a fragment. How
can I apply an external CSS file not to the whole HTML document, but
just to a div section ?

I see 2 alternatives:
1) to use a system prefix in every ID and CLASS attribute. This will
be generate a lot of work for me.
2) to code a JavaScript code to load the CSS file and apply it to the
document. I think this is possible, but I donÂ´t know how to do it.

1)
I am not sure what you can do and what is not possible, but
instead of adding a prefix to each ID and CLASS attribute in
your code, you can convert it this way:

Let's say your CSS looks like

a { color: #00f; }
p { magin: 1em;
p.someclass { background:#eee; }
h2 { border-bottom:solid 1px #000; }

you can change it to:

#portletId a { color: #00f; }
#portletId p { magin: 1em;
#portletId p.someclass { background:#eee; }
#portletId h2 { border-bottom:solid 1px #000; }

and use <div id="portletId"> your code here.. </div>

Of course this solution will work if your stylesheet will be
linked in <head> section. If the only part you can modify is
your <div> content, I think you may try some Javascript to
add it to the <head>, for example:

2)

<script type="text/javascript">
//<![CDATA[
var csslink=document.createElement('link')
csslink.setAttribute('rel','stylesheet');
csslink.setAttribute('href','your/css/url/path');
document.getElementsByTagName('head')[0].appendChild(csslink);
//]]>
</script>

It worked in my Firefox but I can not guarantee it is
totally cross-browser solution.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Applying CSS file to a <div> section

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

Applying CSS file to a <div> section - 12-13-2005 , 06:22 AM

Re: Applying CSS file to a <div> section - 12-13-2005 , 08:00 AM

Re: Applying CSS file to a <div> section - 12-13-2005 , 10:41 AM