 | |
Headings and css
Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)
 |
| | Thread Tools | Display Modes |
#1
 
| |||
| |||
|
Headings and css -
12-18-2007
, 02:30 AM
#2
| |||
| |||
|
|
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 |
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>
--
dorayme
#3
| |||
| |||
|
|
In article e4138343-77fb-4042-af00-3cad6cd62cfe...ooglegroups.co m>, Dave Rado <dave.rado (AT) dsl (DOT) pipex.com> wrote: 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 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 |
http://netweaver.com.au/alt/rado2.html
which controls a bit more...
But more fun in the morning maybe...
--
dorayme
#4
| |||
| |||
|
|
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 |
in a, say, a span so as to be able to apply different font sizes.
--
Richard.
#5
| |||
| |||
|
|
"Dave Rado" <dave.r... (AT) dsl (DOT) pipex.com> wrote in message news:e4138343-77fb-4042-af00-3cad6cd62cfe (AT) s12g2000prg (DOT) googlegroups.com... 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. -- Richard. |
this thread: http://tinyurl.com/3a6gzo.
Dave
#6
| |||
| |||
|
|
In article doraymeRidThis-3B5961.20133518122... (AT) news-vip (DOT) optusnet.com.au>, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote: In article e4138343-77fb-4042-af00-3cad6cd62... (AT) s12g2000prg (DOT) googlegroups.co m>, Dave Rado <dave.r... (AT) dsl (DOT) pipex.com> wrote: 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 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 You could also do http://netweaver.com.au/alt/rado2.html which controls a bit more... But more fun in the morning maybe... -- dorayme |
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
#7
| |||
| |||
|
|
In article doraymeRidThis-3B5961.20133518122... (AT) news-vip (DOT) optusnet.com.au>, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote: In article e4138343-77fb-4042-af00-3cad6cd62... (AT) s12g2000prg (DOT) googlegroups.co m>, Dave Rado <dave.r... (AT) dsl (DOT) pipex.com> wrote: 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 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 You could also do http://netweaver.com.au/alt/rado2.html which controls a bit more... But more fun in the morning maybe... -- dorayme |
Dave
#8
| |||
| |||
|
|
On 18 Dec, 09:41, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote: 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 You could also do http://netweaver.com.au/alt/rado2.html which controls a bit more... But more fun in the morning maybe... -- 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? |
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!
--
dorayme
#9
| |||
| |||
|
|
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! |
font-weight the span, fixed now...
--
dorayme
#10
| |||
| |||
|
|
, Dave Rado <dave.rado (AT) dsl (DOT) pipex.com> wrote: |
Quote:
|
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? |
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.
--
dorayme
|
« Previous Thread
|
Next Thread »
| Thread Tools | |
| Display Modes | |
Linear Mode
| |
Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.