PDA

View Full Version : Add multiple .css



Andreas
01 Jan 2009, 06:09 PM
Hello!

I'm gonna try to keep this as simple as I can as I am newbie at this....

I have a site where I'm gonna feature trailers in Quicktime and I'm planning on using a script called clearbox to open these trailers. Go to my site (http://www.jbfans.com/films/index.php) and view the trailers to see what clearbox is.

Now, to my problem. I'm gonna have 20 trailers per page, but all the trailers are not the same size. If you check out the trailers on my site you can see that the close button for the Pirates 2 trailer is a bit off, as to the National Treasure trailer where the button is where it's supposed to be. That's because the trailers are in different sizes, therefore the sizes of the clearbox windows has to be different. To change the position of the close button, I have to edit a .css file (clearbox.css).

What I'm getting at is that I must have one clearbox.css file for each trailer/window and that every clearbox.css file needs an id or something so I can call it from within the html/php file.

Here's the code for clearbox as I have right now on my site. First up is the code that appears in the head section...


<link href="piratesofthecaribbean2/css_trailer/clearbox.css" rel="stylesheet" type="text/css" />
<script src="piratesofthecaribbean2/js/clearbox.js" type="text/javascript"></script>

<link href="nationaltreasure/css_trailer/clearbox.css" rel="stylesheet" type="text/css" />
<script src="nationaltreasure/js/clearbox.js" type="text/javascript"></script>

And here are the links for the "View trailer"-buttons...

<a href="piratesofthecaribbean2/trailer.php" rel="clearbox(668,,330,,click)"><img border="0" src="http://www.jbfans.com/images/linkfilms_viewtrailer-normal.jpg" class="domroll http://www.jbfans.com/images/linkfilms_viewtrailer-hover.jpg" width="124" height="27"></a>

<a href="nationaltreasure/trailer.php" rel="clearbox(668,,342,,click)"><img border="0" src="http://www.jbfans.com/images/linkfilms_viewtrailer-normal.jpg" class="domroll http://www.jbfans.com/images/linkfilms_viewtrailer-hover.jpg" width="124" height="27"></a>

Clearly, this current setting doesn't work.

What I wanna know is if I can have multiple .css files with different settings (to suit each trailer/window) and if I can call these .css files in this link:

<a href="nationaltreasure/trailer.php" rel="clearbox(668,,342,,click)"><img border="0" src="http://www.jbfans.com/images/linkfilms_viewtrailer-normal.jpg" class="domroll http://www.jbfans.com/images/linkfilms_viewtrailer-hover.jpg" width="124" height="27"></a>

I hope someone understands what I want, I really want this to work!

Thanks in advance!