Two Minor Issues - Fourth Try at Posting (now via Google)

kchayka <usenet (AT) c-net (DOT) us> wrote

Bonnie Granat wrote:
Bonnie Granat wrote:

http://www.granatedit.com/testdevelopmentalediting.html

But the menu winds up being so wide as to cause the problems you all
complained about before! LOL. I got rid of the graphic, but the menu
will still cause the other divs to go beneath it when the window is
made smaller, won't it?

In your other version, the content flows under the navbar because you
are using 155px for the navbar width, but 75% (of window) for the
content. In smaller windows, 155px (plus borders, padding and margins)
is wide enough where there is not enough horizontal space left for a
floated 75% div. Thus the content flows under the navbar where there is
sufficient horizontal space.

Suggestion:
1. Remove all the "width:155px" rules in the stylesheet. You do not
need to specifically set widths on all those different elements, just
the main container (div.menu). Block elements within that container
should automatically expand to 100% width.

2. div.menu: Set the sidebar container width in em units, maybe
width:10em (or thereabouts). I would also set overflow:hidden to
prevent WinIE from expanding the width at very small text sizes. This
will only cause the right side of the graphic to get sliced off a tad.

3. div.content: Do not float or set an explicit width, just set
margin-left:10em (or thereabouts) and margin-right:3% (or therabouts, if
you do in fact want a right margin). The quick test I did showed
margin-left:10.1em to be just about right with a 10em navbar width. You
could also change the border widths from 4px to .2em. This should give
better consistency with different text sizes, too.

The width of the navbar will then adjust with the text size, the content
area will also adjust accordingly, as well as with window size. No more
shifting around.

I *had* to put the width in the navlist style because I was under the
impression that I should use div for the menu container. I just tried
using <p> instead, and I see it works. I did everything you said above
(before I discovered this error) and I looked at the layout and I said
to myself, "Surely he doesn't think THIS is what you want." With your
above corrections, I wound up with the menu on the left and then empty
space and then the main content div. I said to myself, "What could be
going on here?" and it suddenly occured to me that the reason I had to
put the width in the container was simply to get the darn thing to
work. And then I realized that if I closed the menu div, that the new
div would not inherit the width -- which you said would absolutely
happen. At that moment, the idea of trying a different tag like <p>
occurred to me, and I just tried it. This particular oversight on my
part may have been the block to my getting this lesson down correctly
over a year ago. Although on second thought, I wasn't using stolen
code then. I don't know where I grabbed this from, but I had to tweak
it and so forth.

Anyway, it looks as if this might work.

So, thanks a million.

I think I'll use this for the next generation of the site and leave
the site as it is now, with narrow pages. The reason I say this is
that I have to go in and clean out the <p> tag, which has all sorts of
stuff in it, and I'm tired right now.

I've been trimming stuff from the CSS when I can, also.

Many thanks.

Bonnie

The first draft is at
http://www.granatedit.com/newtestdev...alediting.html.

I had to increase the width in order to not have any menu items on two
lines.

I dislike having those long lines, though, as you well know, so I will
work on something to solve that problem.

I think I understand some things now that I didn't understand before,
like sizing the content div and why that causes breakup of the page.
What I forget (if I ever knew it) was why em is the preferred unit for
this.

B.

I might add that the page still breaks up at large type sizes.... so
what's the deal with that? Any cure?

B.

"Bonnie Granat" <bgranat (AT) granatedit (DOT) com> wrote

The first draft is at
http://www.granatedit.com/newtestdev...alediting.html.

I had to increase the width in order to not have any menu items on two
lines.

I dislike having those long lines, though, as you well know, so I will
work on something to solve that problem.

I think I understand some things now that I didn't understand before,
like sizing the content div and why that causes breakup of the page.
What I forget (if I ever knew it) was why em is the preferred unit for
this.

Em is the preferred unit for the width of your nav bar because it causes the
nav bar to adjust its size to whatever font size your viewer has chosen. The
way you have it now wastes real estate when any font size less than largest
is selected.

Since you will now specify ems for the width of the nav bar you will also
then specify ems for the left margin of the content.

Cheers
Richard.

Quoth the raven named Bonnie Granat:

I might add that the page still breaks up at large type sizes.... so
what's the deal with that? Any cure?

newtestdevelopmentalediting.html ?

The page as shown at this moment does not break up with large text
sizes. I see nothing that "floats outside the box" which is usually
what happens. Firebird 0.7 and IE6.

--
-bts
-This space intentionally left blank.

"Bonnie Granat" <bgranat (AT) granatedit (DOT) com> wrote

I might add that the page still breaks up at large type sizes.... so
what's the deal with that? Any cure?

Break up how? It looks fine to me at any font size.

Cheers
Richard.

The page STILL breaks up. At the smallest type size, it
breaks up at about a quarter of the window width; at the largest type
size,
it breaks up at about 55% of the the window width.

What exactly have I gained? If not much, that's okay, because now I
have understood why no width should be specified in the main content
div. LOL.

However, what if I want to add another content div. Then I have to
make this one float: left, right? And then I make the new one just
like this one. Is that correct?


Bonnie

OK. The solution is this: I have to redesign the menu so that I don't
need that much width. If I get it down to 10em, I should be OK.

; )

Quoth the raven named Bonnie Granat:

The page STILL breaks up. At the smallest type size, it breaks up
at about a quarter of the window width; at the largest type size,
it breaks up at about 55% of the the window width.

What do you mean? Can you put a screenshot up, showing what you think
is "breaking up"?

Setting my browser to about 70%, the content overlaps the graphic in
the upper left, but that would be expected because the graphic doesn't
resize. I'd consider that normal.

What exactly have I gained? If not much, that's okay, because now I
have understood why no width should be specified in the main
content div. LOL.

However, what if I want to add another content div. Then I have to
make this one float: left, right? And then I make the new one just
like this one. Is that correct?

One content div should be enough. The average browser window isn't
wide enough for two.

--
-bts
-This space intentionally left blank.

Quoth the raven named Bonnie Granat:

You've lost your quoting... <g>

OK. The solution is this: I have to redesign the menu so that I
don't need that much width. If I get it down to 10em, I should be
OK.

10em may be a bit narrow. I use 13em for the menu on this site of mine
and it works out pretty good.

http://www.fingerlakesbmw.org/

--
-bts
-This space intentionally left blank.