Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
Getting a column to occupy 100% of screen width after it has wrapped?
4 views
Skip to first unread message
laredotornado
Apr 17, 2012, 4:09:49 PM4/17/12
to
Hi,
I have a 3 column data layout ...
<html>
<head>
<style>
.container{overflow:hidden; padding:20px; border:1px solid #ccc;}
.col1, .col2, .col3{width:30%;float:left;clear:none;margin:0 10px 0
10px;}
</style>
</head>
<body>
<div class="container">
<div class="col1">...</div>
<div class="col2">...</div>
<div class="col3">...</div>
</div>
</body>
</html>
Currently, as the browser width shrinks, the third column (div with
class="col3") will wrap to the next line (i.e. not be on the same
horizontal plane as the two other divs), which is what I want.
However, when it wraps to the next line, because it is the only item
occupying the horizontal plane, I would now like it to occupy 100% of
the horizontal real estate. Is that possible with pure CSS? If so,
what additional configurations would I need to make?
Thanks, - Dave
I have a 3 column data layout ...
<html>
<head>
<style>
.container{overflow:hidden; padding:20px; border:1px solid #ccc;}
.col1, .col2, .col3{width:30%;float:left;clear:none;margin:0 10px 0
10px;}
</style>
</head>
<body>
<div class="container">
<div class="col1">...</div>
<div class="col2">...</div>
<div class="col3">...</div>
</div>
</body>
</html>
Currently, as the browser width shrinks, the third column (div with
class="col3") will wrap to the next line (i.e. not be on the same
horizontal plane as the two other divs), which is what I want.
However, when it wraps to the next line, because it is the only item
occupying the horizontal plane, I would now like it to occupy 100% of
the horizontal real estate. Is that possible with pure CSS? If so,
what additional configurations would I need to make?
Thanks, - Dave
dorayme
Apr 17, 2012, 5:01:22 PM4/17/12
to
In article
<9626885b-5e15-48d4...@f27g2000yqc.googlegroups.com>,
This suggests an HTML table is the correct tool then. But you may have
special requirements?
>
> .container{overflow:hidden; padding:20px; border:1px solid #ccc;}
> .col1, .col2, .col3{width:30%;float:left;clear:none;margin:0 10px 0
> 10px;}
shrexpand to fit its content. If its content like a sentence or
paragraph was enough to fill the width of its container, it would. But
you have given it a fixed width! If you removed the width on col3, and
had more content than would naturally fit on one line you would be in
with a chance. Try something like:
.container{overflow:hidden; padding:20px; border:1px solid #ccc;}
.col1, .col2, .col3 {float: left; margin: 0 10px 0 10px;}
.col1 {width:30%; }
.col2 {width:30%; }
<div class="container">
<div class="col1">...</div>
<div class="col2">...</div>
<div class="col3">
... ... ... ... ... ... ... ... ... ... ... ... ... ...
... ... ... ... ... ...
</div>
</div>
--
dorayme
<9626885b-5e15-48d4...@f27g2000yqc.googlegroups.com>,
This suggests an HTML table is the correct tool then. But you may have
special requirements?
>
> .container{overflow:hidden; padding:20px; border:1px solid #ccc;}
> .col1, .col2, .col3{width:30%;float:left;clear:none;margin:0 10px 0
> 10px;}
> <div class="container">
> <div class="col1">...</div>
> <div class="col2">...</div>
> <div class="col3">...</div>
> </div>
>
> <div class="col1">...</div>
> <div class="col2">...</div>
> <div class="col3">...</div>
> </div>
>
> Currently, as the browser width shrinks, the third column (div with
> class="col3") will wrap to the next line ... which is what I want.
> However, when it wraps to the next line, because it is the only item
> occupying the horizontal plane, I would now like it to occupy 100% of
> the horizontal real estate. Is that possible with pure CSS?
Once it is displayed to float, if it was not given any width, it would
> occupying the horizontal plane, I would now like it to occupy 100% of
> the horizontal real estate. Is that possible with pure CSS?
shrexpand to fit its content. If its content like a sentence or
paragraph was enough to fill the width of its container, it would. But
you have given it a fixed width! If you removed the width on col3, and
had more content than would naturally fit on one line you would be in
with a chance. Try something like:
.container{overflow:hidden; padding:20px; border:1px solid #ccc;}
.col1 {width:30%; }
.col2 {width:30%; }
<div class="container">
<div class="col1">...</div>
<div class="col2">...</div>
<div class="col3">
... ... ... ... ... ...
</div>
</div>
--
dorayme
laredotornado
Apr 17, 2012, 6:21:54 PM4/17/12
to
On Apr 17, 4:01 pm, dorayme <dora...@optusnet.com.au> wrote:
> In article
> <9626885b-5e15-48d4-bd55-ada9c16a3...@f27g2000yqc.googlegroups.com>,
Hi,
Thanks for your explanation. I didn't use the <table> element because
I read somewhere that was bad. I'll have to go back and research why
<div>s are better than tables.
However, I tried your solution above, and on Mac Firefox 11, the third
column (div) always appears on the next line, even when the browser is
expanded to 100%.
Thanks, - Dave
> In article
> <9626885b-5e15-48d4-bd55-ada9c16a3...@f27g2000yqc.googlegroups.com>,
Thanks for your explanation. I didn't use the <table> element because
I read somewhere that was bad. I'll have to go back and research why
<div>s are better than tables.
However, I tried your solution above, and on Mac Firefox 11, the third
column (div) always appears on the next line, even when the browser is
expanded to 100%.
Thanks, - Dave
dorayme
Apr 17, 2012, 7:59:40 PM4/17/12
to
In article
<5cf9c93d-3c74-42de...@x17g2000yqj.googlegroups.com>,
...
> Thanks for your explanation. I didn't use the <table> element because
> I read somewhere that was bad.
You read that it is bad to use a table for "data layout" (to use your
expression)? If you come across such reference, let me know, I have
my Mission Impossible team ready and willing to go and hunt them down!
<g>
> I'll have to go back and research why
> <div>s are better than tables.
>
It won't help you to get the behaviour you want quite, the third cell
won't wrap! But it will get you *better* behaviour imo for a data
table, the third cell on the right will not wrap but the contents
within it will (at least if it normal text) and that is just what most
folk would want.
There is a way to display three divs as table cells but I don't think
there are any advantages regarding the look and behaviour you want
over a true blue HTML table.
> However, I tried your solution above, and on Mac Firefox 11, the third
> column (div) always appears on the next line, even when the browser is
> expanded to 100%.
>
Forget about my proposed markup, it would not do what you really want
and I now realise this! In fact, it was probably what you were
complaining about in the first place.
I suggest you rethink what you want and why and I recommend a table.
If it is not a real data table or can be so justified, you can rethink
and display the container as a table and the inner DIVS as
table-cells. But first try a real HTML table and see it it suits.
--
dorayme
<5cf9c93d-3c74-42de...@x17g2000yqj.googlegroups.com>,
> Thanks for your explanation. I didn't use the <table> element because
> I read somewhere that was bad.
expression)? If you come across such reference, let me know, I have
my Mission Impossible team ready and willing to go and hunt them down!
<g>
> I'll have to go back and research why
> <div>s are better than tables.
>
won't wrap! But it will get you *better* behaviour imo for a data
table, the third cell on the right will not wrap but the contents
within it will (at least if it normal text) and that is just what most
folk would want.
There is a way to display three divs as table cells but I don't think
there are any advantages regarding the look and behaviour you want
over a true blue HTML table.
> However, I tried your solution above, and on Mac Firefox 11, the third
> column (div) always appears on the next line, even when the browser is
> expanded to 100%.
>
and I now realise this! In fact, it was probably what you were
complaining about in the first place.
I suggest you rethink what you want and why and I recommend a table.
If it is not a real data table or can be so justified, you can rethink
and display the container as a table and the inner DIVS as
table-cells. But first try a real HTML table and see it it suits.
--
dorayme
dorayme
Apr 17, 2012, 8:10:15 PM4/17/12
to
In article
<5cf9c93d-3c74-42de...@x17g2000yqj.googlegroups.com>,
laredotornado <laredo...@zipmail.com> wrote:
<5cf9c93d-3c74-42de...@x17g2000yqj.googlegroups.com>,
laredotornado <laredo...@zipmail.com> wrote:
> On Apr 17, 4:01 pm, dorayme <dora...@optusnet.com.au> wrote:
...
> Thanks for your explanation. I didn't use the <table> element because
> I read somewhere that was bad. I'll have to go back and research why
> <div>s are better than tables.
You *might* have a use for something like
> I read somewhere that was bad. I'll have to go back and research why
> <div>s are better than tables.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<style type='text/css'>
.container{overflow:hidden; border:1px solid #ccc;}
.col1, .col2, .col3 {float: left; width:30%; display: inline-block;}
.col1 { background: red;}
.col2 {background: green; }
}
</style>
</head>
<body>
<div class="container">
<div class="col1">...</div>
<div class="col2">...</div>
<div class="col3">
... ... ... ... ... ... ... ... ... ... ... ... ... ...
... ... ... ... ... ...
</div>
</div>
</body>
<div class="col1">...</div>
<div class="col2">...</div>
<div class="col3">
... ... ... ... ... ... ... ... ... ... ... ... ... ...
... ... ... ... ... ...
</div>
</div>
</html>
This gets you the third col taking up what is left of the space on the
right and allows content to flow in down. Partly what you want and
what you would get with tables.
--
dorayme
tlvp
Apr 17, 2012, 10:53:39 PM4/17/12
to
HTH. Cheers, -- tlvp
--
Avant de repondre, jeter la poubelle, SVP.
dorayme
Apr 18, 2012, 12:19:29 AM4/18/12
to
In article <1pkxt2ihroxfp.1...@40tude.net>,
very essence of a float is to not clear off to another line unless it
is forcibly pushed off because there is no room for it on the line.
No self-respecting float would boast such a property on the outside,
it would be like Clark Gable or Marilyn Monroe wearing a badge saying
they were handsome people so give me a role in movies please.
At best, a freewheeling cog that does no work in OP's situation.
--
dorayme
tlvp <mPiOsUcB...@att.net> wrote:
> On Tue, 17 Apr 2012 13:09:49 -0700 (PDT), laredotornado wrote:
>
...
> On Tue, 17 Apr 2012 13:09:49 -0700 (PDT), laredotornado wrote:
>
> > .col1, .col2, .col3{width:30%;float:left;clear:none;margin:0 10px 0
> Is it the triple invocation of "clear:none;" that's doing you in?
It does nothing in OP's situation and was never really needed. The
very essence of a float is to not clear off to another line unless it
is forcibly pushed off because there is no room for it on the line.
No self-respecting float would boast such a property on the outside,
it would be like Clark Gable or Marilyn Monroe wearing a badge saying
they were handsome people so give me a role in movies please.
At best, a freewheeling cog that does no work in OP's situation.
--
dorayme
Philip Herlihy
Apr 18, 2012, 1:32:34 PM4/18/12
to
In article <5cf9c93d-3c74-42de-92d0-d13e7eed85c2
@x17g2000yqj.googlegroups.com>, laredo...@zipmail.com says...
the nearest I've got so far:
http://rwsbs.co.uk/laredotornado.htm
I've started to think that you may be focussing on the wrong element.
Instead of thinking about how wide you want that third column to be be
(and "column" is not an appropriate description if it's wrapped onto a
line on its own) it would be helpful if we could know what elements are
supposed to go into that DIV: Text? Images? Then maybe you can get
those elements where you want them, and with an appropriate background-
colour if desired, using some other approach? Perhaps you'd publish the
full thing as it is now, and then we might get somewhere.
Expanding a little on these (half-baked) thoughts (no expert here!), if
the "third column" is made into a container for the others, and the
elements you currently have in mind to go in it are floated somehow
around the "other two columns" maybe there's a solution there. But we'd
need to know what those elements look like. I've added something like
that to my scribbles linked above.
--
Phil, London
@x17g2000yqj.googlegroups.com>, laredo...@zipmail.com says...
>
> > > Currently, as the browser width shrinks, the third column (div
with
> > > class="col3") will wrap to the next line ... which is what I want.
> > > However, when it wraps to the next line, because it is the only item
> > > occupying the horizontal plane, I would now like it to occupy 100% of
> > > the horizontal real estate. Is that possible with pure CSS?
> >
This is the sort of puzzle I've been struggling with recently. This is
> > > Currently, as the browser width shrinks, the third column (div
with
> > > class="col3") will wrap to the next line ... which is what I want.
> > > However, when it wraps to the next line, because it is the only item
> > > occupying the horizontal plane, I would now like it to occupy 100% of
> > > the horizontal real estate. Is that possible with pure CSS?
> >
the nearest I've got so far:
http://rwsbs.co.uk/laredotornado.htm
I've started to think that you may be focussing on the wrong element.
Instead of thinking about how wide you want that third column to be be
(and "column" is not an appropriate description if it's wrapped onto a
line on its own) it would be helpful if we could know what elements are
supposed to go into that DIV: Text? Images? Then maybe you can get
those elements where you want them, and with an appropriate background-
colour if desired, using some other approach? Perhaps you'd publish the
full thing as it is now, and then we might get somewhere.
Expanding a little on these (half-baked) thoughts (no expert here!), if
the "third column" is made into a container for the others, and the
elements you currently have in mind to go in it are floated somehow
around the "other two columns" maybe there's a solution there. But we'd
need to know what those elements look like. I've added something like
that to my scribbles linked above.
--
Phil, London
Gus Richter
Apr 18, 2012, 3:41:09 PM4/18/12
to
On 4/18/2012 1:32 PM, Philip Herlihy wrote:
>
> http://rwsbs.co.uk/laredotornado.htm
Almost there. Use this:
<style>
.container {
border:1px dashed #ccc;
width:100%;
margin-top: 35px;
}
.col1, .col2 {
float: left;
width:25%;
background-color:#FFC;
}
.col0 {
background-color:#EEC;
width: 100%;
}
</style>
<h2>Top two are the same, with different content length.</h2>
elit. Quisque malesuada mi a tortor commodo scelerisque. Mauris placerat
cursus massa, nec porta velit egestas non. Donec a adipiscing mauris.
Suspendisse potenti. Nulla facilisi. Maecenas feugiat quam non mi
posuere faucibus. Fusce in dui metus, facilisis dapibus elit. Proin urna
mi, luctus quis posuere eget, faucibus quis magna. Sed a est erat, eget
commodo mi. Etiam lobortis tristique porttitor. Duis vulputate, lorem
nec fermentum mollis, leo est volutpat ipsum, non elementum velit est
sed justo. Mauris rhoncus nisi ut ante aliquam tincidunt. Mauris metus
arcu, lacinia sed venenatis sed, mollis eu tellus. Sed eu dolor at odio
porttitor lacinia a adipiscing felis. Nam cursus, sem sed pellentesque
vulputate, sapien diam ullamcorper purus, eget faucibus massa justo quis
quam. Mauris dapibus iaculis ante, et imperdiet turpis mollis ac.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Maecenas sapien. </div>
</div>
elit. </div>
</div>
<h2> <s>Bottom two use an outer "col0" instead of col3</s></h2>
The extra cols container is not needed except to style the anonymous
block box.
<div class="container">
<div class="col0">
malesuada mi a tortor commodo scelerisque. Mauris placerat cursus massa,
nec porta velit egestas non. Donec a adipiscing mauris. Suspendisse
potenti. Nulla facilisi. Maecenas feugiat quam non mi posuere faucibus.
Fusce in dui metus, facilisis dapibus elit. Proin urna mi, luctus quis
posuere eget, faucibus quis magna. Sed a est erat, eget commodo mi.
Etiam lobortis tristique porttitor. Duis vulputate, lorem nec fermentum
mollis, leo est volutpat ipsum, non elementum velit est sed justo.
Mauris rhoncus nisi ut ante aliquam tincidunt. Mauris metus arcu,
lacinia sed venenatis sed, mollis eu tellus. Sed eu dolor at odio
porttitor lacinia a adipiscing felis. Nam cursus, sem sed pellentesque
vulputate, sapien diam ullamcorper purus, eget faucibus massa justo quis
quam. Mauris dapibus iaculis ante, et imperdiet turpis mollis ac.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Maecenas sapien.
</div>
</div>
<div class="container">
<div class="col0">
</div>
</div>
>
> http://rwsbs.co.uk/laredotornado.htm
Almost there. Use this:
<style>
.container {
border:1px dashed #ccc;
width:100%;
margin-top: 35px;
}
.col1, .col2 {
float: left;
width:25%;
}
.col1 {
background: red;
}
.col2 {
background: green;
}
.col3 {
.col1 {
background: red;
}
.col2 {
background: green;
}
background-color:#FFC;
}
.col0 {
background-color:#EEC;
width: 100%;
}
</style>
<h2>Top two are the same, with different content length.</h2>
<div class="container">
<div class="col1">...</div>
<div class="col2">...</div>
<div class="col3"> Lorem ipsum dolor sit amet, consectetur adipiscing
<div class="col1">...</div>
<div class="col2">...</div>
elit. Quisque malesuada mi a tortor commodo scelerisque. Mauris placerat
cursus massa, nec porta velit egestas non. Donec a adipiscing mauris.
Suspendisse potenti. Nulla facilisi. Maecenas feugiat quam non mi
posuere faucibus. Fusce in dui metus, facilisis dapibus elit. Proin urna
mi, luctus quis posuere eget, faucibus quis magna. Sed a est erat, eget
commodo mi. Etiam lobortis tristique porttitor. Duis vulputate, lorem
nec fermentum mollis, leo est volutpat ipsum, non elementum velit est
sed justo. Mauris rhoncus nisi ut ante aliquam tincidunt. Mauris metus
arcu, lacinia sed venenatis sed, mollis eu tellus. Sed eu dolor at odio
porttitor lacinia a adipiscing felis. Nam cursus, sem sed pellentesque
vulputate, sapien diam ullamcorper purus, eget faucibus massa justo quis
quam. Mauris dapibus iaculis ante, et imperdiet turpis mollis ac.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Maecenas sapien. </div>
</div>
<div class="container">
<div class="col1">...</div>
<div class="col2">...</div>
<div class="col3"> Lorem ipsum dolor sit amet, consectetur adipiscing
<div class="col1">...</div>
<div class="col2">...</div>
elit. </div>
</div>
<h2> <s>Bottom two use an outer "col0" instead of col3</s></h2>
The extra cols container is not needed except to style the anonymous
block box.
<div class="container">
<div class="col0">
<div class="col1">...</div>
<div class="col2">...</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
<div class="col2">...</div>
malesuada mi a tortor commodo scelerisque. Mauris placerat cursus massa,
nec porta velit egestas non. Donec a adipiscing mauris. Suspendisse
potenti. Nulla facilisi. Maecenas feugiat quam non mi posuere faucibus.
Fusce in dui metus, facilisis dapibus elit. Proin urna mi, luctus quis
posuere eget, faucibus quis magna. Sed a est erat, eget commodo mi.
Etiam lobortis tristique porttitor. Duis vulputate, lorem nec fermentum
mollis, leo est volutpat ipsum, non elementum velit est sed justo.
Mauris rhoncus nisi ut ante aliquam tincidunt. Mauris metus arcu,
lacinia sed venenatis sed, mollis eu tellus. Sed eu dolor at odio
porttitor lacinia a adipiscing felis. Nam cursus, sem sed pellentesque
vulputate, sapien diam ullamcorper purus, eget faucibus massa justo quis
quam. Mauris dapibus iaculis ante, et imperdiet turpis mollis ac.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Maecenas sapien.
</div>
</div>
<div class="container">
<div class="col0">
<div class="col1">...</div>
<div class="col2">...</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="col2">...</div>
</div>
</div>
laredotornado
Apr 18, 2012, 3:59:19 PM4/18/12
to
> <5cf9c93d-3c74-42de-92d0-d13e7eed8...@x17g2000yqj.googlegroups.com>,
Thanks for this solution. With this, the third column doesn't wrap,
to the next plane, but I guess this is where the HTML tables would be
of help. I hope your Mission Impossible mission succeeds!
Phil and Gus, Thanks both for your solutions. All columns will have
combinations of images and text (we are porting over textbook content
originally in a PDF). On Mac Firefox (latest), I was seeing the divs
stacked horizontally instead of 3 vertical columns (when the browser
was at 100% width) so maybe you intended this to only be for a PC or
another browser? Anyway, I'll play around with it.
- Dave
to the next plane, but I guess this is where the HTML tables would be
of help. I hope your Mission Impossible mission succeeds!
Phil and Gus, Thanks both for your solutions. All columns will have
combinations of images and text (we are porting over textbook content
originally in a PDF). On Mac Firefox (latest), I was seeing the divs
stacked horizontally instead of 3 vertical columns (when the browser
was at 100% width) so maybe you intended this to only be for a PC or
another browser? Anyway, I'll play around with it.
- Dave
laredotornado
Apr 18, 2012, 4:11:50 PM4/18/12
to
display vertically, however, I'm not able to get the third column
slide over to the next horizontal plane when the browser width gets
too small (using the stylesheet here and this code) ...
<div class="container">
<div class="col0">
<div class="col1">...</div>
<div class="col2">...</div>
</div>
</div>
What I was hoping to do was accomplish something similar to what the
Boston globe does -- http://bostonglobe.com/ , but I think there is
some dynamic stuff going on, b/c I notice the content (e.g. images)
actually change when the width gets really compressed. -
Gus Richter
Apr 18, 2012, 5:28:13 PM4/18/12
to
On 4/18/2012 4:11 PM, laredotornado wrote:
> Apologies on my previous response. The configurations Gus presents do
> display vertically, however, I'm not able to get the third column
> slide over to the next horizontal plane when the browser width gets
> too small (using the stylesheet here and this code) ...
Cut and paste everything below "Almost there. Use this:" IWFM
> Apologies on my previous response. The configurations Gus presents do
> display vertically, however, I'm not able to get the third column
> slide over to the next horizontal plane when the browser width gets
> too small (using the stylesheet here and this code) ...
> What I was hoping to do was accomplish something similar to what the
> some dynamic stuff going on, b/c I notice the content (e.g. images)
> actually change when the width gets really compressed. -
Not looking at the source code, but at the way the page reacts as I
> actually change when the width gets really compressed. -
reduce the screen size in my desktop, it changes in response to the
screen width as it would when viewed with a Tablet or a Smartphone.
--
Gus
dorayme
Apr 18, 2012, 5:52:13 PM4/18/12
to
In article <MPG.29f90afbd...@news.demon.co.uk>,
Let's concentrate on just two lines for the moment, as in the OPs
first request. There is no problem getting the appearance of some two
elements taking up two thirds of a first line and a third element
taking up the remaining third of the first line and the whole of the
second line, given a suitable leeway to the concept of appearance. If
we say that the colours represent the three different elements, then
this straightforward bit of markup solves it for *one* case:
<http://dorayme.netweaver.com.au/elements_as_colours.html>
But the appearance can be blown up and the elements revealed for the
tricksters they are by adding .col1, .col2 { ... margin-top: 10px;}.
If the problem is about getting the content of third element to take
up the whole of the next line when it wraps, the above (as in my url
without alteration) fails to do that generally. The content simply
ends before reaching the end of the next line.
If we substitute an image for the third element at least, the image
will drop if it cannot fit on the top line but it will only take up
the whole of the next line maybe only one possible viewport width.
What OP wants needs to be tightly defined, I suspect he cannot get it
under most natural interpretations.
--
dorayme
Philip Herlihy <bounc...@you.com> wrote:
> In article <5cf9c93d-3c74-42de-92d0-d13e7eed85c2
> @x17g2000yqj.googlegroups.com>, laredo...@zipmail.com says...
> >
> > > > Currently, as the browser width shrinks, the third column (div
> with
> > > > class="col3") will wrap to the next line ... which is what I want.
> > > > However, when it wraps to the next line, because it is the only item
> > > > occupying the horizontal plane, I would now like it to occupy 100% of
> > > > the horizontal real estate. Is that possible with pure CSS?
> > >
>
>
> This is the sort of puzzle I've been struggling with recently. This is
> the nearest I've got so far:
>
> http://rwsbs.co.uk/laredotornado.htm
>
> I've started to think that you may be focussing on the wrong element.
> Instead of thinking about how wide you want that third column to be be
> (and "column" is not an appropriate description if it's wrapped onto a
> line on its own) it would be helpful if we could know what elements are
> supposed to go into that DIV: Text? Images? Then maybe you can get
> those elements where you want them, and with an appropriate background-
> colour if desired, using some other approach? Perhaps you'd publish the
> full thing as it is now, and then we might get somewhere.
Hi Philip, while I have my first cup of tea of the day:
> In article <5cf9c93d-3c74-42de-92d0-d13e7eed85c2
> @x17g2000yqj.googlegroups.com>, laredo...@zipmail.com says...
> >
> > > > Currently, as the browser width shrinks, the third column (div
> with
> > > > class="col3") will wrap to the next line ... which is what I want.
> > > > However, when it wraps to the next line, because it is the only item
> > > > occupying the horizontal plane, I would now like it to occupy 100% of
> > > > the horizontal real estate. Is that possible with pure CSS?
> > >
>
>
> This is the sort of puzzle I've been struggling with recently. This is
> the nearest I've got so far:
>
> http://rwsbs.co.uk/laredotornado.htm
>
> I've started to think that you may be focussing on the wrong element.
> Instead of thinking about how wide you want that third column to be be
> (and "column" is not an appropriate description if it's wrapped onto a
> line on its own) it would be helpful if we could know what elements are
> supposed to go into that DIV: Text? Images? Then maybe you can get
> those elements where you want them, and with an appropriate background-
> colour if desired, using some other approach? Perhaps you'd publish the
> full thing as it is now, and then we might get somewhere.
Let's concentrate on just two lines for the moment, as in the OPs
first request. There is no problem getting the appearance of some two
elements taking up two thirds of a first line and a third element
taking up the remaining third of the first line and the whole of the
second line, given a suitable leeway to the concept of appearance. If
we say that the colours represent the three different elements, then
this straightforward bit of markup solves it for *one* case:
<http://dorayme.netweaver.com.au/elements_as_colours.html>
But the appearance can be blown up and the elements revealed for the
tricksters they are by adding .col1, .col2 { ... margin-top: 10px;}.
If the problem is about getting the content of third element to take
up the whole of the next line when it wraps, the above (as in my url
without alteration) fails to do that generally. The content simply
ends before reaching the end of the next line.
If we substitute an image for the third element at least, the image
will drop if it cannot fit on the top line but it will only take up
the whole of the next line maybe only one possible viewport width.
What OP wants needs to be tightly defined, I suspect he cannot get it
under most natural interpretations.
--
dorayme
dorayme
Apr 18, 2012, 6:04:49 PM4/18/12
to
In article
<879fc015-eaff-4454...@2g2000yqk.googlegroups.com>,
third class "col3" DIV itself does not wrap. Tables are very
inflexible that way, the cells don't wrap.
Once a cell is born in a table row, it is very very reluctant to
leave. In fact, there is a ward in my mental hospital - where, of
course, I live too - that actually has cells that authors tried to
wrest away from their rows, the abduction attempt is so traumatic that
it sends them crazy and well, they end up in special wards. They are
gentle things really and I often wander up to them and try to console
them "There, there", I say, "no one will *ever* take you away from
your mummy row again!"
--
dorayme
<879fc015-eaff-4454...@2g2000yqk.googlegroups.com>,
laredotornado <laredo...@zipmail.com> wrote:
> On Apr 17, 7:10 pm, dorayme <dora...@optusnet.com.au> wrote:
> > In article
> > <5cf9c93d-3c74-42de-92d0-d13e7eed8...@x17g2000yqj.googlegroups.com>,
> >
> >
> >
> > laredotornado<laredotorn...@zipmail.com> wrote:
> > > On Apr 17, 4:01 pm, dorayme <dora...@optusnet.com.au> wrote:
> > ...
...
> On Apr 17, 7:10 pm, dorayme <dora...@optusnet.com.au> wrote:
> > In article
> > <5cf9c93d-3c74-42de-92d0-d13e7eed8...@x17g2000yqj.googlegroups.com>,
> >
> >
> >
> > laredotornado<laredotorn...@zipmail.com> wrote:
> > > On Apr 17, 4:01 pm, dorayme <dora...@optusnet.com.au> wrote:
> > ...
> > You *might* have a use for something like
> >
> >
> > .container{overflow:hidden; border:1px solid #ccc;}
> > .col1, .col2, .col3 {float: left; width:30%; display: inline-block;}
> > .col1 { background: red;}
> > .col2 {background: green; }}
> >
...
> > .col1, .col2, .col3 {float: left; width:30%; display: inline-block;}
> > .col1 { background: red;}
> > .col2 {background: green; }}
> >
> > <div class="container">
> > <div class="col1">...</div>
> > <div class="col2">...</div>
> > <div class="col3">
> > ... ... ... ... ... ... ... ... ... ... ... ... ... ...
> > ... ... ... ... ... ...
> > </div>
> > </div>
> > </body>
> > </html>
> >
> > This gets you the third col taking up what is left of the space on the
> > right and allows content to flow in down. Partly what you want and
> > what you would get with tables.
> >
>
> > <div class="col1">...</div>
> > <div class="col2">...</div>
> > <div class="col3">
> > ... ... ... ... ... ... ... ... ... ... ... ... ... ...
> > ... ... ... ... ... ...
> > </div>
> > </div>
> > </body>
> > </html>
> >
> > This gets you the third col taking up what is left of the space on the
> > right and allows content to flow in down. Partly what you want and
> > what you would get with tables.
> >
>
> Thanks for this solution. With this, the third column doesn't wrap,
> to the next plane, but I guess this is where the HTML tables would be
> of help.
Not quite, the tables way will get you very similar to above where the
> to the next plane, but I guess this is where the HTML tables would be
> of help.
third class "col3" DIV itself does not wrap. Tables are very
inflexible that way, the cells don't wrap.
Once a cell is born in a table row, it is very very reluctant to
leave. In fact, there is a ward in my mental hospital - where, of
course, I live too - that actually has cells that authors tried to
wrest away from their rows, the abduction attempt is so traumatic that
it sends them crazy and well, they end up in special wards. They are
gentle things really and I often wander up to them and try to console
them "There, there", I say, "no one will *ever* take you away from
your mummy row again!"
--
dorayme
tlvp
Apr 18, 2012, 9:57:02 PM4/18/12
to
On Wed, 18 Apr 2012 09:59:40 +1000, dorayme quoted laredotornado and
responded:
>> Thanks for your explanation. I didn't use the <table> element because
>> I read somewhere that was bad.
>
> You read that it is bad to use a table for "data layout" (to use your
> expression)? If you come across such reference, let me know, I have
> my Mission Impossible team ready and willing to go and hunt them down!
> <g>
I might suggest, though, if the third DIV has length rather greater than
have the first two DIVs, to grin, bear it, and use a TABLE (aligned left)
to hold the first two DIVs (as the table's only two columns), with the
third DIV floating alongside (to the right of) and under that TABLE:
+--------,,----+
|| 1 | 2 || 3 |
|| 1 | 2 || 3 |
|| 1 | 2 || 3 |
+--------'' 3 |
| 3 3 3 |
| 3 3 3 |
| 3 3 |
+--------------+
(apologies if my ASCII art doesn't quite line up as intended).
In roughest HTML outline:
<TABLE align="left" width="70%">
<TR><TD width="50%">
DIV-one content
</TD><TD width="50%">
DIV-two content
</TD></TR></TABLE>
DIV-three content
responded:
>> Thanks for your explanation. I didn't use the <table> element because
>> I read somewhere that was bad.
>
> You read that it is bad to use a table for "data layout" (to use your
> expression)? If you come across such reference, let me know, I have
> my Mission Impossible team ready and willing to go and hunt them down!
> <g>
have the first two DIVs, to grin, bear it, and use a TABLE (aligned left)
to hold the first two DIVs (as the table's only two columns), with the
third DIV floating alongside (to the right of) and under that TABLE:
+--------,,----+
|| 1 | 2 || 3 |
|| 1 | 2 || 3 |
|| 1 | 2 || 3 |
+--------'' 3 |
| 3 3 3 |
| 3 3 3 |
| 3 3 |
+--------------+
(apologies if my ASCII art doesn't quite line up as intended).
In roughest HTML outline:
<TABLE align="left" width="70%">
<TR><TD width="50%">
DIV-one content
</TD><TD width="50%">
DIV-two content
</TD></TR></TABLE>
DIV-three content
tlvp
Apr 18, 2012, 10:04:09 PM4/18/12
to
On Wed, 18 Apr 2012 14:19:29 +1000, dorayme wrote:
> ... tlvp <mPiOsUcB...@att.net> wrote:
>
>> Is it the triple invocation of "clear:none;" that's doing you in?
>
> It does nothing in OP's situation and was never really needed.
Oh. How silly of me not to have known enough to realize that unaided.
Good thing I tend to steer clear of all such stylish invocations, then, eh?
Thanks for yet another little lesson. I'll get there yet :-) .
> ... tlvp <mPiOsUcB...@att.net> wrote:
>
>> Is it the triple invocation of "clear:none;" that's doing you in?
>
> It does nothing in OP's situation and was never really needed.
Good thing I tend to steer clear of all such stylish invocations, then, eh?
Thanks for yet another little lesson. I'll get there yet :-) .
dorayme
Apr 18, 2012, 10:15:11 PM4/18/12
to
In article <1jt6rrtjjfouy$.16dbzt8gn3nqx$.d...@40tude.net>,
about. If it is not, why would he need any table at all?
--
dorayme
tlvp <mPiOsUcB...@att.net> wrote:
> On Wed, 18 Apr 2012 09:59:40 +1000, dorayme quoted laredotornado and
> responded:
>
> >> Thanks for your explanation. I didn't use the <table> element because
> >> I read somewhere that was bad.
> >
> > You read that it is bad to use a table for "data layout" (to use your
> > expression)? If you come across such reference, let me know, I have
> > my Mission Impossible team ready and willing to go and hunt them down!
> > <g>
>
> I might suggest, though, if the third DIV has length rather greater than
> have the first two DIVs, to grin, bear it, and use a TABLE (aligned left)
> to hold the first two DIVs (as the table's only two columns), with the
> third DIV floating alongside (to the right of) and under that TABLE
If it is a data table, the best thing is to use a table and not mess
> On Wed, 18 Apr 2012 09:59:40 +1000, dorayme quoted laredotornado and
> responded:
>
> >> Thanks for your explanation. I didn't use the <table> element because
> >> I read somewhere that was bad.
> >
> > You read that it is bad to use a table for "data layout" (to use your
> > expression)? If you come across such reference, let me know, I have
> > my Mission Impossible team ready and willing to go and hunt them down!
> > <g>
>
> I might suggest, though, if the third DIV has length rather greater than
> have the first two DIVs, to grin, bear it, and use a TABLE (aligned left)
> to hold the first two DIVs (as the table's only two columns), with the
> third DIV floating alongside (to the right of) and under that TABLE
about. If it is not, why would he need any table at all?
--
dorayme
Philip Herlihy
Apr 19, 2012, 6:38:28 PM4/19/12
to
In article <dorayme-0A73D4...@news.albasani.net>,
dor...@optusnet.com.au says...
Yes - what you've shown here (especially when you add a little margin-
top on the first two Cols) is that I didn't need to transmute Col3 into
a Col0 container. Where Col1 and Col2 are float:left, it is not the DIV
Col3 which is being pushed to the right, but its contents. When the
content exceeds the width from the edge of Col2 to the edge of the
viewport Col3 expands vertically to provide room for the wrapped dots;
Col3 is full-width on both "rows", as your code, with margin-top,
demonstrates.
I'm just not that clear what the OP wants. I've looked at the Boston
Globe site, but it would be hours of work (for me) to analyse what's
going on there, even using Firebug to colour DIVs to show them up. It
would be easier (as I suggested earlier) if he published work in
progress so we could talk about specifics.
I have in the past used min-width to trigger a jump onto a lower line
when the browser is sufficiently squished, but I can't seem to get the
effect I'm looking for with this. Instead, I've tried putting the
content into a new container (.col3content) within col3, with col3
centering its child elements using text-align:center and .col3content
with display:inline-block. I wonder if this gets the OP any closer to
what he wants to achieve?
http://rwsbs.co.uk/laredotornado3.htm
--
Phil, London
dor...@optusnet.com.au says...
top on the first two Cols) is that I didn't need to transmute Col3 into
a Col0 container. Where Col1 and Col2 are float:left, it is not the DIV
Col3 which is being pushed to the right, but its contents. When the
content exceeds the width from the edge of Col2 to the edge of the
viewport Col3 expands vertically to provide room for the wrapped dots;
Col3 is full-width on both "rows", as your code, with margin-top,
demonstrates.
I'm just not that clear what the OP wants. I've looked at the Boston
Globe site, but it would be hours of work (for me) to analyse what's
going on there, even using Firebug to colour DIVs to show them up. It
would be easier (as I suggested earlier) if he published work in
progress so we could talk about specifics.
I have in the past used min-width to trigger a jump onto a lower line
when the browser is sufficiently squished, but I can't seem to get the
effect I'm looking for with this. Instead, I've tried putting the
content into a new container (.col3content) within col3, with col3
centering its child elements using text-align:center and .col3content
with display:inline-block. I wonder if this gets the OP any closer to
what he wants to achieve?
http://rwsbs.co.uk/laredotornado3.htm
--
Phil, London
Philip Herlihy
Apr 19, 2012, 6:48:09 PM4/19/12
to
In article <879fc015-eaff-4454-b915-a30904f9e031@
2g2000yqk.googlegroups.com>, laredo...@zipmail.com says...
>
...
> Phil and Gus, Thanks both for your solutions. All columns will have
> combinations of images and text (we are porting over textbook content
> originally in a PDF). On Mac Firefox (latest), I was seeing the divs
> stacked horizontally instead of 3 vertical columns (when the browser
> was at 100% width) so maybe you intended this to only be for a PC or
> another browser? Anyway, I'll play around with it.
>
I wouldn't expect FF on your Mac to look much different (if at all) than
FF on my PC, and that renders pretty much identically bar the odd pixel
to IE9, Chrome and Safari (although I've found the very latest Safari
handles some of my Javascript differently).
Here's a screenshot of Firefox displaying my latest attempt (described
in a post just made on another branch of this overall thread). Here the
browser has been squished so that the content drops to the line below.
http://screencast.com/t/rpgnIYU5
Any closer to what you want?
--
Phil, London
2g2000yqk.googlegroups.com>, laredo...@zipmail.com says...
>
...
> Phil and Gus, Thanks both for your solutions. All columns will have
> combinations of images and text (we are porting over textbook content
> originally in a PDF). On Mac Firefox (latest), I was seeing the divs
> stacked horizontally instead of 3 vertical columns (when the browser
> was at 100% width) so maybe you intended this to only be for a PC or
> another browser? Anyway, I'll play around with it.
>
FF on my PC, and that renders pretty much identically bar the odd pixel
to IE9, Chrome and Safari (although I've found the very latest Safari
handles some of my Javascript differently).
Here's a screenshot of Firefox displaying my latest attempt (described
in a post just made on another branch of this overall thread). Here the
browser has been squished so that the content drops to the line below.
http://screencast.com/t/rpgnIYU5
Any closer to what you want?
--
Phil, London
tlvp
Apr 20, 2012, 12:30:06 AM4/20/12
to
dorayme
Apr 20, 2012, 1:32:28 AM4/20/12
to
In article <10aw1m0z0msns.1n7kt5f6626vd$.d...@40tude.net>,
slow and I see no point in doing it dirty for no reason. When I hold
up banks, I am always happy to pass a note to the teller, smile and be
all polite like. If that works, I keep my gun holstered. Of course, if
it does not, well... who will stand on ceremony in such a situation
and refuse to get down and dirty and do whatever it takes?
--
dorayme
tlvp <mPiOsUcB...@att.net> wrote:
> On Thu, 19 Apr 2012 12:15:11 +1000, dorayme wrote:
>
> > In article <1jt6rrtjjfouy$.16dbzt8gn3nqx$.d...@40tude.net>,
> > tlvp <mPiOsUcB...@att.net> wrote:
> >
> >> On Wed, 18 Apr 2012 09:59:40 +1000, dorayme quoted laredotornado and
> >> responded:
> >>
> >>>> Thanks for your explanation. I didn't use the <table> element because
> >>>> I read somewhere that was bad.
> >>>
> >>> You read that it is bad to use a table for "data layout" (to use your
> >>> expression)? If you come across such reference, let me know, I have
> >>> my Mission Impossible team ready and willing to go and hunt them down!
> >>> <g>
> >>
> >> I might suggest, though, if the third DIV has length rather greater than
> >> have the first two DIVs, to grin, bear it, and use a TABLE (aligned left)
> >> to hold the first two DIVs (as the table's only two columns), with the
> >> third DIV floating alongside (to the right of) and under that TABLE
> >
> > If it is a data table, the best thing is to use a table and not mess
> > about. If it is not, why would he need any table at all?
>
> "Need"? no need. Just a quick and dirty means to get the layout job done.
Yes, I understand how you see it. To me, three divs does not appear
> On Thu, 19 Apr 2012 12:15:11 +1000, dorayme wrote:
>
> > In article <1jt6rrtjjfouy$.16dbzt8gn3nqx$.d...@40tude.net>,
> > tlvp <mPiOsUcB...@att.net> wrote:
> >
> >> On Wed, 18 Apr 2012 09:59:40 +1000, dorayme quoted laredotornado and
> >> responded:
> >>
> >>>> Thanks for your explanation. I didn't use the <table> element because
> >>>> I read somewhere that was bad.
> >>>
> >>> You read that it is bad to use a table for "data layout" (to use your
> >>> expression)? If you come across such reference, let me know, I have
> >>> my Mission Impossible team ready and willing to go and hunt them down!
> >>> <g>
> >>
> >> I might suggest, though, if the third DIV has length rather greater than
> >> have the first two DIVs, to grin, bear it, and use a TABLE (aligned left)
> >> to hold the first two DIVs (as the table's only two columns), with the
> >> third DIV floating alongside (to the right of) and under that TABLE
> >
> > If it is a data table, the best thing is to use a table and not mess
> > about. If it is not, why would he need any table at all?
>
> "Need"? no need. Just a quick and dirty means to get the layout job done.
slow and I see no point in doing it dirty for no reason. When I hold
up banks, I am always happy to pass a note to the teller, smile and be
all polite like. If that works, I keep my gun holstered. Of course, if
it does not, well... who will stand on ceremony in such a situation
and refuse to get down and dirty and do whatever it takes?
--
dorayme
dorayme
Apr 20, 2012, 4:12:01 AM4/20/12
to
In article <MPG.29faa43c5...@news.demon.co.uk>,
(Pedrick's):
1. Under Edit CSS, delete all, it is set not to operate for modern
browsers.
2. Disable javascript, it makes no difference to the feature that OP
wants, and then
3. Under Edit HTML, delete all, clear the lot, but put the very basics
in, this should save you a lot of work:
<div class="bg-col-ab">
<div class="group-alt p-less" style="background: pink;">
Column 2... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
Column 1... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
<div style="background: #cfc;">
Column 3... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
The challenge is to devise CSS and even server side scripting to be
able to duplicate this on your own server or machine offline.
--
dorayme
Philip Herlihy <bounc...@you.com> wrote:
> In article <dorayme-0A73D4...@news.albasani.net>,
> dor...@optusnet.com.au says...
> >
> > In article <MPG.29f90afbd...@news.demon.co.uk>,
> > Philip Herlihy <bounc...@you.com> wrote:
> >
...
> In article <dorayme-0A73D4...@news.albasani.net>,
> dor...@optusnet.com.au says...
> >
> > In article <MPG.29f90afbd...@news.demon.co.uk>,
> > Philip Herlihy <bounc...@you.com> wrote:
> >
> >
> > What OP wants needs to be tightly defined, I suspect he cannot get it
> > under most natural interpretations.
>
...
> > What OP wants needs to be tightly defined, I suspect he cannot get it
> > under most natural interpretations.
>
>
> I'm just not that clear what the OP wants. I've looked at the Boston
> Globe site, but it would be hours of work (for me) to analyse what's
> going on there, even using Firebug to colour DIVs to show them up. It
> would be easier (as I suggested earlier) if he published work in
> progress so we could talk about specifics.
>
If you want a challenge, use Firefox and the Web Developer tool
> I'm just not that clear what the OP wants. I've looked at the Boston
> Globe site, but it would be hours of work (for me) to analyse what's
> going on there, even using Firebug to colour DIVs to show them up. It
> would be easier (as I suggested earlier) if he published work in
> progress so we could talk about specifics.
>
(Pedrick's):
1. Under Edit CSS, delete all, it is set not to operate for modern
browsers.
2. Disable javascript, it makes no difference to the feature that OP
wants, and then
3. Under Edit HTML, delete all, clear the lot, but put the very basics
in, this should save you a lot of work:
<div class="bg-col-ab">
<div class="group-alt p-less" style="background: pink;">
Column 2... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
... ... ... ... ...
</div>
<div style="background: yellow;">
</div>
Column 1... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
... ... ... ... ...
</div>
</div>
<div class="bg-col-c">
</div>
</div>
<div style="background: #cfc;">
Column 3... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
... ... ... ... ...
</div>
</div>
And it should behave as wanted by OP.
</div>
</div>
The challenge is to devise CSS and even server side scripting to be
able to duplicate this on your own server or machine offline.
--
dorayme
Philip Herlihy
Apr 20, 2012, 10:39:26 AM4/20/12
to
In article <dorayme-F9C5A4...@news.albasani.net>,
Dorayme - I'm impressed. I hadn't tried this toolbar before
(http://chrispederick.com/work/web-developer/)
.. and it obviously warrants study (although it seems very buggy in
Chrome).
I see (line 48 of the source reaching my browser) that the stylesheets
used are selected using conditional comments, and the toolbar doesn't
seem to recognise this, so it isn't offering me a view of the
stylesheets which provide the classes you have picked out above. I'll
have to use other tools to figure out what's going on.
How did you get to this so quickly - have you been working for hours or
are you simply very smart indeed? (No need to answer that: I think we
know...)
--
Phil, London
(http://chrispederick.com/work/web-developer/)
.. and it obviously warrants study (although it seems very buggy in
Chrome).
I see (line 48 of the source reaching my browser) that the stylesheets
used are selected using conditional comments, and the toolbar doesn't
seem to recognise this, so it isn't offering me a view of the
stylesheets which provide the classes you have picked out above. I'll
have to use other tools to figure out what's going on.
How did you get to this so quickly - have you been working for hours or
are you simply very smart indeed? (No need to answer that: I think we
know...)
--
Phil, London
dorayme
Apr 20, 2012, 2:20:26 PM4/20/12
to
In article <MPG.29fb85798...@news.demon.co.uk>,
> dorayme - I'm impressed. I hadn't tried this toolbar before
> I see (line 48 of the source reaching my browser) that the stylesheets
> used are selected using conditional comments,
Don't worry about those too much, they were for IE if I recall. IE can
be given styles from within HTML commenting yes, IE can see inside the
comments if they are done in a certain way in side and, of course,
normal browsers will not see anything inside the comments (that's the
idea of comments, normally of course.)
> and the toolbar doesn't
> seem to recognise this, so it isn't offering me a view of the
> stylesheets which provide the classes you have picked out above. I'll
> have to use other tools to figure out what's going on.
>
The challenge I talk about *is* to figure out the styles, even to find
how they deliver theirs! So don't worry that it is a bit tricky. I
would not blame you for going on one of your nice forest walks
instead!
--
dorayme
> (http://chrispederick.com/work/web-developer/)
> .. and it obviously warrants study (although it seems very buggy in
> Chrome).
>
I have only used it in FF.
> .. and it obviously warrants study (although it seems very buggy in
> Chrome).
>
> I see (line 48 of the source reaching my browser) that the stylesheets
> used are selected using conditional comments,
be given styles from within HTML commenting yes, IE can see inside the
comments if they are done in a certain way in side and, of course,
normal browsers will not see anything inside the comments (that's the
idea of comments, normally of course.)
> and the toolbar doesn't
> seem to recognise this, so it isn't offering me a view of the
> stylesheets which provide the classes you have picked out above. I'll
> have to use other tools to figure out what's going on.
>
how they deliver theirs! So don't worry that it is a bit tricky. I
would not blame you for going on one of your nice forest walks
instead!
--
dorayme
Philip Herlihy
Apr 20, 2012, 9:18:08 PM4/20/12
to
In article <dorayme-04DA77...@news.albasani.net>,
The BostonGlobe site has this construct:
<link href="/css/html5reset.css,globe-globals.css,globe-
masthead.css,globe-nav.css,globe-nav-menus.css,globe-saved.css,globe-
main.css,globe-footer.css,globe-print.css" rel="stylesheet" media="only
all">
All the .css files appear to be in www.bostonglobe.com/css
Is that legal syntax? Can't find a reference to it anywhere!
--
Phil, London
<link href="/css/html5reset.css,globe-globals.css,globe-
masthead.css,globe-nav.css,globe-nav-menus.css,globe-saved.css,globe-
main.css,globe-footer.css,globe-print.css" rel="stylesheet" media="only
all">
All the .css files appear to be in www.bostonglobe.com/css
Is that legal syntax? Can't find a reference to it anywhere!
--
Phil, London
dorayme
Apr 21, 2012, 12:32:43 AM4/21/12
to
In article <MPG.29fc1b2dc...@news.demon.co.uk>,
No problem finding this style sheet, (it is written by something from
a very distant and greatly advanced civilization, would a human write
such a thing?), you need to tack it onto the Boston paper basic url.
Try this:
<http://preview.tinyurl.com/7azy697>
But I am not suggesting you really go through it, Philip.
--
dorayme
a very distant and greatly advanced civilization, would a human write
such a thing?), you need to tack it onto the Boston paper basic url.
Try this:
<http://preview.tinyurl.com/7azy697>
But I am not suggesting you really go through it, Philip.
--
dorayme
Evertjan.
Apr 21, 2012, 4:06:22 AM4/21/12
to
dorayme wrote on 21 apr 2012 in
comp.infosystems.www.authoring.stylesheets:
> <http://preview.tinyurl.com/7azy697>
>
> But I am not suggesting you really go through it, Philip.
The top rule is interesting though:
br {display:none;}
Never knew you could switch off <br>.
Now trying my upmost to find a use for that.
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
comp.infosystems.www.authoring.stylesheets:
> <http://preview.tinyurl.com/7azy697>
>
> But I am not suggesting you really go through it, Philip.
br {display:none;}
Never knew you could switch off <br>.
Now trying my upmost to find a use for that.
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Philip Herlihy
Apr 21, 2012, 1:16:45 PM4/21/12
to
In article <dorayme-D5CAB4...@news.albasani.net>,
dor...@optusnet.com.au says...
But what's with all the commas?
--
Phil, London
dor...@optusnet.com.au says...
--
Phil, London
dorayme
Apr 21, 2012, 5:09:58 PM4/21/12
to
In article <MPG.29fcfbd67...@news.demon.co.uk>,
html, body, div, span, ... {
margin:0;
....
}
Just means the styles apply to all those elements. Shorthand for
html {margin: 0; ...}
body {margin: 0; ...}
...
--
dorayme
Philip Herlihy <bounc...@you.com> wrote:
> In article <dorayme-D5CAB4...@news.albasani.net>,
> dor...@optusnet.com.au says...
> >
> > In article <MPG.29fc1b2dc...@news.demon.co.uk>,
> > Philip Herlihy <bounc...@you.com> wrote:
> >
> > > > The challenge I talk about *is* to figure out the styles, even to find
> > > > how they deliver theirs! So don't worry that it is a bit tricky. I
> > > > would not blame you for going on one of your nice forest walks
> > > > instead!
> > >
> > > The BostonGlobe site has this construct:
> > >
> > > <link href="/css/html5reset.css,globe-globals.css,globe-
> > > masthead.css,globe-nav.css,globe-nav-menus.css,globe-saved.css,globe-
> > > main.css,globe-footer.css,globe-print.css" rel="stylesheet" media="only
> > > all">
> > >
> > > All the .css files appear to be in www.bostonglobe.com/css
> > >
> > > Is that legal syntax? Can't find a reference to it anywhere!
> >
> > No problem finding this style sheet, (it is written by something from
> > a very distant and greatly advanced civilization, would a human write
> > such a thing?), you need to tack it onto the Boston paper basic url.
> > Try this:
> >
> > <http://preview.tinyurl.com/7azy697>
> >
> > But I am not suggesting you really go through it, Philip.
>
> But what's with all the commas?
You mean stuff like
> In article <dorayme-D5CAB4...@news.albasani.net>,
> dor...@optusnet.com.au says...
> >
> > In article <MPG.29fc1b2dc...@news.demon.co.uk>,
> > Philip Herlihy <bounc...@you.com> wrote:
> >
> > > > The challenge I talk about *is* to figure out the styles, even to find
> > > > how they deliver theirs! So don't worry that it is a bit tricky. I
> > > > would not blame you for going on one of your nice forest walks
> > > > instead!
> > >
> > > The BostonGlobe site has this construct:
> > >
> > > <link href="/css/html5reset.css,globe-globals.css,globe-
> > > masthead.css,globe-nav.css,globe-nav-menus.css,globe-saved.css,globe-
> > > main.css,globe-footer.css,globe-print.css" rel="stylesheet" media="only
> > > all">
> > >
> > > All the .css files appear to be in www.bostonglobe.com/css
> > >
> > > Is that legal syntax? Can't find a reference to it anywhere!
> >
> > No problem finding this style sheet, (it is written by something from
> > a very distant and greatly advanced civilization, would a human write
> > such a thing?), you need to tack it onto the Boston paper basic url.
> > Try this:
> >
> > <http://preview.tinyurl.com/7azy697>
> >
> > But I am not suggesting you really go through it, Philip.
>
> But what's with all the commas?
html, body, div, span, ... {
margin:0;
....
}
Just means the styles apply to all those elements. Shorthand for
html {margin: 0; ...}
body {margin: 0; ...}
...
--
dorayme
dorayme
Apr 21, 2012, 5:33:55 PM4/21/12
to
In article <XnsA03C66CC...@194.109.133.133>,
of text that were styled to be hovered over and to produce a popup
note right there. When CSS was off in a browser I think I used the
above 'display;none' so that the footnote, which had a <br> at the
beginning of its text, would appear on the next line. But not needed
when CSS was on.
--
dorayme
"Evertjan." <exjxw.ha...@interxnl.net> wrote:
> dorayme wrote on 21 apr 2012 in
> comp.infosystems.www.authoring.stylesheets:
>
> > <http://preview.tinyurl.com/7azy697>
> >
> > But I am not suggesting you really go through it, Philip.
>
>
> The top rule is interesting though:
>
> br {display:none;}
>
> Never knew you could switch off <br>.
>
> Now trying my upmost to find a use for that.
I think I actually used it once. For footnote numbers in the main body
> dorayme wrote on 21 apr 2012 in
> comp.infosystems.www.authoring.stylesheets:
>
> > <http://preview.tinyurl.com/7azy697>
> >
> > But I am not suggesting you really go through it, Philip.
>
>
> The top rule is interesting though:
>
> br {display:none;}
>
> Never knew you could switch off <br>.
>
> Now trying my upmost to find a use for that.
of text that were styled to be hovered over and to produce a popup
note right there. When CSS was off in a browser I think I used the
above 'display;none' so that the footnote, which had a <br> at the
beginning of its text, would appear on the next line. But not needed
when CSS was on.
--
dorayme
Philip Herlihy
Apr 21, 2012, 6:07:08 PM4/21/12
to
In article <MPG.29fcfbd67...@news.demon.co.uk>,
bounc...@you.com says...
Phew! I did want to figure out what's going on, because I know you're
good at this, and there will be something to learn.
So, I've put this up:
http://rwsbs.co.uk/laredotornado4.htm
It takes your HTML code, and loads all the CSS files which would be
delivered to a non-IE browser (mechanism: IE conditional comments). I
still have no idea why they seem to be able to string all those files
together with commas - maybe there's some server-side processing going
on which can't be detected (by me) in the code delivered to my browser.
Certainly the BG aren't lazy - they specify percentage widths to four
decimal places and they seem to have at least one line of CSS for each
reader. Maybe they asked every reader to send one in...
I've examined my composite page (above) in both Pederick's toolbar and
Firebug - the latter seems better at tracing what styles are active, but
they don't coexist very happily (surprise?). I've also studied the code
in IE9's "Developer Tools" (F12). All these are quite new to me -
picked up the idea of trying them here from you!
The yellow and pink DIVs are in a container DIV which is floated left.
The green DIV is in a container which is floated right. These two have
widths to two decimal places.
The pink DIV is set to clear:right, and to float:right within its
container, and it has a width. I'd added a little margin-top to be able
to visualise better what's going on. The yellow DIV has no float or
width. All widths are percentages.
I have to say, I don't get it. I can see the magic happen, but I can't
see what it is that is triggering the green DIV to drop below the other
two, and I can't see why clear:right is needed for the pink DIV.
Would this be the result of predicting the behaviour of calculated
widths in the browser - hence the very precise percentages?
As I've said before: CSS is no harder than Chinese, and a quarter of the
world's population are fluent in that by the time they are five years
old...
--
Phil, London
bounc...@you.com says...
good at this, and there will be something to learn.
So, I've put this up:
http://rwsbs.co.uk/laredotornado4.htm
It takes your HTML code, and loads all the CSS files which would be
delivered to a non-IE browser (mechanism: IE conditional comments). I
still have no idea why they seem to be able to string all those files
together with commas - maybe there's some server-side processing going
on which can't be detected (by me) in the code delivered to my browser.
Certainly the BG aren't lazy - they specify percentage widths to four
decimal places and they seem to have at least one line of CSS for each
reader. Maybe they asked every reader to send one in...
I've examined my composite page (above) in both Pederick's toolbar and
Firebug - the latter seems better at tracing what styles are active, but
they don't coexist very happily (surprise?). I've also studied the code
in IE9's "Developer Tools" (F12). All these are quite new to me -
picked up the idea of trying them here from you!
The yellow and pink DIVs are in a container DIV which is floated left.
The green DIV is in a container which is floated right. These two have
widths to two decimal places.
The pink DIV is set to clear:right, and to float:right within its
container, and it has a width. I'd added a little margin-top to be able
to visualise better what's going on. The yellow DIV has no float or
width. All widths are percentages.
I have to say, I don't get it. I can see the magic happen, but I can't
see what it is that is triggering the green DIV to drop below the other
two, and I can't see why clear:right is needed for the pink DIV.
Would this be the result of predicting the behaviour of calculated
widths in the browser - hence the very precise percentages?
As I've said before: CSS is no harder than Chinese, and a quarter of the
world's population are fluent in that by the time they are five years
old...
--
Phil, London
Philip Herlihy
Apr 21, 2012, 6:13:04 PM4/21/12
to
In article <dorayme-857DDD...@news.albasani.net>,
This line:
<!--[if !IE]><!--><link href="/css/html5reset.css,globe-
globals.css,globe-masthead.css,globe-nav.css,globe-nav-menus.css,globe-
saved.css,globe-main.css,globe-footer.css,globe-print.css"
rel="stylesheet" media="only all"><!--<![endif]-->
I get the conditional comments - they are simply comments to non-IE
browsers. But this, exposed between the comments?:
<link href="/css/html5reset.css,globe-globals.css,globe-
masthead.css,globe-nav.css,globe-nav-menus.css,globe-saved.css,globe-
main.css,globe-footer.css,globe-print.css" rel="stylesheet" media="only
all">
--
Phil, London
<!--[if !IE]><!--><link href="/css/html5reset.css,globe-
globals.css,globe-masthead.css,globe-nav.css,globe-nav-menus.css,globe-
saved.css,globe-main.css,globe-footer.css,globe-print.css"
rel="stylesheet" media="only all"><!--<![endif]-->
I get the conditional comments - they are simply comments to non-IE
browsers. But this, exposed between the comments?:
<link href="/css/html5reset.css,globe-globals.css,globe-
masthead.css,globe-nav.css,globe-nav-menus.css,globe-saved.css,globe-
main.css,globe-footer.css,globe-print.css" rel="stylesheet" media="only
all">
Phil, London
dorayme
Apr 21, 2012, 6:56:10 PM4/21/12
to
In article <MPG.29fd414af...@news.demon.co.uk>,
Philip Herlihy <bounc...@you.com> wrote:
> In article <dorayme-857DDD...@news.albasani.net>,
> dor...@optusnet.com.au says...
> >
...
> I get the conditional comments - they are simply comments to non-IE
> browsers. But this, exposed between the comments?:
>
> <link href="/css/html5reset.css,globe-globals.css,globe-
> masthead.css,globe-nav.css,globe-nav-menus.css,globe-saved.css,globe-
> main.css,globe-footer.css,globe-print.css" rel="stylesheet" media="only
> all">
It is, of course, at least just a URL to a big stylesheet with many
different parts intended for different functions, the name reflecting
this.
--
dorayme
Philip Herlihy <bounc...@you.com> wrote:
> In article <dorayme-857DDD...@news.albasani.net>,
> dor...@optusnet.com.au says...
> >
...
> > > > Try this:
> > > >
> > > > <http://preview.tinyurl.com/7azy697>
> > > >
> > > > But I am not suggesting you really go through it, Philip.
> > >
> > > But what's with all the commas?
> >
...
> > > >
> > > > <http://preview.tinyurl.com/7azy697>
> > > >
> > > > But I am not suggesting you really go through it, Philip.
> > >
> > > But what's with all the commas?
> >
> I get the conditional comments - they are simply comments to non-IE
> browsers. But this, exposed between the comments?:
>
> <link href="/css/html5reset.css,globe-globals.css,globe-
> masthead.css,globe-nav.css,globe-nav-menus.css,globe-saved.css,globe-
> main.css,globe-footer.css,globe-print.css" rel="stylesheet" media="only
> all">
different parts intended for different functions, the name reflecting
this.
--
dorayme
dorayme
Apr 21, 2012, 7:25:17 PM4/21/12
to
In article <MPG.29fd3fe44...@news.demon.co.uk>,
might need to check it to see it could not be done better and include
a bit more! I have noticed there are styles they use that have nothing
to latch onto in my "essentials" html, but which probably are needed
for the full effect. I will take another look when I have more time
maybe.
They use a grid systems, they are a bit of a handful to begin with,
they have their downsides in terms of flexibility too:
<http://960.gs/>
<http://www.blueprintcss.org/>
> As I've said before: CSS is no harder than Chinese, and a quarter of the
> world's population are fluent in that by the time they are five years
> old...
They use what is called CSS Frameworks, this sort of thing:
<http://en.wikipedia.org/wiki/Cascading_Style_Sheets#CSS_frameworks>
<http://www.html-advisor.com/css/what-is-css-framework/>
<http://speckyboy.com/2008/03/28/top-12-css-frameworks-and-how-to-under
stand-them/>
I would not take Boston as the best model for one's own work, look at
the top of their page and see what happens when you Zoom Text Only! A
sign? But some of the behaviour of their columns is interesting and
probably deserves attention. I wish there were more hours in every day!
--
dorayme
Philip Herlihy <bounc...@you.com> wrote:
...
> > In article <dorayme-D5CAB4...@news.albasani.net>,
> > dor...@optusnet.com.au says...
> > >
...
...
> > In article <dorayme-D5CAB4...@news.albasani.net>,
> > dor...@optusnet.com.au says...
> > >
> > > Try this:
> > >
> > > <http://preview.tinyurl.com/7azy697>
> > >
> > > But I am not suggesting you really go through it, Philip.
> >
...
> > >
> > > <http://preview.tinyurl.com/7azy697>
> > >
> > > But I am not suggesting you really go through it, Philip.
> >
> Phew! I did want to figure out what's going on, because I know you're
> good at this, and there will be something to learn.
>
> So, I've put this up:
>
> http://rwsbs.co.uk/laredotornado4.htm
>
> It takes your HTML code,
My code was a hasty grab of what I thought were the essentials. You
> good at this, and there will be something to learn.
>
> So, I've put this up:
>
> http://rwsbs.co.uk/laredotornado4.htm
>
> It takes your HTML code,
might need to check it to see it could not be done better and include
a bit more! I have noticed there are styles they use that have nothing
to latch onto in my "essentials" html, but which probably are needed
for the full effect. I will take another look when I have more time
maybe.
they have their downsides in terms of flexibility too:
<http://960.gs/>
<http://www.blueprintcss.org/>
> As I've said before: CSS is no harder than Chinese, and a quarter of the
> world's population are fluent in that by the time they are five years
> old...
<http://en.wikipedia.org/wiki/Cascading_Style_Sheets#CSS_frameworks>
<http://www.html-advisor.com/css/what-is-css-framework/>
<http://speckyboy.com/2008/03/28/top-12-css-frameworks-and-how-to-under
stand-them/>
I would not take Boston as the best model for one's own work, look at
the top of their page and see what happens when you Zoom Text Only! A
sign? But some of the behaviour of their columns is interesting and
probably deserves attention. I wish there were more hours in every day!
--
dorayme
Philip Herlihy
Apr 22, 2012, 11:40:25 AM4/22/12
to
In article <dorayme-4FE0F4...@news.albasani.net>,
dor...@optusnet.com.au says...
Bizarre. If I type that long URL into IE, it can successfully save it
as a single file. If I pick Open instead of Save, it pops up
Dreamweaver which appears to open one file for each ".css" in the URL,
and then crashes. I don't think I've seen commas in a filename before!
Meanwhile, if you assume that there is a separate file available
corresponding to each ".css" extension in the URL, and try to open them
separately, they do open.
--
Phil, London
dor...@optusnet.com.au says...
as a single file. If I pick Open instead of Save, it pops up
Dreamweaver which appears to open one file for each ".css" in the URL,
and then crashes. I don't think I've seen commas in a filename before!
Meanwhile, if you assume that there is a separate file available
corresponding to each ".css" extension in the URL, and try to open them
separately, they do open.
--
Phil, London
Philip Herlihy
Apr 23, 2012, 12:18:58 PM4/23/12
to
In article <dorayme-718759...@news.albasani.net>,
dor...@optusnet.com.au says...
There's a nice video presentation of how to use the 960 grid here:
http://net.tutsplus.com/articles/news/a-detailed-look-at-the-960-css-
framework/
=
http://bit.ly/cBKQL2
(I still don't get how this works, though:
http://rwsbs.co.uk/laredotornado4.htm )
--
Phil, London
dor...@optusnet.com.au says...
http://net.tutsplus.com/articles/news/a-detailed-look-at-the-960-css-
framework/
=
http://bit.ly/cBKQL2
(I still don't get how this works, though:
http://rwsbs.co.uk/laredotornado4.htm )
--
Phil, London
dorayme
Apr 24, 2012, 10:35:05 PM4/24/12
to
In article <MPG.29ff914b7...@news.demon.co.uk>,
OK, it is a bit tricky and it was a nice puzzle by the OP and good fun
analysing it. See if my version of its guts, the sort of thing it is
doing helps:
<http://dorayme.netweaver.com.au/boston/>
The specific behaviour is
1. To have three columns when the viewport is biggish.
2. To let the third col wrap under the first two at a certain smaller
viewport width.
3. That when the third col does wrap, it stretches to the full width
of the viewport.
4. That at a certain narrower setting still of the viewport, that even
the second column should wrap.
5. And that when all three cols are wrapped one under the other (not
that they then appear as "columns"), they all stretch to full width.
Interesting behaviour!
If you look at the CSS, you will see that limits are set on widths
using some CSS3. See
<http://www.w3.org/TR/css3-mediaqueries/>
or Google for friendlier tutes on this.
--
dorayme
Philip Herlihy <bounc...@you.com> wrote:
> In article <dorayme-718759...@news.albasani.net>,
> dor...@optusnet.com.au says...
> >
> > In article <MPG.29fd3fe44...@news.demon.co.uk>,
> > Philip Herlihy <bounc...@you.com> wrote:
> >
> > ...
...
> In article <dorayme-718759...@news.albasani.net>,
> dor...@optusnet.com.au says...
> >
> > In article <MPG.29fd3fe44...@news.demon.co.uk>,
> > Philip Herlihy <bounc...@you.com> wrote:
> >
> > ...
OK, it is a bit tricky and it was a nice puzzle by the OP and good fun
analysing it. See if my version of its guts, the sort of thing it is
doing helps:
<http://dorayme.netweaver.com.au/boston/>
The specific behaviour is
1. To have three columns when the viewport is biggish.
2. To let the third col wrap under the first two at a certain smaller
viewport width.
3. That when the third col does wrap, it stretches to the full width
of the viewport.
4. That at a certain narrower setting still of the viewport, that even
the second column should wrap.
5. And that when all three cols are wrapped one under the other (not
that they then appear as "columns"), they all stretch to full width.
Interesting behaviour!
If you look at the CSS, you will see that limits are set on widths
using some CSS3. See
<http://www.w3.org/TR/css3-mediaqueries/>
or Google for friendlier tutes on this.
--
dorayme
Philip Herlihy
Apr 25, 2012, 12:19:10 PM4/25/12
to
In article <dorayme-04441B...@news.albasani.net>,
Got it! Thank you so much for this - I'd been rather daunted by my
failure to understand what was going on. The w3.org description made
perfect sense (apart from the finer points of the 'Syntax' section) and
your example was a revelation. (You have a class .group which doesn't
seem to be used?).
I can see how useful media-queries can be, although I'm a bit fearful of
the potentially vast increase in complexity.
I've not looked into CSS3 until this point (CSS2.1 is enough of a
stretch), although I'd wondered how I might frame a question about it
here without appearing too much of a chump. The key question is - what
is the browser support? I'm already only really considering the needs
of IE7 and above - is it safe to use CSS3? Just how many
browsers/versions should we be testing against?
--
Phil, London
failure to understand what was going on. The w3.org description made
perfect sense (apart from the finer points of the 'Syntax' section) and
your example was a revelation. (You have a class .group which doesn't
seem to be used?).
I can see how useful media-queries can be, although I'm a bit fearful of
the potentially vast increase in complexity.
I've not looked into CSS3 until this point (CSS2.1 is enough of a
stretch), although I'd wondered how I might frame a question about it
here without appearing too much of a chump. The key question is - what
is the browser support? I'm already only really considering the needs
of IE7 and above - is it safe to use CSS3? Just how many
browsers/versions should we be testing against?
--
Phil, London
Gus Richter
Apr 25, 2012, 2:39:35 PM4/25/12
to
On 4/25/2012 12:19 PM, Philip Herlihy wrote:
> I've not looked into CSS3 until this point (CSS2.1 is enough of a
> stretch), although I'd wondered how I might frame a question about it
> here without appearing too much of a chump. The key question is - what
> is the browser support? I'm already only really considering the needs
> of IE7 and above - is it safe to use CSS3? Just how many
> browsers/versions should we be testing against?
<http://caniuse.com/>
> I've not looked into CSS3 until this point (CSS2.1 is enough of a
> stretch), although I'd wondered how I might frame a question about it
> here without appearing too much of a chump. The key question is - what
> is the browser support? I'm already only really considering the needs
> of IE7 and above - is it safe to use CSS3? Just how many
> browsers/versions should we be testing against?
--
Gus
Philip Herlihy
Apr 25, 2012, 2:53:37 PM4/25/12
to
In article <jn9gd9$pqg$1...@dont-email.me>, gusri...@netscape.net says...
Perfect - thanks!
--
Phil, London
--
Phil, London
dorayme
Apr 25, 2012, 6:21:05 PM4/25/12
to
In article <MPG.2a02343d1...@news.demon.co.uk>,
> > sort of thing it is ...:
> >
> > <http://dorayme.netweaver.com.au/boston/>
> >
...
Marple or Poirot with that Boston site.
> I can see how useful media-queries can be, although I'm a bit fearful of
> the potentially vast increase in complexity.
>
> I've not looked into CSS3 until this point (CSS2.1 is enough of a
> stretch), although I'd wondered how I might frame a question about it
> here without appearing too much of a chump. The key question is - what
> is the browser support? I'm already only really considering the needs
> of IE7 and above - is it safe to use CSS3? Just how many
> browsers/versions should we be testing against?
There are a few facilities,
<http://css3test.com/>
Read along with it:
<http://www.css3.info/introducing-the-css3-test/>
My Safari, for example, overall gets a score of 52%. It does better in
specific categories like Selectors (98% whoa!), 85% for Media Queries,
it is perfect on colour, pathetic on Values and Units and totally
hopeless on speech! My FF gets same overall score.
What we might best do is get a sense of what particular things in CSS3
most modern browsers do good in and try to ensure that in the event of
lack of support, things don't get too mucked things up, degrades
nicely; the less the general support among browsers, the more ensuring
needed. In some ways, this is good practice, even used with CSS 2.
--
dorayme
Philip Herlihy <bounc...@you.com> wrote:
> In article <dorayme-04441B...@news.albasani.net>,
> dor...@optusnet.com.au says...
> >
> > In article <MPG.29ff914b7...@news.demon.co.uk>,
> > Philip Herlihy <bounc...@you.com> wrote:
> >
> > > In article <dorayme-718759...@news.albasani.net>,
> > > dor...@optusnet.com.au says...
> > > >
> > > > In article <MPG.29fd3fe44...@news.demon.co.uk>,
> > > > Philip Herlihy <bounc...@you.com> wrote:
> > > >
> > > > ...
> > ...
> > >
> > > (I still don't get how this works, though:
> > > http://rwsbs.co.uk/laredotornado4.htm )
> >
> > OK, it is a bit tricky and it was a nice puzzle by the OP...
> In article <dorayme-04441B...@news.albasani.net>,
> dor...@optusnet.com.au says...
> >
> > In article <MPG.29ff914b7...@news.demon.co.uk>,
> > Philip Herlihy <bounc...@you.com> wrote:
> >
> > > In article <dorayme-718759...@news.albasani.net>,
> > > dor...@optusnet.com.au says...
> > > >
> > > > In article <MPG.29fd3fe44...@news.demon.co.uk>,
> > > > Philip Herlihy <bounc...@you.com> wrote:
> > > >
> > > > ...
> > ...
> > >
> > > (I still don't get how this works, though:
> > > http://rwsbs.co.uk/laredotornado4.htm )
> >
> > sort of thing it is ...:
> >
> > <http://dorayme.netweaver.com.au/boston/>
> >
...
> >
> > Interesting behaviour!
> >
> > If you look at the CSS, you will see that limits are set on widths
> > using some CSS3. See
> >
> > <http://www.w3.org/TR/css3-mediaqueries/>
> >
> > or Google for friendlier tutes on this.
>
> Got it! Thank you so much for this - I'd been rather daunted by my
> failure to understand what was going on. The w3.org description made
> perfect sense (apart from the finer points of the 'Syntax' section) and
> your example was a revelation. (You have a class .group which doesn't
> seem to be used?).
>
Yes, thanks, a left-over, now removed, from trying to make out like
> > Interesting behaviour!
> >
> > If you look at the CSS, you will see that limits are set on widths
> > using some CSS3. See
> >
> > <http://www.w3.org/TR/css3-mediaqueries/>
> >
> > or Google for friendlier tutes on this.
>
> Got it! Thank you so much for this - I'd been rather daunted by my
> failure to understand what was going on. The w3.org description made
> perfect sense (apart from the finer points of the 'Syntax' section) and
> your example was a revelation. (You have a class .group which doesn't
> seem to be used?).
>
Marple or Poirot with that Boston site.
> I can see how useful media-queries can be, although I'm a bit fearful of
> the potentially vast increase in complexity.
>
> I've not looked into CSS3 until this point (CSS2.1 is enough of a
> stretch), although I'd wondered how I might frame a question about it
> here without appearing too much of a chump. The key question is - what
> is the browser support? I'm already only really considering the needs
> of IE7 and above - is it safe to use CSS3? Just how many
> browsers/versions should we be testing against?
<http://css3test.com/>
Read along with it:
<http://www.css3.info/introducing-the-css3-test/>
My Safari, for example, overall gets a score of 52%. It does better in
specific categories like Selectors (98% whoa!), 85% for Media Queries,
it is perfect on colour, pathetic on Values and Units and totally
hopeless on speech! My FF gets same overall score.
What we might best do is get a sense of what particular things in CSS3
most modern browsers do good in and try to ensure that in the event of
lack of support, things don't get too mucked things up, degrades
nicely; the less the general support among browsers, the more ensuring
needed. In some ways, this is good practice, even used with CSS 2.
--
dorayme
Philip Herlihy
Apr 25, 2012, 8:13:30 PM4/25/12
to
In article <dorayme-8CFFE8...@news.albasani.net>,
Checked out and bookmarked. I've also bought a book:
http://amzn.to/IERxca
(to add to the pile of stuff I don't have time to read, and just fret
over).
Just when I thought browsers were converging on a set of standards, off
we go again, with IE7 and IE8 dragging behind. IE9 only gets 33% on
CSSTest.com, and there will be loads of XP machines for years which
can't move beyond IE8.
However, as you suggest, there are some neat facilities (and media
testing is one of them) which really shouldn't wait, as the devices that
need this approach probably have compliant browsers. The job is to
learn how to layer CSS so that every browser out there in any numbers
gets something suitable.
I've learned a lot since I found this newsgroup, and a goodly proportion
of it has been from you. Thanks!
--
Phil, London
http://amzn.to/IERxca
(to add to the pile of stuff I don't have time to read, and just fret
over).
Just when I thought browsers were converging on a set of standards, off
we go again, with IE7 and IE8 dragging behind. IE9 only gets 33% on
CSSTest.com, and there will be loads of XP machines for years which
can't move beyond IE8.
However, as you suggest, there are some neat facilities (and media
testing is one of them) which really shouldn't wait, as the devices that
need this approach probably have compliant browsers. The job is to
learn how to layer CSS so that every browser out there in any numbers
gets something suitable.
I've learned a lot since I found this newsgroup, and a goodly proportion
of it has been from you. Thanks!
--
Phil, London
tlvp
Apr 26, 2012, 2:18:58 AM4/26/12
to
On Wed, 25 Apr 2012 17:19:10 +0100, Philip Herlihy wrote:
> ... I'd wondered how I might frame a question about it
> here without appearing too much of a chump. ...
I never expected to have occasion to repeat it here, but, as I used to
tell my more bashful students years ago, "The only way you'll appear a
chump in my eyes is if you *refrain* from framing a question for fear of
'appearing too much of a chump.' " :-) .
HTH. Cheers, -- tlvp
> ... I'd wondered how I might frame a question about it
> here without appearing too much of a chump. ...
I never expected to have occasion to repeat it here, but, as I used to
tell my more bashful students years ago, "The only way you'll appear a
chump in my eyes is if you *refrain* from framing a question for fear of
'appearing too much of a chump.' " :-) .
HTH. Cheers, -- tlvp
David Stone
Apr 26, 2012, 10:08:09 AM4/26/12
to
In article <kwy95xnw9n8g.k...@40tude.net>,
"chump" (except for the odd one or two who came here later in life).
I'll just have to figure out what the Canadian for "chump" is.
Unfortunately, Google translate doesn't seem to handle Canadian...
tlvp <mPiOsUcB...@att.net> wrote:
> On Wed, 25 Apr 2012 17:19:10 +0100, Philip Herlihy wrote:
>
> > ... I'd wondered how I might frame a question about it
> > here without appearing too much of a chump. ...
>
> I never expected to have occasion to repeat it here, but, as I used to
> tell my more bashful students years ago, "The only way you'll appear a
> chump in my eyes is if you *refrain* from framing a question for fear of
> 'appearing too much of a chump.' " :-) .
I like that! Of course, my students here wouldn't understand the word
> On Wed, 25 Apr 2012 17:19:10 +0100, Philip Herlihy wrote:
>
> > ... I'd wondered how I might frame a question about it
> > here without appearing too much of a chump. ...
>
> I never expected to have occasion to repeat it here, but, as I used to
> tell my more bashful students years ago, "The only way you'll appear a
> chump in my eyes is if you *refrain* from framing a question for fear of
> 'appearing too much of a chump.' " :-) .
"chump" (except for the odd one or two who came here later in life).
I'll just have to figure out what the Canadian for "chump" is.
Unfortunately, Google translate doesn't seem to handle Canadian...
dorayme
Apr 26, 2012, 6:01:43 PM4/26/12
to
In article
<no.email-D3470D...@news.eternal-september.org>,
David Stone <no.e...@domain.invalid> wrote:
>
> ... my students here wouldn't understand the word
word. There are any number that would get the message across. For
international purposes, "fool" should do. In Australia, "twit" or
"twat" is good. In the Australian army, "dick-head" is good. In
American film educated audiences, "loser" should do the trick. I like
"schmuck". There is no end to derogation in the English language.
--
dorayme
<no.email-D3470D...@news.eternal-september.org>,
David Stone <no.e...@domain.invalid> wrote:
>
> ... my students here wouldn't understand the word
> "chump" (except for the odd one or two who came here later in life).
> I'll just have to figure out what the Canadian for "chump" is.
The concept involved is bigger than the literal meaning of any one
> I'll just have to figure out what the Canadian for "chump" is.
word. There are any number that would get the message across. For
international purposes, "fool" should do. In Australia, "twit" or
"twat" is good. In the Australian army, "dick-head" is good. In
American film educated audiences, "loser" should do the trick. I like
"schmuck". There is no end to derogation in the English language.
--
dorayme
tlvp
Apr 26, 2012, 8:23:13 PM4/26/12
to
contemptible lack of ability -- idiot, nincompoop, failure, retard, ... .
Or try a word from the verbal arsenals of David or dorayme.
[Or is the problem that your students are all Francophone? If so, try
"(un[e]) retardé[e]".]
Molly Mockford
Apr 27, 2012, 4:09:20 AM4/27/12
to
At 08:01:43 on Fri, 27 Apr 2012, dorayme <dor...@optusnet.com.au> wrote
in <dorayme-91FF83...@news.albasani.net>:
>In article
><no.email-D3470D...@news.eternal-september.org>,
> David Stone <no.e...@domain.invalid> wrote:
>
>> ... my students here wouldn't understand the word
>> "chump" (except for the odd one or two who came here later in life).
>> I'll just have to figure out what the Canadian for "chump" is.
>
>The concept involved is bigger than the literal meaning of any one
>word. There are any number that would get the message across. For
>international purposes, "fool" should do. In Australia, "twit" or
>"twat" is good.
Do not, however, use "twat" in the UK (although "twit" is fine). Despite
Robert Browning's mistaken belief that it meant a nun's wimple, it is in
fact one of the myriad of words which refer to the female genitalia.
<http://en.wikipedia.org/wiki/Pippa_Passes#.22A_distressing_blunder.22>
--
Molly Mockford
Nature loves variety. Unfortunately, society hates it. (Milton Diamond Ph.D.)
(My Reply-To address *is* valid, though may not remain so for ever.)
in <dorayme-91FF83...@news.albasani.net>:
>In article
><no.email-D3470D...@news.eternal-september.org>,
> David Stone <no.e...@domain.invalid> wrote:
>
>> ... my students here wouldn't understand the word
>> "chump" (except for the odd one or two who came here later in life).
>> I'll just have to figure out what the Canadian for "chump" is.
>
>The concept involved is bigger than the literal meaning of any one
>word. There are any number that would get the message across. For
>international purposes, "fool" should do. In Australia, "twit" or
>"twat" is good.
Robert Browning's mistaken belief that it meant a nun's wimple, it is in
fact one of the myriad of words which refer to the female genitalia.
<http://en.wikipedia.org/wiki/Pippa_Passes#.22A_distressing_blunder.22>
--
Molly Mockford
Nature loves variety. Unfortunately, society hates it. (Milton Diamond Ph.D.)
(My Reply-To address *is* valid, though may not remain so for ever.)
Philip Herlihy
Apr 27, 2012, 8:39:53 AM4/27/12
to
In article <dorayme-91FF83...@news.albasani.net>,
dor...@optusnet.com.au says...
In the part of the West Country where I grew up, "Lummox" would be the
word...
--
Phil, London
dor...@optusnet.com.au says...
word...
--
Phil, London
David Stone
Apr 27, 2012, 8:42:51 AM4/27/12
to
In article <k+JQXM1w...@molly.mockford>,
Actually, I am from the UK but migrated to Canada *mumble* years ago.
I'm still not sure what the Canadian (idiom?) for "chump" is, though.
"Leafs fan", perhaps?
Molly Mockford <nospam...@mollymockford.me.uk> wrote:
> At 08:01:43 on Fri, 27 Apr 2012, dorayme <dor...@optusnet.com.au> wrote
> in <dorayme-91FF83...@news.albasani.net>:
>
> >In article
> ><no.email-D3470D...@news.eternal-september.org>,
> > David Stone <no.e...@domain.invalid> wrote:
> >
> >> ... my students here wouldn't understand the word
> >> "chump" (except for the odd one or two who came here later in life).
> >> I'll just have to figure out what the Canadian for "chump" is.
> >
> >The concept involved is bigger than the literal meaning of any one
> >word. There are any number that would get the message across. For
> >international purposes, "fool" should do. In Australia, "twit" or
> >"twat" is good.
>
> Do not, however, use "twat" in the UK (although "twit" is fine). Despite
> Robert Browning's mistaken belief that it meant a nun's wimple, it is in
> fact one of the myriad of words which refer to the female genitalia.
> <http://en.wikipedia.org/wiki/Pippa_Passes#.22A_distressing_blunder.22>
I am aware of twat!
> At 08:01:43 on Fri, 27 Apr 2012, dorayme <dor...@optusnet.com.au> wrote
> in <dorayme-91FF83...@news.albasani.net>:
>
> >In article
> ><no.email-D3470D...@news.eternal-september.org>,
> > David Stone <no.e...@domain.invalid> wrote:
> >
> >> ... my students here wouldn't understand the word
> >> "chump" (except for the odd one or two who came here later in life).
> >> I'll just have to figure out what the Canadian for "chump" is.
> >
> >The concept involved is bigger than the literal meaning of any one
> >word. There are any number that would get the message across. For
> >international purposes, "fool" should do. In Australia, "twit" or
> >"twat" is good.
>
> Do not, however, use "twat" in the UK (although "twit" is fine). Despite
> Robert Browning's mistaken belief that it meant a nun's wimple, it is in
> fact one of the myriad of words which refer to the female genitalia.
> <http://en.wikipedia.org/wiki/Pippa_Passes#.22A_distressing_blunder.22>
Actually, I am from the UK but migrated to Canada *mumble* years ago.
I'm still not sure what the Canadian (idiom?) for "chump" is, though.
"Leafs fan", perhaps?
Jonathan N. Little
Apr 27, 2012, 8:46:16 AM4/27/12
to
David Stone wrote:
> I'm still not sure what the Canadian (idiom?) for "chump" is, though.
> "Leafs fan", perhaps?
I think the same as in the USA,
> I'm still not sure what the Canadian (idiom?) for "chump" is, though.
> "Leafs fan", perhaps?
<http://dictionary.reference.com/browse/chump>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
David Stone
Apr 27, 2012, 9:30:14 AM4/27/12
to
In article <jne4en$fn3$1...@dont-email.me>,
I've never heard anyone who was not from the UK, or had at least one
British parent, use the word "chump", at least in Toronto!
"Leafs fan", however..
"Jonathan N. Little" <lws...@gmail.com> wrote:
> David Stone wrote:
> > I'm still not sure what the Canadian (idiom?) for "chump" is, though.
> > "Leafs fan", perhaps?
>
> I think the same as in the USA,
>
> <http://dictionary.reference.com/browse/chump>
Surprising.
> David Stone wrote:
> > I'm still not sure what the Canadian (idiom?) for "chump" is, though.
> > "Leafs fan", perhaps?
>
> I think the same as in the USA,
>
> <http://dictionary.reference.com/browse/chump>
I've never heard anyone who was not from the UK, or had at least one
British parent, use the word "chump", at least in Toronto!
"Leafs fan", however..
dorayme
Apr 27, 2012, 9:41:47 PM4/27/12
to
In article <MPG.2a04a3f12...@news.demon.co.uk>,
mm, interesting, new one to me.
I note an entry in one thesaurus for "fool":
Synonyms:
ass, birdbrain, blockhead, bonehead, boob*, bore, buffoon, clod,
clown, cretin*, dimwit, dolt*, dope*, dumb ox, dunce, dunderhead, easy
mark, fair game, fathead, goose, halfwit, idiot, ignoramus,
illiterate, imbecile, innocent, jerk*, lamebrain, lightweight, loon,
moron, nerd*, nincompoop, ninny, nitwit, numskull, oaf, sap*,
schlemiel, silly, simpleton, stooge, sucker, turkey, twerp, twit,
victim
with a cute footnote for the asterisked ones: "= informal/non-formal
usage"
As if the others (birdbrain!) are so formal already!
Anyway, in the context of tlvp's saying to his students, few of the
above would be appropriate. "jerk" for example is wrong, "goose" is
OK; the former implies moral fault, the latter assumes an appropriate
innocence.
--
dorayme
I note an entry in one thesaurus for "fool":
Synonyms:
ass, birdbrain, blockhead, bonehead, boob*, bore, buffoon, clod,
clown, cretin*, dimwit, dolt*, dope*, dumb ox, dunce, dunderhead, easy
mark, fair game, fathead, goose, halfwit, idiot, ignoramus,
illiterate, imbecile, innocent, jerk*, lamebrain, lightweight, loon,
moron, nerd*, nincompoop, ninny, nitwit, numskull, oaf, sap*,
schlemiel, silly, simpleton, stooge, sucker, turkey, twerp, twit,
victim
with a cute footnote for the asterisked ones: "= informal/non-formal
usage"
As if the others (birdbrain!) are so formal already!
Anyway, in the context of tlvp's saying to his students, few of the
above would be appropriate. "jerk" for example is wrong, "goose" is
OK; the former implies moral fault, the latter assumes an appropriate
innocence.
--
dorayme
tlvp
Apr 28, 2012, 12:48:04 AM4/28/12
to
On Fri, 27 Apr 2012 08:42:51 -0400, David Stone wrote:
> I'm still not sure what the Canadian (idiom?) for "chump" is, though.
> "Leafs fan", perhaps?
"Newfy" (or should that be "Newfie"?), perhaps? Cheers, -- tlvp
> I'm still not sure what the Canadian (idiom?) for "chump" is, though.
> "Leafs fan", perhaps?
tlvp
Apr 28, 2012, 12:53:44 AM4/28/12
to
On Sat, 28 Apr 2012 11:41:47 +1000, dorayme quoted and/or wrote:
>>> > ... my students here wouldn't understand the word
>>> > "chump" (except for the odd one or two who came here later in life).
>>> > I'll just have to figure out what the Canadian for "chump" is.
>>>
>>> > ... my students here wouldn't understand the word
>>> > "chump" (except for the odd one or two who came here later in life).
>>> > I'll just have to figure out what the Canadian for "chump" is.
>>>
>> In the part of the West Country where I grew up, "Lummox" would be the
>> word...
>
> mm, interesting, new one to me.
In NYC while I was growing up, a lummox (more often a "dumb lummox") was
>> word...
>
> mm, interesting, new one to me.
someone with "more brawn than brain". Cheers, -- tlvp
tlvp
Apr 28, 2012, 7:00:16 PM4/28/12
to
On Sat, 28 Apr 2012 00:48:04 -0400, tlvp wrote:
> On Fri, 27 Apr 2012 08:42:51 -0400, David Stone wrote:
>
>> I'm still not sure what the Canadian (idiom?) for "chump" is, though.
>> "Leafs fan", perhaps?
>
> "Newfy" (or should that be "Newfie"?), perhaps? Cheers, -- tlvp
Or maybe "doofus" (as in "Don't be such a doofus, Rufus!").
> On Fri, 27 Apr 2012 08:42:51 -0400, David Stone wrote:
>
>> I'm still not sure what the Canadian (idiom?) for "chump" is, though.
>> "Leafs fan", perhaps?
>
> "Newfy" (or should that be "Newfie"?), perhaps? Cheers, -- tlvp
--
Avant de repondre, jeter la poubelle, SVP. -- tlvp
0 new messages