14 replies [Last post]
dniemeye
dniemeye's picture
Offline
newbie
Last seen: 10 years 40 weeks ago
Timezone: GMT-8
Joined: 2010-09-27
Posts: 9
Points: 12

Short question: How can I point dynamically to a style sheet like:

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

where "filename" (a variable?) would be the name of the corresponding HTML document that links it.
-----------------------------------------------
Long Explanation:
At our high school I'm using SSI (server side includes) for various reasons, and it basically looks like this:

TOP (including the head and start of the body including the top navigation bar)
MAINPAGE (which includes the topic at hand, the middle of the body)
FOOTER (which includes the footer navigation stuff at the bottom of all pages and end of BODY and HTML)

so the TOP of all my web pages (XHTML 1.0 Strict) is already populated with a link to a static style sheet in the HEAD. ALL the site pages are the same except the content of MAINPAGE which is handy in some ways.

Problem is, I want to keep that static style sheet but I'm getting into the need for additional style sheets (for each high school sport) depending on the content of the main page, but that would put a link to a style sheet in the middle of the body of the page. It "works" but upon verifying CSS I get the error that it's not supposed to be allowed; it's in the wrong place. ("document type does not allow element "link" here.")
You can see my existing example at:
http://www.biggs.org/bhs/taggingxxxxx/tagging/vfball.shtm

I'm thinking of putting something to the effect of this in the head of all pages:

<link href="css/main.css" rel="stylesheet" type="text/css" /> (This is already there)
AND THEN THIS ADDITIONAL STATEMENT:
<link href="css/"FILENAME".css" rel="stylesheet" type="text/css" />  

where "filename" (a variable?) would be the name of the corresponding HTML document. So FOOTBALL.SHTM would get FOOTBALL.CSS as it's additional style sheet. And of course, this additional style sheet only contains unique styles, different than main.css.

Does that make sense? The need for the additional style sheet is due to "facebook" type of tagging of pictures that we're starting to do, which is great but creates some big additional CSS files for each sport)

Don't know how to create the variable. HELP!!!!!!!!!!!! Thanks.

Dave Niemeyer

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Just add an ID or class to

Just add an ID or class to the element that wraps your main content and then target the elements within it using that; no need for additional stylesheets or extra http requests that way.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

dniemeye
dniemeye's picture
Offline
newbie
Last seen: 10 years 40 weeks ago
Timezone: GMT-8
Joined: 2010-09-27
Posts: 9
Points: 12

But that would make the CSS HUGE

But you don't understand, I'm trying to not grow the CSS style sheet to 1000's of lines or more... Each sports page requires 100's of lines of CSS code with the "tagging" methods I'm using (a tag for each and every face on the sports pages) and we have a dozen or so sports pages. Putting all the CSS for all the sports for all the pix in one style sheet seems a little bit extreme.

Dave

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

dniemeye wrote: Putting all

dniemeye wrote:

Putting all the CSS for all the sports for all the pix in one style sheet seems a little bit extreme.

So does having 100s of lines for just one sport and 1000s of lines for the site you've linked to. What do you mean 'for all the pix'? Why is there different rules for different pictures?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

dniemeye
dniemeye's picture
Offline
newbie
Last seen: 10 years 40 weeks ago
Timezone: GMT-8
Joined: 2010-09-27
Posts: 9
Points: 12

How I'm doing the Tagging

So here's the reason. I'm defining a DL list with each kids name in the list in the CSS and invoking the list in the HTML The picture is the background to the DL. And there's links to each kids "face" coordinates of the picture background. Works GREAT, although a lot of code, but that's what student slave labor is for....lol

Here's the HTML:

<dl id="heads">
<dd id="EdwinS"><a href="link"><span>Edwin S</span></a></dd>
<dd id="ChazF"><a href="link"><span>Chaz F</span></a></dd>

And here's the style:
dl#heads{
background: url(../images/varfballpic.jpg);
height: 400px;
width: 600px;
position: relative;
}

dd{
margin: 0;
padding: 0;
position: absolute;
}
dd#EdwinS{
left: 48px;
top: 183px;
}
dd#EdwinS a{
position: absolute;
width: 21px;
height: 25px;
text-decoration: none;  /*no underline*/
}
dd#EdwinS a span{
display: none;
}
dd#EdwinS a:active span{
display: none;
}
dd#EdwinS a:hover span{
	display: block;
	text-indent: 0;
	vertical-align: top;
	color: #FFFFFF;
	background-color: #282828;
	font-weight: bold;
	position: absolute;
	bottom: 100%;
	margin: 0;
	padding: 5px;
	width: 53px;
}
dd#EdwinS a:hover{
background: no-repeat;
}
dd#ChazF{
left: 107px;
top: 181px;
}
dd#ChazF a{
position: absolute;
width: 18px;
height: 17px;
text-decoration: none;  /*no underline*/
}
dd#ChazF a span{
display: none;
}
dd#ChazF a:active span{
display: none;
}
dd#ChazF a:hover span{
	display: block;
	text-indent: 0;
	vertical-align: top;
	color: #FFFFFF;
	background-color: #282828;
	font-weight: bold;
	position: absolute;
	bottom: 100%;
	margin: 0;
	padding: 5px;
	width: 53px;
}
dd#ChazF a:hover{
background: no-repeat;
}

