|
| |
|
|
Gil
Posts: 7533
From: North Carolina, USA
Status: offline
 |
RE: Class VS. ID - 6/10/2003 16:45:37
Earlier versions of Netscape (4.xx) had a problem w/ ID, but I think they fixed it now
Also:
ID Selectors
This selector was designed to match the value of the HTML ' ID' attribute, but SGML/XML both allow the ID attribute value type. With this type of attribute, each element in a document can have a uniquely referenceable label. This Selector syntax precedes the attribute value with a pound symbol (" #" .) An element name or Universal Selector may be used in front of the ID Selector, but it is not necessary. The effect of this selector can also be achieved using an Attribute Value Selector, but this form of Selector has a higher cascading precedence.
_____________________________
Gil Harvey, 1947-2004
|
|
|
|
Gil
Posts: 7533
From: North Carolina, USA
Status: offline
|
RE: Class VS. ID - 6/10/2003 17:50:00
Also you can assign more than one class to the same element.
_____________________________
Gil Harvey, 1947-2004
| |
|
|
|
abbeyvet
Posts: 5095
From: Kilkenny Ireland
Status: offline
|
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.
< Message edited by abbeyvet -- 6/10/2003 7:09:48 PM >
_____________________________
Katherine
:: InKK Design :: InKK Domains
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: Class VS. ID - 6/10/2003 21:50:11
[url=" http://www.webmasterworld.com/forum21/2932.htm" ]papabaer on ids[/url]
Search for that username papabaer at Google and look at some of his stuff. This guy is way beyond any CSS person that I' ve read about or who are classified as CSS Gurus. papabaer is well known at WebmasterWorld. I don' t think there has ever been a topic he was involved with that did not get solved. The man is a CSS Genius, beyond the Guru title.
Katherine, you go girl! I actually picked up that tip from my normal stomping grounds and brought it over here for all to enjoy.
_____________________________
SEO Consultants Directory
Find Search Engine Marketing Companies
| |
|
|
|
austizzmo
Posts: 4
Joined: 6/19/2003
Status: offline
|
RE: Class VS. ID - 6/19/2003 21:24:13
quote:
Classes or IDs cannot begin with numbers.
while it isnt good syntax... most major browsers will let you get away with using numerical characters as the first character of your id' s and class' s.
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
k¥ 
. 
