retry - critique & suggestions

That'll teach me to try to make mass changes. This should look better.

I'd appreciate comments about the web site at www.aljones.us - especailly
suggestion about how to change the sizes of different divisions. BoxBanner
is too tall for my taste, for example and the lettering on the navigation
div should (I think) be centered vertically in the div.

Also - with my desktop resolution of 1280 x 1024 the images of the diary
pages in 08/17/63 shift on the page. Can ayone tell me how to stop /
correct this please.

Thanks
//al

al jones wrote:

I'd appreciate comments about the web site at www.aljones.us - especailly
suggestion about how to change the sizes of different divisions.

FYI, you have a logic error with the column widths. The navigation
column width is set at 18%. The left margin of the content column is
12em. These don't jive and cause disproportionate spacing at smaller
window and/or larger text sizes. Use either % for both, or em for both.
Which to use depends on whether you want the column width to adjust with
the window size, or with the text size. Right now it doesn't really
adapt that well to either.

Are the blue borders there just for debugging purposes, or are they
meant to stay? I find they cause some readability issues with smaller
window sizes (my usual is slightly less than 800px wide). There are only
a couple pixels of space between the border and text. If the borders go
away, it's a non-issue.

Is there a reason to limit the height of the side navigation? I don't
see the benefit. Scrolling divs are a PITA from a usability standpoint.

the lettering on the navigation
div should (I think) be centered vertically in the div.

If you mean the horizontal list across the top, setting the top/bottom
margins on the <ul> element to 0 would be a place to start. Add a little
top/bottom padding if you want more vertical spacing.

Padding can work better in some cases because it prevents margin
collapse. Collapsing margins can have undesirable results. The subject
of collapsing margins has come up numerous times in the CSS newsgroup
(c.i.w.a.stylesheets) so look there for more info. The google groups
archives are your best resource.

Also - with my desktop resolution of 1280 x 1024 the images of the diary
pages in 08/17/63 shift on the page.

Floating left does not automatically start an element at the left edge
of its container. Look up the "clear" property.

BTW, you have not set a background color for the whole page (body). My
browser default color (a greenish hue) shows and does not go especially
well with the rest of your color scheme.

--
Berg

On Thu, 28 Dec 2006 14:43:24 GMT, Beauregard T. Shagnasty wrote:

al jones wrote:

That'll teach me to try to make mass changes. This should look
better.

I'd appreciate comments about the web site at www.aljones.us -
especailly suggestion about how to change the sizes of different
divisions. BoxBanner is too tall for my taste, for example and the

How about adding .boxbanner { height: 6em; }
okay, I see that - but like 5em better.
and using h1 { margin-top: 0; }
and okay.

lettering on the navigation div should (I think) be centered
vertically in the div.

No, I would expect the navigation to start at the top of the pane.
Okay, I'll move the bottom of that pane up then .... still not what I want

(I know, "Stop wanting that!") but better.

Also - with my desktop resolution of 1280 x 1024 the images of the
diary pages in 08/17/63 shift on the page. Can ayone tell me how to
stop / correct this please.

I would try to put the letter images (and their links) inside the <p>,
rather than loosely contained in the <div>.
I'm going to have to experiment here. I read what you're saying, but not

sure how / what impact.

Why do you have all those "<br/>" in the nav list?
li><a href="630817vad.html">08/17/63 WWvA Diary</a><br/></li
not sure, but they went away before I saw your message. A lot of this

playing has been cut and paste from other examples. In combination a mess
I'm trying to straighten out before I invite a hyper-critical family to
come look.

Have you looked at the page with Firefox? The menu div shows a lot wider
than it does with Opera ...
No, I haven't, but I know that's going to be an issue (I seldom even look

at them in IE ...) Guess it's time to go use a couple of others.

Thanks you //al

On Thu, 28 Dec 2006 09:42:19 -0600, Bergamot wrote:

al jones wrote:

I'd appreciate comments about the web site at www.aljones.us - especailly
suggestion about how to change the sizes of different divisions.

FYI, you have a logic error with the column widths. The navigation
column width is set at 18%. The left margin of the content column is
12em. These don't jive and cause disproportionate spacing at smaller
window and/or larger text sizes. Use either % for both, or em for both.
Which to use depends on whether you want the column width to adjust with
the window size, or with the text size. Right now it doesn't really
adapt that well to either.
I've downloaded Firefox (BTS's question about whether I've looked at in FF)

and think that what I see there is a result of what you're saying here - is
that true?? Again, as with one of BTS's comments I'm going to have to
experiment and see.

