CSS equivalent of single-cell table ?

CSS equivalent of single-cell table ?

am 02.11.2007 00:01:54 von scenic_man

I've looked for tutorials on how to do this for some years,
with no success.

Most of the time, I'm a good boy and only use

(etc)
to format tabular data.

However, there remains one thing that
does excellently
that I have yet to find a way to do using solely CSS:

Put a block of text *in a box*,
which box sizes itself to the size of the *content*,
not to some arbitrary fixed width or some percentage of the window.

E.g., the equivalent of:




content


I've tried things like:


content


but this (a) creates a box that takes up the entire width of the window,
leaving the content looking a little bit orphaned in the middle;
and (b) doesn't produce the same coloration of the border
(specifically, it produces black and grey,
instead of light-page-background and dark-page-background).

Surely CSS can do this; how?

Re: CSS equivalent of single-cell table ?

am 02.11.2007 00:13:01 von Ben C

On 2007-11-01, MangroveRoot wrote:
> I've looked for tutorials on how to do this for some years,
> with no success.
>
> Most of the time, I'm a good boy and only use

(etc)
> to format tabular data.
>
> However, there remains one thing that
does excellently
> that I have yet to find a way to do using solely CSS:
>
> Put a block of text *in a box*,
> which box sizes itself to the size of the *content*,
> not to some arbitrary fixed width or some percentage of the window.
[...]
> Surely CSS can do this; how?

You need a "shrink-to-fit" box.

Apart from tables and table cells, floats, inline-blocks and
absolutely/fixed positioned boxes are shrink-to-fit.

Out of that lot floats are probably the simplest.

Put your content in a float, with auto width, and the float will shrink
to fit the content (according to CSS 2.1, in any half-decent
browser, and even in IE).

Of course you can't centre a float so I hope that's not your next
question.

Re: CSS equivalent of single-cell table ?

am 02.11.2007 00:40:09 von Bone Ur

Well bust mah britches and call me cheeky, on Thu, 01 Nov 2007 23:01:54 GMT
MangroveRoot scribed:

> I've looked for tutorials on how to do this for some years,
> with no success.
>
> Most of the time, I'm a good boy and only use

(etc)
> to format tabular data.
>
> However, there remains one thing that
does excellently
> that I have yet to find a way to do using solely CSS:
>
> Put a block of text *in a box*,
> which box sizes itself to the size of the *content*,
> not to some arbitrary fixed width or some percentage of the window.

> Surely CSS can do this; how?

When I want to center a bordered-box with text, I usually size a div in ems
with relation to the text and use margin:auto (-and text-align:center if
necessary). Yes, I realized this isn't the same as having it accommodate
_completely random_ textual snippets, but most of the time that isn't the
case, anyway.

--
Bone Ur
Cavemen have formidable pheromones.

Re: CSS equivalent of single-cell table ?

am 04.11.2007 01:25:41 von scenic_man

> Of course you can't centre a float

Astounding.

> so I hope that's not your next question.

Actually, it is. I can do that with the much-deprecated tables,
why can't I do this with the much-vaunted CSS?

Re: CSS equivalent of single-cell table ?

am 04.11.2007 01:46:22 von cfajohnson

On 2007-11-04, MangroveRoot wrote:
>
>
>> Of course you can't centre a float
>
> Astounding.

Why?

> > so I hope that's not your next question.
>
> Actually, it is. I can do that with the much-deprecated tables,
> why can't I do this with the much-vaunted CSS?

You can do it with CSS, but you don't use float:

#xx {
width: NNX;
margin: auto;
}

--
Chris F.A. Johnson, webmaster
============================================================ =======
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

Re: CSS equivalent of single-cell table ?

am 04.11.2007 01:55:02 von Adrienne Boswell

Gazing into my crystal ball I observed MangroveRoot @sneakemail.com> writing in news:9k8Xi.417$It.197@trndny06:

>> Of course you can't centre a float
>
> Astounding.
>
> > so I hope that's not your next question.
>
> Actually, it is. I can do that with the much-deprecated tables,
> why can't I do this with the much-vaunted CSS?

You can't center a float because it would not be a float. A float takes
more and own item and _floats_ it next to another. Center takes one thing
and centers it. Now, you could put the floats that you wanted to center in
a container, and center _that_.

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

Re: CSS equivalent of single-cell table ?

am 04.11.2007 02:15:02 von a.nony.mous

MangroveRoot wrote:

>> Of course you can't centre a float
>
> Astounding.

Liken a float to a pull-quote. Very seldom do you see a pull-quote in
the centre, but rather at one of the sides.

>> so I hope that's not your next question.
>
> Actually, it is. I can do that with the much-deprecated tables,
> why can't I do this with the much-vaunted CSS?

You can. You forgot to finish it.


content


Select a width that would be appropriate to your content. You can also
use em units for the width, say: width: 20em;
If you also want to centre the content, add: text-align: center;

