Critique CSS layout (1st go - fingers crossed)

[lime]

I've been using CSS for a while, however always using tables for the layout.

This is my first go using a CSS only layout. After many versions (about 7 of
them) this is the final version that I would like critiqued.

I have tested on the following Win browsers: IE6, NS6 & Mozilla Firefox 1.0.

http://www.limelightstudio.com.au/iss/html/

Thanks,

Helen

[Leonard Blaisdell]

In article <2v*************@uni-berlin.de>, "lime" <nu****@here.com> wrote:

This is my first go using a CSS only layout. After many versions (about 7 of
them) this is the final version that I would like critiqued.
But think of what you have learned!
I have tested on the following Win browsers: IE6, NS6 & Mozilla Firefox 1.0.
Works great in that ancient Mac browser IE5.5. And MacMozilla 1.2.1. And
it looks lovely in MacLynx.
http://www.limelightstudio.com.au/iss/html/

And it even validates.

leo

--
<http://web0.greatbasin.net/~leo/>

[Alan Cole]

In article <le******************@leosmac.sparks.nv.us>,
le*@greatbasin.com (Leonard Blaisdell) wrote:

In article <2v*************@uni-berlin.de>, "lime" <nu****@here.com> wrote:

This is my first go using a CSS only layout. After many versions (about 7
of
them) this is the final version that I would like critiqued.

But think of what you have learned!

I have tested on the following Win browsers: IE6, NS6 & Mozilla Firefox
1.0.

Works great in that ancient Mac browser IE5.5. And MacMozilla 1.2.1. And
it looks lovely in MacLynx.

http://www.limelightstudio.com.au/iss/html/

And it even validates.

leo

I would love to critique the site, but I can never get to any of you
www/limelightstudio.com.au links. Every time I try, my browesr (FF1.0 on
Mac OSX) tries for a while and then times out.... I've tried to get to
your sites a few times now over the past few days with no joy.

Al.

--
Alan Cole. E-mail: justal at lineone dot net
http://www.forces-of-nature.co.uk [Coastal Sports]
http://www.tsunami-site-design.co.uk [Website Design]
http://tinyurl.com/64xrd [Plusnet ISP]

[Toby Inkster]

lime wrote:

http://www.limelightstudio.com.au/iss/html/

Looks pretty good.

Text for the main body of the page is a bit small though.

Using a <ul> for the navigation menu would enhance its appeal to non-CSS
browsers. If you don't like the margin and bullet points that a <ul> often
carries with it, you can use CSS to remove them.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

[Neredbojias]

Without quill or qualm, lime quothed:

I've been using CSS for a while, however always using tables for the layout.

This is my first go using a CSS only layout. After many versions (about 7 of
them) this is the final version that I would like critiqued.

I have tested on the following Win browsers: IE6, NS6 & Mozilla Firefox 1.0.

http://www.limelightstudio.com.au/iss/html/

I get a horz scrollbar in IE 6 at about 850-900 pixels. Not in Moz,
though.

--
Neredbojias
Contrary to popular belief, it is believable.

[Titus A Ducksass - AKA broken-record]

On Sat, 13 Nov 2004 12:54:14 +1100, "lime" <nu****@here.com> wrote:

I've been using CSS for a while, however always using tables for the layout.

This is my first go using a CSS only layout. After many versions (about 7 of
them) this is the final version that I would like critiqued.

I have tested on the following Win browsers: IE6, NS6 & Mozilla Firefox 1.0.

http://www.limelightstudio.com.au/iss/html/

Thanks,

Helen

Looks good but lots of broken links.

<A message to top posters. Type your reply here>

--
Never be afraid to try something new. Remember that a lone amateur
built the Ark. A large group of professionals built the Titanic.

[Titus A Ducksass - AKA broken-record]

On Sat, 13 Nov 2004 08:45:09 +0000, Toby Inkster
<us**********@tobyinkster.co.uk> wrote:

lime wrote:

http://www.limelightstudio.com.au/iss/html/

Looks pretty good.

Text for the main body of the page is a bit small though.

Using a <ul> for the navigation menu would enhance its appeal to non-CSS
browsers. If you don't like the margin and bullet points that a <ul> often
carries with it, you can use CSS to remove them.

Do you have a working example of the css for this technique Toby....
I am sure you have.

<A message to top posters. Type your reply here>

--
Never be afraid to try something new. Remember that a lone amateur
built the Ark. A large group of professionals built the Titanic.

[Henry]

lime wrote:

I've been using CSS for a while, however always using tables for the layout.

This is my first go using a CSS only layout. After many versions (about 7 of
them) this is the final version that I would like critiqued.

I have tested on the following Win browsers: IE6, NS6 & Mozilla Firefox 1.0.

http://www.limelightstudio.com.au/iss/html/

Thanks,

Helen

Great effort!!!

Which Dreamweaver template did you used!?

;)

[Henry]

Toby Inkster wrote:

lime wrote:

http://www.limelightstudio.com.au/iss/html/

Looks pretty good.

Text for the main body of the page is a bit small though.

Still bigger than browser' menus.

Size good enough for billions pages, good enough for this bloke.

Get better glasses, Toby...

or...

adjust your browser settings...

;)

[Jim Higson]

lime wrote:

I've been using CSS for a while, however always using tables for the
layout.

This is my first go using a CSS only layout. After many versions (about 7
of them) this is the final version that I would like critiqued.

I have tested on the following Win browsers: IE6, NS6 & Mozilla Firefox
1.0.

FYI, is also fine on Konqueror 3.2

[Alan J. Flavell]

On Sat, 13 Nov 2004, Henry wrote:

Toby Inkster wrote:

lime wrote:

http://www.limelightstudio.com.au/iss/html/

[...] Text for the main body of the page is a bit small though.

Indeed it is, exacerbated by low colour contrast.
Still bigger than browser' menus.
What's that supposed to mean? You have no idea what my browser menus
look like

[...] adjust your browser settings...
That's fighting talk. I already -did- adjust my browser settings for
optimal viewing, i.e 1.0em is my preferred size for normal content,
given a reasonable foreground/background contrast and font face; and
I'm sure Toby will say he'd already chosen his preference in that
regard too.
;)

I'm sorry, but on this group that isn't even remotely funny. You've
got a damned cheek (and so has the page author) to tell me that my
chosen default is too big, and in need of reduction to 85% (if I'm
reading the stylesheet right) -and- aggravate that by significantly
lowering the contrast.

So this is another page that's crying out for me to use my
developer-toolbar to "disable styles" for improved readability.

[Toby Inkster]

Titus A Ducksass - AKA broken-record wrote:

Toby Inkster wrote:

lime wrote:

http://www.limelightstudio.com.au/iss/html/

Using a <ul> for the navigation menu would enhance its appeal to
non-CSS browsers. If you don't like the margin and bullet points that a
<ul> often carries with it, you can use CSS to remove them.

Do you have a working example of the css for this technique Toby....

That I do, but my example goes further than just playing with the margin
and removing bullet points. It adds pretty borders and a roll-over effect.

http://examples.tobyinkster.co.uk/css-rollovers

It's pretty thoroughly documented, so a quick read should make it obvious
which bits of CSS are relevant to the OP's page.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

[Toby Inkster]

Henry wrote:

Toby Inkster wrote:

lime wrote:

http://www.limelightstudio.com.au/iss/html/

Looks pretty good.
Text for the main body of the page is a bit small though.

Still bigger than browser' menus.

Smaller than my browser's menu. Smaller than the main navigation. 85% the
size of my preferred font size. (My preferred font size is 12pt, which is
17px on my monitor.)

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

[Lachlan Hunt]

lime wrote:

This is my first go using a CSS only layout. After many versions (about 7 of
them) this is the final version that I would like critiqued.

http://www.limelightstudio.com.au/iss/html/

It's fairly well done from a visual perspective, especially since it's
your first go at a pure CSS layout.

* The light blue backgroud with the grey text does make it harder to
read. Try lightening the background and/or darkening the text colour.
* The Privacy Statement link needs to be a different color than the
"Last Updated ..." text. I hovered over Last Spdated, sice the colour
made it look like a link, then, since it wasn't, I didn't realise
Privacy Statement was until much later.
* Try adding more visual feedback when hovering over the navigation
list. eg. By changing the colour and/or background.
The headings also should not be written in all uppercase within the
markup. I've heard it causes some screen readers to speak all the
letters, rather than read them as words. Use Title Case Like This, and
then style them using text-transform: uppercase; I would also change
the footer to this, just to keep the links together:

_Privacy Statement_ | _Website Design by Limelight Design Studios_
Last updated: 13th November 2004

Make both of those links the same colour, but different from the Last
Updated line.

There are also some markup issues:

* Headings. There's no <h1> - <h6> elements in the entire document.
- Put the ISS logo within an <h1>
- Page title, "Welcome", in <h2>
- Then <h3> for the last two that you have in all uppercase.
* Navigation list: Use <ul> and <li> for each item.
* Remove most, if not all <br> elements, and replace them with more
semantic options. (Most will be replaced with correct <li> and <hn>
elements)
* There seems to be an excessive number of <div>s, and the main content
is incorrectly within <div id="pageTitle">, which should really be an
<h2> anyway.

--
Lachlan Hunt
http://lachy.id.au/
http://GetFirefox.com/ Rediscover the Web
http://SpreadFirefox.com/ Igniting the Web

[kchayka]

lime wrote:

This is my first go using a CSS only layout.

http://www.limelightstudio.com.au/iss/html/

f-up set to alt.html.critique.

Too-small font-size for body text combined with reduced contrast between
text and background colors makes it quite hard to read.

You've got mostly div soup here. Failure to use semantic markup can
create unnecessary accessibility barriers. Use "div" only when there
isn't a more appropriate element.

Your headings are a good example of what _not_ to do. You have no
heading markup at all in these pages. Instead, it's stuff like
<div id="pageTitle">Title
<p><strong>SUBHEADING</strong><br>

Proper heading markup provides navigation aids to several browsers,
among which are Opera and most screen readers. Typing all caps for the
subheading creates another problem - some screen readers may interpret
all caps as abbreviations or acronyms, and read each letter individually.

Use proper heading levels. The banner should be <h1>, pageTitle should
be <h2>, SUBHEADING should be <h3>. Use CSS to style margins, colors,
etc. If you must have all caps, do that with CSS, too, with
text-transform:uppercase.

Your navigation menu should also be list markup. See
<URL:http://www.alistapart.com/articles/taminglists/>

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[kchayka]

Leonard Blaisdell wrote:

Works great in that ancient Mac browser IE5.5.

AFAIK, there is no IE 5.5 for Mac. Is that a typo?

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Kris]

In article <2v*************@uni-berlin.de>, kchayka <us****@c-net.us>
wrote:

Works great in that ancient Mac browser IE5.5.

AFAIK, there is no IE 5.5 for Mac. Is that a typo?

IE/Mac goes no higher than version 5.2.3. To put things in perspective,
IE6(SP1) is older than IE/Mac 5.2.3.

--
Kris
<kr*******@xs4all.netherlands> (nl)

[kchayka]

Kris wrote:

To put things in perspective, IE6(SP1) is older than IE/Mac 5.2.3.

How about another perspective? Mac IE 5 hasn't had any real
embellishments where its CSS capabilities are concerned. It's still
stuck on good support of CSS1 and dodgy support of CSS2. Overflow is
quite broken. Handling inline lists is dreadful. I could go on, but I won't.

It may well have been ahead of its time when it was first released, but
it has most certainly fallen rather far behind the pack. Its bugs and
deficiencies have given me, personally, more trouble than IE6 has.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Brian]

Kris wrote:

kchayka wrote:

Works great in that ancient Mac browser IE5.5.

AFAIK, there is no IE 5.5 for Mac. Is that a typo?

IE/Mac goes no higher than version 5.2.3. To put things in
perspective, IE6(SP1) is older than IE/Mac 5.2.3.

True enough, but AIUI, IE/Mac 5.2.3 contains fairly minor changes from
IE 5.2 and, in turn, 5.1, also for the Mac. Whereas IE Win 6.0 contains
fairly substantial changes from 5.5 Win. Mind, I'm not arguing that 6.0
is a better browser. In some ways, Mac 5.x is a better browser, most
notably in support of important standards. No, not CSS! I'm talking
about trivial things like interworking protocols defining content type
and such. You know, thoese pesky security concerns. ;-)

Still, IE 5.x Mac is a fairly old browser.

--
Brian (remove "invalid" to email me)

[Brian]

Lachlan Hunt wrote:

* Headings. There's no <h1> - <h6> elements in the entire document. - Put the ISS logo within an <h1>
That sounds good, but only for the home page.
- Page title, "Welcome", in <h2>
Not so sure about that. "Welcome" is not much of a heading, is it? It
doesn't separate parts of the document. The whole page is a welcome
page. Either make it part of <h1>, or put it in a <div>.
- Then <h3> for the last two that you have in all uppercase.

I'd make those <h2>.

--
Brian (remove "invalid" to email me)

[Titus A Ducksass - AKA broken-record]

On Sat, 13 Nov 2004 13:23:19 +0000, Toby Inkster
<us**********@tobyinkster.co.uk> wrote:

Titus A Ducksass - AKA broken-record wrote:

Toby Inkster wrote:

lime wrote:

http://www.limelightstudio.com.au/iss/html/

Using a <ul> for the navigation menu would enhance its appeal to
non-CSS browsers. If you don't like the margin and bullet points that a
<ul> often carries with it, you can use CSS to remove them.

Do you have a working example of the css for this technique Toby....

That I do, but my example goes further than just playing with the margin
and removing bullet points. It adds pretty borders and a roll-over effect.

http://examples.tobyinkster.co.uk/css-rollovers

It's pretty thoroughly documented, so a quick read should make it obvious
which bits of CSS are relevant to the OP's page.

Is there a method that allows drop down menus?

<A message to top posters. Type your reply here>

--
Never be afraid to try something new. Remember that a lone amateur
built the Ark. A large group of professionals built the Titanic.

[Barbara de Zoete]

On Sat, 13 Nov 2004 19:13:49 GMT, Titus A Ducksass - AKA broken-record
<[e-mail]> wrote:

On Sat, 13 Nov 2004 13:23:19 +0000, Toby Inkster
<us**********@tobyinkster.co.uk> wrote:

http://examples.tobyinkster.co.uk/css-rollovers

It's pretty thoroughly documented, so a quick read should make it
obvious
which bits of CSS are relevant to the OP's page.

Is there a method that allows drop down menus?

It's along the line of Toby's page: you markup your menu's as lists and if
you require a second level, the dropdown part, you nest a new list for
that. Then, with CSS, you play a bit of hide and seek with those nested
lists. Hide it when the page displays plainly, but when a relevant menu
item gets hovered or gets the focus, display the nested list:

markup:
<ul id="menu">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a>
<ul>
<li><a href="#">item 3.1</a></li>
<li><a href="#">item 3.2</a></li>
</ul>
</li>
</ul>

css:
ul#menu ul li ul {
display:none; }

ul#menu ul li:hover ul {
display:block; /*or any other display you need*/}

You can add all the styles you want to both the list items and the anchor
elements, for hover, positioning, size and all. Will work in almost all
modern graphical browsers.
But remember: IE6 is not a _modern_ browser; hence it doesn't work in IE
:-( For one, IE doesn't like hovering on anything else than the anchor
element and secondly, it cannot play hide and seek with content.

I've got some examples on line (text is in Dutch, but the markup and the
styles are pretty streight forward):
<http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_menu-met-hovereffect.html>

--
PretLetters <http://home.wanadoo.nl/b.de.zoete/>
Webontwerp <http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html>
Zweefvliegen <http://home.wanadoo.nl/b.de.zoete/html/vliegen.html>
DTD <http://home.wanadoo.nl/b.de.zoete/dtd/not_so_strict.dtd>

[Kris]

In article <2v*************@uni-berlin.de>, kchayka <us****@c-net.us>
wrote:

To put things in perspective, IE6(SP1) is older than IE/Mac 5.2.3.

How about another perspective? Mac IE 5 hasn't had any real
embellishments where its CSS capabilities are concerned. It's still
stuck on good support of CSS1 and dodgy support of CSS2. Overflow is
quite broken. Handling inline lists is dreadful. I could go on, but I won't.

It may well have been ahead of its time when it was first released, but
it has most certainly fallen rather far behind the pack. Its bugs and
deficiencies have given me, personally, more trouble than IE6 has.

Luckily, CSS is fairly easy hidden from this browser.

--
Kris
<kr*******@xs4all.netherlands> (nl)

[Titus A Ducksass - AKA broken-record]

On Sat, 13 Nov 2004 21:03:24 +0100, "Barbara de Zoete"
<b_********@hotmail.com> wrote:

On Sat, 13 Nov 2004 19:13:49 GMT, Titus A Ducksass - AKA broken-record
<[e-mail]> wrote:

On Sat, 13 Nov 2004 13:23:19 +0000, Toby Inkster
<us**********@tobyinkster.co.uk> wrote:

http://examples.tobyinkster.co.uk/css-rollovers

It's pretty thoroughly documented, so a quick read should make it
obvious
which bits of CSS are relevant to the OP's page.

Is there a method that allows drop down menus?

It's along the line of Toby's page: you markup your menu's as lists and if
you require a second level, the dropdown part, you nest a new list for
that. Then, with CSS, you play a bit of hide and seek with those nested
lists. Hide it when the page displays plainly, but when a relevant menu
item gets hovered or gets the focus, display the nested list:

markup:
<ul id="menu">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a>
<ul>
<li><a href="#">item 3.1</a></li>
<li><a href="#">item 3.2</a></li>
</ul>
</li>
</ul>

css:
ul#menu ul li ul {
display:none; }

ul#menu ul li:hover ul {
display:block; /*or any other display you need*/}

You can add all the styles you want to both the list items and the anchor
elements, for hover, positioning, size and all. Will work in almost all
modern graphical browsers.
But remember: IE6 is not a _modern_ browser; hence it doesn't work in IE
:-( For one, IE doesn't like hovering on anything else than the anchor
element and secondly, it cannot play hide and seek with content.

I've got some examples on line (text is in Dutch, but the markup and the
styles are pretty streight forward):
<http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_menu-met-hovereffect.html>

Hmmm, what do you do when the majority of your users are IE orientated
- captive audience in my case.

Cant use java script as a lot of my users are in fact blind.

<A message to top posters. Type your reply here>

--
Never be afraid to try something new. Remember that a lone amateur
built the Ark. A large group of professionals built the Titanic.

[Barbara de Zoete]

On Sat, 13 Nov 2004 21:41:06 GMT, Titus A Ducksass - AKA broken-record
<[e-mail]> wrote:

On Sat, 13 Nov 2004 21:03:24 +0100, "Barbara de Zoete"
<b_********@hotmail.com> wrote:

[ 8< menu's, list items, css effects (like hover and drop-down) ]
Hmmm, what do you do when the majority of your users are IE orientated
- captive audience in my case.
Make another strategical choice as to how to layout your page?
Cant use java script as a lot of my users are in fact blind.

And how are hover effects and drop downs (done in what ever way) going to
be useful to these people, if I may ask?
--
PretLetters <http://home.wanadoo.nl/b.de.zoete/>
Webontwerp <http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html>
Zweefvliegen <http://home.wanadoo.nl/b.de.zoete/html/vliegen.html>
DTD <http://home.wanadoo.nl/b.de.zoete/dtd/not_so_strict.dtd>

[Toby Inkster]

Titus A Ducksass - AKA broken-record wrote:

Is there a method that allows drop down menus?

Several. One of the best was the one they used at Netscape DevEdge.
Unfortunately AOL pulled that site without warning a few weeks ago.

You can find the site archived here though:
http://web.archive.org/web/*/http://...e.netscape.com

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

[Henry]

Toby Inkster wrote:

Henry wrote:

Toby Inkster wrote:

lime wrote:
http://www.limelightstudio.com.au/iss/html/

Looks pretty good.
Text for the main body of the page is a bit small though.

Still bigger than browser' menus.

Smaller than my browser's menu. Smaller than the main navigation. 85% the
size of my preferred font size. (My preferred font size is 12pt, which is
17px on my monitor.)

You must have some weird settings.

The main text is bigger than a menu in IE6.0 and Firefox in both
resolutions, 800x600 and 1024x768 with normal fonts. Windows XP.

I use Thunderbird as news reader and again, the text in Thunderbird is
smaller (default settings) than text on his page.

On Yahoo the text is smaller and I don't think that guys at Yahoo are
trying hard to alienate people from their web site.

I wish I could match their success. They must be doing it right.

Since no one is complaining about the text settings, my guess is, your
settings are wrong or weird browser settings or some Linux crap browser.

In such case the guy may sleep well. Job well done. On 98% machines the
page will look right.

YOU should re adjust your settings.

;)

[Toby Inkster]

Henry wrote:

You must have some weird settings.
No, not really. I have configured my browser for 12pt text -- the same
sized text on the menus and on web pages. Sounds pretty sensible to me,
doesn't it to you?

The original poster used "font-size:85%" on his page, taking the font size
of the content down to 0.85x12pt = 10.2pt, which is smaller than the 12pt
text in my menus.
On Yahoo the text is smaller
On Yahoo the font-size given is 84%, which for all intents and purposes is
the same size as 85% (once you take rounding into account)

It is also too small.
I don't think that guys at Yahoo are trying hard to alienate people
from their web site. I wish I could match their success. They must be
doing it right.

They are doing some things right:

- they provide compelling content (directory, news, reviews,
weather, etc)
- they provide useful services (search, e-mail, chat, etc)

But they are also doing some things wrong:

- their fonts are too small
- their pages are still, after all these years, butt-ugly

But they are definitely improving.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

[Lachlan Hunt]

Brian wrote:

Lachlan Hunt wrote:

- Page title, "Welcome", in <h2>

Not so sure about that. "Welcome" is not much of a heading, is it? It
doesn't separate parts of the document. The whole page is a welcome
page. Either make it part of <h1>, or put it in a <div>.

From the way it is being presented, it looks like a heading to me, it
is called the pageTitle by the div's id in the markup, and for other
pages (such as the About page [1]), it is used more appropriately as a
heading with better text. But I do agree that "Welcome" may not be the
best heading for the first page, perhaps that should be changed to
something better, but don't know what.

[1] http://www.limelightstudio.com.au/iss/html/aboutus.html
--
Lachlan Hunt
http://lachy.id.au/
http://GetFirefox.com/ Rediscover the Web
http://SpreadFirefox.com/ Igniting the Web

[Henry]

Toby Inkster wrote:

Henry wrote:

You must have some weird settings.

No, not really. I have configured my browser for 12pt text -- the same
sized text on the menus and on web pages. Sounds pretty sensible to me,
doesn't it to you?

Nope! :)

As you have said, works for you but not really. Yahoo fonts are to small!

:)
The original poster used "font-size:85%" on his page, taking the font size
of the content down to 0.85x12pt = 10.2pt, which is smaller than the 12pt
text in my menus.

But... you are smart bugger and you can do it.

:)

90% people have not a slightest idea that in the browser size of fonts
can be changed.

So, they are using default settings and in these that page looks and
reads fine.

That's why I'm using default 1024x768, 32 bit with normal font, using
great monitor, 19" CRT ViewSonic with refresh rate 120.

On 17" I would still use 1024X768 and still is comfortable for me.

The next resolution is not comfortable for me.

I'm about 51 years old and I do wear 2 pairs of glasses. I pair is for
working with computers, other for reading and long distance.

And I can't complain about font size of Yahoo. I have problems reading
some stuff on the paper, especially when I have to put Windows XP serial
number. M$'s B looks the same like number 8 and I have to put both pairs
of glasses to read that bloody number!
:(

Cheers...

[Titus A Ducksass - AKA broken-record]

On Sat, 13 Nov 2004 22:46:59 +0100, "Barbara de Zoete"
<b_********@hotmail.com> wrote:

On Sat, 13 Nov 2004 21:41:06 GMT, Titus A Ducksass - AKA broken-record
<[e-mail]> wrote:

On Sat, 13 Nov 2004 21:03:24 +0100, "Barbara de Zoete"
<b_********@hotmail.com> wrote:

[ 8< menu's, list items, css effects (like hover and drop-down) ]

Hmmm, what do you do when the majority of your users are IE orientated
- captive audience in my case.

Make another strategical choice as to how to layout your page?

I like that idea... <Grin>

Cant use java script as a lot of my users are in fact blind.

And how are hover effects and drop downs (done in what ever way) going to
be useful to these people, if I may ask?

Hover isn't an issue it is for the few that can see, those that cant,
tab through the menu and it gets read out to them.

I am interested in getting the drop downs as a method of removing
screen clutter - 30ish menu items to 4 main areas.

<A message to top posters. Type your reply here>

--
Never be afraid to try something new. Remember that a lone amateur
built the Ark. A large group of professionals built the Titanic.

[lime]

"Leonard Blaisdell" wrote in message ...

"lime" wrote:

This is my first go using a CSS only layout. After many versions (about 7
of
them) this is the final version that I would like critiqued.

But think of what you have learned!

That's right! And I'd been waiting until I had the extra time to do so as
well.

I have tested on the following Win browsers: IE6, NS6 & Mozilla Firefox
1.0.

Works great in that ancient Mac browser IE5.5. And MacMozilla 1.2.1. And
it looks lovely in MacLynx.

Excellent, thank you for checking.

http://www.limelightstudio.com.au/iss/html/

And it even validates.

Ah yes, that's something I *always* check before posting!

[lime]

"Alan Cole" wrote in message ...

> http://www.limelightstudio.com.au/iss/html/

I would love to critique the site, but I can never get to any of you
www/limelightstudio.com.au links. Every time I try, my browesr (FF1.0 on
Mac OSX) tries for a while and then times out.... I've tried to get to
your sites a few times now over the past few days with no joy.

Hmm, strange... I wonder why...

You're missing out you know that don't you? ;o)

[lime]

"Toby Inkster" wrote in message ...

lime wrote:

http://www.limelightstudio.com.au/iss/html/
Looks pretty good.

Great, thanks for checking.

Text for the main body of the page is a bit small though.
By 5% .... ;o)
Using a <ul> for the navigation menu would enhance its appeal to non-CSS
browsers. If you don't like the margin and bullet points that a <ul> often
carries with it, you can use CSS to remove them.

I'll be giving that a go, thanks for the tip Toby.

[lime]

"Neredbojias" wrote in message ...

Without quill or qualm, lime quothed:

I've been using CSS for a while, however always using tables for the
layout.

This is my first go using a CSS only layout. After many versions (about 7
of
them) this is the final version that I would like critiqued.

I have tested on the following Win browsers: IE6, NS6 & Mozilla Firefox
1.0.

http://www.limelightstudio.com.au/iss/html/

I get a horz scrollbar in IE 6 at about 850-900 pixels. Not in Moz,
though.

Hmm, ok thanks. I'll double check that to see why it may be doing so...

[lime]

"Titus A Ducksass - AKA broken-record" wrote in message ...

"lime" wrote:

I've been using CSS for a while, however always using tables for the
layout.

This is my first go using a CSS only layout. After many versions (about 7
of
them) this is the final version that I would like critiqued.

I have tested on the following Win browsers: IE6, NS6 & Mozilla Firefox
1.0.

http://www.limelightstudio.com.au/iss/html/

Looks good but lots of broken links.

Should have mentioned that none of the links (bar the about us page)
works...

Thanks for checking too.

[lime]

"Henry" wrote in message ...

lime wrote:

I've been using CSS for a while, however always using tables for the
layout.

This is my first go using a CSS only layout. After many versions (about 7
of them) this is the final version that I would like critiqued.

I have tested on the following Win browsers: IE6, NS6 & Mozilla Firefox
1.0.

http://www.limelightstudio.com.au/iss/html/

Great effort!!!

Thanks!!!
Which Dreamweaver template did you used!?
ROTFLMOA, yeah right...
;)

Oh - the smiley... glad you were only joking ;o)

[lime]

"Lachlan Hunt" wrote in message ...

lime wrote:

This is my first go using a CSS only layout. After many versions (about 7
of them) this is the final version that I would like critiqued.

http://www.limelightstudio.com.au/iss/html/
It's fairly well done from a visual perspective, especially since it's
your first go at a pure CSS layout.

Thank you Lachlan, your praise is much appreciated as is the comprehensive
response below....

* The light blue backgroud with the grey text does make it harder to
read. Try lightening the background and/or darkening the text colour.]
Fair call - I will make the text #333333 instead of the current #555555
* The Privacy Statement link needs to be a different color than the
"Last Updated ..." text. I hovered over Last Spdated, sice the colour
made it look like a link, then, since it wasn't, I didn't realise
Privacy Statement was until much later.
Another fair call - I'll make the "last updated" #333333 like the main
content.
* Try adding more visual feedback when hovering over the navigation
list. eg. By changing the colour and/or background.
I'll have a play with that to see how it can be enhanced.
The headings also should not be written in all uppercase within the
markup. I've heard it causes some screen readers to speak all the
letters, rather than read them as words. Use Title Case Like This, and
then style them using text-transform: uppercase;
Great tip, thank you. I don't even know why I kept the header in upper - it
was a straight copy/paste job on my behalf...
I would also change the footer to this, just to keep the links together:
_Privacy Statement_ | _Website Design by Limelight Design Studios_
Last updated: 13th November 2004
Make both of those links the same colour, but different from the Last
Updated line.
I'd rather keep Website design separate to the Privacy link (and smaller as
well)

There are also some markup issues:
This is the juicy bit I was wondering about...
* Headings. There's no <h1> - <h6> elements in the entire document.
- Put the ISS logo within an <h1>
- Page title, "Welcome", in <h2>
- Then <h3> for the last two that you have in all uppercase.
Beautiful, shall do.
* Navigation list: Use <ul> and <li> for each item.
I'll give that a go as per Toby's post.
* Remove most, if not all <br> elements, and replace them with more
semantic options. (Most will be replaced with correct <li> and <hn>
elements)
<hn>? This one I'll need to read up on as I'm not familiar with that one...
* There seems to be an excessive number of <div>s, and the main content
is incorrectly within <div id="pageTitle">, which should really be an
<h2> anyway.

Once I add the <h#> throughout the document I'll see what happens to the
layout before removing the main content outisde of the <pageTitle> div... I
know that after 7 attempts to get things looking good, I may have actually
over-tweaked things...

Thanks again for checking and your feedback.

PS: I now have this Aussie song stuck in my head because of your name... 3
girls chanting L-A-C-H-L-A-N

[Lachlan Hunt]

lime wrote:

"Lachlan Hunt" wrote in message ...

* Remove most, if not all <br> elements, and replace them with more
semantic options. (Most will be replaced with correct <li> and <hn>
elements)
<hn>? This one I'll need to read up on as I'm not familiar with that one...

<hn> is simply a common abbreviation for the heading elements, <h1> to
<h6>, where n represents the number. There is actually no <hn> element
in HTML, I just incorrectly assumed you would understand what I meant.
PS: I now have this Aussie song stuck in my head because of your name... 3
girls chanting L-A-C-H-L-A-N

I'm not sure what song your referring to.

--
Lachlan Hunt
http://lachy.id.au/
http://GetFirefox.com/ Rediscover the Web
http://SpreadFirefox.com/ Igniting the Web

[kchayka]

Titus A Ducksass - AKA broken-record wrote:

On Sat, 13 Nov 2004 22:46:59 +0100, "Barbara de Zoete"
<b_********@hotmail.com> wrote:

On Sat, 13 Nov 2004 21:41:06 GMT, Titus A Ducksass - AKA broken-record
<[e-mail]> wrote:

Cant use java script as a lot of my users are in fact blind.

And how are hover effects and drop downs (done in what ever way) going to
be useful to these people, if I may ask?

I am interested in getting the drop downs as a method of removing
screen clutter - 30ish menu items to 4 main areas.

I would suggest not bother making the drop-down submenus accessible to
keyboard users, among which are blind users. Make the 4 top-level items
links to section index pages. List the submenu items as plain text links
on this page.

I suggest this because I am primarily a keyboard user myself. I've come
across a few DHTML menus that automatically open a submenu when focus is
put on the parent menu item. This can be a royal PITA. It means that if
I'm tabbing to get to the last menu, I have to go through all those
other menus first. For someone using a screen reader, they could still
end up listening to 30 links on every page. It is counter-productive.

Granted, there are usually ways for a keyboard user to get around these
annoynaces, but the point is the annoynace needn't be there to begin
with. A limited number of choices per page is not a bad thing. Don't
feel you need to include a site map on every page. Make a separate page
for that and/or include site search.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[kchayka]

Henry wrote:

That's why I'm using default 1024x768, 32 bit with normal font, using
great monitor, 19" CRT ViewSonic with refresh rate 120.

The next resolution is not comfortable for me.
Then don't use it. Your preference doesn't mean no one else should use
it, either. I also have a 19" monitor, but set to 1600x1200. I would set
it even higher, but then the refresh rate would be unacceptable even for me.
I'm about 51 years old and I do wear 2 pairs of glasses. I pair is for
working with computers, other for reading and long distance.
I have a separate pair of glasses, too. My eyesight is not good and gets
worse every year. So what's your point?
And I can't complain about font size of Yahoo.

Which is not surprising considering you're using such a low screen
resolution.

There are ways to compensate for higher resolutions that make text more
readable. You apparently don't need them, but I and many others do. One
of those ways is setting a suitable browser default text size. Yahoo
seems to think I don't know what's good for me in my own browsing
environment.

Just because they're big, doesn't make them right. In fact, big sites
are often some of the worst offenders.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Titus A Ducksass - AKA broken-record]

On Sun, 14 Nov 2004 08:26:41 -0600, kchayka <us****@c-net.us> wrote:

Titus A Ducksass - AKA broken-record wrote:

On Sat, 13 Nov 2004 22:46:59 +0100, "Barbara de Zoete"
<b_********@hotmail.com> wrote:

On Sat, 13 Nov 2004 21:41:06 GMT, Titus A Ducksass - AKA broken-record
<[e-mail]> wrote:

Cant use java script as a lot of my users are in fact blind.

And how are hover effects and drop downs (done in what ever way) going to
be useful to these people, if I may ask?
I am interested in getting the drop downs as a method of removing
screen clutter - 30ish menu items to 4 main areas.

I would suggest not bother making the drop-down submenus accessible to
keyboard users, among which are blind users. Make the 4 top-level items
links to section index pages. List the submenu items as plain text links
on this page.

Makes sense.
I suggest this because I am primarily a keyboard user myself. I've come
across a few DHTML menus that automatically open a submenu when focus is
put on the parent menu item. This can be a royal PITA. It means that if
I'm tabbing to get to the last menu, I have to go through all those
other menus first. For someone using a screen reader, they could still
end up listening to 30 links on every page. It is counter-productive.
It sounds terrible at the moment - menu is on main page only. All
other pages link back to the main page and possibly some sub pages.
Granted, there are usually ways for a keyboard user to get around these
annoynaces, but the point is the annoynace needn't be there to begin
with. A limited number of choices per page is not a bad thing. Don't
feel you need to include a site map on every page. Make a separate page
for that and/or include site search.

Its a site I inherited a couple of years ago which desperately needs
re-branding and a new direction. The site has c.350 pages not
counting the intranet.

There is no site map but there is a google search built in.
I used to use Atomz until they added adverts from google.
I now use google without adverts. <GRIN>.
<A message to top posters. Type your reply here>

--
Never be afraid to try something new. Remember that a lone amateur
built the Ark. A large group of professionals built the Titanic.

[lime]

"Lachlan Hunt" wrote in message ...

lime wrote:

"Lachlan Hunt" wrote in message ...

* Remove most, if not all <br> elements, and replace them with more
semantic options. (Most will be replaced with correct <li> and <hn>
elements)

<hn>? This one I'll need to read up on as I'm not familiar with that
one...

<hn> is simply a common abbreviation for the heading elements, <h1> to
<h6>, where n represents the number. There is actually no <hn> element in
HTML, I just incorrectly assumed you would understand what I meant.

Aha! Simple, thanks.

PS: I now have this Aussie song stuck in my head because of your name...
3 girls chanting L-A-C-H-L-A-N

I'm not sure what song your referring to.

They play it on Triple J, it's by "Your wedding night", it's actually 2
girls chanting not 3. Great song...

[Leonard Blaisdell]

In article <2v*************@uni-berlin.de>, kchayka <us****@c-net.us> wrote:

Leonard Blaisdell wrote:

Works great in that ancient Mac browser IE5.5.

AFAIK, there is no IE 5.5 for Mac. Is that a typo?

Sure was. I only wish I had something higher than 5.1.

leo

--
<http://web0.greatbasin.net/~leo/>

[Uncle Pirate]

lime wrote:

http://www.limelightstudio.com.au/iss/html/

Nice work. Clean, simple, easy on the eyes.

--
Stan McCann "Uncle Pirate"
Webmaster/Computer Center Manager, NMSU at Alamogordo
Cooordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
'94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg
A zest for living must include a willingness to die. - R.A. Heinlein