Till, Do one of these show what you are trying to do?
Example 1: [1] Text __[2] Text __[3] Text OR Example 2: [1] Text [2]__Text [3]__Text On Oct 6, 5:50 am, "Till A. Heilmann" <[email protected]> wrote: > 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] -~----------~----~----~----~------~----~------~--~---
