Critique CSS layout (1st go - fingers crossed)

[Titus A Ducksass - AKA broken-record]

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>

 

[Barbara de Zoete]

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>

 

[Kris]

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.[/QUOTE]

Luckily, CSS is fairly easy hidden from this browser.

 

[Titus A Ducksass - AKA broken-record]

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>

 

[Barbara de Zoete]

On Sat, 13 Nov 2004 21:03:24 +0100, "Barbara de Zoete"

[ 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?

 

[Toby Inkster]

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://devedge.netscape.com

 

[Henry]

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]

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.

 

[Lachlan Hunt]

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

 

[Henry]

Henry wrote:




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 21:03:24 +0100, "Barbara de Zoete"

[ 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?

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>

 

[Spartanicus]

Inappropriate cross posting removed.

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.

Instead of trying to apply a work around that will fail in certain
circumstances, I'd suggest solving the real problem: to many links on
the page.

If the amount of links is annoying for visual access, how do you think l
it will appear to clients that access it aurally?

 

[lime]

"Leonard Blaisdell" wrote in message ...

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.

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.

And it even validates.

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

 

[lime]

"Alan Cole" wrote in message ...

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]

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 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 ...

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 ...

Great effort!!!
Thanks!!!

Which Dreamweaver template did you used!?

ROTFLMOA, yeah right...

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

 

[lime]

FYI, is also fine on Konqueror 3.2

Thanks for checking Jim.

 

[lime]

"Lachlan Hunt" wrote in message ...

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)

* 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