Going Live
in [CSS]
|
From: Albert Ross on 15 Apr 2010 13:50 http://www.combines.org.uk/ I started with Matthew James Taylor's three column layout and rewrote the header using code I understand and which is simpler. These two factors are not unconnected . . . . . . the galleries (left hand panel) are based on Lauri's code, the photo with caption underneath I actually wrote myself. I rolled the three initially separate stylesheets into one and I think I've cleaned it up nicely but I'm prepared to be proved wrong. Some of the galleries break down into subgalleries and the code's easy to maintain when moving stuff around (bearing in mind I can still make typos when cutting and pasting <G> ) It now looks and acts essentially the same in all browsers I've tried (except Amaya, I'm wondering why I keep the POS on my computer) and behaves appropriately with changing browser window sizes, zooming and text zooming (bearing in mind the photos have an 800px width and the header graphic a 600px width) Perversely Opera insisted on putting its own background behind <p>s so I've added a background color in addition to the overall background. Complaints, criticisms and tweaks gratefully accepted My next Learning Experience will be to deconstruct his algorithm for determining column widths If you want to give yourself brain damage check out some of the "professional" manufacturers' sites (right hand panel) and run the validator over them not a pretty sight (even my Wordpress blog almost validates, the only errors being some old Mozilla specific code in the template's .css, which is more than I can say for many of the Google Blogger blogs I inhabit)
From: Jeff Thies on 15 Apr 2010 18:59 Albert Ross wrote: > http://www.combines.org.uk/ > > I started with Matthew James Taylor's three column layout and rewrote > the header using code I understand and which is simpler. These two > factors are not unconnected . . . > > . . . the galleries (left hand panel) are based on Lauri's code, the > photo with caption underneath I actually wrote myself. > > I rolled the three initially separate stylesheets into one and I think > I've cleaned it up nicely but I'm prepared to be proved wrong. > > Some of the galleries break down into subgalleries and the code's easy > to maintain when moving stuff around (bearing in mind I can still make > typos when cutting and pasting <G> ) > > It now looks and acts essentially the same in all browsers I've tried > (except Amaya, I'm wondering why I keep the POS on my computer) and > behaves appropriately with changing browser window sizes, zooming and > text zooming (bearing in mind the photos have an 800px width and the > header graphic a 600px width) > > Perversely Opera insisted on putting its own background behind <p>s so > I've added a background color in addition to the overall background. > > Complaints, criticisms and tweaks gratefully accepted I didn't look at the CSS, the html looks fine. Design is OK. There's a slight horizontal scrollbar in IE and FF. Does no harm... Here's a few design tips, I work with a designer so I'm passing along what I would be be told. The 3 columns start at slightly different height. Design theory says the tops of the lower case letters should line up. Closer would be better. Consider getting rid of the indent on the nav lists, and perhaps also the bullet, they aren't really needed. Could use a little more line-height or padding so the list items have some separation. Put a little padding in the top link box, so the background color box isn't jammed against the letters. You may wish to set a max-width. http://www.combines.org.uk/Galleries/plot/gallery.html Ditch the center and middle align. It would be better if the caption didn't extend beyond the image, hard to do that in practice though. That page needs the same navigation as the rest of the site. Overall, I like it. Jeff > > My next Learning Experience will be to deconstruct his algorithm for > determining column widths > > If you want to give yourself brain damage check out some of the > "professional" manufacturers' sites (right hand panel) and run the > validator over them > > not a pretty sight (even my Wordpress blog almost validates, the only > errors being some old Mozilla specific code in the template's .css, > which is more than I can say for many of the Google Blogger blogs I > inhabit)
From: dorayme on 15 Apr 2010 19:49 In article <35ies5tughdiuruk7ba8ghd30t4qkdnit0(a)4ax.com>, Albert Ross <spam(a)devnull.co.uk.invalid> wrote: > http://www.combines.org.uk/ > > I started with Matthew James Taylor's three column layout and rewrote > the header using code I understand and which is simpler. These two > factors are not unconnected . . . > > . . . the galleries (left hand panel) are based on Lauri's code, the > photo with caption underneath I actually wrote myself. > > I rolled the three initially separate stylesheets into one and I think > I've cleaned it up nicely but I'm prepared to be proved wrong. > > Some of the galleries break down into subgalleries and the code's easy > to maintain when moving stuff around (bearing in mind I can still make > typos when cutting and pasting <G> ) > > It now looks and acts essentially the same in all browsers I've tried > (except Amaya, I'm wondering why I keep the POS on my computer) and > behaves appropriately with changing browser window sizes, zooming and > text zooming (bearing in mind the photos have an 800px width and the > header graphic a 600px width) > > Perversely Opera insisted on putting its own background behind <p>s so > I've added a background color in addition to the overall background. > > Complaints, criticisms and tweaks gratefully accepted > To my eye, on the home page, there is a feeling of slight incompleteness (no big deal). I would recommend you consider adding a footer and getting those two grey columns to extend down to just above the footer. And I would say to have that header not so tall, the top of a web page is valuable real estate and if it is used up unnecessarily, it causes the user to have to use scrollbars (or resize the browser) earlier than he or she might want. > My next Learning Experience will be to deconstruct his algorithm for > determining column widths > There was another three col layout design that a bloke on this usenet group a while back (Bergamot) was fond of that was also a bit tricky. But compared to the MJT design, was more transparent: it used borders for the columns (which, of course, had any colour you wanted in the most straightforward way) and you would get the content (like text) to sit inside this "column" with some simple enough negative margining. I quite liked it and have used a variation of it for real on a few occasions. <http://www.bergamotus.ws/samples/3column-stretch-with-borders.htm l> I am sure your html could be simplified to leave out so many classes... but I have recently mentioned this sort of thing... Basically,if there is pattern of divs within a wrapper having certain styles, you can ..wrap div {style} instead of div.class {style] and immediately be relieved of having to actually class every thumbnail container. I know, your divs are more complicated but you can still apply this principle to reduce the amount of classes. -- dorayme
From: Jeff Thies on 18 Apr 2010 12:47 dorayme wrote: > In article <ofajs512qmb51j6ri4l9ftb8ll7vbic5la(a)4ax.com>, > Albert Ross <spam(a)devnull.co.uk.invalid> wrote: > >> On Sat, 17 Apr 2010 06:15:51 +1000, dorayme <dorayme(a)optusnet.com.au> >> wrote: >> >>> In article <gl8hs5tbbn34db8afone5vqlg0f81vcj52(a)4ax.com>, >>> Albert Ross <spam(a)devnull.co.uk.invalid> wrote: >>> >>>> On Fri, 16 Apr 2010 09:49:07 +1000, dorayme <dorayme(a)optusnet.com.au> >>>> wrote: >>>> >>>>> To my eye, on the home page, there is a feeling of slight >>>>> incompleteness (no big deal). >>>> I was going for simple, you think I overdid it? ... >>>> >>>>> I would recommend you consider >>>>> adding a footer and getting those two grey columns to extend down >>>>> to just above the footer. >>>> Yes I took out the footer on the basis that when I add more text >>>> content it'll sort itself out. Easy to put it back. >>> I only meant incomplete in respect to the look at the bottom, the >>> footer will make it nice, I did not mean anything deeper. >> I could add a link to my medical blog (I'm wheat intolerant, oh the >> irony! <G>) >> > > I hope that does not include wheat beer intolerance! I make nice > wheat beer (from the grain itself). <g> > > >> OK I've done some fettling and hit on something either I don't know or >> have forgotten: I give the list items in the side navigation panels >> list-style:none; and that gets rid of the bullets, but NOT the space >> the bullets would have taken up if they were still there. I've cheated >> with a negative margin but I'm sure I'm missing something. >> > > Many modern browsers control space in lists by use of default > padding. It can be a bit tricky because different browser use > different means but I would say to reduce the padding (to zero if > you like) rather than fiddle with margins (especially negative > margins). I tend to zero out both margin and padding and then add the padding in for li and margins for ul. As Dorayme has pointed out, IE deals with lists differently. ..my_nav_list ul, .my_nav_list li{ margin: 0; padding: 0; } That levels the playing field. Or just explicitly set everything in one selector. Depending on how you want the lines to wrap you may need either: list-style-position:inside; or: list-style-position:outside; Consider setting a line-height. Dealing with lists is an art. They have tremendous utility and versatility, but it is not without a learning curve. There are some good tutorials available. Don't set negative margins unless you have a damn good reason to. Jeff
From: Albert Ross on 19 Apr 2010 09:28
On Sun, 18 Apr 2010 12:47:07 -0400, Jeff Thies <jeff_thies(a)att.net> wrote: >dorayme wrote: >> In article <ofajs512qmb51j6ri4l9ftb8ll7vbic5la(a)4ax.com>, >> Albert Ross <spam(a)devnull.co.uk.invalid> wrote: >>> OK I've done some fettling and hit on something either I don't know or >>> have forgotten: I give the list items in the side navigation panels >>> list-style:none; and that gets rid of the bullets, but NOT the space >>> the bullets would have taken up if they were still there. I've cheated >>> with a negative margin but I'm sure I'm missing something. >>> >> >> Many modern browsers control space in lists by use of default >> padding. It can be a bit tricky because different browser use >> different means but I would say to reduce the padding (to zero if >> you like) rather than fiddle with margins (especially negative >> margins). > > I tend to zero out both margin and padding and then add the padding in >for li and margins for ul. As Dorayme has pointed out, IE deals with >lists differently. Curiously the first thing I did was to take out the padding, which didn't work. When I did it again, WITHOUT the typo, it worked perfectly <G> >Dealing with lists is an art. They have tremendous utility and >versatility, but it is not without a learning curve. There are some good >tutorials available. Yeah some things which appear complicated are easy to do. Some things which appear simple are anything but |