homepage Welcome to WebmasterWorld Guest from 54.226.213.228
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Formattting of lists
CSS to format lists
prino




msg:4306097
 8:15 pm on Apr 29, 2011 (gmt 0)

A few months ago I converted a masters thesis (in which I was mentioned) from its sorry state into XHTML 1.0 Strict, but there is one issue that I haven't been able to solve.

The intention was to mimic the original as close as possible, and to that effect I've used a mixture of lists, both ordered and unordered ones, and the result is OK, except for the fact that I cannot get the font of the bullet points to mimic that of the list items themselves.

A very compressed copy of the thesis looks like:

<!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&eacute; de Paris X &#8211; Nanterre</p>
<p class="c">D&eacute;partement de G&eacute;ographie</p>
<p>&nbsp;</p>
<p class="c300">Auto-stop</p>
<p class="c300">Approche g&eacute;ographique</p>
<p>&nbsp;</p>
<p class="c">Ma&icirc;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&#8217;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&eacute;es soixante-dix: l&#8217;&acirc;ge d&#8217;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&eacute;ponses institutionnelles</a></li>
</ul>
</li>
<li class="d"><a href="#h1.1.4">Le d&eacute;clin des ann&eacute;es quatre-vingt</a></li>
<li class="d"><a href="#h1.1.5">Les ann&eacute;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&#8217;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&eacute;es soixante-dix: l&#8217;&acirc;ge d&#8217;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&eacute;ponses institutionnelles</a></span>
</li>
</ul>
</li>

<li><b><a name="h1.1.4">Le d&eacute;clin des ann&eacute;es quatre-vingt</a></b>
</li>

<li><b><a name="h1.1.5">Les ann&eacute;es quatre-vingt-dix</a></b>
</li>
</ol>
</li>
</ol>
</body>
</html>


and when you look at e.g. the "Une pratique vieille comme l’automobile" line, it is in a bigger font in bold, whereas the bullet is a normal-sized '1.'

I've looked at several sites (w3chools, W3C (the CSS reference), Listutorial, to name a few), but to no avail. What am I overlooking?

Robert

 

alt131




msg:4306240
 5:36 am on Apr 30, 2011 (gmt 0)

Hi prino, and welcome to WebmasterWorld :)

The issue arises because the generated numbering takes it's font-size from the <ol> (or <li> - in this case it's the same). But the content of the <li> (Une pratique vieille comme l’automobile) is wrapped in a span with font-size:150%.

That means you've "told" the span to always be 150% "bigger".

How to fix? On the provided code set the font-size on the <li>. (Then "re-set" the size for the nested <ol> ). That means you could probably remove the span as (in the code sample) it doesn't have any other purpose. If you are supporting browser versions +ie6, you might also consider using some of the advanced selectors rather than classing.

prino




msg:4306245
 6:20 am on Apr 30, 2011 (gmt 0)

I'm a z/OS PL/I-DB2-CICS-REXX programmer by profession, and a complete newbie when it comes to CSS, can you give me a URL for something that already does the <li "set font"> + nested <ol "reset font"> technique, and that works even on <ol>s are nested several levels?

Also, doesn't setting the font on the <li> itself not cause any <p>'s that follow within the <li>...</li> to take on the font of the <li>, which is something that is unwanted - the reason for using the <span>.

A URL pointing to a explanation of the "advanced selectors" would also be useful?

And, for what it's worth, I'm not at all interested in supporting any browser that's well past it's sell-by date. :)

alt131




msg:4306330
 2:56 pm on Apr 30, 2011 (gmt 0)

Well, good on you for choosing to code strict from the start! :) "Advanced selectors" was sloppy language, but the following references provide more info about the range of selectors available:
Selectors css2.1 [w3.org] (Check out attribute selectors)
css3 selectors [w3.org]
Plus Quirksmode [quirksmode.org] (scroll down for css3) for implementation

I rarely get to use these, so had fun with some example code to get you started. Note it's slightly backwards to maintain the same css order as the elements in the page, so could possibly be refined even more. Also note the extra elements (spans, <b>, <a> ), have been removed and name changed to id as name is deprecated.
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&#8217;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&eacute;es soixante-dix: l&#8217;&acirc;ge d&#8217;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&eacute;ponses institutionnelles</a></li>
</ul>
</li>
<li><a href="#h1.1.4">Le d&eacute;clin des ann&eacute;es quatre-vingt</a></li>
<li><a href="#h1.1.5">Les ann&eacute;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&#8217;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&eacute;es soixante-dix: l&#8217;&acirc;ge d&#8217;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&eacute;ponses institutionnelles</li>
</ul>
</li>
<li id="h1.1.4">Le d&eacute;clin des ann&eacute;es quatre-vingt</li>
<li id="h1.1.5">Les ann&eacute;es quatre-vingt-dix</li>
</ol>
</li>
</ol>

