css lists.. I've almost got it.. but need some help..

ok.. I've been converting navigations tables to lists with css.. and
I've got it almost working but there is a few things I don't understand..

here is the url for what I've got so far.. so you can see whats happening..

http://mypage.uniserve.com/~hrmartin
-------------------------------------------

I'm pretty happy with the nav bar on the side, except I can't figure out
what is making the big space at the top and the bottom of it.. I think
it must be some kind of padding on the background but I can't figure out
which setting it is..

I borrowed heavily from Listamatic and have commented the changes I've
made as I explored and learned..

here is the css..

#navcontainer
{
width: 23%; /*adjusted slightly smaller*/
margin-right: .9em; /*I added*/
font-family: georgia, serif;
font-size: .9em; /*changed to em insteaad of px*/
text-align: left;
/*text-transform: lowercase;* dont' like this/
float: left; /*I added*/
}

ul#navlist
{
text-align: left;
list-style: none;
padding: 0;
}

question:
I don't understand why there has to be a text-align: left in the
#navcontainer, and also in the ul#navlist..


ul#navlist li
{
display: block;
margin: 0;
padding: 0;
}

ul#navlist li a
{
display: block;
width: 100%;
padding: 0.5em 0 0.5em 0.5em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
background: #f7f2ea;
}

question: don't understand these 3 digit colours.. are they really 6
digits with assumed 000 at the end? or ??

also, I've been using the chart at http://www.w3.org/TR/css3-color/
to pick my colours from.. But I've seen other lists of "browser
friendly" colours but don't really understand what that means..

some of the colours in this CSS I can find nowhere, like #f7f2ea does
that mean it will be substituted if the page is displayed on a system
with a grphics card that shows less colours.. or that it can cause
worse problems on some people's systems..

#navcontainer>ul#navlist li a { width: auto; }

question:
I don't understand what this line does, especially the > in the
middle... but the width part either?

ul#navlist li#active a
{
background: #f0e7d7;
color: #800000;
}

ul#navlist li a:hover, ul#navlist li#active a:hover
{
color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}
-----------------

different problems on the horizontal list... as you can see the blocks
are sitting a little on top of each other.. some interaction between
the padding and the line spacing, but I can't figure out how to fix it..

also, its two wide and wrapping into two lines.. I'd like to try making
each li a certain width and make the text wrap inside it.. but can't
figre out how to do that either.. there are some 13 items.. so I
thought that would make each one aobut 7.6%.. but didn't find success
trying to set the li width to that..

also, with so much of the two lists being the same, I was trying to
figure out how to combine some of the specs... ie: can I do

ul#navlist
{
text-align: left;
list-style: none;
padding: 0;
}

and

ul#navlist2
{
text-align: left;
list-style: none;
padding: 0;
}


as something like this..

ul#navlist #navlist2
{
text-align: left;
list-style: none;
padding: 0;
}

------------
#navcontainer2 /*second list is inline*/
{
width: 100%;
/*margin-right: .9em;* don't need this/
font-family: georgia, serif;
font-size: .9em;
text-align: left;
/*text-transform: lowercase;*/
/*float: left;* don't need this/
}

ul#navlist2
{
text-align: left;
list-style: none;
padding: 0;
}

ul#navlist2 li
{
display: inline;
margin: 0;
padding: 0;
}

ul#navlist2 li a
{
display: inline;
/*width: 100%;* not sure what this does on an inline list/
padding: 0.2em 0 0.2em 0; /*was 0.5em 0 0.5em 0.5em;* less padding
on inline list/
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
background: #f7f2ea;
}

#navcontainer2>ul#navlist2 li a { width: auto; }

ul#navlist2 li#active a
{
background: #f0e7d7;
color: #800000;
}

ul#navlist2 li a:hover, ul#navlist2 li#active a:hover
{
color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}

oops.. meant to post this to alt.www.webmaster...
I'd still appreciate any comments..
Helen

Helen Martin wrote:

ok.. I've been converting navigations tables to lists with css.. and
I've got it almost working but there is a few things I don't understand..

here is the url for what I've got so far.. so you can see whats
happening..

http://mypage.uniserve.com/~hrmartin
-------------------------------------------

I'm pretty happy with the nav bar on the side, except I can't figure out
what is making the big space at the top and the bottom of it.. I think
it must be some kind of padding on the background but I can't figure out
which setting it is..

I borrowed heavily from Listamatic and have commented the changes I've
made as I explored and learned..

here is the css..

#navcontainer
{
width: 23%; /*adjusted slightly smaller*/
margin-right: .9em; /*I added*/
font-family: georgia, serif;
font-size: .9em; /*changed to em insteaad of px*/
text-align: left;
/*text-transform: lowercase;* dont' like this/
float: left; /*I added*/
}

