Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
More head-scratching over floats
0 views
Skip to first unread message
Philip Herlihy
Feb 6, 2012, 10:01:59 AM2/6/12
to
I've been trying to apply what I learned from good folk here over this
site:
http://bit.ly/yfRgOQ
.. to a new one for a local business. This is work in progress:
http://bit.ly/xFjmQE
Each of the six panels is to show an image from a project linking to a
page with more details. (The incomplete "Recent" page will do the same,
only with rather more panels.)
I want to keep the layout symmetrical about the centre as far as
possible, but when I narrow the browser window so that only one column
will fit it falls to the left of the window, looking rather unbalanced.
It may be that this is an inevitable consequence of using a float: left,
which othewise serves me very well, but if anyone can see a simple way
of having this column centre itself, and indeed to have any incomplete
rows centre themselves, I'd be truly grateful once again.
I did try putting pairs of panels in their own container, which seems to
offer a better solution for incomplete rows, but still leaves a single
column over on the left when squished. You can see the results here:
http://bit.ly/zmppuC
I suspect I need a day or two off wrestling with this - after a while it
all becomes a blur!
--
Phil, London
site:
http://bit.ly/yfRgOQ
.. to a new one for a local business. This is work in progress:
http://bit.ly/xFjmQE
Each of the six panels is to show an image from a project linking to a
page with more details. (The incomplete "Recent" page will do the same,
only with rather more panels.)
I want to keep the layout symmetrical about the centre as far as
possible, but when I narrow the browser window so that only one column
will fit it falls to the left of the window, looking rather unbalanced.
It may be that this is an inevitable consequence of using a float: left,
which othewise serves me very well, but if anyone can see a simple way
of having this column centre itself, and indeed to have any incomplete
rows centre themselves, I'd be truly grateful once again.
I did try putting pairs of panels in their own container, which seems to
offer a better solution for incomplete rows, but still leaves a single
column over on the left when squished. You can see the results here:
http://bit.ly/zmppuC
I suspect I need a day or two off wrestling with this - after a while it
all becomes a blur!
--
Phil, London
dorayme
Feb 6, 2012, 3:45:53 PM2/6/12
to
In article <MPG.2999fbbbf...@news.demon.co.uk>,
Take a look at the technique in
<http://dorayme.netweaver.com.au/thumbnailGalleryWithShortCaptions/thum
bLandscapeGallery7.html>
<http://tinyurl.com/73x67qr> if this is easier.
If I have not included the above sort of thing in
<http://netweaver.com.au/centring/>
(which might be informative to you)
I should get around to it!
--
dorayme
Philip Herlihy <bounc...@you.com> wrote:
> I've been trying to apply what I learned from good folk here over this
> site:
> http://bit.ly/yfRgOQ
> .. to a new one for a local business. This is work in progress:
> http://bit.ly/xFjmQE
> I've been trying to apply what I learned from good folk here over this
> site:
> http://bit.ly/yfRgOQ
> .. to a new one for a local business. This is work in progress:
> http://bit.ly/xFjmQE
> I want to keep the layout symmetrical about the centre as far as
> possible, but when I narrow the browser window so that only one column
> will fit it falls to the left of the window, looking rather unbalanced.
> It may be that this is an inevitable consequence of using a float: left,
> which othewise serves me very well, but if anyone can see a simple way
> of having this column centre itself, and indeed to have any incomplete
> rows centre themselves, I'd be truly grateful once again.
>
...
> possible, but when I narrow the browser window so that only one column
> will fit it falls to the left of the window, looking rather unbalanced.
> It may be that this is an inevitable consequence of using a float: left,
> which othewise serves me very well, but if anyone can see a simple way
> of having this column centre itself, and indeed to have any incomplete
> rows centre themselves, I'd be truly grateful once again.
>
Take a look at the technique in
<http://dorayme.netweaver.com.au/thumbnailGalleryWithShortCaptions/thum
bLandscapeGallery7.html>
<http://tinyurl.com/73x67qr> if this is easier.
If I have not included the above sort of thing in
<http://netweaver.com.au/centring/>
(which might be informative to you)
I should get around to it!
--
dorayme
Ben C
Feb 14, 2012, 3:18:25 AM2/14/12
to
On 2012-02-06, Philip Herlihy <bounc...@you.com> wrote:
> I've been trying to apply what I learned from good folk here over this
> site:
> http://bit.ly/yfRgOQ
> .. to a new one for a local business. This is work in progress:
> http://bit.ly/xFjmQE
> Each of the six panels is to show an image from a project linking to a
> page with more details. (The incomplete "Recent" page will do the same,
> only with rather more panels.)
>
> I want to keep the layout symmetrical about the centre as far as
> possible, but when I narrow the browser window so that only one column
> will fit it falls to the left of the window, looking rather unbalanced.
> It may be that this is an inevitable consequence of using a float: left,
Yes, exactly.
> I've been trying to apply what I learned from good folk here over this
> site:
> http://bit.ly/yfRgOQ
> .. to a new one for a local business. This is work in progress:
> http://bit.ly/xFjmQE
> Each of the six panels is to show an image from a project linking to a
> page with more details. (The incomplete "Recent" page will do the same,
> only with rather more panels.)
>
> I want to keep the layout symmetrical about the centre as far as
> possible, but when I narrow the browser window so that only one column
> will fit it falls to the left of the window, looking rather unbalanced.
> It may be that this is an inevitable consequence of using a float: left,
> which othewise serves me very well, but if anyone can see a simple way
> of having this column centre itself, and indeed to have any incomplete
> rows centre themselves, I'd be truly grateful once again.
and then put text-align: center on the container they're all in.
Inline-blocks are inline on the outside and block on the inside; which
is to say that they are arranged in their container as though they were
words of text, but their own contents are laid out inside them like
paragraphs.
If they're just images you can make them either display: inline or
display: inline-block. They mean exactly the same for "replaced
elements" (like images) since the "insides" of replaced elements are
out of the reach of the normal rules anyway.
Philip Herlihy
Feb 17, 2012, 6:18:57 PM2/17/12
to
In article <dorayme-216F3B...@news.albasani.net>,
dor...@optusnet.com.au says...
Thanks, Dorayme - I studied your centring pages carefully, and learned a
lot. I decided not to use JavaScript: of all the coding languages I've
had to deal with over the last 30 years it's one of the ones I find it
hardest to read and write fluently, and it represents an additional
layer of complexity that I'd like to do without.
I've battled with this site for innumerable hours, and finally have
something which I think looks ok. I still have to complete the
'detail' pages for the individual projects, but that should be
relatively easy. The site is:
http://www.focal-architecture.com
I admit some reticence about posting this URL to a group of CSS experts
as it contains a link to my own website, which was thrown together in
two hours as my first ever exercise in CSS many years ago, and hasn't
had five minutes of attention since. While I still have more work than
I can cope with (web work is actually a small proportion of the
'generalist' IT services I provide) it's not a priority, but I do
shudder to think people might see it...
I've been utterly tunnel-visioned about the architecture site as I've
struggled to get things to work, cursing CSS for being (for me, at
least) so unintuitive.
It turns out that there was a simple trick I'd utterly missed. See my
reply to Ben which will follow this one.
--
Phil, London
dor...@optusnet.com.au says...
lot. I decided not to use JavaScript: of all the coding languages I've
had to deal with over the last 30 years it's one of the ones I find it
hardest to read and write fluently, and it represents an additional
layer of complexity that I'd like to do without.
I've battled with this site for innumerable hours, and finally have
something which I think looks ok. I still have to complete the
'detail' pages for the individual projects, but that should be
relatively easy. The site is:
http://www.focal-architecture.com
I admit some reticence about posting this URL to a group of CSS experts
as it contains a link to my own website, which was thrown together in
two hours as my first ever exercise in CSS many years ago, and hasn't
had five minutes of attention since. While I still have more work than
I can cope with (web work is actually a small proportion of the
'generalist' IT services I provide) it's not a priority, but I do
shudder to think people might see it...
I've been utterly tunnel-visioned about the architecture site as I've
struggled to get things to work, cursing CSS for being (for me, at
least) so unintuitive.
It turns out that there was a simple trick I'd utterly missed. See my
reply to Ben which will follow this one.
--
Phil, London
Philip Herlihy
Feb 17, 2012, 6:30:29 PM2/17/12
to
In article <slrnjjk66h....@bowser.marioworld>,
spam...@spam.eggs says...
I'm just not cut out for this work! I've been battling with
http://www.focal-architecture.com
... trying to get things to centre, and wailing with late-night anguish
at the uphill struggle to get things to look how I wanted them. I read
your post soon after it arrived here, and thought "That's surely too
easy?" I've been horribly behind with this project, so, excluding
everything else, I've fought with CSS to get things to work, and
actively resisted a temptation to try a new approach (so often a route
to half-a-dozen broken prototypes in my experience!). I've just
published something that should keep the client happy for a few days,
and I thought I'd make time to reply to your valued contribution. I
just scribbled a test page using the approach you suggested and it works
perfectly.
http://www.focal-architecture.com/test-cloak/recent.htm
I do feel like a dope.
I've seen similar things when trying to teach people database design.
With something like Access, if you get the table design right at the
outset everything just falls into place, and the wizards will do much of
the work for you. Some people just don't get relational design. I've
struggled similarly with (I think) the "display" property. I do hope
I've got it now...
Thanks so much for a concise and clear explanation. If I hadn't been so
stressed-out I'd have tried it immediately and saved myself hours.
I'm opening a beer...
--
Phil, London
spam...@spam.eggs says...
http://www.focal-architecture.com
... trying to get things to centre, and wailing with late-night anguish
at the uphill struggle to get things to look how I wanted them. I read
your post soon after it arrived here, and thought "That's surely too
easy?" I've been horribly behind with this project, so, excluding
everything else, I've fought with CSS to get things to work, and
actively resisted a temptation to try a new approach (so often a route
to half-a-dozen broken prototypes in my experience!). I've just
published something that should keep the client happy for a few days,
and I thought I'd make time to reply to your valued contribution. I
just scribbled a test page using the approach you suggested and it works
perfectly.
http://www.focal-architecture.com/test-cloak/recent.htm
I do feel like a dope.
I've seen similar things when trying to teach people database design.
With something like Access, if you get the table design right at the
outset everything just falls into place, and the wizards will do much of
the work for you. Some people just don't get relational design. I've
struggled similarly with (I think) the "display" property. I do hope
I've got it now...
Thanks so much for a concise and clear explanation. If I hadn't been so
stressed-out I'd have tried it immediately and saved myself hours.
I'm opening a beer...
--
Phil, London
dorayme
Feb 17, 2012, 9:12:50 PM2/17/12
to
In article <MPG.29a8f0b32...@news.demon.co.uk>,
floats centring styling was suggested by Bootnic on one of these
usenet groups ages ago. You might notice that the js is linked to on
the gallery page above and named in his honour and can be seen by
addressing it in a browser.
If you are not comfortable using the script to centre blocks of
floats, how about Ben's suggestion of using inline-block instead and
then using text-align: center; on the container of the inline blocks?
An inline block is just inline and so listens carefully to
instructions for inline things like text and spans and imgs
(personally, I think a bit *too servilely* - I mean, a float is a
proud thing and like the Amish, comes away from those English, it is
its own master and delights in confounding the rest of the world, it
hangs from the top like a monkey on a rail at the top of a line and
does not grub about on a baseline where mere commoner letters are to
be found loitering about).
--
dorayme
Philip Herlihy <bounc...@you.com> wrote:
> In article <dorayme-216F3B...@news.albasani.net>,
> dor...@optusnet.com.au says...
> >
> > In article <MPG.2999fbbbf...@news.demon.co.uk>,
> > Philip Herlihy <bounc...@you.com> wrote:
> >
> > >... work in progress:
> In article <dorayme-216F3B...@news.albasani.net>,
> dor...@optusnet.com.au says...
> >
> > In article <MPG.2999fbbbf...@news.demon.co.uk>,
> > Philip Herlihy <bounc...@you.com> wrote:
> >
> > >
> >
> > > I want to keep the layout symmetrical about the centre as far as
> > > possible, but when I narrow the browser window so that only one column
> > > will fit it falls to the left of the window, looking rather unbalanced.
> > > It may be that this is an inevitable consequence of using a float: left,
> > > which othewise serves me very well, but if anyone can see a simple way
> > > of having this column centre itself, and indeed to have any incomplete
> > > rows centre themselves, I'd be truly grateful once again.
> > >
> > ...
> >
> > Take a look at the technique in
> >
> > <http://dorayme.netweaver.com.au/thumbnailGalleryWithShortCaptions/thum
> > bLandscapeGallery7.html>
> >
> > <http://tinyurl.com/73x67qr> if this is easier.
> >
> > If I have not included the above sort of thing in
> >
> > <http://netweaver.com.au/centring/>
> >
> > (which might be informative to you)
> >
> > I should get around to it!
>
> Thanks, Dorayme - I studied your centring pages carefully, and learned a
> lot. I decided not to use JavaScript: of all the coding languages I've
> had to deal with over the last 30 years it's one of the ones I find it
> hardest to read and write fluently, and it represents an additional
> layer of complexity that I'd like to do without.
>
That's OK. In fact, the script I used for the non-critical block of
> >
> > > I want to keep the layout symmetrical about the centre as far as
> > > possible, but when I narrow the browser window so that only one column
> > > will fit it falls to the left of the window, looking rather unbalanced.
> > > It may be that this is an inevitable consequence of using a float: left,
> > > which othewise serves me very well, but if anyone can see a simple way
> > > of having this column centre itself, and indeed to have any incomplete
> > > rows centre themselves, I'd be truly grateful once again.
> > >
> > ...
> >
> > Take a look at the technique in
> >
> > <http://dorayme.netweaver.com.au/thumbnailGalleryWithShortCaptions/thum
> > bLandscapeGallery7.html>
> >
> > <http://tinyurl.com/73x67qr> if this is easier.
> >
> > If I have not included the above sort of thing in
> >
> > <http://netweaver.com.au/centring/>
> >
> > (which might be informative to you)
> >
> > I should get around to it!
>
> Thanks, Dorayme - I studied your centring pages carefully, and learned a
> lot. I decided not to use JavaScript: of all the coding languages I've
> had to deal with over the last 30 years it's one of the ones I find it
> hardest to read and write fluently, and it represents an additional
> layer of complexity that I'd like to do without.
>
floats centring styling was suggested by Bootnic on one of these
usenet groups ages ago. You might notice that the js is linked to on
the gallery page above and named in his honour and can be seen by
addressing it in a browser.
If you are not comfortable using the script to centre blocks of
floats, how about Ben's suggestion of using inline-block instead and
then using text-align: center; on the container of the inline blocks?
An inline block is just inline and so listens carefully to
instructions for inline things like text and spans and imgs
(personally, I think a bit *too servilely* - I mean, a float is a
proud thing and like the Amish, comes away from those English, it is
its own master and delights in confounding the rest of the world, it
hangs from the top like a monkey on a rail at the top of a line and
does not grub about on a baseline where mere commoner letters are to
be found loitering about).
--
dorayme
Philip Herlihy
Feb 18, 2012, 10:45:54 AM2/18/12
to
In article <dorayme-70BB5A...@news.albasani.net>,
I think I've been fixated on using Floats. When the only tool you have
is a hammer, everything looks like a nail!
--
Phil, London
is a hammer, everything looks like a nail!
--
Phil, London
dorayme
Feb 18, 2012, 5:42:50 PM2/18/12
to
In article <MPG.29a9cfa77...@news.demon.co.uk>,
from IE > 8, the other reason is their impish natures. The reason many
have eschewed inline-block in the past is mainly just its lack of
support in some popular browsers.
But now, this shiny hardly used tool of inline-block is more happily
grabbed from the toolbox as the browsers concerned are now fading in
use. They completely lack the impishness of floats but they are quite
reliable and easy enough to handle.
Just watch out when using them, for gaps caused by white space.
Probably in your case, this will not be a concern. They are like an
inline image or a word (even as short a one as 'a'). This means that
if there is space in your HTML between <div>...</div> and the next
div, both being inline-blocks, you will get a space between the
blocks. Same goes for if you style the DIVS as just inline.
If you don't want the space and prefer to rely on your exact specs for
horizontal margins, you can run them together in the HTML:
<div>...</div><div>...
or
<div>...</div
><div>...
--
dorayme
Philip Herlihy <bounc...@you.com> wrote:
> In article <dorayme-70BB5A...@news.albasani.net>,
> dor...@optusnet.com.au says...
> >
> > In article <MPG.29a8f0b32...@news.demon.co.uk>,
> > Philip Herlihy <bounc...@you.com> wrote:
> >
> > > In article <dorayme-216F3B...@news.albasani.net>,
> > > dor...@optusnet.com.au says...
> > > >
...
> In article <dorayme-70BB5A...@news.albasani.net>,
> dor...@optusnet.com.au says...
> >
> > In article <MPG.29a8f0b32...@news.demon.co.uk>,
> > Philip Herlihy <bounc...@you.com> wrote:
> >
> > > In article <dorayme-216F3B...@news.albasani.net>,
> > > dor...@optusnet.com.au says...
> > > >
> > If you are not comfortable using the script to centre blocks of
> > floats, how about Ben's suggestion of using inline-block instead and
> > then using text-align: center; on the container of the inline blocks?
> > An inline block is just inline and so listens carefully to
> > instructions for inline things like text and spans and imgs
> > ...
> > floats, how about Ben's suggestion of using inline-block instead and
> > then using text-align: center; on the container of the inline blocks?
> > An inline block is just inline and so listens carefully to
> > instructions for inline things like text and spans and imgs
>
> I think I've been fixated on using Floats. When the only tool you have
> is a hammer, everything looks like a nail!
One reason some have avoided floats in the past is the buggy support
> I think I've been fixated on using Floats. When the only tool you have
> is a hammer, everything looks like a nail!
from IE > 8, the other reason is their impish natures. The reason many
have eschewed inline-block in the past is mainly just its lack of
support in some popular browsers.
But now, this shiny hardly used tool of inline-block is more happily
grabbed from the toolbox as the browsers concerned are now fading in
use. They completely lack the impishness of floats but they are quite
reliable and easy enough to handle.
Just watch out when using them, for gaps caused by white space.
Probably in your case, this will not be a concern. They are like an
inline image or a word (even as short a one as 'a'). This means that
if there is space in your HTML between <div>...</div> and the next
div, both being inline-blocks, you will get a space between the
blocks. Same goes for if you style the DIVS as just inline.
If you don't want the space and prefer to rely on your exact specs for
horizontal margins, you can run them together in the HTML:
<div>...</div><div>...
or
<div>...</div
><div>...
--
dorayme
Philip Herlihy
Feb 18, 2012, 7:29:41 PM2/18/12
to
In article <dorayme-B60FD4...@news.albasani.net>,
I'm very grateful to you and Ben. All the time I was wrestling with the
site's layout I *knew* that what I was doing was simply too complex, and
I ought to know at my age that things shouldn't be that hard. Clearly,
when I started tinkering with CSS the Float made a deep impression, and
every layout seemed to be calling for one. I've now re-modelled the
site using a container DIV with "text-align: center" and the child
elements set to "inline-block" (I'd probably get away with simple
"inline" as they are simple shapes with no content to flow. It only
took me an hour to rip out the "project-pair" stuff and do it properly!
O the time I've wasted going the wrong way about this...
http://focal-architecture.com
I do think it looks nice now. Even looks ok on my mobile! Now I need
to persuade the client to let me adjust the colours. I'd like to copy
the red from the (over-complex) logo and use that for the "brand", for
"hover" and for the link text when you reach the destination page. Links
not being hovered could be the blue from the logo (adjusted so that you
don't get that hideous apparent depth clash that some blues give you on
a black background). But he's paying. (Not enough...)
--
Phil, London
site's layout I *knew* that what I was doing was simply too complex, and
I ought to know at my age that things shouldn't be that hard. Clearly,
when I started tinkering with CSS the Float made a deep impression, and
every layout seemed to be calling for one. I've now re-modelled the
site using a container DIV with "text-align: center" and the child
elements set to "inline-block" (I'd probably get away with simple
"inline" as they are simple shapes with no content to flow. It only
took me an hour to rip out the "project-pair" stuff and do it properly!
O the time I've wasted going the wrong way about this...
http://focal-architecture.com
I do think it looks nice now. Even looks ok on my mobile! Now I need
to persuade the client to let me adjust the colours. I'd like to copy
the red from the (over-complex) logo and use that for the "brand", for
"hover" and for the link text when you reach the destination page. Links
not being hovered could be the blue from the logo (adjusted so that you
don't get that hideous apparent depth clash that some blues give you on
a black background). But he's paying. (Not enough...)
--
Phil, London
tlvp
Feb 18, 2012, 7:36:43 PM2/18/12
to
On Sun, 19 Feb 2012 09:42:50 +1100, dorayme wrote:
> ... If you don't want the space and prefer to rely on your exact specs for
| <div> ... </div><!--
| ... NB: old div ended, new div about to begin ...
|--><div> ...
or also in:
| <TD><IMG src="whatehaveyou" alt="" width="xx" height="yy"><!--
| ... NB: for next image we use next-image ...
| --></TD><TD><IMG src="next-image" ...
Seems particularly important to eliminate spaces between the angly brackets
enclosing TD and IMG tags for images housed within table cells. No idea why
leaving spaces there can cause misalignment of the images within the cells.
Cheers, -- tlvp
--
Avant de repondre, jeter la poubelle, SVP.
> ... If you don't want the space and prefer to rely on your exact specs for
> horizontal margins, you can run them together in the HTML:
>
> <div>...</div><div>...
>
> or
>
> <div>...</div
> ><div>...
Or, as I do when i need some such ploy,
>
> <div>...</div><div>...
>
> or
>
> <div>...</div
> ><div>...
| <div> ... </div><!--
| ... NB: old div ended, new div about to begin ...
|--><div> ...
or also in:
| <TD><IMG src="whatehaveyou" alt="" width="xx" height="yy"><!--
| ... NB: for next image we use next-image ...
| --></TD><TD><IMG src="next-image" ...
Seems particularly important to eliminate spaces between the angly brackets
enclosing TD and IMG tags for images housed within table cells. No idea why
leaving spaces there can cause misalignment of the images within the cells.
Cheers, -- tlvp
--
Avant de repondre, jeter la poubelle, SVP.
dorayme
Feb 19, 2012, 4:16:41 AM2/19/12
to
In article <19dno3iw7dser.3f9o7hmapdgv$.d...@40tude.net>,
draft of a novel, autobiography, noir thriller in the comment? Why
miss the opportunity? And if there are masses and masses of inline
boxes on the same page (as often there are), one could include more
drafts and novels and diary entries, how about putting up things for
sale in these comments: "Fridge, good as beer cooler or to keep dead
hunting spoils a bit fresh, cheap, any offers over $20, must remove by
June 4th, phone..."
> or also in:
>
> | <TD><IMG src="whatehaveyou" alt="" width="xx" height="yy"><!--
> | ... NB: for next image we use next-image ...
> | --></TD><TD><IMG src="next-image" ...
>
> Seems particularly important to eliminate spaces between the angly brackets
> enclosing TD and IMG tags for images housed within table cells. No idea why
> leaving spaces there can cause misalignment of the images within the cells.
>
Because of browser defaults. You can be rid of spaces by various
strategies with tables. One combo is:
table {border-collapse: collapse;}
td {padding: 0;}
or
table {border-collapse: collapse;} with cellpadding="0" in the cell
element.
--
dorayme
tlvp <mPiOsUcB...@att.net> wrote:
> On Sun, 19 Feb 2012 09:42:50 +1100, dorayme wrote:
>
> > ... If you don't want the space and prefer to rely on your exact specs for
> > horizontal margins, you can run them together in the HTML:
> >
> > <div>...</div><div>...
> >
> > or
> >
> > <div>...</div
> > ><div>...
>
> Or, as I do when i need some such ploy,
>
> | <div> ... </div><!--
> | ... NB: old div ended, new div about to begin ...
> |--><div> ...
>
If we are going in for complex alternatives, how about including a
> On Sun, 19 Feb 2012 09:42:50 +1100, dorayme wrote:
>
> > ... If you don't want the space and prefer to rely on your exact specs for
> > horizontal margins, you can run them together in the HTML:
> >
> > <div>...</div><div>...
> >
> > or
> >
> > <div>...</div
> > ><div>...
>
> Or, as I do when i need some such ploy,
>
> | <div> ... </div><!--
> | ... NB: old div ended, new div about to begin ...
> |--><div> ...
>
draft of a novel, autobiography, noir thriller in the comment? Why
miss the opportunity? And if there are masses and masses of inline
boxes on the same page (as often there are), one could include more
drafts and novels and diary entries, how about putting up things for
sale in these comments: "Fridge, good as beer cooler or to keep dead
hunting spoils a bit fresh, cheap, any offers over $20, must remove by
June 4th, phone..."
> or also in:
>
> | <TD><IMG src="whatehaveyou" alt="" width="xx" height="yy"><!--
> | ... NB: for next image we use next-image ...
> | --></TD><TD><IMG src="next-image" ...
>
> Seems particularly important to eliminate spaces between the angly brackets
> enclosing TD and IMG tags for images housed within table cells. No idea why
> leaving spaces there can cause misalignment of the images within the cells.
>
strategies with tables. One combo is:
table {border-collapse: collapse;}
td {padding: 0;}
or
table {border-collapse: collapse;} with cellpadding="0" in the cell
element.
--
dorayme
tlvp
Feb 19, 2012, 10:31:00 AM2/19/12
to
On Sun, 19 Feb 2012 20:16:41 +1100, dorayme wrote:
> ...
> If we are going in for complex alternatives, ...
> ...
Sorry, were my alternatives "complex"?
I hadn't thought so, but what do I know?
> ... You can be rid of spaces by various
> strategies with tables. One combo is:
>
> table {border-collapse: collapse;}
> td {padding: 0;}
>
> or
>
> table {border-collapse: collapse;} with cellpadding="0" in the cell
> element.
Thanks for those table strategies, dorayme. I'll bear them in mind.
>
> table {border-collapse: collapse;}
> td {padding: 0;}
>
> or
>
> table {border-collapse: collapse;} with cellpadding="0" in the cell
> element.
dorayme
Feb 19, 2012, 3:46:47 PM2/19/12
to
In article <imr9nu43glv4$.r6krmokr...@40tude.net>,
thumnnails with your alternative, how would one describe the look of
the HTML? It would surely not be "simple"?
Anyway, I conducted a universal and respected test: I went to visit
William of Ockham's grave and placed upon it a print-out of the HTML.
There was an unmistakable stirring or turning sound from below the
ground. And, what is more, a creepy and slightly painful tingling came
upon me. I fled and left the HTML there!
Had to have a rather large scotch - straight, no ice - afterwards.
Perhaps your suggestion was more creepy than complex?
--
dorayme
tlvp <mPiOsUcB...@att.net> wrote:
> On Sun, 19 Feb 2012 20:16:41 +1100, dorayme wrote:
>
> > ...
> > If we are going in for complex alternatives, ...
>
> Sorry, were my alternatives "complex"?
> I hadn't thought so, but what do I know?
>
Perhaps "complex" was not quite the right word. But faced with say 60
> On Sun, 19 Feb 2012 20:16:41 +1100, dorayme wrote:
>
> > ...
> > If we are going in for complex alternatives, ...
>
> Sorry, were my alternatives "complex"?
> I hadn't thought so, but what do I know?
>
thumnnails with your alternative, how would one describe the look of
the HTML? It would surely not be "simple"?
Anyway, I conducted a universal and respected test: I went to visit
William of Ockham's grave and placed upon it a print-out of the HTML.
There was an unmistakable stirring or turning sound from below the
ground. And, what is more, a creepy and slightly painful tingling came
upon me. I fled and left the HTML there!
Had to have a rather large scotch - straight, no ice - afterwards.
Perhaps your suggestion was more creepy than complex?
--
dorayme
dorayme
Feb 19, 2012, 7:39:38 PM2/19/12
to
In article <MPG.29aa52c12...@news.demon.co.uk>,
Philip Herlihy <bounc...@you.com> wrote:
> In article <dorayme-B60FD4...@news.albasani.net>,
> dor...@optusnet.com.au says...
bg images. Not sure why? Seems unnecessarily complex?
If you have just images, you do not necessarily need to enclose each
in divs, there may be no advantage.
Consider the simpler scheme and markup:
<div id="projects">
<a href="projects/crescent-8.htm" title="Extension & New
Kitchen"><!-- put in the rest of the markup for the images with
different details for the images etc --></div>
with CSS as just
#projects {text-align: center; line-height: 3;}
div#projects a {padding: .5em;}
Seeing as the a elements are inline, appropriate to space them
vertically by line-height.
Using the html attribute of title will save you a fair amount of
design trouble.
btw, you can't really have a block element like a P in your inline
link elements, not as far as the HTML rules are concerned at any rate.
Anyway, you will find that a lot of your markup and CSS are not needed
- including needing to stick the inline images into further elements
like Ps - if you adopt the suggestion above.
I would suggest also to just use the HTML 4.01 Strict doctype or the
HTML5 one.
> It only
> took me an hour to rip out the "project-pair" stuff and do it properly!
> O the time I've wasted going the wrong way about this...
> http://focal-architecture.com
>
--
dorayme
Philip Herlihy <bounc...@you.com> wrote:
> In article <dorayme-B60FD4...@news.albasani.net>,
> dor...@optusnet.com.au says...
> >
...
>
> I'm very grateful to you and Ben. All the time I was wrestling with the
> site's layout I *knew* that what I was doing was simply too complex, ...
...
>
> I'm very grateful to you and Ben. All the time I was wrestling with the
> I've now re-modelled the
> site using a container DIV with "text-align: center" and the child
> elements set to "inline-block" (I'd probably get away with simple
> "inline" as they are simple shapes with no content to flow.
Yes, if you have just images, that is true. In your case you are using
> site using a container DIV with "text-align: center" and the child
> elements set to "inline-block" (I'd probably get away with simple
> "inline" as they are simple shapes with no content to flow.
bg images. Not sure why? Seems unnecessarily complex?
If you have just images, you do not necessarily need to enclose each
in divs, there may be no advantage.
Consider the simpler scheme and markup:
<div id="projects">
<a href="projects/crescent-8.htm" title="Extension & New
Kitchen"><!-- put in the rest of the markup for the images with
different details for the images etc --></div>
with CSS as just
#projects {text-align: center; line-height: 3;}
div#projects a {padding: .5em;}
Seeing as the a elements are inline, appropriate to space them
vertically by line-height.
Using the html attribute of title will save you a fair amount of
design trouble.
btw, you can't really have a block element like a P in your inline
link elements, not as far as the HTML rules are concerned at any rate.
Anyway, you will find that a lot of your markup and CSS are not needed
- including needing to stick the inline images into further elements
like Ps - if you adopt the suggestion above.
I would suggest also to just use the HTML 4.01 Strict doctype or the
HTML5 one.
> It only
> took me an hour to rip out the "project-pair" stuff and do it properly!
> O the time I've wasted going the wrong way about this...
> http://focal-architecture.com
>
dorayme
dorayme
Feb 19, 2012, 7:42:15 PM2/19/12
to
In article <dorayme-94FDEB...@news.albasani.net>,
including needing to stick the 'tooltip' text into further elements
like Ps
--
dorayme
dorayme <dor...@optusnet.com.au> wrote:
> including needing to stick the inline images into further elements
> like Ps
should have read
> including needing to stick the inline images into further elements
> like Ps
including needing to stick the 'tooltip' text into further elements
like Ps
--
dorayme
tlvp
Feb 19, 2012, 9:36:19 PM2/19/12
to
the beholder. I don't see it; you do. And that's just the way it is :-) .
dorayme
Feb 19, 2012, 10:39:41 PM2/19/12
to
In article <1bjn9t01c134r.f...@40tude.net>,
not any general description that lies outside this or that particular
beholder - something a little more objective in other words - that
comes to your mind that *assesses* some standout difference between 1.
and 2. at
<http://dorayme.netweaver.com.au/ockhamiteExperiment.html>
--
dorayme
tlvp <mPiOsUcB...@att.net> wrote:
> On Mon, 20 Feb 2012 07:46:47 +1100, dorayme wrote:
>
> > In article <imr9nu43glv4$.r6krmokr...@40tude.net>,
> > tlvp <mPiOsUcB...@att.net> wrote:
> >
> >> On Sun, 19 Feb 2012 20:16:41 +1100, dorayme wrote:
> >>
> >>> ...
> >>> If we are going in for complex alternatives, ...
> >>
> >> Sorry, were my alternatives "complex"?
> >> I hadn't thought so, but what do I know?
> >>
> >
> > Perhaps "complex" was not quite the right word. But faced with say 60
> > thumnnails with your alternative, how would one describe the look of
> > the HTML? It would surely not be "simple"?
> >
...
> On Mon, 20 Feb 2012 07:46:47 +1100, dorayme wrote:
>
> > In article <imr9nu43glv4$.r6krmokr...@40tude.net>,
> > tlvp <mPiOsUcB...@att.net> wrote:
> >
> >> On Sun, 19 Feb 2012 20:16:41 +1100, dorayme wrote:
> >>
> >>> ...
> >>> If we are going in for complex alternatives, ...
> >>
> >> Sorry, were my alternatives "complex"?
> >> I hadn't thought so, but what do I know?
> >>
> >
> > Perhaps "complex" was not quite the right word. But faced with say 60
> > thumnnails with your alternative, how would one describe the look of
> > the HTML? It would surely not be "simple"?
> >
>
> I guess complexity -- or creepiness -- is, like beauty, all in the eye of
> the beholder. I don't see it; you do. And that's just the way it is :-)
OK, while we are waiting to fly the next mission, let's see. Is there
> I guess complexity -- or creepiness -- is, like beauty, all in the eye of
> the beholder. I don't see it; you do. And that's just the way it is :-)
not any general description that lies outside this or that particular
beholder - something a little more objective in other words - that
comes to your mind that *assesses* some standout difference between 1.
and 2. at
<http://dorayme.netweaver.com.au/ockhamiteExperiment.html>
--
dorayme
tlvp
Feb 20, 2012, 8:27:28 AM2/20/12
to
hence displaying nothing. What's the point, then?
Philip Herlihy
Feb 20, 2012, 12:43:50 PM2/20/12
to
In article <dorayme-94FDEB...@news.albasani.net>,
dor...@optusnet.com.au says...
Yes, that is simpler - and simpler is better. Of course, it's working
fine now, so I'm a little wary of tinkering with it, but if I can finish
off the detail pages in time to leave a little slack I may well come
back and try this, if only for next time's sake.
The present code is, of course, distorted by its history. I'd
originally planned to provide roll-over "tool-tips" by editing each
image to produce a copy which superimposed text over a cloud (for
legibility), switching background-image by a:hover, but with the
"title" HTML dodge I don't need to be using bg images at all.
I do need to get my head around Doctypes. I thought I'd squirrelled
away a reference from a posting here for later study but I now can't
find it - any suggestions? The P in the link is certainly a distortion
and always seemed so - I just needed to get it to work! Probably a
distortion necessary to compensate for the distortion of using BG
images!
The downside of this project has been hours of frustrating struggle to
the detriment of my wider work schedule (and home life!). The up-side
is that I've learned immensely valuable lessons (thanks!) about some key
foundations of CSS. And the fact the client is so happy with the
results now that he's suggested an increase to the fee! :-)
The detail pages are going to be Flash slideshows created in Adobe's
Bridge. They are attractive, and quick and easy to do. I do have
reservations about using Flash, which seems to be fading in popularity,
and raised these with the client, but that's what he wants. I don't
believe HTML5 is ubiquitous enough to try to do things that way (and I'd
need to mug up on it all) and he seems to be happy with the prospect of
a possible need for reworking in two or three years. I'm committed to
it (by agreement and time pressure) now, and it'll look fine for anyone
not on an iPad...
--
Phil, London
dor...@optusnet.com.au says...
fine now, so I'm a little wary of tinkering with it, but if I can finish
off the detail pages in time to leave a little slack I may well come
back and try this, if only for next time's sake.
The present code is, of course, distorted by its history. I'd
originally planned to provide roll-over "tool-tips" by editing each
image to produce a copy which superimposed text over a cloud (for
legibility), switching background-image by a:hover, but with the
"title" HTML dodge I don't need to be using bg images at all.
I do need to get my head around Doctypes. I thought I'd squirrelled
away a reference from a posting here for later study but I now can't
find it - any suggestions? The P in the link is certainly a distortion
and always seemed so - I just needed to get it to work! Probably a
distortion necessary to compensate for the distortion of using BG
images!
The downside of this project has been hours of frustrating struggle to
the detriment of my wider work schedule (and home life!). The up-side
is that I've learned immensely valuable lessons (thanks!) about some key
foundations of CSS. And the fact the client is so happy with the
results now that he's suggested an increase to the fee! :-)
The detail pages are going to be Flash slideshows created in Adobe's
Bridge. They are attractive, and quick and easy to do. I do have
reservations about using Flash, which seems to be fading in popularity,
and raised these with the client, but that's what he wants. I don't
believe HTML5 is ubiquitous enough to try to do things that way (and I'd
need to mug up on it all) and he seems to be happy with the prospect of
a possible need for reworking in two or three years. I'm committed to
it (by agreement and time pressure) now, and it'll look fine for anyone
not on an iPad...
--
Phil, London
dorayme
Feb 20, 2012, 4:09:42 PM2/20/12
to
In article <MPG.29ac5f74...@news.demon.co.uk>,
Philip Herlihy <bounc...@you.com> wrote:
> In article <dorayme-94FDEB...@news.albasani.net>,
> dor...@optusnet.com.au says...
> >
...
> > > http://focal-architecture.com
> > >
>
...
> I do need to get my head around Doctypes. I thought I'd squirrelled
> away a reference from a posting here for later study but I now can't
> find it - any suggestions?
Yes, use 4.01 Strict if you feel the HTML5 is not 'ready'. It looks
like the XHTML ones have been a bit of a blind alley. 4.01 Strict is
well established and mature.
> The P in the link is certainly a distortion
> and always seemed so - I just needed to get it to work! Probably a
> distortion necessary to compensate for the distortion of using BG
> images!
>
A SPAN would perhaps work just as well and, being an inline element,
could be put inside a link element safely.
>
> The detail pages are going to be Flash slideshows created in Adobe's
> Bridge. They are attractive, and quick and easy to do.
I have this program but never used it. I should take a peek and play
with it. I like the idea of 'quick and easy' <g>
--
dorayme
Philip Herlihy <bounc...@you.com> wrote:
> In article <dorayme-94FDEB...@news.albasani.net>,
> dor...@optusnet.com.au says...
> >
...
> > Consider the simpler scheme and markup:
> >
> > <div id="projects">
> > <a href="projects/crescent-8.htm" title="Extension & New
> > Kitchen"><!-- put in the rest of the markup for the images with
> > different details for the images etc --></div>
> >
> > with CSS as just
> >
> > #projects {text-align: center; line-height: 3;}
> >
> > div#projects a {padding: .5em;}
> >
> > Seeing as the a elements are inline, appropriate to space them
> > vertically by line-height.
> >
> > Using the html attribute of title will save you a fair amount of
> > design trouble.
> >
> > btw, you can't really have a block element like a P in your inline
> > link elements, not as far as the HTML rules are concerned at any rate.
> > Anyway, you will find that a lot of your markup and CSS are not needed
> > - including needing to stick the inline images into further elements
> > like Ps - if you adopt the suggestion above.
> >
> > I would suggest also to just use the HTML 4.01 Strict doctype or the
> > HTML5 one.
> >
...
> >
> > <div id="projects">
> > <a href="projects/crescent-8.htm" title="Extension & New
> > Kitchen"><!-- put in the rest of the markup for the images with
> > different details for the images etc --></div>
> >
> > with CSS as just
> >
> > #projects {text-align: center; line-height: 3;}
> >
> > div#projects a {padding: .5em;}
> >
> > Seeing as the a elements are inline, appropriate to space them
> > vertically by line-height.
> >
> > Using the html attribute of title will save you a fair amount of
> > design trouble.
> >
> > btw, you can't really have a block element like a P in your inline
> > link elements, not as far as the HTML rules are concerned at any rate.
> > Anyway, you will find that a lot of your markup and CSS are not needed
> > - including needing to stick the inline images into further elements
> > like Ps - if you adopt the suggestion above.
> >
> > I would suggest also to just use the HTML 4.01 Strict doctype or the
> > HTML5 one.
> >
> > > http://focal-architecture.com
> > >
>
...
> I do need to get my head around Doctypes. I thought I'd squirrelled
> away a reference from a posting here for later study but I now can't
> find it - any suggestions?
like the XHTML ones have been a bit of a blind alley. 4.01 Strict is
well established and mature.
> The P in the link is certainly a distortion
> and always seemed so - I just needed to get it to work! Probably a
> distortion necessary to compensate for the distortion of using BG
> images!
>
could be put inside a link element safely.
>
> The detail pages are going to be Flash slideshows created in Adobe's
> Bridge. They are attractive, and quick and easy to do.
with it. I like the idea of 'quick and easy' <g>
--
dorayme
dorayme
Feb 20, 2012, 4:18:21 PM2/20/12
to
In article <6g7dshv38lvg$.xfpnpf3fsqhv$.d...@40tude.net>,
...
the idea of 'unnecessary complexity') - not to mention "creepy" - was
just in my mind, the beholder. I was inviting you to say what your
description might be. You have picked "word count". But that does not
evaluate the difference. As for markup without content, the idea is
you imagine an img element in each div, all being inline or inline-box
CSSd.
--
dorayme
...
> > OK, while we are waiting to fly the next mission, let's see. Is there
> > not any general description that lies outside this or that particular
> > beholder - something a little more objective in other words - that
> > comes to your mind that *assesses* some standout difference between 1.
> > and 2. at
> >
> > <http://dorayme.netweaver.com.au/ockhamiteExperiment.html>
>
> Sure: character count. But both examples are of markup without content,
> hence displaying nothing. What's the point, then?
>
The point was you thought my description of "complex" (encompassing
> > not any general description that lies outside this or that particular
> > beholder - something a little more objective in other words - that
> > comes to your mind that *assesses* some standout difference between 1.
> > and 2. at
> >
> > <http://dorayme.netweaver.com.au/ockhamiteExperiment.html>
>
> Sure: character count. But both examples are of markup without content,
> hence displaying nothing. What's the point, then?
>
the idea of 'unnecessary complexity') - not to mention "creepy" - was
just in my mind, the beholder. I was inviting you to say what your
description might be. You have picked "word count". But that does not
evaluate the difference. As for markup without content, the idea is
you imagine an img element in each div, all being inline or inline-box
CSSd.
--
dorayme
Gus Richter
Feb 20, 2012, 4:33:14 PM2/20/12
to
On 2/20/2012 4:09 PM, dorayme wrote:
> In article<MPG.29ac5f74...@news.demon.co.uk>,
> Philip Herlihy<bounc...@you.com> wrote:
>
>>
>> I do need to get my head around Doctypes. I thought I'd squirrelled
>> away a reference from a posting here for later study but I now can't
>> find it - any suggestions?
>
> Yes, use 4.01 Strict if you feel the HTML5 is not 'ready'. It looks
> like the XHTML ones have been a bit of a blind alley. 4.01 Strict is
> well established and mature.
http://hsivonen.iki.fi/doctype/
> In article<MPG.29ac5f74...@news.demon.co.uk>,
> Philip Herlihy<bounc...@you.com> wrote:
>
>>
>> I do need to get my head around Doctypes. I thought I'd squirrelled
>> away a reference from a posting here for later study but I now can't
>> find it - any suggestions?
>
> Yes, use 4.01 Strict if you feel the HTML5 is not 'ready'. It looks
> like the XHTML ones have been a bit of a blind alley. 4.01 Strict is
> well established and mature.
--
Gus
tlvp
Feb 20, 2012, 6:18:28 PM2/20/12
to
On Tue, 21 Feb 2012 08:18:21 +1100, dorayme wrote:
> ... point was you thought my description of "complex" (encompassing
> ... point was you thought my description of "complex" (encompassing
> the idea of 'unnecessary complexity') - not to mention "creepy" - was
> just in my mind, the beholder. I was inviting you to say what your
> description might be. You have picked "word count". But that does not
> evaluate the difference. As for markup without content, the idea is
> you imagine an img element in each div, all being inline or inline-box
> CSSd.
O. IC. OK. Cheers, -- tlvp
> just in my mind, the beholder. I was inviting you to say what your
> description might be. You have picked "word count". But that does not
> evaluate the difference. As for markup without content, the idea is
> you imagine an img element in each div, all being inline or inline-box
> CSSd.
Philip Herlihy
Feb 20, 2012, 10:00:12 PM2/20/12
to
In article <jhue6s$ke6$1...@dont-email.me>, gusri...@netscape.net says...
Thank you: securely in my Favourites, and in my ToDo list!
--
Phil, London
--
Phil, London
Philip Herlihy
Feb 20, 2012, 10:14:41 PM2/20/12
to
In article <dorayme-9A06D1...@news.albasani.net>,
dor...@optusnet.com.au says...
There's a good, brisk video tutorial here:
http://tv.adobe.com/watch/learn-bridge-cs4/creating-a-web-photo-gallery/
(I do wish Adobe would give their products more meaningful names,
instead of Biff, Whizz and Splodge. I have no idea what half of their
products do...)
Most of the web-gallery templates are for Flash, whose star is falling
these days, I think. There's one pure HTML template (at least in CS4)
but it's fairly crude. Flash is a marvellous tool (which I've never
found time to learn!) - I do hope they convert it so that its creative
facilities can be used to generate suitable code for the next generation
of HTML.
Published the completed "first phase" of the site tonight (or should I
say "this morning" - I'm too old for this). I found I couldn't get rid
of an apocalyptic "flash" (small F) when the plug-in loads, despite
studying the generated code and setting everything in sight to #000000.
I'd also have liked to get the VCR controls above the "screen", as I
suspect many visitors might be unaware of them. I've squeezed in a link
"Jump to player controls" to attempt to catch some of these folk.
Tomorrow I have a backlog of RMA kit to send back (while I still can)
and a meeting with a prospective new customer who wants a general
"maintenance" contract. On Wednesday I've promised to get going on the
next web project, which (thankfully) seems a lot easier.
I'm grateful for the courteous and helpful guidance I've found here.
Hope I can contribute something myself from time to time. Maybe in the
morning... (ZZZZZZZZZZzzzzzzzzzzzzzzz)
--
Phil, London
dor...@optusnet.com.au says...
http://tv.adobe.com/watch/learn-bridge-cs4/creating-a-web-photo-gallery/
(I do wish Adobe would give their products more meaningful names,
instead of Biff, Whizz and Splodge. I have no idea what half of their
products do...)
Most of the web-gallery templates are for Flash, whose star is falling
these days, I think. There's one pure HTML template (at least in CS4)
but it's fairly crude. Flash is a marvellous tool (which I've never
found time to learn!) - I do hope they convert it so that its creative
facilities can be used to generate suitable code for the next generation
of HTML.
Published the completed "first phase" of the site tonight (or should I
say "this morning" - I'm too old for this). I found I couldn't get rid
of an apocalyptic "flash" (small F) when the plug-in loads, despite
studying the generated code and setting everything in sight to #000000.
I'd also have liked to get the VCR controls above the "screen", as I
suspect many visitors might be unaware of them. I've squeezed in a link
"Jump to player controls" to attempt to catch some of these folk.
Tomorrow I have a backlog of RMA kit to send back (while I still can)
and a meeting with a prospective new customer who wants a general
"maintenance" contract. On Wednesday I've promised to get going on the
next web project, which (thankfully) seems a lot easier.
I'm grateful for the courteous and helpful guidance I've found here.
Hope I can contribute something myself from time to time. Maybe in the
morning... (ZZZZZZZZZZzzzzzzzzzzzzzzz)
--
Phil, London
0 new messages