|
abbeyvet -> RE: Class VS. ID (6/10/2003 19:05:21)
|
quote:
Also you can assign more than one class to the same element.
That is the sweetest, sweetest thing! Pageoneresults posted this a little while back and it was news to me to - and on that very day I found a use for it!
Here is how I used it in case it is useful to anyone.
I have links, on the left of a page in a nav bar, in the form of an unordered list. The link style specifies a different list-style-image depending on the link pseudo class, so that on hover the image before each item changes.
MMMM. I thought. Wouldn' t it be nice to have the list image change to mark which page the user was on, sort of a location indicator? But I still want the navigation in an include page, for convenience.
So, I used two classes in each link eg
<a href=" index.html" class=" leftnav home" >Home</a>
<a href=" about.html" class=" leftnav about" >About</a>
<a href=" contact.html" class=" leftnav contact" >Contact</a>
etc etc
Then I put an embedded stylesheet in each page, so that on say the home page it includes this:
a.home:visited {list-style-type:url(/images/layout/indicator.gif);}
on the about page this:
a.about:visited {list-style-type:url(/images/layout/indicator.gif);}
Now, by definition the page you are on is visited. So by just altering the page name in the embedded stylesheet the page you are on is indicated by a different image in the navigation bar.
I did the same in fact for the section the page was in, so that the bg color on the top nav bar changes, again as a location indicator.
Actually I then complicated, or simplified it depending on your view, by using PHP.
I put the entire header in an include page - that is everything from the <doc type... though </head><body> to the start of the content.
Then on each page I define the variables for the page:
<?php
// Enter the title of the page
$title = " Some title" ;
//enter the name of the section
$sectionid = " main" ;
//enter the name of the page
$pageid = " home" ;
//Enter Keywords for this page
$keywords = " keyword, keyword, keyword" ;
//Enter description for this page
$description = " Write a page description here" ;
//DO NOT EDIT
include($DOCUMENT_ROOT . " /includes/header.txt" );
?>
Then call the variables in the included header, which looks like this:
<!doctype HTML PUBLIC " -//W3C//DTD HTML 4.0 Transitional//EN" " http://www.w3.org/TR/REC-html40/loose.dtd" >
<html>
<head>
<title><?php echo " $title" ; ?></title>
<meta name=" keywords" content=" <?php echo " $keywords" ; ?>" >
<meta name=" description" content=" <?php echo " $description" ; ?>" >
<link rel=" stylesheet" href=" /idnn.css" type=" text/css" >
<style type=" text/css" > @import url(/id.css);</style>
<style type=" text/css" >
a.<?php echo " $sectionid" ; ?> {background-color:#ffa081;}
a.<?php echo " $pageid" ; ?>:visited{list-style-image:url(/images/layout/indicator.gif);}
</style>
<SCRIPT LANGUAGE=" JavaScript" SRC=" /global.js" TYPE=" text/javascript" ></SCRIPT>
</head>
<body>
<div class=" body" >
Because the footer is included also, it ends up being that each page is just content and a few variables, but boy can you make those variables work with the stylesheet!
I am sure you can so the same in ASP - I just know nothing about ASP.
Sorry for rambling - but I was so pleased with this setup, and so happy the P1r posted the thing about the two classes just as I was pondering how to do it - that I thought it might be useful to someone elese.
I cannot show you the site, its for a product that won' t be launched until next week, but I will then if anyone is interested in seeing it in action.
|
|
|
|
