Forum Moderators: not2easy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<title>Auto-stop</title>
<style type="text/css">
body
{
font-family: "Bookman Old Style", "Times New Roman", "Times", serif;
counter-reset: coh1;
}
h1
{
font-size: 150%;
counter-increment: coh1;
counter-reset: coh2;
}
h1:before
{
content: counter(coh1, upper-roman) ". "
}
p
{
text-align: justify;
}
p.nofloat
{
clear: left;
}
p.r
{
text-align: right;
}
p.c
{
text-align: center;
}
p.ij
{
text-align: justify;
margin-left: 60%;
}
p.ic
{
margin-right: 10%;
margin-left: 10%;
}
span.bi
{
font-weight: bold;
font-style: italic;
}
span.bu
{
font-weight: bold;
text-decoration: underline;
}
span.u
{
text-decoration: underline;
}
span.som
{
font-weight: bold;
font-size: 150%;
text-decoration:underline;
}
ol.uroman
{
list-style-type: upper-roman;
}
ol.lalpha
{
list-style-type: lower-alpha;
}
li.d
{
margin: 1em 0;
}
span.s125
{
font-size: 125%;
}
span.s150
{
font-size: 150%;
}
p.c200
{
text-align: center;
font-size: 200%;
}
p.c300
{
text-align: center;
font-size: 300%;
}
.floatleft
{
float: left;
margin: 0 1em 1em 0;
}
</style>
</head>
<body>
<p class="c">Université de Paris X – Nanterre</p>
<p class="c">Département de Géographie</p>
<p> </p>
<p class="c300">Auto-stop</p>
<p class="c300">Approche géographique</p>
<p> </p>
<p class="c">Maîtrise</p>
<p class="c">Session de juin 1999</p>
<p class="c"><span class="som">Sommaire</span></p>
<ol class="uroman">
<li class="d"><a href="#h1">Histoire du stop</a>
<ol>
<li class="d"><a href="#h1.1">Une pratique vieille comme l’automobile.</a>
<ol class="lalpha">
<li class="d"><a href="#h1.1.1">Les origines</a></li>
<li class="d"><a href="#h1.1.2">Le stop de guerre anglais</a></li>
<li class="d"><a href="#h1.1.3">Les années soixante-dix: l’âge d’or</a>
<ul>
<li class="d"><a href="#h1.1.3.1">Beatniks et Hippies</a></li>
<li class="d"><a href="#h1.1.3.2">Etudes et manuels</a></li>
<li class="d"><a href="#h1.1.3.3">Réponses institutionnelles</a></li>
</ul>
</li>
<li class="d"><a href="#h1.1.4">Le déclin des années quatre-vingt</a></li>
<li class="d"><a href="#h1.1.5">Les années quatre-vingt dix</a></li>
</ol>
</li>
</ol>
</li>
</ol>
<h1><a name="h1">Histoire du stop</a></h1>
<ol>
<li><b><span class="s150"><a name="h1.1">Une pratique vieille comme l’automobile</a></span></b>
<ol class="lalpha">
<li><b><a name="h1.1.1">Les origines</a></b>
</li>
<li><b><a name="h1.1.2">Le stop de guerre anglais</a></b>
</li>
<li><b><a name="h1.1.3">Les années soixante-dix: l’âge d’or</a></b>
<ul>
<li><span class="u"><a name="h1.1.3.1">Beatniks et Hippies</a></span>
</li>
</ul>
<ul>
<li><span class="u"><a name="h1.1.3.2">Etudes et manuels</a></span>
</li>
</ul>
<ul>
<li><span class="u"><a name="h1.1.3.3">Réponses institutionnelles</a></span>
</li>
</ul>
</li>
<li><b><a name="h1.1.4">Le déclin des années quatre-vingt</a></b>
</li>
<li><b><a name="h1.1.5">Les années quatre-vingt-dix</a></b>
</li>
</ol>
</li>
</ol>
</body>
</html>
CSS
body {
font-family: "Bookman Old Style", "Times New Roman", "Times", serif;
/*Set a "base" font-size*/
font-size:16px;
}
ol.uroman {
counter-reset: coh1;
list-style-type: upper-roman;
}
ol.uroman li {
/*setting margin here avoids need for class .d on every li */
margin: 1em 0;
font-size:100%;
font-weight:normal;
}
ol.uroman ol ol {
list-style-type: lower-alpha;
}
ul {
list-style-type:square;
}
/* h1 changed as not best practise to have more than one in page*/
h2 {
font-size: 150%;
counter-increment: coh1;
counter-reset: coh2;
}
h2:before {
content: counter(coh1, upper-roman) ". "
}
/*Increase font size - example of attribute selector. Note dots must be escaped*/
li[id=h1\.1] {
font-size:150%;
font-weight:bold;
}
/* set reduced font-size*/
li[id=h1\.1] ol {
font-size:66%;
list-style-type:lower-alpha;
}
/*matches any ul that is a child of an li with an id that is a string starting with "h1" */
li[id|=h1] ul {
font-weight:normal;
text-decoration:underline
}
HTML
<ol class="uroman">
<li><a href="#h1">Histoire du stop</a>
<ol>
<li ><a href="#h1.1">Une pratique vieille comme l’automobile.</a>
<ol>
<li><a href="#h1.1.1">Les origines</a></li>
<li><a href="#h1.1.2">Le stop de guerre anglais</a></li>
<li><a href="#h1.1.3">Les années soixante-dix: l’âge d’or</a>
<ul>
<li><a href="#h1.1.3.1">Beatniks et Hippies</a></li>
<li><a href="#h1.1.3.2">Etudes et manuels</a></li>
<li><a href="#h1.1.3.3">Réponses institutionnelles</a></li>
</ul>
</li>
<li><a href="#h1.1.4">Le déclin des années quatre-vingt</a></li>
<li><a href="#h1.1.5">Les années quatre-vingt dix</a></li>
</ol>
</li>
</ol>
</li>
</ol>
<h2 id="h1">Histoire du stop</h2>
<ol>
<li id="h1.1">Une pratique vieille comme l’automobile
<ol>
<li id="h1.1.1">Les origines</li>
<li id="h1.1.2">Le stop de guerre anglais</li>
<li id="h1.1.3">Les années soixante-dix: l’âge d’or
<ul>
<li id="h1.1.3.1">Beatniks et Hippies</li>
<li id="h1.1.3.2">Etudes et manuels</li>
<li id="h1.1.3.3">Réponses institutionnelles</li>
</ul>
</li>
<li id="h1.1.4">Le déclin des années quatre-vingt</li>
<li id="h1.1.5">Les années quatre-vingt-dix</li>
</ol>
</li>
</ol>
An added complication of that was the fact that I had to use a non-XHTML valid event to get it to work (the data re-sizes itself to the browser window).I'm not sure I understand this: By default content will re-size itself to the browser window, so there should be no requirement to do anything to achieve that - especially something that sounds as ominous as a "non-XHTML valid event" :)
p {
font-size:100%;
font-weight:normal;
}
p {
font-size: 16px;
font-weight: normal;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<title>Auto-stop</title>
<style type="text/css">
body {
font-family: "Bookman Old Style", "Times New Roman", "Times", serif;
counter-reset: coh1;
}
h1 {
font-size: 150%;
counter-increment: coh1;
counter-reset: coh2;
}
h1:before {
content: counter(coh1, upper-roman) ". "
}
h2 {
font-size: 125%;
margin-left: 10px;
}
p2 {<h2>
font-size: 100%;
margin-left: 10px;
</h2>}
h3 {
font-size: 100%;
margin-left: 20px;
}
p3 {<h3>
font-size: 100%;
margin-left: 20px;
</h3>}
</style>
</head>
<body>
<h1><a name="h1">H1H1H1H1H1H1H1H1H1H1</a></h1>
<p>Ipsum...</p>
<h2><a name="h21">H2H2H2H2H2H2H2H2H2H2</a></h2>
<p2>Ipsum...</p2>
<h3><a name="h32">H3H3H3H3H3H3H3H3H3H3</a></h3>
<p3>Ipsum...</p3>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<title>Auto-stop</title>
<style type="text/css">
body {
font-family: "Bookman Old Style", "Times New Roman", "Times", serif;
counter-reset: coh1;
}
h1 {
font-size: 150%;
counter-increment: coh1;
counter-reset: coh2;
}
h1:before {
content: counter(coh1, upper-roman) ". "
}
h2 {
font-size: 125%;
margin-left: 10px;
}
h2 p {
font-size: 100%;
margin-left: 10px;
}
h3 {
font-size: 100%;
margin-left: 20px;
}
h3 p {
font-size: 100%;
margin-left: 20px;
}
</style>
</head>
<body>
<h1><a name="h1">H1H1H1H1H1H1H1H1H1H1</a></h1>
<p>Ipsum...</p>
<h2><a name="h21">H2H2H2H2H2H2H2H2H2H2</a></h2>
<p>Ipsum...</p>
<h3><a name="h32">H3H3H3H3H3H3H3H3H3H3</a></h3>
<p>Ipsum...</p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<title>Auto-stop</title>
<style type="text/css">
body {
font-family: "Bookman Old Style", "Times New Roman", "Times", serif;
counter-reset: coh1;
}
h1 {
font-size: 150%;
counter-increment: coh1;
counter-reset: coh2;
}
h1:before {
content: counter(coh1, upper-roman) ". "
}
h2 {
font-size: 125%;
margin-left: 10px;
}
h2 p {
font-size: 100%;
margin-left: 10px;
}
h3 {
font-size: 100%;
margin-left: 20px;
}
h3 p {
font-size: 100%;
margin-left: 20px;
}
</style>
</head>
<body>
<h1 id="h1">H1H1H1H1H1H1H1H1H1H1</h1>
<p>Ipsum...</p>
<h2 id="h21">H2H2H2H2H2H2H2H2H2H2</h2>
<p>Ipsum...</p>
<h3 id="h32">H3H3H3H3H3H3H3H3H3H3</h3>
<p>Ipsum...</p>
</body>
</html>
h2 ~ p {
font-size: 100%;
margin-left: 10px;
}
h3 ~ p {
font-size: 100%;
margin-left: 20px;
}
h2 ~ h3 ~ p {
font-size: 100%;
margin-left: 20px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<title>Auto-stop</title>
<style type="text/css">
body {
font-family: "Bookman Old Style", "Times New Roman", "Times", serif;
font-size: 16px;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 125%;
margin-left: 10px;
}
h3 {
font-size: 100%;
margin-left: 20px;
}
h2 ~ p {
font-size: 100%;
margin-left: 10px;
}
h3 ~ p {
font-size: 100%;
margin-left: 20px;
}
</style>
</head>
<body>
<h1 id="h1">This is a H1</h1>
<p>Ipsum...</p>
<p>Ipsum...</p>
<h2 id="h2.1">This is a H2</h2>
<p>Ipsum...</p>
<p>Ipsum...</p>
<h3 id="h3.1">This is a H3</h3>
<p>Ipsum...</p>
<p>Ipsum...</p>
<h2 id="h2.2">This is a H2</h2>
<p>Ipsum...</p>
<p>Ipsum...</p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<title>Auto-stop</title>
<style type="text/css">
body {
font-family: "Bookman Old Style", "Times New Roman", "Times", serif;
font-size: 16px;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 125%;
margin-left: 10px;
}
h3 {
font-size: 100%;
margin-left: 20px;
}
h2 ~ p {
font-size: 100%;
margin-left: 10px;
}
h2 ~ h3 ~ p {
font-size: 100%;
margin-left: 20px;
}
h3 ~ h2 ~ p {
font-size: 100%;
margin-left: 10px;
}
</style>
</head>
<body>
<h1 id="h1">This is a H1</h1>
<p>Ipsum...</p>
<p>Ipsum...</p>
<h2 id="h2.1">This is a H2</h2>
<p>Ipsum...</p>
<p>Ipsum...</p>
<h3 id="h3.1">This is a H3</h3>
<p>Ipsum...</p>
<p>Ipsum...</p>
<h2 id="h2.2">This is a H2</h2>
<p>Ipsum...</p>
<p>Ipsum...</p>
</body>
</html>
Histoire du stop
.Une pratique vieille comme l’automobile.
..Les origines
..Le stop de guerre anglais
..Les années soixante-dix: l’âge d’or
...Beatniks et Hippies
...Etudes et manuels
...RĂ©ponses institutionnelles
..Le déclin des années quatre-vingt
..Les années quatre-vingt dix
Histoires de stop
.Protocoles de précédentes études
.DĂ©butant
.France
..Pendulaire, Jean-Marc Leblanc
..Autoroutier, Benoît Pierret
.Europe, Robert Prins
.Monde, André Brugiroux
Le stop: techniques spatiales
.Le stop a ses lieux privilégiés, ses lieux clefs
..Qu’est-ce qu’un bon lieu de décollage?
..Lieu d’atterrissage, lieu d’arrivée, symétrie?
..Choix des lieux intermédiaires
...Barrières de péage, stations à essence.
...Grandes villes, les non lieux
...Bouts du monde
..Lieux indiqués
...Panneau du stoppeur
...Plaques minéralogiques
.Les trajets du stop
..Nationales ou autoroutes
..Les divers types de trajets
..Mise en pratique
I also think it's pretty absurd to have to tailor the CSS to the document,css was designed to suggest style for html elements, so not so much absurd, but behaving exactly as designed.
<h1>1. title</h1>
<div>
<p>paragraph</p>
<ul>
<li>item</li>
</ul>
<p>paragraph</p>
</div>
<h2>1.1. title</h2>
<div>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
</div>
<h3>1.1.1. title</h3>
<div>
...
</div>
...
