Help re how to float nav items around graphic ?

Hi, folks:

I'm back...and now I'm really stuck !!

I have a graphic (
http://www.sundialontario.com/images/makeitatable.jpg )

that I would like to convert to CSS and I'm not sure how
to do this.

I want to end up with 4 nav items (links) on either side
of the graphic.

I know that I can easily do this using a table, but this is
not true tabular data...wouldn't you agree?

I thought a 3-column ul would be the answer, but I'm
stumped after the first row, because of the graphic size.

I'm thinking that there must be a way to float li's on either
side of the graphic. Am I on the right track? I just can't
seem to figure out how the heck to do this.

Can anyone advise me.

Thanks !

Joe

Joe exCSSive <joe (AT) example (DOT) invalid> wrote:

http://www.sundialontario.com/images/makeitatable.jpg

that I would like to convert to CSS and I'm not sure how
to do this.

http://homepage.ntlworld.com/spartan...ialontario.htm

--
Spartanicus

On Wed, 06 Jul 2005 00:39:31 GMT, Spartanicus
<invalid (AT) invalid (DOT) invalid> wrote:

Joe exCSSive <joe (AT) example (DOT) invalid> wrote:

http://www.sundialontario.com/images/makeitatable.jpg

that I would like to convert to CSS and I'm not sure how
to do this.

http://homepage.ntlworld.com/spartan...ialontario.htm

Wow! Aren't you a Bobby Dazzler !

I guess I "was" on the right track with floating and ULs !
But, while I was coding up a War and Peace version with
3 DIVs, your version sure cuts to the chase.

Before your response came in, I was tweaking my margin
settings and I was using some negative values too. I thought
I was surely doing something wrong, but I see that's what you've
coded too. That seems quite odd to me...dontcha think ?

Thanks so much for your time and help ! Looks fab !

Joe

Joe exCSSive <joe (AT) example (DOT) invalid> wrote:

http://homepage.ntlworld.com/spartan...ialontario.htm

Before your response came in, I was tweaking my margin
settings and I was using some negative values too. I thought
I was surely doing something wrong, but I see that's what you've
coded too. That seems quite odd to me...dontcha think ?

The width of the ul should accommodate the graphic and the text. The
width for the text should be defined in ems to facilitate zooming, the
156px graphic width should remain constant when the text is zoomed. So
the ul has a left padding of 156px, in the CSS box model this padding is
added to the ul width which is defined in em. To offset this left
padding the 156px negative left margin moves the left aligned list items
back into place.

--
Spartanicus

On Wed, 06 Jul 2005 13:51:23 GMT, Spartanicus
<invalid (AT) invalid (DOT) invalid> wrote:

Joe exCSSive <joe (AT) example (DOT) invalid> wrote:

http://homepage.ntlworld.com/spartan...ialontario.htm

Before your response came in, I was tweaking my margin
settings and I was using some negative values too. I thought
I was surely doing something wrong, but I see that's what you've
coded too. That seems quite odd to me...dontcha think ?

The width of the ul should accommodate the graphic and the text. The
width for the text should be defined in ems to facilitate zooming, the
156px graphic width should remain constant when the text is zoomed. So
the ul has a left padding of 156px, in the CSS box model this padding is
added to the ul width which is defined in em. To offset this left
padding the 156px negative left margin moves the left aligned list items
back into place.

Hmmm...well, this prompts 3 questions:
- somewhere, there must be a need to convert px to em...no? What's
the formula for the conversion ?
- I keep getting confused about being "scalable". Do I have to use
% and em exclusively? In my example...see URL below..I have a fixed
body width. Is that a no-no ? Is there a website or utility that
allows one to test site scalability ?
- How do I center the whole thing within the confines of my existing
style setup. Here's my best stab:
http://www.sundialontario.com/testmockup.htm


I apologize in advance if these all sound like stooopid questions..I
really am trying.

Any comments, suggestions, tips??? Thanks again !

Joe

Joe exCSSive <joe (AT) example (DOT) invalid> wrote:

http://homepage.ntlworld.com/spartan...ialontario.htm

The width of the ul should accommodate the graphic and the text. The
width for the text should be defined in ems to facilitate zooming, the
156px graphic width should remain constant when the text is zoomed. So
the ul has a left padding of 156px, in the CSS box model this padding is
added to the ul width which is defined in em. To offset this left
padding the 156px negative left margin moves the left aligned list items
back into place.

Hmmm...well, this prompts 3 questions:
- somewhere, there must be a need to convert px to em...no?

The rule of thumb is that if a container contains text and it's width is
fixed, it's width should be specified using the em unit. This allows the
container width to expand to accommodate the enlarged text when a user
zooms using a text zooming browser such as IE or a Gecko based browser.

Your menu contains text in the horizontal plane _and_ a graphic. If the
container's width is specified using the em unit then we'd have to
guesstimate a value to set aside for the graphic, the graphic's size is
however expressed in pixels and the container doesn't need to be
expanded to accommodate a larger graphic when the user zooms the text,
since the graphic will remain at the same size.

Enter the padding trick, we can specify that as a pixel value, when we
then specify the width of the container in ems we only have to specify
the width needed for the text, the CSS box model rules will add the
padding specified as a pixel value to the width of the container.

The result is that when a user zooms the text, the container box width
doesn't "over" expand as it would do when it's width was defined using
ems only.

In my example...see URL below..I have a fixed
body width. Is that a no-no ?

Generally yes, but it depends on the content whether or not it is
realistic to strive for flowing behaviour. Some types of content and
layout don't lend themselves to fluidity. Floated content (not layout)
and lots of text lends itself well to fluidity.

Is there a website or utility that
allows one to test site scalability ?

There are 2 things you should test for:

1) Does your content work in a range of viewport widths?
2) Does your coding tolerate text zooming by the user?