ul#navlist
{
text-align: left;
list-style: none;
padding: 0;
}

question:
I don't understand why there has to be a text-align: left in the
#navcontainer, and also in the ul#navlist..


ul#navlist li
{
display: block;
margin: 0;
padding: 0;
}

ul#navlist li a
{
display: block;
width: 100%;
padding: 0.5em 0 0.5em 0.5em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
background: #f7f2ea;
}

question: don't understand these 3 digit colours.. are they really 6
digits with assumed 000 at the end? or ??

also, I've been using the chart at http://www.w3.org/TR/css3-color/
to pick my colours from.. But I've seen other lists of "browser
friendly" colours but don't really understand what that means..

some of the colours in this CSS I can find nowhere, like #f7f2ea does
that mean it will be substituted if the page is displayed on a system
with a grphics card that shows less colours.. or that it can cause
worse problems on some people's systems..

#navcontainer>ul#navlist li a { width: auto; }

question:
I don't understand what this line does, especially the > in the
middle... but the width part either?

ul#navlist li#active a
{
background: #f0e7d7;
color: #800000;
}

ul#navlist li a:hover, ul#navlist li#active a:hover
{
color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}
-----------------

different problems on the horizontal list... as you can see the blocks
are sitting a little on top of each other.. some interaction between
the padding and the line spacing, but I can't figure out how to fix it..

also, its two wide and wrapping into two lines.. I'd like to try making
each li a certain width and make the text wrap inside it.. but can't
figre out how to do that either.. there are some 13 items.. so I
thought that would make each one aobut 7.6%.. but didn't find success
trying to set the li width to that..

also, with so much of the two lists being the same, I was trying to
figure out how to combine some of the specs... ie: can I do

ul#navlist
{
text-align: left;
list-style: none;
padding: 0;
}

and

ul#navlist2
{
text-align: left;
list-style: none;
padding: 0;
}


as something like this..

ul#navlist #navlist2
{
text-align: left;
list-style: none;
padding: 0;
}

------------
#navcontainer2 /*second list is inline*/
{
width: 100%;
/*margin-right: .9em;* don't need this/
font-family: georgia, serif;
font-size: .9em;
text-align: left;
/*text-transform: lowercase;*/
/*float: left;* don't need this/
}

ul#navlist2
{
text-align: left;
list-style: none;
padding: 0;
}

ul#navlist2 li
{
display: inline;
margin: 0;
padding: 0;
}

ul#navlist2 li a
{
display: inline;
/*width: 100%;* not sure what this does on an inline list/
padding: 0.2em 0 0.2em 0; /*was 0.5em 0 0.5em 0.5em;* less padding on
inline list/
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
background: #f7f2ea;
}

#navcontainer2>ul#navlist2 li a { width: auto; }

ul#navlist2 li#active a
{
background: #f0e7d7;
color: #800000;
}

ul#navlist2 li a:hover, ul#navlist2 li#active a:hover
{
color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}

Hi Helen,

http://mypage.uniserve.com/~hrmartin

I'm pretty happy with the nav bar on the side, except I can't figure
out what is making the big space at the top and the bottom of it.. I
think it must be some kind of padding on the background but I can't figure
out which setting it is..

Do you mean the top margin on #navlist? Try this:

#navlist{
margin-top: 0;
}

question: don't understand these 3 digit colours.. are they really 6
digits with assumed 000 at the end? or ??

No, they're abbrieviated. #fff is actually #ffffff, #cab is actually
#ccaabb etc.

also, I've been using the chart at http://www.w3.org/TR/css3-color/
to pick my colours from.. But I've seen other lists of "browser
friendly" colours but don't really understand what that means..

Browser-safe is an anachronism, you don't really have to worry about it
anymore. It harks back to a time when low-colour monitors were commonplace.

some of the colours in this CSS I can find nowhere, like #f7f2ea does
that mean it will be substituted if the page is displayed on a system
with a grphics card that shows less colours.. or that it can cause
worse problems on some people's systems..

Don't worry about those people -- yes, the colour will be substituted but it
will still look OK, just not exactly as you intended.

#navcontainer>ul#navlist li a { width: auto; }

question:
I don't understand what this line does, especially the > in the
middle... but the width part either?

The > is a "Child" selector, it will apply the CSS only to direct
descendents of the parent element.

<style type="text/css">
#thing > p{
color: green;
}
</style>

<div id="thing">
<p>
I am green
</p>
<div>
<p>
I am not green
</p>
</div>
</div>

'width: auto' means let the browser calculate the width itself rather than
the author explicitly stating a width. This is the default and you only
need to specify it if you are trying to override an explicit width like
200px or 35%.

different problems on the horizontal list... as you can see the
blocks are sitting a little on top of each other.. some interaction
between
the padding and the line spacing, but I can't figure out how to fix
it..

I just glanced at it briefly but adding 'display: block' and 'float: left'
to 'ul#navlist2 li a' seems to work. Will probably need to add a little
right-margin too.

also, its two wide and wrapping into two lines.. I'd like to try
making each li a certain width and make the text wrap inside it.. but
can't figre out how to do that either.. there are some 13 items.. so I
thought that would make each one aobut 7.6%.. but didn't find success
trying to set the li width to that..

Don't worry about it, let 'em wrap!

also, with so much of the two lists being the same, I was trying to
figure out how to combine some of the specs... ie: can I do

ul#navlist
{
text-align: left;
list-style: none;
padding: 0;
}

and

ul#navlist2
{
text-align: left;
list-style: none;
padding: 0;
}


as something like this..

ul#navlist #navlist2
{
text-align: left;
list-style: none;
padding: 0;
}

No, comma seperate them:
ul#navlist, ul#navlist2
{
text-align: left;
list-style: none;
padding: 0;
}

On Thu, 11 May 2006 14:13:06 -0700, Helen Martin wrote:

cut

Nice site.

OT.

Noticed your Fountain Pens page, here's one link that you may find
interesting - http://www.penkala.hr/en/about_penkala.html

Not a wide known fact - Penkala is the inventor of fountain pen, and Pen
(Pencil) got it's name after him.

--
buy, bought, bye

On Sat, 13 May 2006 18:56:13 +0200, Nije Nego <"nije\"nego"@net.hr>
wrote:

Noticed your Fountain Pens page, here's one link that you may find
interesting - http://www.penkala.hr/en/about_penkala.html

Not a wide known fact - Penkala is the inventor of fountain pen,

That may be true.

and Pen (Pencil) got it's name after him.

That is nonsense. The words pen and pencil were used by Shakespeare
(among others).

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

On Sun, 14 May 2006 19:58:06 +0200, Stephen Poley wrote:

and Pen (Pencil) got it's name after him.

That is nonsense. The words pen and pencil were used by Shakespeare
(among others).

Sorry for missinformation, collected it somewhere, didn't even think about
it.

--
buy, bought, bye