prino




msg:4306338
 3:21 pm on Apr 30, 2011 (gmt 0)

Thank you, I'll dive into this, it looks quite complicated, at least at first sight.

Update: This takes me back to were I was eons ago, as any <p>'s inside a <li>...</li> will take on the attributes of the <li>... I guess I need a selector that sets a <p> element following a <li> back to the normal font, and I think this is were I gave up at the end of last year.

As for the choice for XHTML, I just kept sending the entire file to the W3C validator until it passed, which must have looked like a DoS attack to them.

I did the same with z/OS REXX-generated HTML that mimics the ISPF (probably doesn't mean anything to you) view of several "legacy" languages (PL/I, COBOL, REXX, etc) on that system. 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). In the end someone gave me a snippet of Javascript to add the event dynamically to the page, which solved the XHML validation issue.

(X)HTML and CSS are so radically different from what I've been doing the last quarter of a century...

alt131




msg:4306344
 3:52 pm on Apr 30, 2011 (gmt 0)

It takes a while to get used to scanning new code, but it should eventually look less complicated because there is less html and css. The attribute selectors are a bit more complicated than things like descendant selectors, but I think that with a programming background you'll be fine once you try a few.

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" :)
prino




msg:4306346
 4:30 pm on Apr 30, 2011 (gmt 0)

OK, I've spent a few minutes on it and I've added a
p {
font-size:100%;
font-weight:normal;
}

as the last CSS element. I've also sprinkled in a bunch of <p>Ipsum...</p> after the <li>'s and this does the trick, except for one issue, the <p>Ipsum...</p> after "Une pratique vieille comme l’automobile" does not display in the required font-size, and I haven't got a clue where it gets its size and weight from, unless the 100% in the above selector refers to the size of the font currently in use, in which case, how do I get all "plain" <p>'s to display in the original font size of the body?

alt131




msg:4306347
 4:44 pm on Apr 30, 2011 (gmt 0)

Good thinking, but the only code that was changed related to the list. There isn't a <p> in the code posted for the list, and there really shouldn't be any need to use one as lists are for list iitems, not pargraphs of text. But it means your other classes should apply just fine, without any adjustment.

prino




msg:4306348
 5:01 pm on Apr 30, 2011 (gmt 0)

The original can be found here Auto-stop [membres.multimania.fr], and it probably abuses lists (that's why they contain <p>'s) to mimic the original paper formatting - when I stumbled upon it, it already used them, but other than correcting the nesting, I didn't really change them. The original may still be found via the Wayback machine.

If lists are not the thing to use, what would you suggest? Normal <hx>'es, with indentation?

alt131




msg:4306437
 3:50 am on May 1, 2011 (gmt 0)

Two ways to approach this.
1. Presumably the <p>'s in the <li>'s are inheriting the 150% size from the rule for li[id=h1\.1]. In the example size was reset using li[id=h1\.1] ol because li#h1.1 only contains <ol>'s. Modify the selector to apply the reduced font-size to other contained elements. Something like:
li[id=h1\.1] ol, li[id=h1\.1] p {...}

2. Mark-up the html so <li>'s are not being used as containers for all the content. Lists may have helped achieve some numbering, but the use of counters has already left older user agents behind. IMO serving a valid, more semantically coded document with a well-structured outline should serve the broadest range of users. Doubly important because pseudo elements (before and after) may not be read by screen-readers, so creating a good outline would help non-visual users understand the relationships between parts of the document.

I expect headings would be appropriate, but it depends on the semantics of the content - and the implications of that "non-valid xhtml event".

Do you have authority to re-code, or is your interest because you've been mentioned?

prino




msg:4306864
 10:11 am on May 2, 2011 (gmt 0)

Adding a final

p {
font-size: 16px;
font-weight: normal;
}

before the actual document, aka using a sledgehammer to crack a nut, will work.

As for using <hx>'es, I can only go from the existing html, I do not have access to the original thesis, neither on paper, nor in electronic format. BP who, besides also being mentioned in it, did the original text to HTML conversion, and may have thought using nested lists were the most appropriate way of preserving the, I guess, indented structure of the original. I wouldn't mind using <hx>'es, but that would quite likely mean fiddling with indents of them. (Can this actually be done? I could not find anything on www.w3schools.com [w3schools.com], which I usually use as reference)

I don't have formal re-coding authority, but I'm sure that Benoit wouldn't mind anything even more "correct", he accepted the current version without any qualms.

As for the non-XHTML event, that refers to code I generate on z/OS with REXX. I'll send a sticky with a short example for you to enjoy. Feel free to comment on it, or even try making it bigger (so you can see how slow it is in formatting - FF4 is actually slower than FF3.6, go figure...).

BTW, I presume there is no way in html/css to automagically generate a Table of Contents.

alt131




msg:4307140
 1:41 am on May 3, 2011 (gmt 0)

Right, working through the issues:
1. The code sent via sticky creates a fixed-size scrollable frame into which the real content is loaded. This is something that can be done using html and css, so I think inefficient to do in javascript. However, the layout is common on freebie hosts and this one is typically loading the surrounding area with advertisements. As stated earlier, content will automatically size to the viewport size, so there is no need to do this for ordinary use.

2. I'm speculating, but suspect nested lists were used for the numbering, not the indentation, because older browsers did not support counters.

Also, keep separating content from style (including layout). This is a good example because html was originally designed to mark-up academic works. The "content" is the text, tables and images. The style is whether the text is red or centred on the page (as examples). Coding semantically means looking at the content. If it looks like a paragraph, mark it up as a <p>, quotes longer than a few words are marked up as <blockquote>'s, etc.

Style for academic works is easy. Although the details vary between discipline and institution, all require clearly structured content with good use of white-space (margins) to make it easy to read, a logical heading structure that clearly identifies parts and sub-parts, appropriate captions and positioning of graphs, tables and images etc. This is very similar to "best practise" web coding. Most Universities have their Doctoral style guides on-line, otherwise this is a standard thesis, so I suggest just use the general margins/indentation/numbering etc of the existing document.

3. So headings would be appropriate, and they can be "indented". IMO a good place to learn about the style of elements is the Default style sheet [w3.org]. Also follow the link at page top to "Properties", and read about margin, padding and text-indent. Recall that you are planning to use :before's for the auto-generated numbering, so make sure you provide space for them.

4. You're right - html and css don't automagically generate very much at all because they were not designed to do so. However, there is already one in the document, so not required for this job. Recall you're not re-writing the content, and it does not need to be re-generated. All it needs is a tidy and re-style. Most of the content has been marked up reasonably well, so it's really just a case of a quick search and replace to rip out all the <li>'s that have been used as wrappers, them maybe a dash of regex to search and replace the styled <ol>/<il>'s with the correct heading level.

prino




msg:4307262
 10:21 am on May 3, 2011 (gmt 0)

Someone at my "trade organisation" has come up with this. It's definitely not XHTML 1.0 Strict and the W3C validator also balks at it when I suggest it's HTML5:

<!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>


The poster also told me that IE will not like it. It looks like inventing completely new tags to me. FWIW, I tried this

<!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>


and the <hx>'es are nicely indented, but the <p>'s are not.

alt131




msg:4307279
 11:12 am on May 3, 2011 (gmt 0)

The <p>'s are not indenting because they have not been "selected". Follow the link to the css 2.1 recommendations in the second post I made for background reading.
These:
h2 p {.. }
h3 p {..}
select a <p> that is a child of an h2/h3. There are no <p>'s nested inside hx's (and shouldn't be) so there is no element to which that will apply. What you need is the adjacent sibling selector. Follow the link above and find it in section 5.7.

This is redundant:
<h1><a name="h1">H1H1H1H1H1H1H1H1H1H1</a></h1>
As I said above, name is deprecated, and a link is no longer required. I suggest save yourself some coding time by using an id set on the element you are targeting - as demonstrated in the example code posted above.

prino




msg:4307282
 11:43 am on May 3, 2011 (gmt 0)

I tried this
<!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>


This indents the Hx'es, but the <p>'s refuse to budge, and stay at the left edge of the page - FF4.0.1 Windows XP

alt131




msg:4307293
 11:57 am on May 3, 2011 (gmt 0)

Hi prino,

Looks to me like exactly the same code you posted before, so is failing for exactly the same reasons explained in my last post.

prino




msg:4307312
 12:40 pm on May 3, 2011 (gmt 0)

OK, I finally found it,

hx ~ p (in CSS3)

alt131




msg:4307333
 1:54 pm on May 3, 2011 (gmt 0)

Ah yes for multiple <p>'s after the <hx> you will need the general sibling.
Good spotting! :)

Thinking ahead, remember the attribute selector (examples in the sample code above). Helps avoid classing and gives you lots of power when combined with the general sibling. For eg, say most images are floated left, except one part of the document they float right, you can do the following:
h2 ~ p img {float:left} <--- element selector & general sibling targets the majority of images
h2[id=h2\.1] ~ p img {float:right} <-- attribute selector & general sibling & descendent for the images floated right

Also recall the \ is an escape exactly like you probably use a lot when programming. They sem to complicate the css because they aren't used very often - so look "out of place"

prino




msg:4307350
 2:55 pm on May 3, 2011 (gmt 0)

This is all very interesting, I wonder how long it will take me to get proficient in this the way I'm proficient in PL/I & REXX...

As for escaping, it's not used in PL/I or REXX, but I'm familiar with the concept, however I cannot see why the '.' has to be escaped.

As for the other "sticky" sample I gave you, I think it's a little more complicated than a "freebie" site, as the left column scroll with the main area (up and down), but not left/right, in those the cases where the main area is wider than 72 characters. Also, the sequence numbers are generated and not included in the html itself. Anyway, if you know of a "freebie" site that uses a similar layout, I would like to see how they do it.

prino




msg:4307704
 9:51 am on May 4, 2011 (gmt 0)

If I have more than two levels, how do I make paragraps undent again? In the code below, I can move the


h2 ~ p {
font-size: 100%;
margin-left: 10px;
}

h3 ~ p {
font-size: 100%;
margin-left: 20px;
}


before or after each other, but it doesn't resolve the problem. Even adding a


h2 ~ h3 ~ p {
font-size: 100%;
margin-left: 20px;
}


doesn't do any good. I've tried things along the lines of

h3[id=h3\.] p and ditto for h2, but that also doesn't help me. I'm sure the solution is simple, but I'm not seeing it.

<!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>

prino




msg:4307710
 10:08 am on May 4, 2011 (gmt 0)

OK, tried this, which seems to work,


<!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>


However, add another <h3> after the last <2) and back to square one...