(1) Is tested by varying the width of your browser window.
(2) Is tested by zooming the text using IE and Mozilla.

- How do I center the whole thing within the confines of my existing
style setup. Here's my best stab:
http://www.sundialontario.com/testmockup.htm

http://dorward.me.uk/www/centre/

--
Spartanicus

On Thu, 07 Jul 2005 16:16:27 GMT, Spartanicus
<invalid (AT) invalid (DOT) invalid> wrote:

There are 2 things you should test for:

1) Does your content work in a range of viewport widths?
2) Does your coding tolerate text zooming by the user?

(1) Is tested by varying the width of your browser window.
(2) Is tested by zooming the text using IE and Mozilla.

Please excuse me once again for being such a dolt, but I'm obviously
having trouble getting some simple scalability concept thru my thick
skull. Here's what I mean...

I've got the page coded and it looks good to me when I view it at
640x480, 800x680, 1024x768 via FireFox 1.0.4, Netscape 8, IE 6.0,
Deepnet 1.3.2, and Opera 8.0. I would think that means I've almost
reached God-hood....no? (e.g., I've obviously addressed any major
browser incompatibilities...no ???)

[I have no idea what screen size PDAS or cell phones use ... 20x20?...
they're so damn tiny !!]

Now it would seem to me if someone wants to "zoom" in on a particular
area for whatever reason, they would expect that their monitor size
would restrict how much of the page they could see without
scrolling...no?

I know if I view a page that requires me to scroll to see stuff, I
just scroll and it's not terribly painful and I feel no need to launch
a class action. And from an assistive technology standpoint, I don't
think screen readers _ever_ have a scrolling issue...do they?

Maybe I'm as thick as molasses in January, but I just can't imagine an
instance where a site visitor would wanna zoom the whole damn
thing...would they ? And, if they do, is that something I should
wanna/be expected to/have to cater to? Can't I just say, "Sorry, this
is Sears and we carry Levis jeans and not Tommy Hilfiger so get over
yourself?" I just don't understand why not serving Baskin & Robbins
31 flavours is a bad thing, but I still do want to do the right thing
with respect to website design.

Can you slap me straight on this 'cause I'm sure I'm missing some key
concept ?

Thanks for your patience and understanding.

Joe

Joe exCSSive <joe (AT) example (DOT) invalid> wrote:

There are 2 things you should test for:

1) Does your content work in a range of viewport widths?
2) Does your coding tolerate text zooming by the user?

(1) Is tested by varying the width of your browser window.
(2) Is tested by zooming the text using IE and Mozilla.

Please excuse me once again for being such a dolt, but I'm obviously
having trouble getting some simple scalability concept thru my thick
skull. Here's what I mean...

I've got the page coded and it looks good to me when I view it at
640x480, 800x680, 1024x768

Those are common screen area settings. Browser viewport widths are
different animals, people may not have their browser maximized, they may
have a side panel open in their browser, window borders subtract more
space, and windows within the main browser window may not be maximized.

Testing should be done by starting with a fairly large viewport width
like 1000px and then drag the window edge down to an acceptable minimum
width.

via FireFox 1.0.4, Netscape 8, IE 6.0,
Deepnet 1.3.2, and Opera 8.0.

Deepnet afaics is yet another IE skin, so you can drop that from your
list. Netscape 8 afaik depending on it's configuration uses Gecko or IE
as the rendering engine, so that one can also go.

I would think that means I've almost
reached God-hood....no? (e.g., I've obviously addressed any major
browser incompatibilities...no ???)