And that's just for 2 kids in one picture of the entire football team pic, and there will be more pics, so putting all this into one style sheet when not required seems extreme to me anyway, so that's why I'm trying to get a method to LOAD a STYLE SHEET IF REQUIRED (IE by the filename as a variable, perhaps. I don't know that's why I'm asking.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Most of the code you've

Most of the code you've posted is repeated and redundant. You can reduce that down to:

dd {
margin: 0;
padding: 0;
position: absolute;
}
dd a { position: relative; text-decoration: none; }
dd a span { display: none; }
dd a:hover { background: no-repeat; }
dd a:hover span {
	display: block;
	text-indent: 0;
	vertical-align: top;
	color: #FFFFFF;
	background-color: #282828;
	font-weight: bold;
	position: absolute;
	bottom: 0;
	margin: 0;
	padding: 5px;
	width: 53px;
}

And then you can add the individual CSS inline like so:

<dd style="left: 48px;top: 183px;"><a href="link"><span>Edwin S</span></a></dd>

If you're just displaying a text link over each kid's face, you don't need specific values for the anchor or the span, just the <dd> itself (if for some reason you do need specific values, you can just add them inline to the elements as I've done for the <dd> anyway). Adding style like this inline is fine, in fact better than adding an external stylesheet as the added code weight of the HTML page will not be more expensive than loading an additional http request for another stylesheet.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

dniemeye
dniemeye's picture
Offline
newbie
Last seen: 10 years 40 weeks ago
Timezone: GMT-8
Joined: 2010-09-27
Posts: 9
Points: 12

I'll give it a try

I'll try out what you said and let you know how it goes. Thanks!!!!!
Dave

dniemeye
dniemeye's picture
Offline
newbie
Last seen: 10 years 40 weeks ago
Timezone: GMT-8
Joined: 2010-09-27
Posts: 9
Points: 12

No worky...

I did as you suggested, I got the picture but no links, no names show when hovering over any part of the pic.

Here's the only css:

dd {
margin: 0;
padding: 0;
position: absolute;
}
dd a { position: relative; text-decoration: none; }
dd a span { display: none; }
dd a:hover { background: no-repeat; }
dd a:hover span {
	display: block;
	text-indent: 0;
	vertical-align: top;
	color: #FFFFFF;
	background-color: #282828;
	font-weight: bold;
	position: absolute;
	bottom: 0;
	margin: 0;
 
}

--------------
And here's the html, just one kid's face referenced:
<dl id="heads" style="background: url(images/varfballpic.jpg); width:600px; height:400px;">
<dd id="EdwinS" style="left: 48px; top: 183px; width: 18px; height:18px;"><a href="#"><span>Edwin S</span></a></dd>
</dl>

-----------------
So what am I forgetting?
Thanks for your help, when we get this to work this is definitely a lot less code.

Dave

dniemeye
dniemeye's picture
Offline
newbie
Last seen: 10 years 40 weeks ago
Timezone: GMT-8
Joined: 2010-09-27
Posts: 9
Points: 12

oh, that's not the "only"

oh, that's not the "only" css, it's just the only css that's used for this dl and dd...

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 20 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Did you update the original

Did you update the original link you posted?

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

dniemeye
dniemeye's picture
Offline
newbie
Last seen: 10 years 40 weeks ago
Timezone: GMT-8
Joined: 2010-09-27
Posts: 9
Points: 12

Yes, I just reposted it.

Yes, I just reposted it now.

dniemeye
dniemeye's picture
Offline
newbie
Last seen: 10 years 40 weeks ago
Timezone: GMT-8
Joined: 2010-09-27
Posts: 9
Points: 12

That is, I reposted it about 9 hours after you asked

That is, I reposted it about 9 hours after you asked if I reposted it...

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Make the <dl> position:

Make the <dl> position: relative and make dd a { display: block } and give them a width and height.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

dniemeye
dniemeye's picture
Offline
newbie
Last seen: 10 years 40 weeks ago
Timezone: GMT-8
Joined: 2010-09-27
Posts: 9
Points: 12

That did the trick

That did the trick, I also had to make the a:hover span have bottom of 100% rather than 0, works great!!! Thank you.

So just out of interest: You think that my idea of making an html request to load an additional external style sheet dynamically, if possible by way of a variable or other method, would be a big burden? Please explain. To my way of thinking if there was indeed a big need of a big style sheet just to add on style dynamically to a bunch of specific pages, it would be less burden to load a quick little style sheet to each page rather than have them all loaded into one BIG style sheet. The burden would be on the server to load the little sheet, but the burden would be on the client end to read a huge single style sheet... Please explain or tell me where I'm "off." Thank you.

Dave Niemeyer

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

It will depend on how large

It will depend on how large the main stylesheet is and how many little ones there are. Although a single file might be larger in file size than several smaller ones, because browsers can only handle so many http requests at once, the multiple files option might make the page feel like it's loading more slowly to the end user, even though the total file size is less.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference