Seeking How-To Advice on CSS Layout

[Jim]

Hi,

I am hoping that someone here can help me out. I am for the first time
trying to implement a page design using only CSS instead of HTML
tables.

I've been able to get most of the page done ok. I have my header area
and below it 3 columns.

My problem is within the header area.

What I want is the following:

********
*.Logo.*
*.Logo.* ******** ********
*.Logo.* *Image1* *Image2*
*.Logo.* ******** ********
*.Logo.* A line of text here
*.Logo.*
*.Logo.* NavBtn1 NavBtn2 NavBtn3
********
You can see my actual page here:
http://www.chicagospace.org/testarea/Skel1.html

My problem is that because I'm using floats, the line of text and
navigation buttons wrap up to the right of the images instead of
appearing below the two images - image1 and image2. Everything that I
have tried has failed. Typically my solutions would result in the line
of text and nav buttons getting shifted down into the content area.

Any suggestions would be greatly appreciated.

Thanks.

Please post your reply to the group as the email address is a fake to
foil spammers.

Best Regards, Jim
http://www.chicagospace.org/

[Jim]

On Mon, 03 Apr 2006 19:25:15 -0500, Jim <Ji*@nospamwanted.com> wrote:

Hi,

I am hoping that someone here can help me out. I am for the first time
trying to implement a page design using only CSS instead of HTML
tables.

I've been able to get most of the page done ok. I have my header area
and below it 3 columns.

My problem is within the header area.

What I want is the following:

********
*.Logo.*
*.Logo.* ******** ********
*.Logo.* *Image1* *Image2*
*.Logo.* ******** ********
*.Logo.* A line of text here
*.Logo.*
*.Logo.* NavBtn1 NavBtn2 NavBtn3
********
You can see my actual page here:
http://www.chicagospace.org/testarea/Skel1.html

My problem is that because I'm using floats, the line of text and
navigation buttons wrap up to the right of the images instead of
appearing below the two images - image1 and image2. Everything that I
have tried has failed. Typically my solutions would result in the line
of text and nav buttons getting shifted down into the content area.

Any suggestions would be greatly appreciated.

Thanks.

Please post your reply to the group as the email address is a fake to
foil spammers.

I seem to have part of the problem solved. The code at:
http://www.chicagospace.org/testarea/Skel2.html

does produce the results I want provided I don't resize the text to a
larger size, which forces the navigation buttons down into the content
area.

Is the solution in Skel2.html the way to go?

Thanks.

Best Regards, Jim
http://www.chicagospace.org/

[Beauregard T. Shagnasty]

Jim wrote:

I seem to have part of the problem solved. The code at:
http://www.chicagospace.org/testarea/Skel2.html

does produce the results I want provided I don't resize the text to a
larger size, which forces the navigation buttons down into the
content area.

Resizing blows your design. I changed the 155px height of your hdr to:

div#hdr {height:13em;

and solved that one problem. You shouldn't use px for that kind of
sizing. Use some value of em instead and resizing won't be a problem.

Oh, and consider dropping Verdana.
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

--
-bts
-Warning: I brake for lawn deer

[tim.n.hunt]

>

I seem to have part of the problem solved. The code at:
http://www.chicagospace.org/testarea/Skel2.html

does produce the results I want provided I don't resize the text to a
larger size, which forces the navigation buttons down into the content
area.

Is the solution in Skel2.html the way to go?

Thanks.
Best Regards, Jim
http://www.chicagospace.org/

Hi Jim

Looks like the problem is similar to one described on quirksmode

http://www.quirksmode.org/css/clearing.html

My understanding is that you need to remove the height setting from
div#hdr altogether then add overflow:hidden to the same and then your
header will expand when the text size is increased.

Hope this helps

Regards,
Tim

[tim.n.hunt]

Beauregard T. Shagnasty wrote:

Oh, and consider dropping Verdana.
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

I wouldn't take any web design advice from a site with a logo and
background as ugly as that one!

My opinion is can use whatever font you like ( However if you use Comic
Sans I will never talk to you again )

Opposing views are provided here
http://usabletype.com/articles/2004/...battle-is-won/

Interesting to note they use verdana at less than the default size and
the web page is attractive, well designed and more legible than xs4all.

If you're interested there's a technique here for setting a font size
which is legible in apparently all browsers ( another site using
verdana would you believe )

http://www.thenoodleincident.com/tut...phy/index.html

Tim

[Beauregard T. Shagnasty]

ti********@gmail.com wrote:

Beauregard T. Shagnasty wrote:

Oh, and consider dropping Verdana.
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html
I wouldn't take any web design advice from a site with a logo and
background as ugly as that one!

Ok, your loss then. We're talkin' font size and technical issues, not
pretty/fluffy.
My opinion is can use whatever font you like ( However if you use
Comic Sans I will never talk to you again )
No Comic Sans on my sites.
Opposing views are provided here
http://usabletype.com/articles/2004/...battle-is-won/

Interesting to note they use verdana at less than the default size
and the web page is attractive, well designed and more legible than
xs4all.
Tell me what the page looks like with 80% and no Verdana on your
computer.
If you're interested there's a technique here for setting a font size
which is legible in apparently all browsers ( another site using
verdana would you believe )

http://www.thenoodleincident.com/tut...phy/index.html

Tell me what the page looks like with 80% and no Verdana on your
computer.

Do you have Firefox? With the Web Developer Toolbar? Open up the
stylesheets at these two sites, and remove Verdana from the font list.
Unreadable. Then, change the 80% to 100%, and oh readable again.

--
-bts
-Warning: I brake for lawn deer

[tim.n.hunt]

Beauregard T. Shagnasty wrote:

ti********@gmail.com wrote:

Beauregard T. Shagnasty wrote:

Oh, and consider dropping Verdana.
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html
I wouldn't take any web design advice from a site with a logo and
background as ugly as that one!

Ok, your loss then. We're talkin' font size and technical issues, not
pretty/fluffy.

Choice of font and size is a typography issue, readability and design
are the most important factor that I consider.

Typography is a design choice not a set of rule's that everyone must
follow

Readability (the central argument on xs4all) is not a technical issue,
it may be an accessibility issue but claiming it is a technical issue
is risible.

My opinion is can use whatever font you like ( However if you use
Comic Sans I will never talk to you again )
No Comic Sans on my sites.

I was kidding ya, you can use whatever font you like

Opposing views are provided here
http://usabletype.com/articles/2004/...battle-is-won/

Interesting to note they use verdana at less than the default size
and the web page is attractive, well designed and more legible than
xs4all.
Tell me what the page looks like with 80% and no Verdana on your
computer.

Top tip: If you find a font too small press Ctrl +, if you think its
too large press Ctrl -

If you're interested there's a technique here for setting a font size
which is legible in apparently all browsers ( another site using
verdana would you believe )

http://www.thenoodleincident.com/tut...phy/index.html

Tell me what the page looks like with 80% and no Verdana on your
computer.

Top tip: If you find any font too small press Ctrl +, if you think its
too large press Ctrl -

Do you have Firefox?
yup, do you have opera and amaya?
With the Web Developer Toolbar?
Yah, got the Venkman Debugger and Dom Inspector too. Get to the
point....
Open up the
stylesheets at these two sites, and remove Verdana from the font list.
Unreadable. Then, change the 80% to 100%, and oh readable again.
No, dont need to. If I find a font too small I will press Ctrl +

Go to the Help menu, Click on Contents, then Keyboard Shortcuts and do
some reading.

It will stop you needing to use the web dev toolbar to change font size
and save you a lot of time and effort. It may mean that one day you
will be brave enough to select a font face and size which isnt the
default.

--
-bts
-Warning: I brake for lawn deer

Btw your advice to Jim was technically flawed.

Increasing the height to 13em does provide a empty space so that a
small/moderate increase in text size means the buttons flow into the
empty space rather than the content area.

However if you press Ctrl + a couple more times the text buttons still
flow into the content again because the width of the header is also
fixed and the text buttons wrap round.

The solution linked to on quirksmode.org (yet another excellent site
which uses verdana ) makes it impossible for the text buttons to flow
into the content no matter how large the font size is.

Regards

Tim

[Beauregard T. Shagnasty]

ti********@gmail.com wrote:

Beauregard T. Shagnasty wrote:

ti********@gmail.com wrote:
<snippage>

Beauregard T. Shagnasty wrote:
Oh, and consider dropping Verdana.
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

I wouldn't take any web design advice from a site with a logo and
background as ugly as that one!
Ok, your loss then. We're talkin' font size and technical issues, not
pretty/fluffy.

Choice of font and size is a typography issue, readability and design
are the most important factor that I consider.

Typography is a design choice not a set of rule's that everyone must
follow

Readability (the central argument on xs4all) is not a technical issue,
it may be an accessibility issue but claiming it is a technical issue
is risible.

Ok, accessibility.

Tell me what the page looks like with 80% and no Verdana on your
computer.

Top tip: If you find a font too small press Ctrl +, if you think its
too large press Ctrl -

You know that and I know that, but the masses using IE don't, and can't.

Do you have Firefox?

yup, do you have opera and amaya?

Yes I do.

With the Web Developer Toolbar?

Yah, got the Venkman Debugger and Dom Inspector too. Get to the
point....

Open up the
stylesheets at these two sites, and remove Verdana from the font list.
Unreadable. Then, change the 80% to 100%, and oh readable again.

No, dont need to. If I find a font too small I will press Ctrl +

What will the clueless surfer do who does not have Verdana and doesn't
know how to increase the size?
Go to the Help menu, Click on Contents, then Keyboard Shortcuts and do
some reading.
I know all about them.
It will stop you needing to use the web dev toolbar to change font size
and save you a lot of time and effort. It may mean that one day you
will be brave enough to select a font face and size which isnt the
default.
The suggestion was for removing Verdana from the list. But you knew
that.
Btw your advice to Jim was technically flawed.

Increasing the height to 13em does provide a empty space so that a
small/moderate increase in text size means the buttons flow into the
empty space rather than the content area.
It was what I saw in a few-minute inspection. There's probably other
pixel sizing in there causing the problem.
However if you press Ctrl + a couple more times the text buttons still
flow into the content again because the width of the header is also
fixed and the text buttons wrap round.

The solution linked to on quirksmode.org (yet another excellent site
which uses verdana ) makes it impossible for the text buttons to flow
into the content no matter how large the font size is.

Nothing overflows on any of my sites either.

--
-bts
-Warning: I brake for lawn deer

[Jim Moe]

ti********@gmail.com wrote:

Opposing views are provided here
http://usabletype.com/articles/2004/...battle-is-won/
http://www.thenoodleincident.com/tut...phy/index.html

Hmm. Typical deezyner tunnel vision and arrogance.
I am especially surprised at the attitude of the author at UsableType.
He seems otherwise competent. Ultimately his decision regarding font size
was based on his own viewing and comfort preferences, not his visitors.
A default size of 16px looks huge on a 640x480 screen and microscopic on
1600x1200, all else the same. It is a mystery how he can claim his choice
looks best on all possible displays.
All he had to do was reduce *his* default size to 13px to achieve the
purity of essence he so desired.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[tim.n.hunt]

Jim Moe wrote:

ti********@gmail.com wrote:

Opposing views are provided here
http://usabletype.com/articles/2004/...battle-is-won/
http://www.thenoodleincident.com/tut...phy/index.html
Hmm. Typical deezyner tunnel vision and arrogance.

Clearly that the title of his article is arrogant but the stereotype is
undeserved. Arrogance is no more common in designers than any other
profession.
I am especially surprised at the attitude of the author at UsableType.
He seems otherwise competent. Ultimately his decision regarding font size
was based on his own viewing and comfort preferences, not his visitors.
The vast majority of visitors will see the site exactly as intended and
it is a website focusing on typography for the www, the assumption that
the target audience is knowledgeable enough to change font size seems
reasonable to me.
A default size of 16px looks huge on a 640x480 screen and microscopic on
1600x1200, all else the same.
Yes that true, all fonts would appear like that under those extremes.
Am I missing the point here?
It is a mystery how he can claim his choice
looks best on all possible displays.
Ok he exaggerated there
All he had to do was reduce *his* default size to 13px to achieve the
purity of essence he so desired.
'Purity of essence' are your words not his.

His solution is appropriate for his website but not for others

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[tim.n.hunt]

> What will the clueless surfer do who does not have Verdana and doesn't

know how to increase the size?
Most will lean forward slightly and read the font that replaces
Verdana, it may be harder to read but it is not unreadable.

The default browser font is 16px. 80% of the default font size is
12.8px. If verdana is not available and replaced with arial the font
will still be 12px or 13px high. This may harder to read than verdana
of the same height but arial at 12/13px is still readable.

Now look at this:

http://www.codestyle.org/css/font-fa...dResults.shtml

On the most common os for inexperienced users ( windows ) 94.1% of
users (and rising) have verdana available which leaves only 5.9%
without verdana.

Some of this 5.9% will have the experience to change the font size

Some will be young users with good enough eyesight to read the smaller
font with little problem

The situation as I see it is the vast majority most will see the
website exactly as intended, some will change font size, a small number
will lean forward.

94.1% of windows user and 92.96% of mac users have verdana and I *nix
users with the ability to set up a modem and internet connection have
the know how to change font size.

What proportion of users with verdana installed before you concede that
using Verdana is acceptable?

Is it the use of verdana in general or using verdana at reduced size
that you disapprove of?
It was what I saw in a few-minute inspection. There's probably other
pixel sizing in there causing the problem.
Yeah the header is a fixed pixel size, the quirksmode technique is a
good useful for using with float based layouts though.
Nothing overflows on any of my sites either.
Cool

--
-bts
-Warning: I brake for lawn deer

Apologies for the bad attitude in my messages. Late night, too much
caffeine.

Tim

[Beauregard T. Shagnasty]

ti********@gmail.com wrote:

What will the clueless surfer do who does not have Verdana and doesn't
know how to increase the size?
Most will lean forward slightly and read the font that replaces
Verdana, it may be harder to read but it is not unreadable.

The default browser font is 16px. 80% of the default font size is
12.8px. If verdana is not available and replaced with arial the font
will still be 12px or 13px high. This may harder to read than verdana
of the same height but arial at 12/13px is still readable.

12/13px might be readable to you, on your monitor, but you aren't
considering anyone with vision problems.
...
Is it the use of verdana in general or using verdana at reduced size
that you disapprove of?

Reduced size.

It was what I saw in a few-minute inspection. There's probably other
pixel sizing in there causing the problem.

Yeah the header is a fixed pixel size, the quirksmode technique is a
good useful for using with float based layouts though.

Nothing overflows on any of my sites either.

Cool

Apologies for the bad attitude in my messages. Late night, too much
caffeine.

My wife hides all but the decaf after mid-afternoon. <g>

--
-bts
-Warning: I brake for lawn deer

[kchayka]

ti********@gmail.com wrote:

Jim Moe wrote:

ti********@gmail.com wrote:

>
> http://usabletype.com/articles/2004/...battle-is-won/
> http://www.thenoodleincident.com/tut...phy/index.html
>

Hmm. Typical deezyner tunnel vision and arrogance.

His solution is appropriate for his website but not for others

Then he/they shouldn't be advocating such nonsense as a general rule for
others to follow.

BTW, even with a minimum text size set, I still have to zoom text in and
out far more often than I should have to. It annoys me no end.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Jim]

Hi BTS,

On Tue, 04 Apr 2006 02:47:50 GMT, "Beauregard T. Shagnasty"
<a.*********@example.invalid> wrote:

Jim wrote:

I seem to have part of the problem solved. The code at:
http://www.chicagospace.org/testarea/Skel2.html

does produce the results I want provided I don't resize the text to a
larger size, which forces the navigation buttons down into the
content area.
Resizing blows your design. I changed the 155px height of your hdr to:

div#hdr {height:13em;

and solved that one problem. You shouldn't use px for that kind of
sizing. Use some value of em instead and resizing won't be a problem.

Ok I'll give that a try. I used px because of the presence of the
graphics and thought px would be the more appropriate of the two.

Oh, and consider dropping Verdana.
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

Didn't know that. Thanks for the link and taking the time to help me
out.

Best Regards, Jim
http://www.chicagospace.org/

Note: address is a fake to foil spammers. Please direct replies to the newsgroup.

[Jim]

Hi Tim,
On 3 Apr 2006 20:41:27 -0700, ti********@gmail.com wrote:

Opposing views are provided here
http://usabletype.com/articles/2004/...battle-is-won/
Thank you for this link I also found one of the articles it links to:
http://usabletype.com/styles/sizes/

to be very useful.


Interesting to note they use verdana at less than the default size and
the web page is attractive, well designed and more legible than xs4all.

If you're interested there's a technique here for setting a font size
which is legible in apparently all browsers ( another site using
verdana would you believe )

http://www.thenoodleincident.com/tut...phy/index.html

Tim

So it looks like I need to decide between using ems and pxs in sizing
my header area.

But no, this doesn't solve my problem. Resizing still results in my
nav button bar intruding into the content area.

So how do I tell the browser: I don't care how big those buttons get -
keep them in the header area. Just shift the main div downward to
accomodate them.

Best Regards, Jim
http://www.chicagospace.org/

Note: address is a fake to foil spammers. Please direct replies to the newsgroup.

[Jim]

Hi Tim,

On 3 Apr 2006 22:10:25 -0700, ti********@gmail.com wrote:

However if you press Ctrl + a couple more times the text buttons still
flow into the content again because the width of the header is also
fixed and the text buttons wrap round.

So what's the solution?

The solution linked to on quirksmode.org (yet another excellent site
which uses verdana ) makes it impossible for the text buttons to flow
into the content no matter how large the font size is.

Regards
Tim

AhHa. Would that be the following bit of code from the "Clearing
Floats" article:

div.container {
border: 1px solid #000000;
overflow: auto;
}
Changing the color of the border to white to match my background, now
when I make the text really big via a series of Ctrl+ in Firefox, I
get a vertical scroll bar in the header area.

See http://www.chicagospace.org/testarea/Skel3.html for this new
version.

It's better but still not where I would like to be. I would prefer
that the dividing line between the header area and the main area shift
downward to make room for the buttons without the necessity of a
scroll bar. I would also like to be able to prevent the "buttons" from
being split in two.

Sigh. I could of had this done in the wink of an eye using tables,
images, and javascript for the rollover effects, but no I just had to
see if it could be done using only CSS. It seemed like a good way to
improve my CSS skills. Of course on that basis, it has been.


Best Regards, Jim
http://www.chicagospace.org/

Note: address is a fake to foil spammers. Please direct replies to the newsgroup.

[Jim]

Hi Tim,

On 3 Apr 2006 20:02:10 -0700, ti********@gmail.com wrote:

I seem to have part of the problem solved. The code at:
http://www.chicagospace.org/testarea/Skel2.html

does produce the results I want provided I don't resize the text to a
larger size, which forces the navigation buttons down into the content
area.

Is the solution in Skel2.html the way to go?

Thanks.
Best Regards, Jim
http://www.chicagospace.org/

Hi Jim

Looks like the problem is similar to one described on quirksmode

http://www.quirksmode.org/css/clearing.html

My understanding is that you need to remove the height setting from
div#hdr altogether then add overflow:hidden to the same and then your
header will expand when the text size is increased.

Hope this helps

Regards,
Tim

Getting better all the time. In addition to the previous changes (see
http://www.chicagospace.org/testarea/Skel3.html)

I just removed the height setting from the div#hdr (in the CSS on my
PC - not posted to web). Now while I still do get the scroll bar in
Firefox, it does enlarge the hdr area and shifts the buttons down
while keeping them visible - making the scroll bar unneccessary. And
I hate to say it but using Internet Explorer, I get the results that I
want: No scroll bar and no breaking/splitting of the link buttons.
Now let me ask this: can I get all the nav buttons to be the same size
and can I force the row of buttons to hug the bottom of the hdr div?


Best Regards, Jim
http://www.chicagospace.org/

Note: address is a fake to foil spammers. Please direct replies to the newsgroup.

[kchayka]

Jim wrote:

div.container {
overflow: auto;
}

when I make the text really big via a series of Ctrl+ in Firefox, I
get a vertical scroll bar in the header area.

See http://www.chicagospace.org/testarea/Skel3.html

You get a scrollbar because you set an explicit height. overflow:auto is
*supposed* to add scrollbars in this case.

Drop the height from #hdr and see what happens.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Jim]

Hi,
On Tue, 04 Apr 2006 17:01:08 -0500, kchayka <us****@c-net.us> wrote:

Jim wrote:

div.container {
overflow: auto;
}

when I make the text really big via a series of Ctrl+ in Firefox, I
get a vertical scroll bar in the header area.

See http://www.chicagospace.org/testarea/Skel3.html

You get a scrollbar because you set an explicit height. overflow:auto is
*supposed* to add scrollbars in this case.

Drop the height from #hdr and see what happens.

I did drop the height. That's when I started getting the scrollbar.


Best Regards, Jim
http://www.chicagospace.org/

Note: address is a fake to foil spammers. Please direct replies to the newsgroup.

[kchayka]

Jim wrote:

On Tue, 04 Apr 2006 17:01:08 -0500, kchayka <us****@c-net.us> wrote:

Jim wrote:

See http://www.chicagospace.org/testarea/Skel3.html

Drop the height from #hdr and see what happens.

I did drop the height. That's when I started getting the scrollbar.

I downloaded the above sample, removed the height property from the #hdr
selector, and the scrollbar went away. You must be looking at a
different version of the page. Or did you forget to upload your changes
to the server?

BTW, there is a syntax error in your CSS on
img.an

Always validate your code to eliminate syntax errors as a cause of
rendering issues.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Jim]

Hi,

On Wed, 05 Apr 2006 08:57:37 -0500, kchayka <us****@c-net.us> wrote:

Jim wrote:

On Tue, 04 Apr 2006 17:01:08 -0500, kchayka <us****@c-net.us> wrote:

Jim wrote:

See http://www.chicagospace.org/testarea/Skel3.html

Drop the height from #hdr and see what happens.
I did drop the height. That's when I started getting the scrollbar.

I downloaded the above sample, removed the height property from the #hdr
selector, and the scrollbar went away. You must be looking at a
different version of the page. Or did you forget to upload your changes
to the server?

I was looking at a version on my PC not uploaded to the server. I'll
recheck it. I might have been looking at the wrong one.

BTW, there is a syntax error in your CSS on
img.an

Always validate your code to eliminate syntax errors as a cause of
rendering issues.

I did run the original through the W3C validator and it passed.
Perhaps an error introduced during fiddiling around with the code
during the course of this discussion.

Thanks for your help.


Best Regards, Jim
http://www.chicagospace.org/

Note: address is a fake to foil spammers. Please direct replies to the newsgroup.