alt131




msg:4307978
 7:15 pm on May 4, 2011 (gmt 0)

h3[id=h3\.] p won't help for two reasons.
# The same reason it didn't work the last two times.
# h3[id=h3\.] targets an h3 with the exact id=h3. <--- note full stop
I expect id's will be either id=h3, or id=h3.1 - so expect the rule didn't find any <h3>'s to match

I wonder if h3[id^=h3\.1] was wanted instead. That is, ^= which will target h3's that start with 3.1 Could be 3.1, 3.1.1, 3.1.2, etc. Note than the example code posted earlier used | - that is for attributes that are hyphen separated.

As you haven't provided the html I can only guess the issue is caused by the last general sibling selector being applied and therefore over-writing earlier ones. Adding an extra selector should work:
h2 ~ p, h2[id$=\.2] ~ p {margin-left:10px;}
h3 ~ p, h3[id$=\.2] ~ p {margin-left:20px;}

However, the issue is not just targeting the elements, but also creating selectors with adequate specificity. To figure the easiest/most efficient way will depend on how many levels there are, and how many times the levels will be duplicated. Plus how many para's there are - it might be easier to target them using adjacent siblings afterall. Plus, you mentioned html5. Depending on your target audience, this might be easiest dealt with by taking advantage of some of the new elements that should work well in this situation.