Naturally, you would want to put the styling in a stylesheet, rather
than inline with the HTML.

You can also set borders like this, picking the colours of your choice:

border-top: 5px inset #d0d0d0;
border-left: 5px inset #d0d0d0;
border-right: 5px inset #a9a9a9;
border-bottom: 5px inset #a9a9a9;

BTW, your table example in your initial post is also the full width of
the browser window.

--
-bts
-Motorcycles defy gravity; cars just suck

Re: CSS equivalent of single-cell table ?

am 04.11.2007 03:58:15 von lws4art

MangroveRoot wrote:
>> Of course you can't centre a float
>
> Astounding.
>
> > so I hope that's not your next question.
>
> Actually, it is. I can do that with the much-deprecated tables,

No you cannot. Not have content wrap around both left and right!

> why can't I do this with the much-vaunted CSS?

You can center with CSS if that is what you mean.


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: CSS equivalent of single-cell table ?

am 04.11.2007 19:30:40 von Ben C

On 2007-11-04, MangroveRoot wrote:
>> Of course you can't centre a float
>
> Astounding.
>
> > so I hope that's not your next question.
>
> Actually, it is. I can do that with the much-deprecated tables,
> why can't I do this with the much-vaunted CSS?

I think that's me you're quoting. I can't remember what you were trying
to do, but it sounds like centred shrink-to-fit block.

Of course you can do that with CSS, using display: table or display:
inline-block, for example.

Just don't expect either to work in IE.

Re: CSS equivalent of single-cell table ?

am 04.11.2007 23:48:00 von dorayme

In article ,
Ben C wrote:

> On 2007-11-04, MangroveRoot wrote:
> >> Of course you can't centre a float
> >
> > Astounding.
> >
> > > so I hope that's not your next question.
> >
> > Actually, it is. I can do that with the much-deprecated tables,
> > why can't I do this with the much-vaunted CSS?
>
> I think that's me you're quoting. I can't remember what you were trying
> to do, but it sounds like centred shrink-to-fit block.
>
> Of course you can do that with CSS, using display: table or display:
> inline-block, for example.
>
> Just don't expect either to work in IE.

I think OP was wanting shrink to fit too and you addressed this
in your first reply. Perhaps this might help OP in some way:

http://tinyurl.com/32n6hm

--
dorayme

Re: CSS equivalent of single-cell table ?

am 05.11.2007 04:47:53 von lws4art

dorayme wrote:

> I think OP was wanting shrink to fit too and you addressed this
> in your first reply. Perhaps this might help OP in some way:
>
> http://tinyurl.com/32n6hm
>

Well it works in real web browsers, but not any version of IE, cannot
speak for that odd Mac version.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: CSS equivalent of single-cell table ?

am 05.11.2007 05:20:04 von dorayme

In article <61ada$472e9262$40cba7c6$20756@NAXS.COM>,
"Jonathan N. Little" wrote:

> dorayme wrote:
>
> > I think OP was wanting shrink to fit too and you addressed this
> > in your first reply. Perhaps this might help OP in some way:
> >
> > http://tinyurl.com/32n6hm
> >
>
> Well it works in real web browsers, but not any version of IE, cannot
> speak for that odd Mac version.

Yes, I hope the tables work ok in IE! The sub heading for the
non-tables solution says "variable browser support" which is a
polite way of saying forget about IE. The tables solution was
meant to show ok in IE. Perhaps someone could be bothered to do
it so IE gets the tables and the rest get the display: table
instructions. I would rather cut off one of my antennae.

What is it with folk that they crave *so much* for centering? It
is like the junk food of webpage design...

--
dorayme

Re: CSS equivalent of single-cell table ?

am 05.11.2007 06:22:55 von Bone Ur

Well bust mah britches and call me cheeky, on Mon, 05 Nov 2007 04:20:04 GMT
dorayme scribed:

>> > I think OP was wanting shrink to fit too and you addressed this
>> > in your first reply. Perhaps this might help OP in some way:
>> >
>> > http://tinyurl.com/32n6hm
>> >
>>
>> Well it works in real web browsers, but not any version of IE, cannot
>> speak for that odd Mac version.
>
> Yes, I hope the tables work ok in IE! The sub heading for the
> non-tables solution says "variable browser support" which is a
> polite way of saying forget about IE. The tables solution was
> meant to show ok in IE. Perhaps someone could be bothered to do
> it so IE gets the tables and the rest get the display: table
> instructions. I would rather cut off one of my antennae.
>
> What is it with folk that they crave *so much* for centering? It
> is like the junk food of webpage design...

The pink background stuff centers (and "shrinks") in ie6. It all does so
in ff.

--
Bone Ur
Cavemen have formidable pheromones.

Re: CSS equivalent of single-cell table ?

am 06.11.2007 19:02:21 von BootNic

dorayme wrote:
news:doraymeRidThis-1ED213.15200405112007@news-vip.optusnet. com.au:

