I'm trying to number paragraphs <p> of an HTML document by CSS.
The rendered output should look something like this:
[1] Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin sit amet mi diam, a tincidunt augue. Donec sodales
nisi sed leo dignissim sit amet viverra odio ornare.
Morbi bibendum purus ac odio egestas lobortis.
[2] Aenean eleifend auctor porta. Sed tempus felis et lectus
cursus in varius nisl interdum. Nullam eget metus metus,
a aliquam turpis. Nam porttitor nunc non nisi viverra
euismod. Cras commodo auctor viverra.
[3] Donec id augue faucibus orci tempus tempor quis nec dui.
Vivamus et fringilla nibh. Proin ut velit quam, eu tincidunt
velit. Sed sollicitudin egestas nunc, eu fermentum elit
viverra sed. Phasellus et elit hendrerit dolor commodo
suscipit a in quam.
I have accomplished this by the following CSS:
body {
width: 600px;
padding: 10px ;
margin: 30px ;
counter-reset: numbering ; }
.numbered p:before {
position: absolute ;
margin-left: -30px ;
width: 20px ;
content: "[" counter(numbering) "]" ;
counter-increment: numbering ; }
In the HTML I then do:
<div class="numbered">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
sit amet mi diam, a tincidunt augue. Donec sodales nisi sed
leo dignissim sit amet viverra odio ornare. Morbi bibendum
purus ac odio egestas lobortis.</p>
<p>Aenean eleifend auctor porta. Sed tempus felis et lectus
cursus in varius nisl interdum. Nullam eget metus metus, a
aliquam turpis. Nam porttitor nunc non nisi viverra euismod.
Cras commodo auctor viverra.</p>
<p>Donec id augue faucibus orci tempus tempor quis nec dui.
Vivamus et fringilla nibh. Proin ut velit quam, eu tincidunt
velit. Sed sollicitudin egestas nunc, eu fermentum elit
viverra sed. Phasellus et elit hendrerit dolor commodo
suscipit a in quam.</p>
</div>
This is works just fine. But when I want the first line of succeeding
paragraphs to be indented by (say) 4%, I can't get the positioning of
the numbering right. The rendered output should then look something
like this:
[1] Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin sit amet mi diam, a tincidunt augue. Donec sodales
nisi sed leo dignissim sit amet viverra odio ornare.
Morbi bibendum purus ac odio egestas lobortis.
[2] Aenean eleifend auctor porta. Sed tempus felis et lectus
cursus in varius nisl interdum. Nullam eget metus metus,
a aliquam turpis. Nam porttitor nunc non nisi viverra
euismod. Cras commodo auctor viverra.
[3] Donec id augue faucibus orci tempus tempor quis nec dui.
Vivamus et fringilla nibh. Proin ut velit quam, eu tincidunt
velit. Sed sollicitudin egestas nunc, eu fermentum elit
viverra sed. Phasellus et elit hendrerit dolor commodo
suscipit a in quam.
I have no idea how to calculate the values of margin-left and width
for the element .numbered p+p:before.
My (non-working) CSS looks like this:
body {
width: 600px;
padding: 10px ;
margin: 30px ;
counter-reset: numbering ; }
.numbered p:before {
position: absolute ;
margin-left: -30px ;
width: 20px ;
content: "[" counter(numbering) "]" ;
counter-increment: numbering ; }
p + p {
text-indent: 4% ; }
.numbered p+p:before {
position: absolute ;
margin-left: -50px ;
width: 20px ;
content: "[" counter(numbering) "]" ;
counter-increment: numbering ; }
Does anyone know whether (and how) it is possible to achieve what I
want?
Thanks,
Till
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
-~----------~----~----~----~------~----~------~--~---
