• Locked
9 replies [Last post]
Sat, 2003-06-14 15:34
Anonymous
Anonymous's picture
Guru
calgary,alberta
calgary,alberta

I am trying to apply two style sheets to two different sections of text on my web page. Right now I am getting the properties to carry over and apply to all, instead of just being applied to the section it is assigned.

Any simple ideas that I may be missing?

Top
Tags:
Sat, 2003-06-14 16:12
#1
TGecho
Offline
Regular
Last seen: 20 years 5 weeks ago
Joined: 2003-05-06
Posts: 11
Points: 0

Multiple Style Sheets on One Page

Can you give us a summary of your page layout?

Top
Sat, 2003-06-14 19:01
#2
Anonymous
Anonymous's picture
Guru

Using Two Style Sheets in one page

<html>
<head>
<title>SWMFFL 2003</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link rel="stylesheet" href="/swmffl_links_red.css" type="text/css">
<link rel="stylesheet" href="/swmffl_links_news.css" type="text/css">
</head>
<body bgcolor="#E6E6E7" text="#000000" background="/img/swmffl_mainbak_2003.jpg" leftmargin="0" topmargin="0" onLoad="MM_preloadImages('/img/btn_trans_log_on.jpg','/img/btn_trans_freeagent_on.jpg','/img/btn_trans_waiver_on.jpg','/img/btn_trans_starters_on.jpg','/img/btn_records_alltime_on.jpg','/img/btn_records_histstand_on.jpg','/img/btn_trans_trade_on.jpg')">
<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#000000">
<table width="750" border="0" cellspacing="0" cellpadding="3">
<tr>
<td width="375"><b><font color="#FFFFFF" size="1" face="Verdana, Arial, Helvetica, sans-serif"><%=weekdayname(weekday(now))%>, <%=space(1)%> <%=monthname(month(now))%> <%=space(1)%> <%=day(now)%> , <%=year(now)%></font></b></td>
<td width="375">
<div align="right"><b><font color="#FFFFFF" size="1" face="Verdana, Arial, Helvetica, sans-serif">Official
SWMFFL Time - <%=space(1)%> <%=time%></font></b></div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td background="/img/swmffl_header_2003.jpg" height="100">
<table width="750" border="0" cellspacing="0" cellpadding="1">
<tr>
<td height="50" width="300">&</td>
<td height="50" width="350">&</td>
<td height="50" width="100">
<!--webbot bot="HitCounter" u-custom="\img\counter2002.gif" i-image="5" i-resetvalue="28400" PREVIEW="&strong&[Hit Counter]&/strong&" i-digits="5" startspan -->
<img src="_vti_bin/fpcount.exe/?Page=frm_top.asp|Custom=%5Cimg%5Ccounter2003.gif|Digits=5" alt="Hit Counter">
<br>
<font size="1" face="Arial, Helvetica, sans-serif"><b>Addicts Since
1998</b>
<!--webbot bot="HitCounter" endspan i-checksum="31097" -->
</font></td>
</tr>
<tr>
<td height="50" width="300">&</td>
<td height="50" width="350">&</td>
<td height="50" width="100">
<div align="center"></div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">
<div align="center"></div>
</td>
</tr>
<tr>
<td bgcolor="#F0F0E1"> <font size="1" face="Verdana, Arial, Helvetica, sans-serif"><b>
<%=space(5)%><img src="/img/btn_transactions.jpg" width="150" height="15"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','/img/btn_trans_log_on.jpg',1)"><img name="Image3" border="0" src="/img/btn_trans_log_off.jpg" width="100"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','/img/btn_trans_freeagent_on.jpg',1)"><img name="Image4" border="0" src="/img/btn_trans_freeagent_off.jpg" width="100"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','/img/btn_trans_waiver_on.jpg',1)"><img name="Image5" border="0" src="/img/btn_trans_waiver_off.jpg" width="100"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','/img/btn_trans_starters_on.jpg',1)"><img name="Image6" border="0" src="/img/btn_trans_starters_off.jpg" width="100"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image15','','/img/btn_trans_trade_on.jpg',1)"><img name="Image15" border="0" src="/img/btn_trans_trade_off.jpg" width="100" height="15"></a><img src="/img/btn_empty.jpg" width="100" height="15"></b></font></td>
</tr>
<tr>
<td bgcolor="#F0F0E1"> <font size="1" face="Verdana, Arial, Helvetica, sans-serif"><b><%=space(5)%></b></font></td>
</tr>
<tr>
<td>
<table width="750" border="0" cellspacing="0" cellpadding="2">
<tr valign="top">
<td width="175">
<table width="150" border="0" cellspacing="1" cellpadding="0">
<tr>
<td width="20">&</td>
<td width="127"><b><font color="#FFFFFF"><a href="/index2003.asp" class="swmffl_links_red">swmffl.com</a></font></b></td>
</tr>
<tr>
<td width="20">&</td>
<td width="127"><b><font color="#FFFFFF">Sign
Up for NFLPool</font></b></td>
</tr>
<tr>
<td width="20">&</td>
<td width="127"><b><font color="#FFFFFF"><a href="http://members.boardhost.com/swmffl" target="_blank" class="swmffl_links_red">SoundOff
Board</a></font></b></td>
</tr>
<tr>
<td width="20" height="17">&</td>
<td width="127" height="17"><b><font color="#FFFFFF">Account
Balances</font></b></td>
</tr>
<tr>
<td width="20">&</td>
<td width="127"><b><font color="#FFFFFF"><a href="/password_select.asp" class="swmffl_links_red">Retrieve
Password</a></font></b></td>
</tr>
<tr>
<td width="20">&</td>
<td width="127">&</td>
</tr>
<tr>
<td width="20">&</td>
<td width="127"><b><font color="#FFFFFF">Team
Contacts</font></b></td>
</tr>
<tr>
<td width="20">&</td>
<td width="127"><b><font color="#FFFFFF">2003
Handbook</font></b></td>
</tr>
<tr>
<td width="20">&</td>
<td width="127"><b><font color="#FFFFFF">2003
Scoring System</font></b></td>
</tr>
<tr>
<td width="20">&</td>
<td width="127">&</td>
</tr>
<tr>
<td width="20">&</td>
<td width="127">&</td>
</tr>
<tr>
<td width="20">&</td>
<td width="127">&</td>
</tr>
<tr>
<td width="20">&</td>
<td width="127"><b><font color="#FFFFFF"><a href="http://nfl.com/schedules" class="swmffl_links_red" target="_blank">NFL
Schedule</a></font></b></td>
</tr>
<tr>
<td width="20">&</td>
<td width="127"><b><font color="#FFFFFF">SWMFFL
Schedule</font></b></td>
</tr>
<tr>
<td width="20">&</td>
<td width="127">&</td>
</tr>
<tr>
<td width="20">&</td>
<td width="127"><b><font color="#FFFFFF">League
Standings</font></b></td>
</tr>
<tr>
<td width="20">&</td>
<td width="127"><b><font color="#FFFFFF">Scoring
Breakdown</font></b></td>
</tr>
<tr>
<td width="20">&</td>
<td width="127"><b><font color="#FFFFFF">Weekend
Top 10</font></b></td>
</tr>
<tr>
<td width="20">&</td>
<td width="127">&</td>
</tr>
<tr>
<td width="20">&</td>
<td width="127"><b><font color="#FFFFFF"><a href="/history/hall_of_fame.asp" class="swmffl_links_red">Hall
of Fame</a></font></b></td>
</tr>
<tr>
<td width="20">&</td>
<td width="127"><b><font color="#FFFFFF"><a href="/history/alltime_records.asp" class="swmffl_links_red">All
Time Records</a></font></b></td>
</tr>
<tr>
<td width="20">&</td>
<td width="127"><b><font color="#FFFFFF"><a href="/history/showhist_menu.asp" class="swmffl_links_red">Historical
Stats</a></font></b></td>
</tr>
</table>
</td>
<td width="325"> <br>
<font face="Trebuchet MS" size="2" color="#FFFFFF"><font face="Trebuchet MS" size="2" color="#FFFFFF"><b><b><b><b><b><b><font color="#000000"><b><font face="Trebuchet MS" size="2" color="#000000"><b><b><b><b><b><b><b><b><b><b><b><b><font face="Arial, Helvetica, sans-serif" size="3">2003
Draft Date</font><font face="Arial, Helvetica, sans-serif"><br>
<font color="#CC0000">Tuesday September 2, 2003</font></font></b></b></b></b></b></b></b></b></b></b></b></b></font><font face="Arial, Helvetica, sans-serif" size="2" color="#000000"><br>
</font></b></font></b></b> </b></b></b></b><font face="Arial, Helvetica, sans-serif" color="#000000" size="2">The
6th season of SWMFFL football will begin with our draft party switching
to it's new night, Tuesday September 2 starting around 5:30 pm. The
location is still being discussed. For those interested, we may continue
the Golf Day Outing. Thanks for playing.</font></font></font>
<p><font face="Trebuchet MS" size="2" color="#FFFFFF"><font face="Trebuchet MS" size="2" color="#FFFFFF"><b><b><b><b><b><b><font color="#000000"><b><font face="Trebuchet MS" size="2" color="#000000"><b><b><b><b><b><b><b><b><b><b><b><b><font face="Arial, Helvetica, sans-serif" size="3">Opening
Night </font><font face="Arial, Helvetica, sans-serif"><br>
<font color="#CC0000">Thursday September 4, 2003</font></font></b></b></b></b></b></b></b></b></b></b></b></b></font><font face="Arial, Helvetica, sans-serif" size="2" color="#000000"><br>
</font></b></font></b></b> </b></b></b></b><font face="Arial, Helvetica, sans-serif" color="#000000">For
the second year in a row, the NFL season begins on Thursday Night,
with the New York Jets traveling to Washington to take on the Redskins
at 9:00 pm.</font></font></font></p>
<p><font face="Arial, Helvetica, sans-serif" size="2" color="#FFFFFF"><b><b><b><b><b><b><font color="#000000"><b><font color="#000000"><b><b><b><b><b><b><b><b><b><b><b><b><font size="3">2003
Ownership Entry Fee</font><br>
<font color="#CC0000">Co-Owners Get Assessment Fee</font></b></b></b></b></b></b></b></b></b></b></b></b><br>
</font></b></font></b></b> </b></b></b></b><font color="#000000">With
the current trend of co-owners starting to take the league by storm,
we have implemented a new initiation fee based on the teams ownership.
This fee assessment is to help balance the costs of each team in
the league. Single owners will pay the same fee as last season.
Dual owners will pay 25% more, and multiple owners beyond 2 will
get hit 15% extra per man. Declared owners are eligible to participate
in the End of the Season Party.</font></font></p>
</td>
<td width="250">
<table width="225" border="0" cellspacing="1" cellpadding="2" align="center">
<tr>
<td colspan="2"><font size="1" face="Verdana, Arial, Helvetica, sans-serif" color="#CCCCCC"><b><font color="#666666">SWMFFL
HEADLINES </font></b></font></td>
</tr>
<%
While ((Repeat1__numRows <> Innocent AND (NOT rsStory.EOF))
%>
<tr>
<td width="225" class="swmffl_link_news"><A HREF="/articles/article.asp?<%= MM_keepNone & MM_joinChar(MM_keepNone) & "ArticleNum=" & rsStory.Fields.Item("ArticleNum").Value %>" class="swmffl_link_news">•
<%=(rsStory.Fields.Item("Teaser").Value)%></A></td>
</tr>
<%
Repeat1__index=Repeat1__index+1
Repeat1__numRows=Repeat1__numRows-1
rsStory.MoveNext()
Wend
%>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Top
Sat, 2003-06-14 23:11
#3
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Multiple Style Sheets on One Page

Hi Humbled,
What you need to do is specify classes for the sections you wish to style.Having font tags around everything make it a little more confusing then it needs to be.
If we could look at your style sheet it may be easier to explain but here goes.

Quote:
<td width="127"><font color="#FFFFFF">Sign
Up for NFLPool</font></td>
without font tags could become 
 <td class="sign" >Sign
Up for NFLPool</td>
and in your css file you would have.sign{width:127px; color:#FFFFFF;}You could then reuse the class to anything else that is 127px wide and has a font color of #FFFFFF;
and remove more of the font tags.

If you would like to post your style sheets I will have a closer look.

Hopefully this will at least get you going in the right direction.

Top
Sun, 2003-06-15 01:14
#4
Anonymous
Anonymous's picture
Guru

Almost There: Style Sheet

a:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: bold; color: #000000; text-decoration: none; font-style: normal}
.swmffl_link_news { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: bold; color: #000000; text-decoration: none}
a:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: bold; color: #CC0000; text-decoration: none; font-style: normal}
a:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: bold; color: #000000; text-decoration: none; font-style: normal}

.swmffl_links_red { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-style: normal; font-weight: bold; color: #FFFFFF; text-decoration: none}
a:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: bold; color: #FFFFFF; text-decoration: none}
a:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: bold; color: #CCCC99; text-decoration: none}
a:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: normal; color: #FFFFFF; text-decoration: none}
a:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: bold; color: #999999; text-decoration: none}

Top
Sun, 2003-06-15 02:09
#5
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Multiple Style Sheets on One Page

Hi Humbled,
Looks like I was going off in the wrong direction before.
This might be more like what you are after.

a{ 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 9px; 
font-weight: bold;  
text-decoration: none; 
font-style: normal;
}
 
a.swmffl_link_news { color: #000000; }
a.swmffl_link_news:link { color: #000000; }
a.swmffl_link_news:active { color: #000000; } 
a.swmffl_link_news:hover { color: #CC0000; }

a.swmffl_links_red { color: #FFFFFF; }
a.swmffl_links_red:link {  color: #FFFFFF;}
a.swmffl_links_red:active { color: #FFFFFF; }
a.swmffl_links_red:visited {  color: #999999; }
a.swmffl_links_red:hover { color: #CCCC99; }

The first "a" definition sets up defaults like fonts, that will be used by all links.
It save a little bit of space and is easier to read.
The other definitions are specific to each class and contain changes to the original "a" style, such as color.

It would still be a good idea to remove the font tags when you get a chance.

Top
Sun, 2003-06-15 02:51
#6
Anonymous
Anonymous's picture
Guru

To summarize

So I need to set up

a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
text-decoration: none;
font-style: normal;
}

in the top of the page, then place

a.swmffl_link_news { color: #000000; }
a.swmffl_link_news:link { color: #000000; }
a.swmffl_link_news:active { color: #000000; }
a.swmffl_link_news:hover { color: #CC0000; }

in front of the first set of text I want to model as this and then place

a.swmffl_links_red { color: #FFFFFF; }
a.swmffl_links_red:link { color: #FFFFFF;}
a.swmffl_links_red:active { color: #FFFFFF; }
a.swmffl_links_red:visited { color: #999999; }
a.swmffl_links_red:hover { color: #CCCC99; }

in front of the second set?

Top
Sun, 2003-06-15 04:15
#7
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Multiple Style Sheets on One Page

Hi Humbled,
Not quite, you should set them up in the head section of your document between style tags or just put them in a css file and link to them as you have done with

Quote:
<link rel="stylesheet" href="/swmffl_links_red.css" type="text/css">

Then they can be accessed anywhere in the document just be specifying the class <a href="#" class="swmffl_link_news">news link</a>

This knowledge base article
Adding Style to Web Pages might help.

Top
Mon, 2003-06-16 15:32
#8
Anonymous
Anonymous's picture
Guru

Almost There

Perfect, I am almost there. Since I have been working with Dreamweaver, it tends to tag a lot of items. I now have the two different sets of text perfoming as they should for hover and visited links, but now the pre-executed fonts are not showing up, just the default fonts of the browser.

Where should I place the:
a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
text-decoration: none;
font-style: normal;
}

Inside the *.css files? No where? Please check out the site to see what I am talking about

http://swmffl.com/index2003.asp

Thanks

Top
Mon, 2003-06-16 17:19
#9
Anonymous
Anonymous's picture
Guru

All Set

I figured it out, thanks so much for all of the help. It's tough finding people who want to help any more.

Top
  • Locked