/    Sign up×
Community /Pin to ProfileBookmark

Automatic Numbers and Headers

Copy linkTweet thisAlerts:
Jan 24.2006

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:

[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; }
[/code]

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

Can anyone help me out? Thanks in advance.

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@NogDogJan 24.2006 — This appears to work:
<i>
</i>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;
}
Copy linkTweet thisAlerts:
@nadamtauthorJan 24.2006 — This appears to work:
<i>
</i>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;
}
[/QUOTE]

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".
Copy linkTweet thisAlerts:
@NogDogJan 24.2006 — Here's my entire page for you to see how it works. (By the way, it's h5:before, not h5::before.)
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang='en'&gt;
&lt;head&gt;
&lt;meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'&gt;
&lt;title&gt;Page Title&lt;/title&gt;
&lt;!-- link rel='stylesheet' href='style.css' type='text/css' --&gt;
&lt;style type="text/css"&gt;
&lt;!--
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;
}
--&gt;
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="body_head"&gt;
&lt;h4&gt;Level 4 Heading&lt;/h4&gt;
&lt;h5&gt;Level 5 Heading&lt;/h5&gt;
&lt;h5&gt;Level 5 Heading&lt;/h5&gt;
&lt;h4&gt;Level 4 Heading&lt;/h4&gt;
&lt;h5&gt;Level 5 Heading&lt;/h5&gt;
&lt;h5&gt;Level 5 Heading&lt;/h5&gt;
&lt;h4&gt;Level 4 Heading&lt;/h4&gt;
&lt;h5&gt;Level 5 Heading&lt;/h5&gt;
&lt;h5&gt;Level 5 Heading&lt;/h5&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@nadamtauthorJan 24.2006 — Here's my entire page for you to see how it works. (By the way, it's h5:before, not h5::before.)
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang='en'&gt;
&lt;head&gt;
&lt;meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'&gt;
&lt;title&gt;Page Title&lt;/title&gt;
&lt;!-- link rel='stylesheet' href='style.css' type='text/css' --&gt;
&lt;style type="text/css"&gt;
&lt;!--
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;
}
--&gt;
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="body_head"&gt;
&lt;h4&gt;Level 4 Heading&lt;/h4&gt;
&lt;h5&gt;Level 5 Heading&lt;/h5&gt;
&lt;h5&gt;Level 5 Heading&lt;/h5&gt;
&lt;h4&gt;Level 4 Heading&lt;/h4&gt;
&lt;h5&gt;Level 5 Heading&lt;/h5&gt;
&lt;h5&gt;Level 5 Heading&lt;/h5&gt;
&lt;h4&gt;Level 4 Heading&lt;/h4&gt;
&lt;h5&gt;Level 5 Heading&lt;/h5&gt;
&lt;h5&gt;Level 5 Heading&lt;/h5&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
[/QUOTE]
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, [url="http://www.w3.org/TR/css3-content/#syntax"]last I checked[/url] double colon notation "::" was preferable in CSS3.
Copy linkTweet thisAlerts:
@NogDogJan 24.2006 — 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 ? ).
Copy linkTweet thisAlerts:
@nadamtauthorJan 24.2006 — Sorry, don't know what else to tell you. The code I provided worked like a charm on my PC using Firefox 1.5.[/quote]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 ? ).[/QUOTE]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.
×

Success!

Help @nadamt spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...