 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / December 2007Headings and css
Hi Is it possible to line up one's body text with the text in a numbered heading, other than by using 2-column borderless tables? As in the following mock-up: http://tinyurl.com/23xktn Dave In article <e4138343-77fb-4042-af00-3cad6cd62cfe@s12g2000prg.googlegroups.co m>, > Hi > [quoted text clipped - 3 lines] > > Dave In Firefox, this might suit: http://netweaver.com.au/alt/rado.html and then there is the little business of how floats line up at the top, not the bottom that needs attending to for most other browsers. But that might make me have to rub a few brain cells together... <g>  Signaturedorayme In article <doraymeRidThis-3B5961.20133518122007@news-vip.optusnet.com.au>, > In article > <e4138343-77fb-4042-af00-3cad6cd62cfe@s12g2000prg.googlegroups.co [quoted text clipped - 16 lines] > browsers. But that might make me have to rub a few brain cells > together... <g> You could also do http://netweaver.com.au/alt/rado2.html which controls a bit more... But more fun in the morning maybe... Signaturedorayme > In article > <doraymeRidThis-3B5961.20133518122...@news-vip.optusnet.com.au>, [quoted text clipped - 30 lines] > -- > dorayme Thanks, dorayme; but I don't understand how your code works, or how I can make it look exactly like http://tinyurl.com/23xktn - could you explain how it works, so I can understand it well enough to tweak it for my needs? E.g. if I change the margin-left attribute for <p> to 4em, I can't see how to get the heading text to line up with it. Also wouldn't defining "div" like that in the css stylesheet mean you couldn't use the div tag for any other purpose? Dave In article <6d5325e0-d37d-4a5c-9bcf-a06e81344a5d@q77g2000hsh.googlegroups.co m>, > > > In Firefox, this might suit: > > [quoted text clipped - 24 lines] > Also wouldn't defining "div" like that in the css stylesheet mean you > couldn't use the div tag for any other purpose? About the last question, see my reply to to your similar query in another post about span. I was playing about with a fixed relationship between font-sizes, hoping that it would help to calculate a left margin for the paragraph text. But it is difficult as different browsers do slightly different calculations. And different fonts affect things, all these things hard to control on a users computer by the author. David Trimboli's suggestion is a nice alternative to table layout as far as style is concerned. But all these attempts to help out need to come after a clearer idea of what you are doing. You know, a table is not that semantically so terrible as a layout for what I imagine *might* be your purpose (but I do not *know* your purpose). rf suggests an ordered list, maybe this is good. But you have some stylistic requirements that are easier in a table. I have argued before that an ordered list is - in its essentials - very close to a table with the numbers being in one column and relating as tabular data to a corresponding bit in the next row. In your case there are a couple of ways of interpreting things so that your number does relate to the data in the next col. More on this in a mo. Putting a 1. in <h1> is an unusual thing to do. Not wanting to be too moralistic, but think about it. An <h1> is essentially a top heading. It has the idea of Number Oneness as part of its meaning. It seems to be redundant to be putting in this number. This is for most normal uses. (Of course, there could be special cases. Perhaps you are showing students top level headings and want to mark them out to later refer to them?) Anyway, it is important to consider whether it is really a heading that is the most meaningful element for your purpose. But let us suppose some reasonable purpose for having a number to the left and a heading to the right of this number with paras under the heading all nicely lined up. You want a number, it is the start of an ordering (there will be subsequent numbers and headings and paragraphs) like this: 1. Top level heading para para para Lower level heading para para para etc. and then 2. Top level heading para para para Lower level heading para para para The ordered list *should* be perfect but is a bit tricky with your style requirement. If I am right about an ordered list being essentially equivalent to a table then the table is, after all, not something you need to be shying away from. The interpretation of what the 1 refers to also becomes clearer, it refers to the item in the adjoining cell. And the adjoining cell has all the headings and paras you want. But your original table will not do. It is not very clear semantically to use a big word). Your original at http://www.daverado.mvps.org/temp/headings.htm had tables within tables etc. May I suggest this is clearer: http://netweaver.com.au/alt/radoTable.html But there is a pesky problem in Safari about the numbers not looking aligned right. In my FF it looks sweet. Perhaps numbers are using one font and letters another? I dunno. I better stop! Signaturedorayme In article <doraymeRidThis-5DF6DA.09001719122007@news-vip.optusnet.com.au>, > But your original table will not do. It is not very clear > semantically to use a big word). Your original at [quoted text clipped - 6 lines] > looking aligned right. In my FF it looks sweet. Perhaps numbers > are using one font and letters another? I dunno. I better stop! I had to look at this again! It was a simple thing, I forgot to font-weight the span, fixed now... Signaturedorayme > In article > <6d5325e0-d37d-4a5c-9bcf-a06e81344...@q77g2000hsh.googlegroups.co [quoted text clipped - 116 lines] > -- > dorayme Hi dorayme For some reason I've only just seen your above post and the previous one, but I'm not sure I understand it. All my headings are outline numbered - that's a conventional numbering system for headings in long documents and I don't really understand the objection. to it. Level 1 headings are analogous to chapter headings, if you like, lower level headings inherit the first part of their number from the higher level headings like 1. Top level heading content 1.1 subheading content 1.1.1 level 3 heading content 2. Top level heading content 2.1 subheading content ... and so on. The only reason the heading-numbering table in my mock-up is within a table is that the outer table is simulating a document page (so as to look the way a Word document or a PDF looks on screen, which in my opinion is much more readable for the user than most web pages, when it comes to long documents). But then part of the content under some of the headings will consist of "real" tables in the conventional (non- html) sense of the word, i.e tabular data, with rows and columns and borders - so even if one did get rid of the outer table simulating the document page, there would still be tables within tables. And I don't really understand why you say that won't do. As for whether or not I can get rid of the outer table and simulate the look of the "document page" in a different way that doesn't use a table, I'm investigating this in a different thread, but so far I'm not sure if it's going to be practical. Dave In article <19b9ca3a-5a65-4503-b0e1-928a1e189dec@q77g2000hsh.googlegroups.co m>, [...] > Hi dorayme > > For some reason I've only just seen your above post and the previous > one, but I'm not sure I understand it. ... > As for whether or not I can get rid of the outer table and simulate > the look of the "document page" in a different way that doesn't use a > table, I'm investigating this in a different thread, but so far I'm > not sure if it's going to be practical. On this particular issue, all I recall is that I thought you could have had a table layout in a simpler way than the one you produced. But a lot has gone under the bridge on this... Please post a fresh URl of the table you are considering using and we can take a look at it and suggest any improvements. Signaturedorayme Hi Dorayme > On this particular issue, all I recall is that I thought you > could have had a table layout in a simpler way than the one you > produced. But a lot has gone under the bridge on this... Please > post a fresh URl of the table you are considering using and we > can take a look at it and suggest any improvements. I had posted the following mcok-up: http://www.daverado.mvps.org/temp/headings.htm And you wrote: > But your original table will not do. It is not very clear > semantically to use a big word). Your original at > had tables within > tables etc. Dave > I had posted the following mcok-up: > http://www.daverado.mvps.org/temp/headings.htm Is this what you are trying to do? http://k75s.home.att.net/test/rado.html It is much easier to use 21st century markup... <g> Signature-bts -Friends don't let friends drive Vista In article <%7hdj.87059$MJ6.45667@bgtnsc05-news.ops.worldnet.att.net>, > > I had posted the following mcok-up: > > http://www.daverado.mvps.org/temp/headings.htm [quoted text clipped - 4 lines] > > It is much easier to use 21st century markup... <g> We have been down this road. He won't like when it wraps. <g> I offered a while back: http://netweaver.com.au/alt/rado.html http://netweaver.com.au/alt/radoFixedWidth.html It is probably easier for op to use a table to get what he wants. Signaturedorayme >> http://k75s.home.att.net/test/rado.html >> >> It is much easier to use 21st century markup... <g> > > We have been down this road. He won't like when it wraps. <g> Heh. I guess his thinking is still in the last century, like his code. He could always set a fixed width on the content div I used... <sigh> but still far less code to maintain than that table fiasco. Signature-bts -Motorcycles defy gravity; cars just suck In article <tDidj.338022$kj1.91283@bgtnsc04-news.ops.worldnet.att.net>, > >> http://k75s.home.att.net/test/rado.html > >> [quoted text clipped - 6 lines] > He could always set a fixed width on the content div I used... <sigh> > but still far less code to maintain than that table fiasco. It seemed worthwhile to show op how to make the table simpler without tables within tables. But I am rushing to get out to Botany Bay to swim and walk and dine.<g> I was adjusting things to look like his http://www.daverado.mvps.org/temp/headings.htm when I struck an unexpected problem. In a bad tempered push, I removed the span wrappers I was using for the numbers in the left col and used headings! http://netweaver.com.au/alt/radoTable.html These heading wrappers are of course semantic rubbish, and I will return to remove them! And may even think how to be rid of the valign="top" for the cells for css; for some reason my mind has gone blank on this. But it is rather simpler mark up than OP's table. (Are you there Dave?) (*take no notice of the wording in the headings... from other urls and I have not bothered about the slanting text) Signaturedorayme > It seemed worthwhile to show op how to make the table simpler > without tables within tables. Yes. Even a list (that's a <ul><li>, Dave) could be used for this markup, and be semantically better than nested tables. > But I am rushing to get out to Botany Bay to swim and walk and > dine.<g> Swim? "Got Icepick?" Signature-bts -Friends don't let friends drive Vista >> But I am rushing to get out to Botany Bay to swim and walk and >> dine.<g> > > Swim? "Got Icepick?" Beauregard, today the max temperature at my house (30K from doraymes) was 35.4 degrees. Celsius. A swim would have been a good idea indeed. The headers give our location away, even if Botany Bay did not :-) SignatureRichard. >>> But I am rushing to get out to Botany Bay to swim and walk and >>> dine.<g> [quoted text clipped - 5 lines] > > A swim would have been a good idea indeed. Yes it would. But I stare out my window and see a lake in which the water is just a bit above the freezing point. The temperature is hovering around 2°C this morning. Balmy, eh? The icepick reference was just a humourous reference about the weather here on the cold side of the planet. > The headers give our location away, even if Botany Bay did not :-) Oh, I know where you two are located... enjoy your swim. Signature-bts -Motorcycles defy gravity; cars just suck In article <5trdj.340330$kj1.319404@bgtnsc04-news.ops.worldnet.att.net>, > >>> But I am rushing to get out to Botany Bay to swim and walk and > >>> dine.<g> [quoted text clipped - 3 lines] > > Beauregard, today the max temperature at my house (30K from doraymes) > > was 35.4 degrees. Celsius. Not so hot where I am. So perhaps rf must live in the (hotter) west of Sydney to the inner suburbs where it was closer to 30. > > A swim would have been a good idea indeed. > [quoted text clipped - 8 lines] > > Oh, I know where you two are located... enjoy your swim. There was a moment I did not enjoy, albeit brief: I was swimming happily across Little Bay when suddenly a live black thing brushed against me. It was a great big black dog! There were two of them in fact and they were swimming with their owners! JFC! (The water is getting warmer and there is a certain other very dangerous thing in Australian waters that is live and black) Signaturedorayme > In article > <5trdj.340330$kj1.319404@bgtnsc04-news.ops.worldnet.att.net>, <snip> I know where you two are located... enjoy your swim. > There was a moment I did not enjoy, albeit brief: I was swimming > happily across Little Bay when suddenly a live black thing > brushed against me. It was a great big black dog! There were two > of them in fact and they were swimming with their owners! JFC! > (The water is getting warmer and there is a certain other very > dangerous thing in Australian waters that is live and black) I didn't think "Bondi cigars" were black ;-) Phil in 40C Adelaide SignaturePhil & Val Kempster http://kempster.info In article <doraymeRidThis-342E69.15572329122007@news-vip.optusnet.com.au>, > I was adjusting things to look like his > http://www.daverado.mvps.org/temp/headings.htm when I struck an [quoted text clipped - 3 lines] > > http://netweaver.com.au/alt/radoTable.html This latter has since been changed back to styling the numbers according to class in the left column. Are you there Dave Rado? Look at the table mark up and you will see it to be much simpler than your table within table one and spacer gif one. If you do use tables for this (and I have argued previously why it even makes semantic sense to do so), at least get it down to as simple as you can. Signaturedorayme > In article > <doraymeRidThis-3B5961.20133518122...@news-vip.optusnet.com.au>, [quoted text clipped - 30 lines] > -- > dorayme Also, it needs to work in IE, Firefox, Opera and Safari! Dave > Hi > > Is it possible to line up one's body text with the text in a numbered > heading, other than by using 2-column borderless tables? As in the > following mock-up: http://tinyurl.com/23xktn An ordered list. Font size applied with sutiable CSS. Parts may have to be in a, say, a span so as to be able to apply different font sizes. SignatureRichard. > > Hi > [quoted text clipped - 7 lines] > -- > Richard. Thanks Richard, but I use outline numbering for my headings, and see this thread: http://tinyurl.com/3a6gzo. Dave > Hi > [quoted text clipped - 3 lines] > > Dave Here's a clumsy way to do it without ordered lists: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Line up numbered headings</title> <style type="text/css"> h1, p { margin-left: 10% } span.numbering { display: block; position: absolute; left: 5% } </style> </head> <body> <h1><span class="numbering">1.</span> This is a heading.</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> </body> </html> David Stardate 7963.7 SignaturePractice the Klingon language on the tlhIngan Hol MUSH. http://trimboli.name/klingon/mush.html > > Hi > [quoted text clipped - 39 lines] > -- > Practice the Klingon language on the tlhIngan Hol MUSH.http://trimboli.name/klingon/mush.html Hi David Great idea but using "position: absolute" won't work for me - see my mock-up at: http://tinyurl.com/3dfs99. Any more ideas? Dave > > > Hi > [quoted text clipped - 46 lines] > > Dave Does the lack of further replies mean that using two-colums borderless tables is the only practical way of doing it if I want it to look like this: http://tinyurl.com/23xktn? Dave > Does the lack of further replies mean that using two-colums borderless > tables is the only practical way of doing it if I want it to look like > this: http://tinyurl.com/23xktn? No, it means I haven't come back to this newsgroup until now. I can achieve this effect with px, but not with em or % unless the headings are the same size as the text. Perhaps someone can modify this approach to work better. David Stardate 7966.7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Heading Test</title> <style type="text/css"> h1 { display: table-row; } span.number { display: table-cell; width: 75px; } p { padding-left: 75px; } </style> </head> <body> <h1><span class="number">1.</span> This is a Heading 1 done with CSS table row display</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> </body> </html> SignaturePractice the Klingon language on the tlhIngan Hol MUSH. http://trimboli.name/klingon/mush.html > > Does the lack of further replies mean that using two-colums borderless > > tables is the only practical way of doing it if I want it to look like [quoted text clipped - 45 lines] > -- > Practice the Klingon language on the tlhIngan Hol MUSH.http://trimboli.name/klingon/mush.html Hi David Sorry, I forgot about the differences in time zones. :-) I tried your code, but: a) It works in Firefox provided it's at the left margin of the page, but it doesn't line up in IE when I try it - see my mock-up at: http://tinyurl.com/3dfs99. b) Even in Firefox, it doesn't line up correctly if it's not at the left margin of the page - see my mock-up at: http://tinyurl.com/yvj3l2. Or am I doing something wrong? Dave > I tried your code, but: > [quoted text clipped - 6 lines] > > Or am I doing something wrong? I'm not surprised Internet Explorer doesn't react the same way as Firefox. I'm not going to try a rigorous study of this; try modifying the code to get the behavior you want. David Stardate 7969.3 SignaturePractice the Klingon language on the tlhIngan Hol MUSH. http://trimboli.name/klingon/mush.html > > I tried your code, but: > [quoted text clipped - 16 lines] > -- > Practice the Klingon language on the tlhIngan Hol MUSH.http://trimboli.name/klingon/mush.html I think I'll go with dorayme's suggestion of using 2-column borderless tables, which are easy to implement and work in all browsers. Thanks for trying though. Dave In article <7d6ddb79-eebc-4afb-9f8c-899e5af6fd28@q3g2000hsg.googlegroups.com >, > Does the lack of further replies mean that using two-colums borderless > tables is the only practical way of doing it if I want it to look like > this: http://tinyurl.com/23xktn? This is my best shot for you to date, I redid it in the style of your above link: http://netweaver.com.au/alt/rado.html Now, there is something you can do to tweak it but it requires careful juggling to set font-sizes and margins and float widths. The above should do the trick for a few clicks of user browser text adjustment. But to make it truly variable and fluid, we need to work harder. Anyway, take a look. May I take the opportunity to reiterate something that I am sure few people will quite understand me on but which I have heard no arguments against - ever. It is not all that wrong for you to cast a page that is ripe for an ordered list into a table. A simple ordered list is, at its heart, a tabular affair. The order (think the numbers) are a set of items to which there is an essentially unique correspondence to another item (think the spiel that follows the number, the content of a list item). When cast as a 2 col table it may not *look* to everyone like a tabular affair. But it is. There is no question about it. The rows are high because there is a lot of stuff that corresponds to the numbers. I am saying to you, there is nothing shonky about using a table for a truly ordered list where you want to take advantage of the built in formatting magic of HTML tables. (Often it is mistake to over specify tables and cells with widths and stuff). It is not necessarily an inferior method in this case. Signaturedorayme > In article > <7d6ddb79-eebc-4afb-9f8c-899e5af6f...@q3g2000hsg.googlegroups.com>, [quoted text clipped - 36 lines] > -- > dorayme Thanks dorayme. Re. your code, it makes the table containing the text (the simulated "page") much wider than I've set it up to be, and the text in the headings doesn't wrap to the next line if it won't fit on one line, so for instance if you press Ctrl+, part of the heading goes off the screen. Thanks for trying though. Re. your other points, I agree, css makes it just too hard to do something that seems a very basic requirement to me, which is a great shame; but borderless tables, for all the theoretical objections to them, work perfectly, even in the oldest browsers: so reluctantly I'm going to take your advice and use borderless tables for this. But many thanks to all for putting so much time into finding a solution to this, it's greatly appreciated. Dave In article <5525c28f-4705-4f14-b7a6-f41a1f134b39@q3g2000hsg.googlegroups.com >, > > This is my best shot for you to date, I redid it in the style of > > your above link: > > > > http://netweaver.com.au/alt/rado.html > Thanks dorayme. Re. your code, it makes the table containing the text > (the simulated "page") much wider than I've set it up to be, and the > text in the headings doesn't wrap to the next line if it won't fit on > one line, so for instance if you press Ctrl+, part of the heading goes > off the screen. Thanks for trying though. Just out of a sense of play, in spite of tables being fine, let us tweak the dimensions in the css a bit more then. Perhaps the mark up is not clear to you, a bit tricky? But we can help wrapping at smaller screen and browser sizes by limiting the widths I set. I was eming wrapper width to 60em (quite a lot) but see what happens when one "fixed pixels" them to no more than say 800px (not too bad for text): http://netweaver.com.au/alt/radoFixedWidth.html This should be ok for a few clicks of your Ctrl+ and Ctrl- > Re. your other points, I agree, css makes it just too hard to do > something that seems a very basic requirement to me, which is a great [quoted text clipped - 3 lines] > thanks to all for putting so much time into finding a solution to > this, it's greatly appreciated. I sense that you are not quite understanding or agreeing with my argument on this. The theoretical objections are not always right. And I would say to you not to be so "reluctant" in this particular matter! Especially if your purpose is in substance an ordered list (but I am not really examining whether it is or not...). Signaturedorayme Hi dorayme Sorry for the delayed reply - I've been offline for a few days. > Just out of a sense of play, in spite of tables being fine, let > us tweak the dimensions in the css a bit more then. Perhaps the [quoted text clipped - 7 lines] > > This should be ok for a few clicks of your Ctrl+ and Ctrl- When I try to integrate your code into my design and styles, the heading numbers don't line up with the heading text - see: http://tinyurl.com/yo4mnj. Am I doing something wrong? > I sense that you are not quite understanding or agreeing with my > argument on this. The theoretical objections are not always > right. I'm not really up on what the theoretical objection are, beyond the fact that some people seem to thing that for people using automatic readers to read a website (rather than their eyes), tables are apparently very difficult to follow. > And I would say to you not to be so "reluctant" in this > particular matter! Especially if your purpose is in substance an > ordered list (but I am not really examining whether it is or > not...). > dorayme Well if you can consider a 180 page book containing hundreds of sequentially outline-numbered headings to be a single ordered list, then it's an ordered list. But it's a rather complex one, in that between any two headings could be several pages of text, graphics, tabular data, or whatever. Dave In article <853b6d74-60ce-4204-bbd4-51e4b454911d@w56g2000hsf.googlegroups.co m>, > Hi dorayme > > Sorry for the delayed reply - I've been offline for a few days. Ah yes, hello, Dave. I was wondering what happened to you. It is no crime to be offline <g> > > Just out of a sense of play, in spite of tables being fine, let > > us tweak the dimensions in the css a bit more then. Perhaps the [quoted text clipped - 11 lines] > heading numbers don't line up with the heading text - see: > http://tinyurl.com/yo4mnj. Am I doing something wrong? As far as I can see, you have left some of the crucial bits out. But I have not thoroughly examined all your cascade. My effort was like a fine Swiss clock, each little piece, absolutely needed and all depending on each other... <g> I am disappointed that you have moved to pts from my ems but never mind, you cannot leave out the pts version of my; h1, h2, h3 { padding-top: 0; margin-top: 0; font-weight: bold; font-style: normal; } h1 { font-size: 1.8em; } h2 { font-size: 1.5em; } h3 { font-size: 1.3em; } In other words, when I put this "back" into the "Embedded stylesheet" (the one in the head that overrides an external one) as: h1, h2, h3 { padding-top: 0; margin-top: 0; font-weight: bold; font-style: normal; } h1 { font-size: 16pt; } h2 { font-size: 14pt; } h3 { font-size: 12pt; } the numbers then line up. The numbers and the corresponding headings must be exactly the same in font-size, weight and face etc for it to look right. > > I sense that you are not quite understanding or agreeing with my > > argument on this. The theoretical objections are not always [quoted text clipped - 4 lines] > readers to read a website (rather than their eyes), tables are > apparently very difficult to follow. Well, why tables are not the best for various general layout is a big subject and goes beyond the point about screen readers. I will not go into it unless you have time and are particularly keen. But in my conversation with you, I was merely focussing on a very limited thing, namely the interchangeability between simple ordered lists and simple 2 col tables. That is all. I was basically saying that those who are fundamentalist about tables need to rethink the issue where it comes to simple ordered lists. I am not saying not to use ordered lists and to prefer tables. Just that no need to sweat on using tables instead of simple ordered lists with a clear conscience where it is easier for any stylistic reasons at all. > > And I would say to you not to be so "reluctant" in this > > particular matter! Especially if your purpose is in substance an [quoted text clipped - 8 lines] > between any two headings could be several pages of text, graphics, > tabular data, or whatever. Ah... yes, it is another matter altogether whether in fact what you are doing is an ordered list in nature. That the list continues from page to page complicates the assessment a little. But the mere length of the list with all the complicated things in the list items hardly makes a difference for the actual concept. The list items are big and complex. Fine. In a table, the right row cells that correspond to the left col numbers are equally big and complex. There is nothing in it. I will now say it again, don't you worry about using a table for your job. I wish I could give you a dispensation to do so on condition that you don't use pts for font-size and learn about em dimensioning. But my powers are limited, my enemies strong in numbers and guile... Signaturedorayme > In article > <853b6d74-60ce-4204-bbd4-51e4b4549...@w56g2000hsf.googlegroups.co [quoted text clipped - 137 lines] > -- > dorayme Sorry for the mistakes in my code, but as you've given me permission to use tables for this, I think I won't spend any more time on trying to get your code to work for me - but many thanks for all the time you've put into this. Can you point me to a good web page that explains in detail why I should use ems rather than points, and also explains how to convert my points measurements into ems so that the results look the same as before on a default (Ctrl+0) screen? Also, what about things like table borders (which I sometimes define in points) - must they also be in ems? If so, why? Dave > > In article > > <853b6d74-60ce-4204-bbd4-51e4b4549...@w56g2000hsf.googlegroups.co [quoted text clipped - 152 lines] > > Dave Also, are any other measurements apart from points a no-no, and if so, why? Dave Please learn to quote on Usenet, or stay tuned to getting ignored by people who might be able to help you. Please read the following in its entirety, and you will understand how clueless your quoting style is: Scripsit Dave Rado: >>> In article >>> <853b6d74-60ce-4204-bbd4-51e4b4549...@w56g2000hsf.googlegroups.co [quoted text clipped - 157 lines] > > Dave Did you get the idea? Fine. Now, to get an answer to your one-liner question, before which you pointlessly, absurdly, aggravatingly quoted dozens and dozens of lines, including inner quotations and a sig, just read a CSS tutorial, then check the "Units" part in a CSS handbook, reference, or specification. SignatureJukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/ [...] > Can you point me to a good web page that explains in detail why I > should use ems rather than points, Em is font-size relative. So if you make a box 16em wide it's got room for probably about 8 characters, depending on the font. But if the font's bigger, the box gets bigger, so there's still room for about 8 characters, even though each character is now much larger. Since you don't know how big the font is (even if you set it the user may well override what you set) any box that's expected to contain a bit of text is usually better with an em-size than a pixel size. Otherwise the text can overflow its container when the font size is increased which usually looks bad. > and also explains how to convert my > points measurements into ems so that the results look the same as > before on a default (Ctrl+0) screen? You can't, because you don't know the font size. > Also, what about things like table borders (which I sometimes define > in points) - must they also be in ems? If so, why? No need to use em for those-- they don't have text in them (not actually in the border) and you just want a thin or thick line. > if you make a box 16em wide it's got room > for probably about 8 characters, depending on the font. It would have to be a mighty wide font to only get 8 characters in a 16em wide box. With Arial, you get around 35 characters in that space and around 40 with TNR. Maybe you were thinking of 8 words, not characters. BTW, ems don't really relate to character width, since they're a unit of height. Unfortunately there isn't a better unit, at least not if you're looking for any kind of consistency across browsers. SignatureBerg >> if you make a box 16em wide it's got room >> for probably about 8 characters, depending on the font. > > It would have to be a mighty wide font to only get 8 characters in a > 16em wide box. With Arial, you get around 35 characters in that space > and around 40 with TNR. Maybe you were thinking of 8 words, not characters. No I was thinking of roughly 16 characters in an 8em box. I got the factor of 2 the wrong way round. > BTW, ems don't really relate to character width, since they're a unit of > height. Yes. In article <2956d2f9-a7fc-4cb7-9769-eedbc5d78ee5@r60g2000hsc.googlegroups.co m>, > > [...] > Sorry for the mistakes in my code, but as you've given me permission > to use tables for this, I think I won't spend any more time on trying > to get your code to work for me - but many thanks for all the time > you've put into this. I don't blame you. It was just something to have ago at, these things often bring up interesting issues along the way <g> > Can you point me to a good web page that explains in detail why I > should use ems rather than points, and also explains how to convert my > points measurements into ems so that the results look the same as > before on a default (Ctrl+0) screen? Ben has given a nice summary in his reply. Pages? Well, let me see... Why not take a look at: http://css-discuss.incutio.com/?page=FontSize and follow some of the links, especially things like h3 {font-size: 18px;} /* a bad idea! see UsingPixels */ where UsingPixels is a link to: http://css-discuss.incutio.com/?page=UsingPixels and so on. You will get the idea. If you look at my last post, I guessed some equivalent ems for your pts, even a rough idea is good enough for this simple reason: when a user looks at his or her website on a computer, platform and browser that you have no idea about, the internal consistency is what really matters, the relationship between the font-sizes for different elements. You might or might not know that if you just forget about setting sizes, full stop, you will do surprisingly well because you will then be drawing on a default set of styles made by a community of experts (all browsers employ *similar* but not identical default sets). > Also, what about things like table borders (which I sometimes define > in points) - must they also be in ems? If so, why? No, unless there is very special motivation. But it is often a good idea to size elements in em terms so that they grow naturally with the users font sizes. Remember, you cannot know how big or small a user will make your text. As Ben says, it can spill out of a fixed pixel sized box. All these things are a matter of judgement. Some people like to fix a navigation in pixels in spite of text spilling out at the extremes so that the nav col (imagine it on the left) does not grow and grow and causing user to have to scroll to see the content. You see, it is the content he or she is likely to want real big to read. There are no fixed rules on these things. I tend to make the nav cols em wide and buy the consequences. Signaturedorayme > Can you point me to a good web page that explains in detail why I > should use ems rather than points, Points are for printing. Assign the page's main font size in percent (100 of them) to avoid the infamous IE bug. You can also use percentages for other bits that may be *slightly* smaller or larger than the visitors' default font size. See: http://k75s.home.att.net/fontsize.html Signature-bts -Friends don't let friends drive Vista |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.