Automatic Numbers and Headers [Archive]

nadamt

01-23-2006, 11:52 PM

I'm trying to get automatic numbering to work for <h4> and <h5> on my alternative stylesheet, "Modern." I want every <h4> to read "§A Title", "§B Title", "§C Title", etc and every <h5> to read "§A1 Subtitle", "§A2 Subtitle" and so on. Here is the code:

div.body_head h4 { counter-reset: section; }
div.body_head h4::before { content: "§" counter(§) " "; counter-increment: § 1; }
div.body_body h5::before { content: "§" counter(§) " "; counter-increment: section; }

Here is the website (http://www.nadamt.xmgfree.com/index.xml) (viewable in Firefox 1.5 only).

Can anyone help me out? Thanks in advance.

NogDog

01-24-2006, 12:54 AM

This appears to work:

div.body_head h4:before {
content: "§" counter(section, upper-latin) " ";
}
div.body_head h5:before {
content: "§" counter(section, upper-latin) counter(subsection) " ";
}
div.body_head h4 {
counter-reset: subsection;
counter-increment: section;
}
div.body_head h5 {
counter-increment: subsection;
}

nadamt

01-24-2006, 01:49 AM

This appears to work:

div.body_head h4:before {
content: "§" counter(section, upper-latin) " ";
}
div.body_head h5:before {
content: "§" counter(section, upper-latin) counter(subsection) " ";
}
div.body_head h4 {
counter-reset: subsection;
counter-increment: section;
}
div.body_head h5 {
counter-increment: subsection;
}

Thanks, but I got nothing. I don't even have "div.body_head h5::before". I have "div.body_body h5::before", but that didn't work either. I shouldn't say that I got nothing, all h5 tags seem to be working. I get a zero before the number, but the h4 tags all show an "A".

NogDog

01-24-2006, 02:01 AM

Here's my entire page for you to see how it works. (By the way, it's h5:before, not h5::before.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Page Title</title>

<style type="text/css">

</style>
</head>
<body>
<div class="body_head">
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h5>Level 5 Heading</h5>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h5>Level 5 Heading</h5>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h5>Level 5 Heading</h5>
</div>
</body>
</html>

nadamt

01-24-2006, 08:27 AM

Here's my entire page for you to see how it works. (By the way, it's h5:before, not h5::before.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Page Title</title>

<style type="text/css">

</style>
</head>
<body>
<div class="body_head">
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h5>Level 5 Heading</h5>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h5>Level 5 Heading</h5>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h5>Level 5 Heading</h5>
</div>
</body>
</html>

Sorry, I'm still lost. I've tried to faithfully copy your scheme, but it still doesn't work with my stylesheet. I only get the letter A for all <h4>, I get a zero before each automatic number on <h5>. I've tried various modififications, and I'm still not getting it to work.

Also, last I checked (http://www.w3.org/TR/css3-content/#syntax) double colon notation "::" was preferable in CSS3.

NogDog

01-24-2006, 11:25 AM

Sorry, don't know what else to tell you. The code I provided worked like a charm on my PC using Firefox 1.5.

Also, CSS3 is not yet implemented, it's still in development. Use CSS2 (which still isn't completely implemented by IE6, anyway ;) ).

nadamt

01-24-2006, 01:56 PM

Sorry, don't know what else to tell you. The code I provided worked like a charm on my PC using Firefox 1.5.I'm not saying that it doesn't work. I'm saying that it doesn't work on my stylesheet. The example you provided worked fine, but it does not work on my stylesheet.

Also, CSS3 is not yet implemented, it's still in development. Use CSS2 (which still isn't completely implemented by IE6, anyway ;) ).CSS3, unlike previous versions, is not a package deal. Layout engines can implement CSS3 selectors and/or CSS3 psuedo-classes individually, as the W3C finishes them, rather than the complete CSS3 as a whole. Therefore, I don't see why I should have to wait two or three years to take advantage of these cool features when Mozilla Firefox has them enabled today. I couldn't care less about IE6, I'm tired of Microsoft holding the rest of the web back.

Also, I think it's worth saying that CSS2.1 is still in development as well.