Thu, 2008-11-13 21:44
Hi all,
I am new here. You can read a little about me in my Profile. (I assume it is visible.)
I would like to ask a question that I have already asked on other forums, but it has stumped everybody. IMO, it is something very basic for my work as a tech writer, and I am surprised it is so difficult.
I want to know the correct way to 'break' an ordered list with 'body text'. E.g.,
--------------------------------
There follows a list:
A: The following sublist is about bla bla
bla bla bla bla bla bla bla bla:
1. List Item A1
2. List Item A2
"Break': The following section of the list is about bla bla
bla bla bla bla bla bla bla bla:
3. List Item B1
4. List Item B2
--------------------------------
The standard way of implementing the above list in HTML is:
- List Item A1
- List Item A2
- List Item B1
- List Item B2
However if I put the 'break' in just as a standard
between items A2 and B1, then it gets indented the same as the list items, whereas I want a zero indentation.
After some playing around with CSS, I came up with the following, which gives the desired effect:
p.inlist {
position: relative;
left: -0.5cm;
}
but it is obviously NOT the absolutely correct way to do it, coz you have to play around with the rel. left value.
What I really want to do is to give a CSS directive to a paragraph to tell it to ignore any (inherited?) left indentation of the enclosing
- list.
What is the correct way to do this?
By the way, this is for RoboHelp 7 HTML, I am fiddling about in the HTML view and with the CSS file 'behind the scenes'.
Tia
- avi
Thu, 2008-11-13 22:07
#1
Here's something to play
Here's something to play with:
<!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Outline Experiment</title> <style type="text/css"> ol { counter-reset: ordered; } ol li {list-style: none;} ol li:before { counter-increment: ordered; content: counters(ordered,".") " - ";} ol#continued { counter-reset:ordered 3; } </style> </head> <body> <ol> <li>This is item one <ol><li>First sub-item</li> <li>Second sub-item <ol> <li>First sub-sub-item</li> <li>Second sub-sub-item</li> </ol> </li> </ol> </li> <li>This is item two </li> <li>This is item three <ol><li>First sub-item</li> <li>Second sub-item</li> <li>Third sub-item</li> <li>Fourth sub-item <ol> <li>First sub-sub-item</li> </ol> </li> </ol> </li> </ol> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut id lorem tristique dui vulputate consequat. Suspendisse arcu purus, commodo et, hendrerit eget, gravida mattis, mauris. Donec ac nisi. Cras interdum mi ac libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean aliquam leo nec nisl. In hac habitasse platea dictumst. Nullam porta, sapien in congue consectetuer, ante sapien dictum felis, vitae volutpat ipsum mi at eros. Duis tincidunt pede at ipsum. Proin pharetra risus a ligula.</p> <ol id="continued"> <li>This is item four</li> </ol> </body> </html>
Thu, 2008-11-13 22:09
#2
Santa wants chickenfingers for his birthday
Umm, why dont you just make two lists with your body text inbetween?
<ol> <li>content</li> <li>content</li> <li>content</li> <li>content</li> </ol> <p>body Text</p> <ol> <li>content</li> <li>content</li> <li>content</li> <li>content</li> </ol>
Thu, 2008-11-13 22:11
#3
CupidsToejam wrote:Umm, why
Umm, why dont you just make two lists with your body text inbetween?
Without some trickery it will reset the list.
1.
2.
text
1.
2.
3.
Thu, 2008-11-13 22:15
#4
Duh?
oh, umm, yeah.
:blushing:
Thu, 2008-11-13 22:22
#5
got It
XHTML
<ol> <li>item</li> <li>item</li> <li>item</li> <li class="noNumber">This is lots of text, but small</li> <li>item</li> <li>item</li> <li>item</li> </ol>
CSS
.noNumber {list-style: none;}
This approach may take away the number seven though :curse:
Thu, 2008-11-13 22:23
#6
still on breaking an <ol>
Wow! Thanks for the fast responses.
Right.
This is the sort of thing that technical writers have to do quite a lot.
It sort of looks like the guys who designed CSS didn't really think that somebody would use it do some serious writing... 
You could use
- , but ...
There are two problems with using the "start" solution:
1. If you add a list item earlier on then you will have to go back and manually update the "Restart numbering at" EVERY single time you used it.
2. Would you believe it, the "start" HTML attribute has been deprecated (=officially removed) in the latest version(
of CSS.
Ha Ha Ha
Actually there is an official solution. See: the CSS dfn. at http://www.w3.org/TR/CSS2/generate.html#q10 (12.5 Automatic counters and numbering).
It's quite complex. Actually, ugly.
Actually, IMO, all the CSS sages needed to do was to have the following HTML attribute setting:
but alas, they had to make everything complicated.
(My client/boss just told me: don't spend too much time on this CSS stuff&).
That statement, "don't spend too much time on this&" always drives me mad. The worse option is to carry on using RoboHelp like an amateur. Learning CSS is worth its weight in gold, apart from this little problem.
Tnx,
- avi
Thu, 2008-11-13 22:24
#7
CupidsToejam wrote:This
This approach may take away the number seven though :curse:
Check out my example up there ^ in anything but IE. 
... Actually there is an official solution. See: the CSS dfn. at http://www.w3.org/TR/CSS2/generate.html#q10 (12.5 Automatic counters and numbering). ...
What, am I on you guys' ignore list or something. lol
ONLINE HERE!!! <------------ DING DING DING!!!! ALERT, ALERT!!!
Thu, 2008-11-13 22:28
#8
DIE DIE DIE IE
Nice Triumph ! Looks crazy, but does work!
:thumbsup:
Thu, 2008-11-13 22:31
#9
Quote: What, am I on you
What, am I on you guys' ignore list or something. lol
ONLINE HERE!!! <------------ DING DING DING!!!! ALERT, ALERT!!!
LMFAO, sorry dude. We get into these CSS trances sometimes. It's working, just not in IE :mad:
Thu, 2008-11-13 22:32
#10
CupidsToejam
What, am I on you guys' ignore list or something. lol
ONLINE HERE!!! <------------ DING DING DING!!!! ALERT, ALERT!!!
LMFAO, sorry dude. We get into these CSS trances sometimes. It's working, just not in IE :mad:
LOL! Just messing around. Yeah, IE doesn't do :before so it sucks!
Thu, 2008-11-13 22:38
#11
Yeah, i dont know what the
Yeah, i dont know what the hell all this is or what it does. All that giberish is above me. Have any book recommendations for me?
counter-increment: ordered; content: counters(ordered, ".") " - ";
Thu, 2008-11-13 22:42
#12
CupidsToejam wrote:Yeah, i
Yeah, i dont know what the hell all this is or what it does. All that giberish is above me. Have any book recommendations for me?
CSS: the definitive guide by Eric Meyer is my go to book. I wish I could find it. :curse:
Thu, 2008-11-13 22:49
#13
I have 2 css books
I have 2 css books, my fav is Transcending CSS by Andy Clarke. I'll get Eric's book next then.
Thu, 2008-11-13 23:03
#14
Thanks. Well in addition to
Thanks.
Well in addition to not working in IE, it also not rendered properly in the RoboHelp Design window.
Well, I appreciate the effort - nice idea. But it sort of has to work in all popular browsers...
- avi
Thu, 2008-11-13 23:06
#15
amakeler wrote:... in the
... in the RoboHelp Design window.
In the what?! :shrug:
Thu, 2008-11-13 23:13
#16
My solution seemed to be the
My solution seemed to be the best so far.
But now I see that is does not always work. Use the same HTML/CSS code, and on some lines it doesn't work.
- avi
Thu, 2008-11-13 23:17
#17
Ok, the unreliability I
Ok, the unreliability I mentioned in my previous post is only in the RoboHelp rendering, but not in my browser. (I have other problems with other constructs instead...)
Thu, 2008-11-13 23:35
#18
re: In the what
RoboHelp. It's a platform for authoring Helps.
What's wrong? Did I say a dirty word?
Fri, 2008-11-14 02:21
#19
it also *not* rendered
it also *not* rendered numberless in the Visual Studio Web Developer Design window - just noticed.
Fri, 2008-11-14 02:23
#20
caffeine
dude, lay off the caffeine.
Fri, 2008-11-14 08:54
#21
This thread is hilarious
This thread is hilarious 
Fri, 2008-11-14 13:40
#22
I wish I'd seen this thread
I wish I'd seen this thread before answering the other one : (
Never EVER give a thought to how a page looks in some helper/editor/whatever. It's as bad as people who don't like the way a web page looks in DreamBeaver... nobody SURFS the web with dreambeaver, they surf with browsers. The browsers (or actually, other user agents, but still not DEVELOPMENT agents!) are the only ones to ever care about.
Another possibility is to use ol's when you can, and manually add numbers in on ul's when numbering has to continue.
Or, remove all default margins and padding on the lists, add back in what you want, and remove again from the p... you said this was a problem but if your lists didn't indent more than three times or so, I'd be willing to go ahead and make 3 classes for the p's (and classes would only be for IE6 anyway) and set their indentation back.
If it's likely to be lots and lots of nesting this gets impractical.
CSS wasn't made for designers, technical writers, or really, I can't think of who it was written for, because it seems to suck in every way you'd think any particular group would have solved. Me, I'm asking Santa for a Parent Selector for Christmas. The idea of moving back UP the DOM seems strange and fearfull to the CSS folks... I don't know if it's somehow just very hard or what.
Santa had better appreciate that I'm not asking for anything truly awesome like regular expressions or anything. Be grateful, Santa. Grateful!
Fri, 2008-11-14 12:25
#23
Um, not sure what you mean
Um, not sure what you mean exactly, but do you mean something like this?
- Foo
- Manchoo
- Foo again
- Bar
A bear walks into a bar and orders a beer...
- And continuing...
- More Foo
- More Bar
- More Cowbell!!
ol li stays "display: block;"
but p gets maybe "float: left;" or something... or depending on the context, a in the HTML might do a better job and no float on the p...
li's can have many types of children, while ol/ul/dl's are very limited.
Which should look like:
1. Foo
2. Manchoo
3. Foo Again
4. Bar
A bear walks into a bar and orders a beer...
5. And continuing
6. More Foo
7. More Bar
8. More Cowbell!!
You want to keep the numbering going, right? And not use two lists as then you would start over again at 1, right?
You can also just use an unordered list and stick the numbers in yourself if necessary : )
Fri, 2008-11-14 14:28
#24
Sadly Santa isn't going to
Poes hasn't it been covered?
Sadly Santa isn't going to bring you parent selectors, he and his little elves decided that it would have to be shelved as too problematical, however it's a trivial thing to do in jQuery because of it's it's xpath capabilities.
Fri, 2008-11-14 14:30
#25
Stomme poes wrote:I wish I'd
I wish I'd seen this thread before answering the other one : ( ...
I moved your post here and deleted the other thread. For some reason the order of the posts is a bit flummoxed.
OP, don't post the same question twice what's the point of that?
Fri, 2008-11-14 14:32
#26
Oh poes post is from another
Oh poes post is from another reality, confusing this thread
Sat, 2008-11-15 11:10
#27
Lawlz. Yes, my answer to
Lawlz.
Yes, my answer to the other post is kinda useless here, because it's still not better than Triumph's except it would at least be the same also in IE.
And because of IE, I'd still prolly try the "if not nested more than x times, add classes and negative margin" one.
Yeah Santa's been leaving me off the list the last few years, as if I haven't been good enough. I haven't decided if the regular stuff I want to do with parent selectors is worth making my visitors load some bloated library...
Squit: Y'know, Pesto, you're a real swell guy.
Pesto: Swell? Swell?? Whatdya mean, swell??
Squit: Uh, nothin', just that you're a great guy, y'know, uh, a swell guy.
Pesto: Swell?? Is dat what I am, swell? Do I look swollen to you? Am I some bloated Javascript library hea' for your amusement, huh? HUH?
Squit: N-n-no, Pesto, that's not what I mean at all--
Pesto: Dat's it! *Pummel*
Sat, 2008-11-15 13:01
#28
Off Topic Quote:I haven't
Off Topic
I haven't decided if the regular stuff I want to do with parent selectors is worth making my visitors load some bloated library...
Hmm sweeping statements Poes. If you are referring to jQuery as being bloated, nothing could be further from the truth, it was designed with explicitly being lightweight in mind unlike many of the other more famous libraries, thus it wasn't loaded down with shedloads of efects like others were, but was kept pure and simple and remains so, it is also seems to be becoming the most widly used of the javascript libraries.
Frontend coding is comprised of a triumptive of layers; Content or markup, Presentation (CSS) and Behaviour (javaScript) all three go to form what the browser eventually renders on screen.
I've noted your mild disdain for client side scripting and your mention that you are spending a bit of time getting better equated with it though, I always had a slight horror of javaScript, somewhat of a mental block to it whereas server side scripting I found easier and enjoyed far more, it wasn't until I started to use jQuery seriously that I realised I had a new found love for client side scripting. Jquery allows you to be far more creative with scripting and far far faster due to it's simple syntax.
Client side scripting is a fact of life with all but the simplest sites, I use jQuery exclusively for this purpose now, if you want a pleasant and fun experience with client side scripting do have a look at jQuery, you will thank me for the advice
Sun, 2008-11-16 09:19
#29
I have seen a 15kb version
I have seen a 15kb version of it, I guess JQueryLite.
Prolly the only thing I'd really like about it is that it seems to be written for people who speak CSS, which is indeed nice.
My disdain for Javascript is more, when it's used where I think CSS can do it faster, leaner and better. IF oh if it had a parent selector, and a few regular expressions, the places it could go...
My experience trying to search houses from real estate agents here really soured my attitude towards Javascript, as the retards--- er, I mean, "so-called professionals" who built those sites Javascripted every single possible style or HTML behaviour they could. It was terrible.
Yesh I'm trying to learn Javascript without a library, which is getting hard as I have to learn a lot without writing a line of code just so that I can make my own getElementbyClass and one or two other things before then continuing with the basics. I have Crockford's book, but hope to have libraries as a heap of extras I can use when I don't want to rewrite everything (re, Modules in Perl) but for beginning it seems I'm not going to learn on a library, and generally I find people using libraries for one or two things when I wonder if it would have been worth it just to write that single action manually instead of importing a whole library for it.
They seem more useful for large sites with lots of JS going on anyway.
Sun, 2008-11-16 10:34
#30
Stomme poes wrote:I have
I have seen a 15kb version of it, I guess JQueryLite.
No it's not 'lite' and it's not strictly a version it's what you use in a production environment, there are two 'versions' .packed and .min(minified) both of which are methods of reducing the file size, you only use the uncompressed (~50k) in a development environment
Prolly the only thing I'd really like about it is that it seems to be written for people who speak CSS, which is indeed nice.
It is or at least it considers this aspect and provides for a harmonious pairing,
truthfully it is simply well written and written in a way that allows you to code what you conceptualise without the crud that one had to get involved with writing javascript, also what would have taken 10 or more lines of javascript can be done in one! which is a joy.
My disdain for Javascript is more, when it's used where I think CSS can do it faster, leaner and better. IF oh if it had a parent selector, and a few regular expressions, the places it could go...
We'de all agree that if CSS can do it then it belongs to CSS, that's a given. Using javascript where CSS can do the same job harks back to the old days where CSS wasn't so evolved and people hadn't really begun to get to grips with it, javascript was then sometimes the only approach that people new, also bad apps such as the Weaver of Lies kept polluting pages with it's javascript rollovers, so really one shouldn't foist disdain on Javascript; don't blame the tools it's the bad workman!
My experience trying to search houses from real estate agents here really soured my attitude towards Javascript, as the retards--- er, I mean, "so-called professionals" who built those sites Javascripted every single possible style or HTML behaviour they could. It was terrible.
Again don't blame the tools blame the workman!
Yesh I'm trying to learn Javascript without a library, which is getting hard as I have to learn a lot without writing a line of code just so that I can make my own getElementbyClass and one or two other things before then continuing with the basics. I have Crockford's book, but hope to have libraries as a heap of extras I can use when I don't want to rewrite everything (re, Modules in Perl) but for beginning it seems I'm not going to learn on a library, and generally I find people using libraries for one or two things when I wonder if it would have been worth it just to write that single action manually instead of importing a whole library for it.
Little point really in learning how to overcome javascripts shortcomings, jQuery accounts for that and lets you get on with the real task of writing meaningful code, bear in mind that a library doesn't necessarily make coding easier you still have to have an understanding of javascript and then develop the code that performs the actions required, but with a syntax that is far more logical, chaining objects makes sense.
Possibly a simple bit of javascript doesn't warrant a library, but then does it cause that much harm to have it ready available?
I understand the reticence towards libraries, when I initially looked at them in the early days of their existence I saw only something that seemed to be written simply to allow people to throw a hundred javascript (DHTML) tricks onto a page and there is nothing I hate more than fluf for the sake of fluf, so I too tuned my nose up at their use, however when I looked at jQuery I saw a different concept and one that did not labour on effects (there were very few effects initially, it focused on the approach to code construction to provide a better method of writing client side scripting and imho it achieves that in spades) Don't labour under the impression that libraries are simply there to provide effects, although that is the impression many of the bigger players create, with jQuery the plugins are a bonus or sideline.
They seem more useful for large sites with lots of JS going on anyway.
This is true to a degree, but doesn't mean sites with less client side scripting can't legitimately make use of them.
Sun, 2008-11-16 11:07
#31
You didn't say it, but you
You didn't say it, but you must've been talking about MooTools when comparing jQuery to "other libraries". That steaming pile must be a designer's dream, I see it used so much. But they do say right out that their purpose in life is for flashy fadey jumpy singing dancing thingies on pages, not applications etc.
Sun, 2008-11-16 12:05
#32
I probably was, that and
I probably was, that and perhaps scriptaculous or whatever it's called
believe me nothing sends me running away in horror as much as all those flashy, fadey, jumpy, things, it just reminds me of those dark days when DHTML was the buzz word.
jQuery just seemed in complete contrast to those bigger libraries, although in truth there are now quite a few flashy fadey things being written as plugins, but still the core is pure and the majority of plugins have a sensible nature. Although I still essentially dislike using plugins I was required to implement the 'autocomplete' dropdown for input fields, yes it's non-essential to the functioning of the page so in a sense fluf, yet does aid the user in that it allows you to call various data sources or arrays to populate the dropdown narrowing down the options as the user types in the input, so I grudgingly have to admit it has it's point and isn't simply eye candy
Mon, 2008-11-17 08:01
#33
Hmmm, autocomplete is one of
Hmmm, autocomplete is one of those double-edged swords... it seems helpful, like AutoTab.js... and screws people like me up every time : ) Autocomplete's not too bad, but often the user group being targetted is the one who types with two fingers and is so busy looking at the keyboard, it never sees the options appearing on the screen : )
Prototype was the other library I've looked at. It seemed very modular and also had a lot of basics built-in. Again though, I don't want to learn on a library, and I don't want visitors loading libraries most of the time (maybe if I was building a web shop/shopping cart, or a banking thing..). but we even don't use it in insurance; we make the back-end do as much as possible, filling in values etc.