Are the blue borders there just for debugging purposes, or are they
meant to stay? I find they cause some readability issues with smaller
window sizes (my usual is slightly less than 800px wide). There are only
a couple pixels of space between the border and text. If the borders go
away, it's a non-issue.
The lighter borders are intended to stay - the heavier one is, indeed a

debug. As I've commented before, I'm not a programmer or web developer,
this is strictly for family - but I would like it to look reasonable.

Is there a reason to limit the height of the side navigation? I don't
see the benefit. Scrolling divs are a PITA from a usability standpoint.
As I've been adding letters in the past, that nav column comes up with

about 100 items. I did the scrolling navigation since many of the letters
will set on a screen - at least as I view them - if I don't scroll it then
I often end up with a window that's 5 miles long on navigation and 6 feet
long on content. Suggestion on a 'happy medium'??

the lettering on the navigation
div should (I think) be centered vertically in the div.

If you mean the horizontal list across the top, setting the top/bottom
margins on the <ul> element to 0 would be a place to start. Add a little
top/bottom padding if you want more vertical spacing.

Padding can work better in some cases because it prevents margin
collapse. Collapsing margins can have undesirable results. The subject
of collapsing margins has come up numerous times in the CSS newsgroup
(c.i.w.a.stylesheets) so look there for more info. The google groups
archives are your best resource.

Also - with my desktop resolution of 1280 x 1024 the images of the diary
pages in 08/17/63 shift on the page.

Floating left does not automatically start an element at the left edge
of its container. Look up the "clear" property.

BTW, you have not set a background color for the whole page (body). My
browser default color (a greenish hue) shows and does not go especially
well with the rest of your color scheme.
And as many times as I've seen this comment I didn't. Sorry blue on green

must be garish. I, obviously<??>, use white as default so that's what I
see. Again, suggestions for a happy medium here so that I don't blind
people for whom stark white is too bright and their background doesn't
mesh?

Thanks - off to do some experimenting with your and BTS's comments.

//al

al jones wrote:

On Thu, 28 Dec 2006 09:42:19 -0600, Bergamot wrote:

al jones wrote:

www.aljones.us

FYI, you have a logic error with the column widths.

I've downloaded Firefox (BTS's question about whether I've looked at in FF)
and think that what I see there is a result of what you're saying here - is
that true??

I don't know what you can or cannot see, but make your browser window
smaller and zoom text up a couple notches and you'll probably see
something closer to what I see.

this is strictly for family - but I would like it to look reasonable.

I understand the target audience is limited, but do you know that they
all use the same browser and settings as you? What looks reasonable to
you is sub-optimal for me, and Aunt Clara might have settings closer to
mine than yours. Just something to consider...

I did the scrolling navigation since many of the letters
will set on a screen - at least as I view them - if I don't scroll it then
I often end up with a window that's 5 miles long on navigation and 6 feet
long on content. Suggestion on a 'happy medium'??

Maybe you don't need to list every letter in the navigation column on
every page. Since most of the links are ??? placeholders, it's hard to
suggest something specific, but perhaps you could organize it by year.
When the visitor navigates to a year list just the letters for that year
in detail. It's not that hard to construct if you are using some server
side scripting or pre-processing.

BTW, you have not set a background color for the whole page (body).

suggestions for a happy medium here so that I don't blind
people for whom stark white is too bright

You've already set background-color:white on most of the page (#all and
#moststuff), it's just the spacing around divs that isn't white. If you
are concerned about glare, change those elements to something off-white,
as Mr Shagnasty suggested. Or remove those background settings
altogether and just put it on the <body> element. All the child elements
will inherit it, so you won't need to set background specifically for
the content area unless it *should* be different.

--
Berg

Beauregard T. Shagnasty wrote:

Here is what I see in Firefox:
http://k75s.home.att.net/show/aljones.jpg

Yup, me too, except your default background color is a purple and mine
is green.

--
Berg

On Fri, 29 Dec 2006 14:34:09 GMT, Beauregard T. Shagnasty wrote:

Here is what I see in Firefox:
http://k75s.home.att.net/show/aljones.jpg

I just noticed a misteak in the CSS.
#body {height:100%;}
should be:
body {height:100%;}
as there is no element with the *ID* of "body". Add your background
color to body (no #) as I currently see my default light purple.
body {height:100%; background-color: #f5f5f5;}
and remove the background color from the child elements.

Beau, thanks for that, I see the same thing you do in FF - gee, I was
beginning to think that I might be getting things to fall together when
y'all have to come in with this and they all fall apart (or drag apart
.....)

Let's see if I can get time this weekend (since I'm not a party person I
*should* have the time) to do some more fixing.

Thanks you both, again //al