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!
In article <MPG.2999fbbbf3704d4d989...@news.demon.co.uk>,
Philip Herlihy <bounceb...@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 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.
On 2012-02-06, Philip Herlihy <bounceb...@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.
> 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.
For that you want to use display: inline-block instead of float: left
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.
> In article <MPG.2999fbbbf3704d4d989...@news.demon.co.uk>,
> Philip Herlihy <bounceb...@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 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.
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.
> On 2012-02-06, Philip Herlihy <bounceb...@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.
> > 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.
> For that you want to use display: inline-block instead of float: left
> 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.
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.
> In article <dorayme-216F3B.07455307022...@news.albasani.net>, > dora...@optusnet.com.au says...
> > In article <MPG.2999fbbbf3704d4d989...@news.demon.co.uk>,
> > Philip Herlihy <bounceb...@you.com> wrote:
> > >... work in progress:
> > > 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.
> 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 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).
> In article <MPG.29a8f0b321274150989...@news.demon.co.uk>,
> Philip Herlihy <bounceb...@you.com> wrote:
> > In article <dorayme-216F3B.07455307022...@news.albasani.net>, > > dora...@optusnet.com.au says...
> > > In article <MPG.2999fbbbf3704d4d989...@news.demon.co.uk>,
> > > Philip Herlihy <bounceb...@you.com> wrote:
> > > >... work in progress:
> > > > 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.
> > 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 > 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).
I think I've been fixated on using Floats. When the only tool you have is a hammer, everything looks like a nail!
...
> > 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 > > ...
> 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 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:
> ...
> > > 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 > > > ...
> > 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 > 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>...
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...)
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> ...
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.
tlvp <mPiOsUcB.EtLlL...@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 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:
In article <imr9nu43glv4$.r6krmokrm2z7....@40tude.net>,
tlvp <mPiOsUcB.EtLlL...@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"?
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?
In article <MPG.29aa52c121331cae989...@news.demon.co.uk>,
Philip Herlihy <bounceb...@you.com> wrote:
> In article <dorayme-B60FD4.09424919022...@news.albasani.net>, > dora...@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'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 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
On Mon, 20 Feb 2012 07:46:47 +1100, dorayme wrote:
> In article <imr9nu43glv4$.r6krmokrm2z7....@40tude.net>,
> tlvp <mPiOsUcB.EtLlL...@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"?
> 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?
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 :-) .
Cheers, -- tlvp
-- Avant de repondre, jeter la poubelle, SVP.
tlvp <mPiOsUcB.EtLlL...@att.net> wrote:
> On Mon, 20 Feb 2012 07:46:47 +1100, dorayme wrote:
> > In article <imr9nu43glv4$.r6krmokrm2z7....@40tude.net>,
> > tlvp <mPiOsUcB.EtLlL...@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 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
On Mon, 20 Feb 2012 14:39:41 +1100, dorayme wrote:
> In article <1bjn9t01c134r.fzfqt562bvz9....@40tude.net>,
> tlvp <mPiOsUcB.EtLlL...@att.net> wrote:
>> On Mon, 20 Feb 2012 07:46:47 +1100, dorayme wrote:
>>> In article <imr9nu43glv4$.r6krmokrm2z7....@40tude.net>,
>>> tlvp <mPiOsUcB.EtLlL...@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 > 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
> In article <MPG.29aa52c121331cae989...@news.demon.co.uk>,
> Philip Herlihy <bounceb...@you.com> wrote:
> > In article <dorayme-B60FD4.09424919022...@news.albasani.net>, > > dora...@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'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 > 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
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...
> In article <dorayme-94FDEB.11393820022...@news.albasani.net>, > dora...@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>
> > 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.
> 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>
In article <6g7dshv38lvg$.xfpnpf3fsqhv$....@40tude.net>,
tlvp <mPiOsUcB.EtLlL...@att.net> wrote:
> On Mon, 20 Feb 2012 14:39:41 +1100, dorayme wrote:
...
> > 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
> 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 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.
> In article<MPG.29ac5f74eac3de9989...@news.demon.co.uk>,
> Philip Herlihy<bounceb...@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.
On Tue, 21 Feb 2012 08:18:21 +1100, dorayme wrote:
> ... 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
-- Avant de repondre, jeter la poubelle, SVP.
In article <jhue6s$ke...@dont-email.me>, gusrich...@netscape.net says...
> On 2/20/2012 4:09 PM, dorayme wrote:
> > In article<MPG.29ac5f74eac3de9989...@news.demon.co.uk>,
> > Philip Herlihy<bounceb...@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.
> In article <MPG.29ac5f74eac3de9989...@news.demon.co.uk>,
> Philip Herlihy <bounceb...@you.com> wrote:
> > In article <dorayme-94FDEB.11393820022...@news.albasani.net>, > > dora...@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>
> > > 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.
> > 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>
(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)