prino




msg:4308017
 8:27 pm on May 4, 2011 (gmt 0)

Given that you've seen the page, I guess you will also have seen that it looks like


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


But I haven't got a clue how many <p>'s are in each level.

I also think it's pretty absurd to have to tailor the CSS to the document, why isn't there anything comparable to the counter concept that lets me increase the indentation after the first <h(n+1)> that follows a <h(n)> and automatically decrease it for the equivalent reverse situation. Better, make it that the indent for a <h4> (illogically) following a <h1> automagically includes the <h2> and <h3> indents.

Can it be so hard?

I've replaced the <a name=#*$!>'es with id=#*$! on the various tags, added a:visited/active/hover tags, and that's where I will leave it for now, it's getting seriously on my nerves.

Thanks/Sorry for all your (wasted) time.

alt131




msg:4309130
 2:55 am on May 7, 2011 (gmt 0)

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.

I think it is sad you've decided not to progress at exactly the same place, for exactly the same reason as you decided not to progress last year. Doubly sad as by now I expect you would have reasonably well "stripped" html that just needed styling, so the end was actually in sight.

However, this seems to stem from your dislike of the tools you've chosen to use for the job. I'm just thinking out loud, but as you are a proficient programmer, like to "auto-generate", and don't like the rules and principles of css/html, perhaps consider something like xml - create your own elements, then use your choice and combination of programming and/or scripting languages to brute-force the behaviours you want.

