Critique CSS layout (1st go - fingers crossed)

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

In article <2vmlu7F2n865pU1 (AT) uni-berlin (DOT) de>, kchayka <usenet (AT) c-net (DOT) 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
<kristiaan (AT) xs4all (DOT) netherlands> (nl)

On Sat, 13 Nov 2004 13:23:19 +0000, Toby Inkster
<usenet200411 (AT) tobyinkster (DOT) 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.

On Sat, 13 Nov 2004 19:13:49 GMT, Titus A Ducksass - AKA broken-record
<me (AT) neverumind (DOT) com> wrote:

On Sat, 13 Nov 2004 13:23:19 +0000, Toby Inkster
usenet200411 (AT) tobyinkster (DOT) 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>

In article <2vmv75F2o2h8fU1 (AT) uni-berlin (DOT) de>, kchayka <usenet (AT) c-net (DOT) 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
<kristiaan (AT) xs4all (DOT) netherlands> (nl)

On Sat, 13 Nov 2004 21:03:24 +0100, "Barbara de Zoete"
<b_de_zoete (AT) hotmail (DOT) com> wrote:

On Sat, 13 Nov 2004 19:13:49 GMT, Titus A Ducksass - AKA broken-record
me (AT) neverumind (DOT) com> wrote:

On Sat, 13 Nov 2004 13:23:19 +0000, Toby Inkster
usenet200411 (AT) tobyinkster (DOT) 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/vo...vereffect.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.

On Sat, 13 Nov 2004 21:41:06 GMT, Titus A Ducksass - AKA broken-record
<me (AT) neverumind (DOT) com> wrote:

On Sat, 13 Nov 2004 21:03:24 +0100, "Barbara de Zoete"
b_de_zoete (AT) hotmail (DOT) 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 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.

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

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. Microsoft's B looks the same like number 8 and I have to put both pairs
of glasses to read that bloody number!




Cheers...