> In article <61ada$472e9262$40cba7c6$20756@NAXS.COM>,
> "Jonathan N. Little" wrote:
>
>> dorayme wrote:
>>
>> > I think OP was wanting shrink to fit too and you addressed this
>> > in your first reply. Perhaps this might help OP in some way:
>> >
>> > http://tinyurl.com/32n6hm
>> >
>>
>> Well it works in real web browsers, but not any version of IE, cannot
>> speak for that odd Mac version.
>
> Yes, I hope the tables work ok in IE! The sub heading for the
> non-tables solution says "variable browser support" which is a
> polite way of saying forget about IE. The tables solution was
> meant to show ok in IE. Perhaps someone could be bothered to do
> it so IE gets the tables and the rest get the display: table
> instructions. I would rather cut off one of my antennae.

For inline content.

Wrap the content of all the div.centring with an inline element.

This is a centred shrink-to-fit div box.


Then add a bit of css to correct the display for IE.



I suppose that if one wants to support a mac IE then other corrections
would be required.

--
BootNic Tuesday November 6, 2007 1:02 PM
Assert your right to make a few mistakes. If people can't accept your
imperfections, that's their fault.
*Dr. David M. Burns*

Re: CSS equivalent of single-cell table ?

am 07.11.2007 01:18:22 von dorayme

In article ,
BootNic wrote:

> dorayme wrote:
> news:doraymeRidThis-1ED213.15200405112007@news-vip.optusnet. com.au:
>
> > In article <61ada$472e9262$40cba7c6$20756@NAXS.COM>,
> > "Jonathan N. Little" wrote:
> >
> >> dorayme wrote:
> >>
> >> > I think OP was wanting shrink to fit too and you addressed this
> >> > in your first reply. Perhaps this might help OP in some way:
> >> >
> >> > http://tinyurl.com/32n6hm
> >> >
> >>
> >> Well it works in real web browsers, but not any version of IE, cannot
> >> speak for that odd Mac version.
> >
> > Yes, I hope the tables work ok in IE! The sub heading for the
> > non-tables solution says "variable browser support" which is a
> > polite way of saying forget about IE. The tables solution was
> > meant to show ok in IE. Perhaps someone could be bothered to do
> > it so IE gets the tables and the rest get the display: table
> > instructions. I would rather cut off one of my antennae.
>
> For inline content.
>
> Wrap the content of all the div.centring with an inline element.
>
>

This is a centred shrink-to-fit div box.
>

>
> Then add a bit of css to correct the display for IE.
>
>
>
> I suppose that if one wants to support a mac IE then other corrections
> would be required.

I have made some adjustments and added a section and a new page
to try to incorporate this idea, but it needs more work. I had
various problems and have given up for a moment... See:

http://tinyurl.com/32n6hm

and the linked page. On my winbox in IE 6 the borders around the
spans do not appear properly, nor the background colour nor is
the text left-aligned - though the spans are nicely centered!
Perhaps I have not implemented the idea properly?

Damn IE!

--
dorayme

Re: CSS equivalent of single-cell table ?

am 07.11.2007 01:31:16 von BootNic

dorayme wrote:
news:doraymeRidThis-60A2DE.11182207112007@news-vip.optusnet. com.au:

> In article ,
> BootNic wrote:
>
>> dorayme wrote:
>> news:doraymeRidThis-1ED213.15200405112007@news-vip.optusnet. com.au:
>>
>>> In article <61ada$472e9262$40cba7c6$20756@NAXS.COM>,
>>> "Jonathan N. Little" wrote:
>>>
>>>> dorayme wrote:
>>>>
[snip]
>> Wrap the content of all the div.centring with an inline element.
>>
>>

This is a centred shrink-to-fit div
>> box.


NOTICE: the content needs to be wrapped in a span.

>> Then add a bit of css to correct the display for IE.
[snip]
> I have made some adjustments and added a section and a new page
> to try to incorporate this idea, but it needs more work. I had
> various problems and have given up for a moment... See:
>
> http://tinyurl.com/32n6hm
>
> and the linked page. On my winbox in IE 6 the borders around the
> spans do not appear properly, nor the background colour nor is
> the text left-aligned - though the spans are nicely centered!
> Perhaps I have not implemented the idea properly?
>
> Damn IE!

It appears that you forgot to wrap the div content in a span.

--
BootNic Tuesday November 6, 2007 7:30 PM
If you can learn from hard knocks, you can also learn from soft
touches.
*Carolyn Kenmore*

Re: CSS equivalent of single-cell table ?

am 07.11.2007 01:53:56 von dorayme

In article ,
BootNic wrote:

> It appears that you forgot to wrap the div content in a span.

o sh... that's right.. they got lost in some fiddling. I had
other trouble with a previous template and there is usb stick
transfers between winbox and Mac and ... don't ask...

Yes, now that I have simple overall page, it works well on my IE
6 as well as on Safari and probably FF too... Well done. I will
leave it up a while in case anyone finds it useful...

--
dorayme