httpwebwitch made some interesting comments in a recent thread [webmasterworld.com]in the xml forum

prino




msg:4309208
 8:16 am on May 7, 2011 (gmt 0)

"css was designed to suggest style for html elements, so not so much absurd, but behaving exactly as designed."

I agree, but why isn't there some kind of absolutism in CSS, that simply let's me say if this is a <h4> it, and all elements in it up to the next <hx> have an indent of 20px, no matter if this <hx> follows a <h(x+1)> or a <h(x-1>, rather than having to specify that a <p> following an exact sequence of <hx>'es has to have this or that indent.

I stopped because of two reasons, I tried I don't know how many iterations and variations of CSS selectors and with every one of them indents were screwed up, either a <hx> was at the level of the <h(x-1)>or paragraphs were indented wrongly.

And two, because I'm currently guinea-pigging some medicines at a Clinical Research Unit here in Brussels and they actually saw my stress levels go up (I'm am on a real-time monitor) and I was asked to stop doing what I was doing!

I don't have tools, I use a normal text editor, save my file without leaving it, and refresh the page in Firefox, and occasionally fiddle a bit with Firebug. I'm sure there are very fancy WYSIWYG tools, but right here at the CRU I'm using an old notebook with limited capabilities.

I might go back to it when I'm out of hospital, but given the many things that are on the program for the next few months, it won't be until at least the middle of August or early September.

As for "brute-forcing the behaviours I want", I don't want to brute-force anything, I simply want to have a html document that mimics, preferably as close as possible, the original paper version. I've done this (years ago) with old paper issues of a calculator newsletter from the late 1970's (see [rskey.org...] 52-Notes) when I found that the PDF's were humongous in size. The CSS there is pretty minimal, but it made me aware of the possibilities to define different behaviour for screen and print formatting of the same document, so don't say I don't like the rules and principles of css/html.

alt131




msg:4309269
 2:05 pm on May 7, 2011 (gmt 0)

Hi Robert, I'm not comfortable being involved in something you've been told by medical professionals to stop because it is affecting your health.

So I've posted this so you don't think you've been ignored - which might induce further stress, but after this I won't respond again.

Good luck, and I do hope your health improves.

Regards,
Alt

prino




msg:4309273
 2:29 pm on May 7, 2011 (gmt 0)

Your post brought a big smile to my face!

There's nothing to worry about, I'm actually very healthy for a 51 year old. I'm taking part in medicine trials here in Brussels, and they only test the stuff on healthy volunteers.

You're hooked up to "Tricorder" that transmits your vitals 24x7 to the people watching you and as soon as something moves away from the baseline, they come running over to find out why. In my case it was the stress of spending about two hours trying to figure out why these <heavily censored> nested <hx>'es with embedded paragraphs were not aligning correctly.

Since loosing my job in October 2009 I do this a two to three times per year (there have to be at least 60 days between different trials, and a trial, from first screening to final medical, can take from eight weeks to six months) to supplement my income, payment for these things is (still) tax-free here in Belgium. Even being just reserve until an hour after the other volunteers have had their first doses pays around eur 400, which is a nice extra every once in a while.

swa66




msg:4309411
 11:26 pm on May 7, 2011 (gmt 0)

Once you get back to this ...

I think the main thing for the kind of layout you seek is that the headings do not enclose the paragraphs that we think of being related to the heading. In fact in the "tree" of the html they are all on the same level (siblings).

Therefore I also do not believe it is possible in a very general way to get what you seek using sibling selectors and those too have no concept of "nearest" title that preceded an element.

If you know an upper limit to the number of paragraphs in any section then it can be done, else you'll have to add in the html some indication to what level the paragraph should have (either as a class or either as a parent element).

If you know e.g. there will only be 3 paragraphs between titles:

h1+p,
h1+p+p,
h1+p+p+p {margin-left: 10px;}

h2+p,
h2+p+p,
h2+p+p+p {margin-left: 20px;}

h3+p,
h3+p+p,
h3+p+p+p {margin-left: 30px;}

But if you have to allow "unlimited", that becomes hard, and if there is e.g. a list in there it too will be problematic and drive up the number of selectors you'd need exponentially.

So the easiest is to do something like this:


<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>
...


and then
h1+div {margin-left: 10px}
h2+div {margin-left: 20px}
h3+div {margin-left: 30px}

That should take care of it, while well adding an extra div.
I'm not sure, html5 might have better elements for this than a div, didn't look into that yet.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved