Problem with CSS Horizontal Dropdown Menu

[Jim]

Hi,

I have two questions/problems pertaining to CSS horizontal dropdown
menus and am hoping that someone here can help me out.

(1)

I'm having a problem centering the menu. I picked up the code for
this from a tutorial but that menu was flush-left justified. Not what
I want. Subsequent searches on google on how to center yielded a
varity of ways to center things but none have worked.

The only way I've been able to center the menu inside the enclosing
table is to set the margin-left property on the menu id to force the
menu to the right. It works but I don't like it because it is "hard
coded" centering. Any ideas on how to center the menu itself so that
it recenters itself automatically no matter what size table it's in?
Also, when I started out my text was left justified but in the course
of throwing in multitudes of centering options, the menu text is now
centered as well. Ideally I'd like the text to be left justified.

The test page I am working on can be found here:
URL=<http://www.nss.org/testmenu/news.htm>



(2)

If you take a look at the picture at
URL=<http://www.nss.org/testmenu/Firefox.jpgyou will see that in
Firefox the top level buttons are even and that the drop down
component appears immediately below its parent.

If you look at URL=<http://www.nss.org/testmenu/IE7.jpg>, you will see
that in Internet Explorer 7 the dropdown is shifted to the right and
that the last top level button on the right doesn't fill in properly.

Is there a way to get the menu to behave the same in both Firefox and
IE? Note that I don't have access to either IE5 or 6 so have no idea
how the code fairs there.

Thanks in advance for your help.




Best Regards, Jim

http://artsnova.com/blog

[Ben C]

Re: Problem with CSS Horizontal Dropdown Menu

On 2008-04-29, Jim <FakeAddress@as trodigitalNOT.o rgwrote:

>
Hi,
>
I have two questions/problems pertaining to CSS horizontal dropdown
menus and am hoping that someone here can help me out.
>
(1)
>
I'm having a problem centering the menu. I picked up the code for
this from a tutorial but that menu was flush-left justified. Not what
I want. Subsequent searches on google on how to center yielded a
varity of ways to center things but none have worked.
>
The only way I've been able to center the menu inside the enclosing
table is to set the margin-left property on the menu id to force the
menu to the right. It works but I don't like it because it is "hard
coded" centering. Any ideas on how to center the menu itself so that
it recenters itself automatically no matter what size table it's in?

The problem here is you want centered shrink-to-fit. For that you want
display: table, but it won't work in IE.

See

http://netweaver.com.au/alt/shrinkToFitCentring/centeringShrinkToFit.html

It's no good setting width: 100% on that div (#menu)-- you want it wide
enough for the floats in it, not to set its content area to 100% the
width of its container.

Alternatively, since you're setting exact widths on most things, you can
work out the width #menu needs to be, set it to that width, and then
give it auto left and right margins. But that's not much better than
just setting the left margin to 15px.

Or leave it as width auto, make it text-align: center, and make the
items inside it display: inline or display: inline-block. This is a
bigger change though and may cause you more problems. Display:
inline-block is not supported in FF2.

So those are the options.

My recommendation: use display: table for decent browsers and just let
it align to the left in IE. It's not going to hurt anyone to have it on
the left.

Also, when I started out my text was left justified but in the course
of throwing in multitudes of centering options, the menu text is now
centered as well. Ideally I'd like the text to be left justified.
>
The test page I am working on can be found here:
URL=<http://www.nss.org/testmenu/news.htm>

Remove text-align: center from #menu and #menu ul and remove
align="center" from the table containing #menu.

I also saw float: center in your stylesheet. There's no such thing!

On the subject of centering, why not just go for an altogether less
centered design? It looks a bit outdated these days to centre
everything, probably because it's so much harder to do practically in
non-tables CSS so everyone gives up.

(2)
>
If you take a look at the picture at
URL=<http://www.nss.org/testmenu/Firefox.jpgyou will see that in
Firefox the top level buttons are even and that the drop down
component appears immediately below its parent.
>
If you look at URL=<http://www.nss.org/testmenu/IE7.jpg>, you will see
that in Internet Explorer 7 the dropdown is shifted to the right and
that the last top level button on the right doesn't fill in properly.
>
Is there a way to get the menu to behave the same in both Firefox and
IE? Note that I don't have access to either IE5 or 6 so have no idea
how the code fairs there.

I don't have (or want) access to any version of IE so can't help you
with this one. But bear in mind also that your menus are not accessible
to people who don't have a mouse or pointing device.

That's no way to build a thriving extraterrestria l community.

[Jim]

Re: Problem with CSS Horizontal Dropdown Menu

Hi Ben,

On Tue, 29 Apr 2008 16:27:28 -0500, Ben C <spamspam@spam. eggswrote:

>On 2008-04-29, Jim <FakeAddress@as trodigitalNOT.o rgwrote:

>>
>(1)
>>
>I'm having a problem centering the menu. I picked up the code for
>this from a tutorial but that menu was flush-left justified. Not what
>I want. Subsequent searches on google on how to center yielded a
>varity of ways to center things but none have worked.
>>
>The only way I've been able to center the menu inside the enclosing
>table is to set the margin-left property on the menu id to force the
>menu to the right. It works but I don't like it because it is "hard
>coded" centering. Any ideas on how to center the menu itself so that
>it recenters itself automatically no matter what size table it's in?

>
>The problem here is you want centered shrink-to-fit. For that you want
>display: table, but it won't work in IE.

Great. Most of the traffic to the site is from folks using IE. So
whatever I do it has to work in IE back to v5. For my personal sites,
I don't care if it doesn't work in IE - I just make sure my code
passes the W3c validation.

>
>See
>http://netweaver.com.au/alt/shrinkTo...rinkToFit.html
>
>It's no good setting width: 100% on that div (#menu)-- you want it wide
>enough for the floats in it, not to set its content area to 100% the
>width of its container.

Okay. I dropped that code. No change so no harm.

>
>Alternativel y, since you're setting exact widths on most things, you can
>work out the width #menu needs to be, set it to that width, and then
>give it auto left and right margins. But that's not much better than
>just setting the left margin to 15px.

Tried the auto options but no luck there.

>
>Or leave it as width auto, make it text-align: center, and make the
>items inside it display: inline or display: inline-block. This is a
>bigger change though and may cause you more problems. Display:
>inline-block is not supported in FF2.
>
>So those are the options.

Ugh. Looks like I'm going to be stuck using the margin-left.

>
>My recommendation: use display: table for decent browsers and just let
>it align to the left in IE. It's not going to hurt anyone to have it on
>the left.

But it will look like crud.

I've confirmed that the display:table works like a charm in FF but is
ignored in IE7.

>Also, when I started out my text was left justified but in the course
>of throwing in multitudes of centering options, the menu text is now
>centered as well. Ideally I'd like the text to be left justified.
>>
>The test page I am working on can be found here:
>URL=<http://www.nss.org/testmenu/news.htm>

>
>Remove text-align: center from #menu and #menu ul and remove
>align="cente r" from the table containing #menu.

Thanks. Yeah, I was adding "centers" everywhere trying to find some
combination that would result in a centered nav bar.

>I also saw float: center in your stylesheet. There's no such thing!

Now removed.

>On the subject of centering, why not just go for an altogether less
>centered design? It looks a bit outdated these days to centre
>everything, probably because it's so much harder to do practically in
>non-tables CSS so everyone gives up.

Because the existing design is centered and I am looking for a way to
replace the current menu - which is not only kind of ugly but very
limited in scope. The problem is everyone wants their stuff to appear
on the main site nav bar. I suggested a CSS only dropdown menu as a
way of reducing the spatial overhead while increasing the number of
links available. CSS only (no javascript) because the site is
supported by all volunteers so the less background knowledge required
the better.

>

>(2)
>>
>If you take a look at the picture at
>URL=<http://www.nss.org/testmenu/Firefox.jpgyou will see that in
>Firefox the top level buttons are even and that the drop down
>component appears immediately below its parent.
>>
>If you look at URL=<http://www.nss.org/testmenu/IE7.jpg>, you will see
>that in Internet Explorer 7 the dropdown is shifted to the right and
>that the last top level button on the right doesn't fill in properly.
>>
>Is there a way to get the menu to behave the same in both Firefox and
>IE? Note that I don't have access to either IE5 or 6 so have no idea
>how the code fairs there.

>
>I don't have (or want) access to any version of IE so can't help you
>with this one.

Rats. Not only the above problems but with IE7 when the page first
loads, the right-most button is invisible until you actually
mouse-over the button immediately to its left.

But bear in mind also that your menus are not accessible
>to people who don't have a mouse or pointing device.

Are there such? I've never accessed a link without using a mouse or
stylus. Can I assume that this is an issue for folks who are blind
and use some sort of reader? Is it that it's a drop-down menu that
creates the problem?

>That's no way to build a thriving extraterrestria l community.

Right but we need to start somewhere.

Check out this video of Stephen Hawking we just added to the site:

http://www.nss.org/resources/library/spacepolicy/hawking.htm

Thanks for your help Ben.







Best Regards, Jim

http://artsnova.com/blog

[dorayme]

Re: Problem with CSS Horizontal Dropdown Menu

In article <slrng1f4m4.hq7 .spamspam@bowse r.marioworld>,
Ben C <spamspam@spam. eggswrote:

I also saw float: center in your stylesheet. There's no such thing!
>

Now and then, I wonder about the usefulness of such a possibility!
Perhaps it would just complicate design work for no big gain.

On the subject of centering, why not just go for an altogether less
centered design?

Hear hear...

It looks a bit outdated these days to centre
everything, probably because it's so much harder to do practically in
non-tables CSS so everyone gives up.

To centre a whole website is one thing, but to centre a lot within the
main frame does not look good to my eye.

Rather than being old fashioned, I think it is just a naive aesthetic
and for this reason: it is the one simple design principle anyone can
come up with no matter how inexperienced, 'make things nice and
symmetrical".

Symmetry of *this* kind is obvious and generally easy to do. So it tends
to be something inexperienced people do (children do this a lot) - what
else can they do, given their experience and desire to make it 'nicely
laid out'.

--
dorayme

[Ben C]

Re: Problem with CSS Horizontal Dropdown Menu

On 2008-04-29, Jim <FakeAddress@as trodigitalNOT.o rgwrote:

Hi Ben,
>
On Tue, 29 Apr 2008 16:27:28 -0500, Ben C <spamspam@spam. eggswrote:

[...]

>But bear in mind also that your menus are not accessible
>>to people who don't have a mouse or pointing device.

>
Are there such? I've never accessed a link without using a mouse or
stylus. Can I assume that this is an issue for folks who are blind
and use some sort of reader?

Could be, but also for situations like a browser running on a TV set
being controlled with a TV remote control.

Is it that it's a drop-down menu that creates the problem?

It's the fact that you need a mouse to make it drop it down.

If you make every link visible on the page then you can get around them
with TAB. The TV browser may have something smarter than TAB (i.e. 2D
rather than 1D) but it will be navigating between the same locations.

You could also do a menu with keypress handlers, but that would require
JS, and that's already considered poor for accessibility since people
turn it off.

>>That's no way to build a thriving extraterrestria l community.

>
>
Right but we need to start somewhere.
>
Check out this video of Stephen Hawking we just added to the site:
http://www.nss.org/resources/library...cy/hawking.htm

Interesting, thanks for the link.

I didn't realize SETI had more or less ruled out technological life
within 100 light-years. That's quite a few thousand stars to have
checked.

Now, Hawking says: "Personally , I favour the second possibility, that
primitive life is relatively common but that intelligent life is very
rare."

Intelligent but non-technological seems likely to be relatively common
if you extend the idea of ranking the probability of events in our own
history by how long it took for them to occur.

[Jim]

Re: Problem with CSS Horizontal Dropdown Menu

Hello dorayme,

On Wed, 30 Apr 2008 09:10:34 +1000, dorayme
<doraymeRidThis @optusnet.com.a uwrote:

>In article <slrng1f4m4.hq7 .spamspam@bowse r.marioworld>,
Ben C <spamspam@spam. eggswrote:
>

>It looks a bit outdated these days to centre
>everything, probably because it's so much harder to do practically in
>non-tables CSS so everyone gives up.

>
>
>Rather than being old fashioned, I think it is just a naive aesthetic
>and for this reason: it is the one simple design principle anyone can
>come up with no matter how inexperienced, 'make things nice and
>symmetrical" .
>
>Symmetry of *this* kind is obvious and generally easy to do. So it tends
>to be something inexperienced people do (children do this a lot) - what
>else can they do, given their experience and desire to make it 'nicely
>laid out'.

I have to take issue with your statements. For example, how many
framed pictures do you have hanging on your walls at home? Okay, now
in how many of those frames do you have the picture off-center?
Frankly I have never seen anyone frame a picture off-center. The
browser window is the picture frame and your content is the picture.
You can think of the white space on either side as being the matting.
To my eye, web sites that hug the left border of the "frame" with lots
of dead white space to the right look terrible.

Alternatively you could make your "picture" extend from one side of
the frame to the other. So, why don't newspapers or magazines or books
exhibit this feature? Because it is bad for readability. So to make a
web page more readable you don't want a line of text that extends from
one side of the screen to the other: you confine it to a narrower
space. Since we are confining our content to a narrower space, it
makes all the sense in the world to center that space within its
container.

As regarding easy, the only thing easier than centering is not
bothering to center - after all that takes no work whatsoever.





Best Regards, Jim

http://artsnova.com/blog

[Jonathan N. Little]

Re: Problem with CSS Horizontal Dropdown Menu

Jim wrote:

Hello dorayme,
>
On Wed, 30 Apr 2008 09:10:34 +1000, dorayme
<doraymeRidThis @optusnet.com.a uwrote:
>

>In article <slrng1f4m4.hq7 .spamspam@bowse r.marioworld>,
>Ben C <spamspam@spam. eggswrote:
>>

>>It looks a bit outdated these days to centre
>>everything, probably because it's so much harder to do practically in
>>non-tables CSS so everyone gives up.

>>
>Rather than being old fashioned, I think it is just a naive aesthetic
>and for this reason: it is the one simple design principle anyone can
>come up with no matter how inexperienced, 'make things nice and
>symmetrical" .
>>
>Symmetry of *this* kind is obvious and generally easy to do. So it tends
>to be something inexperienced people do (children do this a lot) - what
>else can they do, given their experience and desire to make it 'nicely
>laid out'.

>
>
I have to take issue with your statements. For example, how many
framed pictures do you have hanging on your walls at home? Okay, now
in how many of those frames do you have the picture off-center?

Actually when matting watercolors cutting the mat with all side equal
is, well, the sign of an amateur. Typically placing the image *above*
dead-center is more visually pleasing and appears "stable". Playing with
this balance intentionally can have interesting effects...

Frankly I have never seen anyone frame a picture off-center. The
browser window is the picture frame and your content is the picture.
You can think of the white space on either side as being the matting.
To my eye, web sites that hug the left border of the "frame" with lots
of dead white space to the right look terrible.

No one said you had to constrain your page's width! Folks who insist on
the world being bilaterally symmetrical! Always love the idiot architect
in the '60s that thought having a doorknob on the left or right was sooo
asymmetrical! Just loved watching visitors struggle as they tried to
figure out how to open the damn door!

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO

http://www.LittleWorksStudio.com

[Michael Wojcik]

Re: Problem with CSS Horizontal Dropdown Menu

Jim wrote:

On Wed, 30 Apr 2008 09:10:34 +1000, dorayme
<doraymeRidThis @optusnet.com.a uwrote:
>

>Rather than being old fashioned, I think it is just a naive aesthetic
>and for this reason: it is the one simple design principle anyone can
>come up with no matter how inexperienced, 'make things nice and
>symmetrical" .
>>
>Symmetry of *this* kind is obvious and generally easy to do. So it tends
>to be something inexperienced people do (children do this a lot) - what
>else can they do, given their experience and desire to make it 'nicely
>laid out'.

>
I have to take issue with your statements. For example, how many
framed pictures do you have hanging on your walls at home? Okay, now
in how many of those frames do you have the picture off-center?
Frankly I have never seen anyone frame a picture off-center.

I have - particularly when the picture is part of a framed collage.
Collages rarely have symmetry about the vertical axis (and if they do,
they tend to look forced and artificial).

And most web pages are collages: they contain multiple heterogeneous
visual elements.

The
browser window is the picture frame and your content is the picture.

I don't believe that's how users typically perceive web pages.
(Indeed, for a presentation at an academic conference in the fall, my
coauthor and I will be displaying some screenshots of web pages that
we've blurred, flipped about the vertical axis, and otherwise
distorted, precisely to encourage users to look at them as wholes
rather than visually traversing the various parts.)

You can think of the white space on either side as being the matting.
To my eye, web sites that hug the left border of the "frame" with lots
of dead white space to the right look terrible.

You probably want *some* margin, rather than putting content right
against window decoration, but I think asymmetric layouts with
reasonable whitespace often look as or more appealing than centered ones.

So to make a
web page more readable you don't want a line of text that extends from
one side of the screen to the other: you confine it to a narrower
space.

Do you believe the user is incapable of setting a comfortable column
width? *My* browser rarely occupies the whole screen - generally only
when I want to view a page that some nitwit designer has made too wide.


--
Michael Wojcik
Micro Focus

[Jim]

Re: Problem with CSS Horizontal Dropdown Menu

Hi Jonathan,

On Wed, 30 Apr 2008 10:31:03 -0400, "Jonathan N. Little"
<lws4art@centra l.netwrote:

>Jim wrote:

>I have to take issue with your statements. For example, how many
>framed pictures do you have hanging on your walls at home? Okay, now
>in how many of those frames do you have the picture off-center?

>
>
>Actually when matting watercolors cutting the mat with all side equal
>is, well, the sign of an amateur.

Not just watercolors.

>Typically placing the image *above*
>dead-center is more visually pleasing and appears "stable". Playing with
>this balance intentionally can have interesting effects...

We're not talking about vertical centering - it's horizontal centering
that's the issue. In matting artwork, you do center horizontally and
generally vertically as well but somtimes you raise your art
vertically so there is more matting at the bottom. However, you do
not lower your art so that there is more matting at the top.

>Frankly I have never seen anyone frame a picture off-center. The
>browser window is the picture frame and your content is the picture.
>You can think of the white space on either side as being the matting.
>To my eye, web sites that hug the left border of the "frame" with lots
>of dead white space to the right look terrible.

>
>No one said you had to constrain your page's width!

Generally web sites do have textual content. Readability says you want
to limit your line width. Assuming that you are going to be reasonable
and limit your design to 2-3 reasonablly wide columns means that your
design will likely be narrower than the available screen width. So
what do you do with that extra horizontal space? Do you let it all
congregate on the right, on the left, or do you evenly distribute it?

>Folks who insist on
>the world being bilaterally symmetrical! Always love the idiot architect
>in the '60s that thought having a doorknob on the left or right was sooo
>asymmetrical ! Just loved watching visitors struggle as they tried to
>figure out how to open the damn door!

That's not a good analogy because the placement of a doorknob is based
on functionality. Graphic design is aesthetics and usability driven
and symmetry is a part of that.




Best Regards, Jim

http://artsnova.com/blog

[Jim]

Re: Problem with CSS Horizontal Dropdown Menu

Hi Michael ,

On Wed, 30 Apr 2008 11:45:49 -0400, Michael Wojcik
<mwojcik@newsgu y.comwrote:

>Jim wrote:

>I have to take issue with your statements. For example, how many
>framed pictures do you have hanging on your walls at home? Okay, now
>in how many of those frames do you have the picture off-center?
>Frankly I have never seen anyone frame a picture off-center.

>
>I have - particularly when the picture is part of a framed collage.
>Collages rarely have symmetry about the vertical axis (and if they do,
>they tend to look forced and artificial).

The issue is not vertical symmetry but horizontal symmetry.

The
>browser window is the picture frame and your content is the picture.

>
>I don't believe that's how users typically perceive web pages.

Right but as a designer your are creating a coherent "image" within
the confines of a browser's window.

>(Indeed, for a presentation at an academic conference in the fall, my
>coauthor and I will be displaying some screenshots of web pages that
>we've blurred, flipped about the vertical axis, and otherwise
>distorted, precisely to encourage users to look at them as wholes
>rather than visually traversing the various parts.)

That's interesting. But how does that help a user navigate or use a
page? My "driver" has been to try and create web pages that are first
useable with attractiveness taking second.

In this case I am trying to create a better horizontal nav bar to
improve the existing site's functionality. The existing page design
for the site is centered. Therefore I need the nav bar to be centered.
To have the nav bar as the only element on the page that is left
justified would be totally (_fill_in_the_b lank_).

>You can think of the white space on either side as being the matting.
>To my eye, web sites that hug the left border of the "frame" with lots
>of dead white space to the right look terrible.

>
>You probably want *some* margin, rather than putting content right
>against window decoration,

Definitely.

>but I think asymmetric layouts with
>reasonable whitespace often look as or more appealing than centered ones.

One of the guys own our team advanced that argument. I initially
agreed with him but after looking around at other sites and reading a
number of articles on the subject (courtesy of Google), I came to the
conclusion that centered did look better. Note that here I am talking
about the web page layout itself - a separate issue from that of the
nav bar.

>

>So to make a
>web page more readable you don't want a line of text that extends from
>one side of the screen to the other: you confine it to a narrower
>space.

>
>Do you believe the user is incapable of setting a comfortable column
>width?

No but why should they have to. I use tabbed browsing. I would hate to
have to resize my browser each and every time I switched to a
different web page.

>*My* browser rarely occupies the whole screen - generally only
>when I want to view a page that some nitwit designer has made too wide.

I always have my browser at full length but agree 100% about the
annoyance of too-wide web pages.


PS. Do you have any plans to put your presentation online? I would
like to know more about it.

Thanks.






Best Regards, Jim

http://artsnova.com/blog

[dorayme]

Re: Problem with CSS Horizontal Dropdown Menu

In article <v7pg14hjrifp7h k8fu18t0mp4a1vb p411c@4ax.com>,
Jim <FakeAddress@as trodigitalNOT.o rgwrote:

Hello dorayme,
>
On Wed, 30 Apr 2008 09:10:34 +1000, dorayme
<doraymeRidThis @optusnet.com.a uwrote:
>

In article <slrng1f4m4.hq7 .spamspam@bowse r.marioworld>,
Ben C <spamspam@spam. eggswrote:

It looks a bit outdated these days to centre
everything, probably because it's so much harder to do practically in
non-tables CSS so everyone gives up.

Rather than being old fashioned, I think it is just a naive aesthetic
and for this reason: it is the one simple design principle anyone can
come up with no matter how inexperienced, 'make things nice and
symmetrical".

Symmetry of *this* kind is obvious and generally easy to do. So it tends
to be something inexperienced people do (children do this a lot) - what
else can they do, given their experience and desire to make it 'nicely
laid out'.

>
>
I have to take issue with your statements. ... The
browser window is the picture frame and your content is the picture.
You can think of the white space on either side as being the matting.
To my eye, web sites that hug the left border of the "frame" with lots
of dead white space to the right look terrible.
>

Hello Jim! First, I was not necessarily talking the whole website. I
was particularly meaning the design within the "frame". A naive
aesthetic thinks everything looks nice when centred, including lists and
headings and particularly so, body text.

I agree, it often looks satisfying to have the main frame of the site
centred. But I cannot agree it is less than perfectly satisfactory when
some sites are not so centered.

The analogy you use has left me flabbergasted, there is no reason at all
to so compare a website which can be delivered to many different
monitors and platforms to the pics on my wall (which are, yes, centred
horizontally but not quite vertically). That you do, suggests to me that
you have indeed a simpler idea of aesthetics than my own incredibly
sophisticated taste - excuse me while I adjust my French painter's hat,
twirl my moustache and sip some of my fine French cognac...

Alternatively you could make your "picture" extend from one side of
the frame to the other. So, why don't newspapers or magazines or books
exhibit this feature? Because it is bad for readability. So to make a
web page more readable you don't want a line of text that extends from
one side of the screen to the other: you confine it to a narrower
space. Since we are confining our content to a narrower space, it
makes all the sense in the world to center that space within its
container.

This is a red herring. It has nothing at all to do with centering. You
perhaps do not know that you can limit the width of text (to make it
more readable) without having it go the whole way across the main frame
of a website. Because you perhaps are unaware of this, you are trying
for the reader (and I applaud you for this) by limiting the width of the
whole show.

--
dorayme

[Jim]

Re: Problem with CSS Horizontal Dropdown Menu

Hi Dorayme,

On Thu, 01 May 2008 15:02:50 +1000, dorayme
<doraymeRidThis @optusnet.com.a uwrote:

>In article <v7pg14hjrifp7h k8fu18t0mp4a1vb p411c@4ax.com>,
Jim <FakeAddress@as trodigitalNOT.o rgwrote:
>

>I have to take issue with your statements. ... The
>browser window is the picture frame and your content is the picture.
>You can think of the white space on either side as being the matting.
>To my eye, web sites that hug the left border of the "frame" with lots
>of dead white space to the right look terrible.
>>

>
>Hello Jim! First, I was not necessarily talking the whole website. I
>was particularly meaning the design within the "frame". A naive
>aesthetic thinks everything looks nice when centred, including lists and
>headings and particularly so, body text.

Now that would be ugly. Personally the only text that I find
acceptable to center (individual lines that is) is short quotations.

>I agree, it often looks satisfying to have the main frame of the site
>centred. But I cannot agree it is less than perfectly satisfactory when
>some sites are not so centered.

Fair enough. As they say beauty is in the eye of the beholder.

>The analogy you use has left me flabbergasted, there is no reason at all
>to so compare a website which can be delivered to many different
>monitors and platforms to the pics on my wall (which are, yes, centred
>horizontally but not quite vertically). That you do, suggests to me that
>you have indeed a simpler idea of aesthetics than my own incredibly
>sophisticate d taste - excuse me while I adjust my French painter's hat,
>twirl my moustache and sip some of my fine French cognac...

Chortles and Nyuks. You can just call me an Occam's Razor sort of
guy.

>Alternativel y you could make your "picture" extend from one side of
>the frame to the other. So, why don't newspapers or magazines or books
>exhibit this feature? Because it is bad for readability. So to make a
>web page more readable you don't want a line of text that extends from
>one side of the screen to the other: you confine it to a narrower
>space. Since we are confining our content to a narrower space, it
>makes all the sense in the world to center that space within its
>container.

>
>
>This is a red herring.

Not at all.

>It has nothing at all to do with centering.

Sure it does. The text resides within a container (lets say an HTML
table for sake of argument) that resides within a larger container
(the browser window) and that table is the only content that appears
in the window. Do I want to allow my table to stretch horizontally to
fill all available space? With today's wide screens, the answer is no.
I want to limit how wide the line is going to be because very
long/wide lines are less readable - this is a lesson learned from
print publishing hence the newspaper/magazine analogy.

I just grabbed a magazine off the top of my "to read" stack
(DMReview). All the articles are broken down into 2-3 columns of
text. Draw a box around the columns and you will see that the text
area is centered on the page with respect to the surrounding white
space.

You
>perhaps do not know that you can limit the width of text (to make it
>more readable) without having it go the whole way across the main frame
>of a website.

Sigh. Obviously I'm aware that I can limit the width of the text
because that is the underpinning of this entire debate: where to place
a content area that is not as wide as the containing screen within the
bounds of that screen. I go with centering. You appear to be arguing
otherwise.

>Because you perhaps are unaware of this, you are trying
>for the reader (and I applaud you for this) by limiting the width of the
>whole show.

This whole argument is about where to position text/content that is
limited in width with respect to its container. Equally obviously I
have stated that said text area/content area should be centered
within the browser window vs hugging either side of the window which
results in large areas of dead white space on the other side.

My guess is we have different design philosophies so let's just leave
it at that.





Best Regards, Jim

http://artsnova.com/blog

[dorayme]

Re: Problem with CSS Horizontal Dropdown Menu

In article <de1k14p01bj1kd 6qpqg2j5vko9h82 k556p@4ax.com>,
Jim <FakeAddress@as trodigitalNOT.o rgwrote:

<doraymeRidThis @optusnet.com.a uwrote:

Jim <FakeAddress@as trodigitalNOT.o rgwrote:

[...stuff]

Hi Jim,

I said that limiting line width has nothing at all to do with centering.
And you seem to disagree and you want to leave it at that? If you like!
But it makes me very uncomfortable knowing you are walking about free in
the world thinking this. <g>

--
dorayme

[Jim]

Re: Problem with CSS Horizontal Dropdown Menu

Hi Dorayme,

On Fri, 02 May 2008 08:00:43 +1000, dorayme
<doraymeRidThis @optusnet.com.a uwrote:

>In article <de1k14p01bj1kd 6qpqg2j5vko9h82 k556p@4ax.com>,
Jim <FakeAddress@as trodigitalNOT.o rgwrote:

><doraymeRidThi s@optusnet.com. auwrote:

Jim <FakeAddress@as trodigitalNOT.o rgwrote:

>
>[...stuff]
>
>Hi Jim,
>
>I said that limiting line width has nothing at all to do with centering.
>And you seem to disagree and you want to leave it at that?

Only because no progress towards understanding is being made.

If you like!
>But it makes me very uncomfortable knowing you are walking about free in
>the world thinking this. <g>

Well at least I'm in good company since it seems that most websites
with a fixed width content area choose to center that area within the
browser window rather than having it left or right justified.




Best Regards, Jim

http://artsnova.com/blog

[Michael Wojcik]

Re: Problem with CSS Horizontal Dropdown Menu

Jim wrote:

Hi Michael ,
>
On Wed, 30 Apr 2008 11:45:49 -0400, Michael Wojcik
<mwojcik@newsgu y.comwrote:
>

>Jim wrote:

>>Frankly I have never seen anyone frame a picture off-center.

>I have - particularly when the picture is part of a framed collage.
>Collages rarely have symmetry about the vertical axis (and if they do,
>they tend to look forced and artificial).

>
The issue is not vertical symmetry but horizontal symmetry.

Symmetry about the vertical axis is what you are calling "horizontal
symmetry". It's a standard geometric term.

>>The
>>browser window is the picture frame and your content is the picture.

>I don't believe that's how users typically perceive web pages.

>
Right but as a designer your are creating a coherent "image" within
the confines of a browser's window.

I don't believe you are, based on my work in visual rhetoric.

Human conscious visual perception only processes about 40 bits/second
of information (Kuehni, citing Nørretranders). Of course many orders
of magnitude more is processed unconsciously (about 10 Mb/s), and some
aesthetic decisions are likely made at that level (see eg the work of
Damasio). But I suspect coherence is a higher-level function (built on
lower-level associations), and follows from a conscious or
para-conscious traversal of visual elements in a scene.

I would argue that various kinds of experiments support this thesis:
eye-tracking experiments, visual-field-substitution experiments (where
elements in the visual field are altered while the user isn't looking
directly at them), and so forth.

>(Indeed, for a presentation at an academic conference in the fall, my
>coauthor and I will be displaying some screenshots of web pages that
>we've blurred, flipped about the vertical axis, and otherwise
>distorted, precisely to encourage users to look at them as wholes
>rather than visually traversing the various parts.)

>
That's interesting. But how does that help a user navigate or use a
page?

Obviously, distorting a page does not help the user navigate it -
that's why we're using the technique in that presentation. We're
trying to force the audience to perceive the page as a whole *rather
than traversing ("navigating ") it*, which is what I'm arguing a user
normally does.

Consequently, I'd argue that horizontal symmetry isn't important to a
page's usability, because users do not use pages as a whole. They use
them as collections of elements.

The inverted-L structure that's so popular lacks horizontal symmetry,
and most users seem to do just fine with it.

In this case I am trying to create a better horizontal nav bar to
improve the existing site's functionality. The existing page design
for the site is centered. Therefore I need the nav bar to be centered.

OK. That's an argument for centering that element, certainly, unless
you can and wish to remove centering from the rest of the layout.

>but I think asymmetric layouts with
>reasonable whitespace often look as or more appealing than centered ones.

>
One of the guys own our team advanced that argument. I initially
agreed with him but after looking around at other sites and reading a
number of articles on the subject (courtesy of Google), I came to the
conclusion that centered did look better. Note that here I am talking
about the web page layout itself - a separate issue from that of the
nav bar.

Clearly on aesthetics there will always be disagreement. I just don't
believe the "whole page image" argument holds much water.

The argument "I think it looks better when the content as a whole is
centered", on the other hand, is pretty much unassailable as a
subjective claim; and if the articles you found do indeed support it,
then you at least have some company. I can't say how persuasive I'd
find that argument, not having read the articles in question.

PS. Do you have any plans to put your presentation online? I would
like to know more about it.

I don't know yet. I think my coauthor and I are in favor of putting it
online, but I don't know how well that will work, as it will probably
be as much oral and interactive as print. We can record the visual
displays, but to get decent audio for the commentary we'd probably
have to record that separately, and to be honest I don't know how soon
we'd get around to doing that. (We'll probably be tweaking the
presentation right up to the first conference, in October.)

If the presentation itself doesn't make it online, though, there will
probably eventually be some kind of online version of the material,
possibly as a combination of illustrated article and interactive
application.

Drop me an email to remind me, if you like, and I'll send more
information when it's available.

--
Michael Wojcik
Micro Focus