It's a decent start. Note that there are many more browsers, but more
importantly many different user configurations other than your own. Then
there's a raft of other considerations like user abilities to consider
before you can even begin to have delusions of grandeur.

[I have no idea what screen size PDAS or cell phones use ... 20x20?...
they're so damn tiny !!]

Mobile viewport widths vary, just like desktop viewport widths.

Now it would seem to me if someone wants to "zoom" in on a particular
area for whatever reason

Zooming typically enlarges all the text in the viewport, or in Opera's
case everything inside the viewport.

, they would expect that their monitor size
would restrict how much of the page they could see without
scrolling...no?

Yes, but "monitor size" (screen area is the correct term) is irrelevant,
viewport size matters.

I know if I view a page that requires me to scroll to see stuff, I
just scroll and it's not terribly painful and I feel no need to launch
a class action.

Not much wrong with vertical scrolling, horizontal scrolling however is
widely disliked by users.

And from an assistive technology standpoint, I don't
think screen readers _ever_ have a scrolling issue...do they?

Typically a screen reader sits on top of a graphical browser. Sight
impaired users are typically not fully blind, so they use the graphical
view when possible, and the audio rendering when needed.

Sight impaired users are more likely to have configured the graphical
part of the rendering space set to permanent zoom. The graphical
rendering space has a finite viewport width, aural rendering happens on
a canvas, it's "dimension" is measured in time, and it's infinite.

Maybe I'm as thick as molasses in January, but I just can't imagine an
instance where a site visitor would wanna zoom the whole damn
thing...would they ?

You lack imagination.

And, if they do, is that something I should
wanna/be expected to/have to cater to?

Whether you want to is up to you. No-one is twisting your arm. The
regulars in this group aim for high quality web authoring, to achieve
that a robustness to user zooming is considered as an essential quality.

Note that it isn't just about users zooming, the same issues also arise
when a user configures a different font size, for example because they
use a screen with a different resolution (measured in PPI/DPI) than
yours.

Can't I just say, "Sorry, this
is Sears and we carry Levis jeans and not Tommy Hilfiger so get over
yourself?"

Certainly you can, you'll sell less jeans.

I just don't understand why not serving Baskin & Robbins
31 flavours is a bad thing, but I still do want to do the right thing
with respect to website design.

We all set our own standards. Listen to the arguments, learn about the
issues, make your choice.

--
Spartanicus

On Thu, 07 Jul 2005 20:10:20 GMT, Spartanicus
<invalid (AT) invalid (DOT) invalid> wrote:

I would think that means I've almost
reached God-hood....no? (e.g., I've obviously addressed any major
browser incompatibilities...no ???)

It's a decent start.

Thanks ...that's music to my ears !!

Note that there are many more browsers, but more
importantly many different user configurations other than your own. Then
there's a raft of other considerations like user abilities to consider
before you can even begin to have delusions of grandeur.

I really was being fascetious here..I hope you gathered that..and I
know I have miles to go before I rise to the level of the coding gurus
gathered here !!

I guess I would really like your honest opinion re, despite

The regulars in this group aim for high quality web authoring, to achieve
that a robustness to user zooming is considered as an essential quality.

and

We all set our own standards. Listen to the arguments, learn about the
issues, make your choice.

where does the page I've put together at:
http://www.sundialontario.com/testmockup.htm

rank within your scheme of "Holy Crap...that's God-awful !"
Again, what I mean is, if I have to deliver soon, have I got something
that would at least get a passable grade ? I know that
after-the-fact, I will have the luxury of tweaking to my heart's
content.

Thanks so much for your insight !

Joe

Joe exCSSive <joe (AT) example (DOT) invalid> wrote:

where does the page I've put together at:
http://www.sundialontario.com/testmockup.htm

rank within your scheme of "Holy Crap...that's God-awful !"
Again, what I mean is, if I have to deliver soon, have I got something
that would at least get a passable grade ?

1) Look at it with a Gecko browser.
2) There's a missing graphic
3) It falls apart to quickly when zoomed
4) Most of the menu code seems to have been copied from my example, but
without the graphic. This makes much of the code superfluous.
5) The menu isn't properly centered
6) Useless meta tags
7) CSS should be externalized
8) "Company Logo" makes no sense as alt content
9) The page lacks structure, it has no h1 heading
10) It doesn't validate
http://validator.w3.org/check?uri=ht...testmockup.htm
11) No character encoding specified
12) The "Wonderful Company" text is hard to read
13) It causes a horizontal scrollbar for a < 770px wide viewport
14) Reduced size Verdana causes problems (Google for the why)

--
Spartanicus