Re: [css-d] FW: vertical-align middle NOT in tables (was: problem w/ table-less horizontal nav bar)

2007-11-28 Thread Jim Davis 
Rob,

Here is one solution:

In body {...} change the font-size to an em value such as 1em (more on this
later).

Then change to:
ul#navbarUl {
clear: both;
height: 20px;
width: 100%;
margin: 0;
padding: 13px 0;
background-image: url(images/navbar-bg.jpg);
background-repeat: no-repeat;
}
li.navlink {
float : left;
width : 20%;
list-style-type : none;
text-align: center;
}
li.navlink a {
color: white;
text-decoration: none;
font-size: 1em;
letter-spacing: 1px;
margin: 0;
padding: 0;
}

You should also remove the  from News and Seminars and consider
replacing the word 'and' with & (ampersand). It still may break into two
lines.

This works in FF win. Not sure about the evil IE.

But there is a bigger issue. If you set font-size to *n* pixels then IE,
including IE 7, will not re-size the font if the user selects a desired Text
Size  in the browser.  Since your content states "...serving the unique
needs of people 50 and older" you should consider the possibility that users
with less than perfect eyesight will view a larger font size via the browser
options. This possibility creates havoc with the nav menu, among other
things.

You may need to think about changing the width of the site to 960px, or so,
to give you additional horizontal space for the nav menu and other columns.

Jim


>
>
> Now here's my next *newb* question... If I have a horizontal nav bar
> comprised of LI elements, where the lines of text varies from one LI to
> another, how do I get them to vertically center align.
>
> The old link that was broken is now fixed again with a partial
> implementation of David's LI treatment. The LI's use text, not graphics
> for
> the  elements.
>
> http://rob.emenecker.com/eclasses/H152/posts/wk3-new/wk3new.htm
>
> ...Rob
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] FW: vertical-align middle NOT in tables (was: problem w/ table-less horizontal nav bar)

2007-11-28 Thread David Laakso 
Rob Emenecker wrote:
> Okay, David and Jim provided some great info on table-less navbars. (David,
> you really do above and beyond with the visuals! Don't stop!)
>   


How about I stop. And you try?



> Now here's my next *newb* question... If I have a horizontal nav bar
> comprised of LI elements, where the lines of text varies from one LI to
> another, how do I get them to vertically center align. 
>
> The old link that was broken is now fixed again with a partial
> implementation of David's LI treatment. The LI's use text, not graphics for
> the  elements.
>
> http://rob.emenecker.com/eclasses/H152/posts/wk3-new/wk3new.htm
>
> ...Rob
>   

You have a fixed width layout. Float the nav. /Hold/ the width (pixels-- 
so it will not expand horizontally and break it's wrapper). /Hit/ the 
height (em's so it it will expand vertically and not break out the 
bottom of it's wrapper). Try to hold +3 font-scaling in compliant 
browsers; and, font-size "largest" in IE6.0 and IE7.0 (tweaking of both 
is on you).

Others on this list are better at this sort of thing than me. We'll 
count on their their help from here on out...

See: 

Good luck.
Best,
~dL





-- 
http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] FW: vertical-align middle NOT in tables (was: problem w/ table-less horizontal nav bar)

2007-11-29 Thread Rob Emenecker 
Thanks again David!

...Rob
 

-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of David Laakso
Sent: Wednesday, November 28, 2007 10:21 PM
To: Rob Emenecker
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] FW: vertical-align middle NOT in tables (was: problem
w/ table-less horizontal nav bar)

Rob Emenecker wrote:
> Okay, David and Jim provided some great info on table-less navbars. 
> (David, you really do above and beyond with the visuals! Don't stop!)
>   


How about I stop. And you try?



> Now here's my next *newb* question... If I have a horizontal nav bar 
> comprised of LI elements, where the lines of text varies from one LI 
> to another, how do I get them to vertically center align.
>
> The old link that was broken is now fixed again with a partial 
> implementation of David's LI treatment. The LI's use text, not 
> graphics for the  elements.
>
> http://rob.emenecker.com/eclasses/H152/posts/wk3-new/wk3new.htm
>
> ...Rob
>   

You have a fixed width layout. Float the nav. /Hold/ the width (pixels-- so
it will not expand horizontally and break it's wrapper). /Hit/ the height
(em's so it it will expand vertically and not break out the bottom of it's
wrapper). Try to hold +3 font-scaling in compliant browsers; and, font-size
"largest" in IE6.0 and IE7.0 (tweaking of both is on you).

Others on this list are better at this sort of thing than me. We'll count on
their their help from here on out...

See: <http://www.chelseacreekstudio.com/ca/cssd/temp2.html>

Good luck.
Best,
~dL





__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/