<ul> and CSS

[peterinwa]

I'm just working through my first page using CSS. I have successfully created a centered page heading class as well as one for left justified body text. Now I am confused about inserting <ul> in the body text.

I've looked at Internet tutorials and a good book, but they just say how to use CSS to specify the type of bullet.

What I don't get is I'm entering text within my body text class and suddenly want to go into <ul> list mode. Don't care what the bullet looks like!

Do I have to define a class for an unordered list which also specifies the font and size? None of the examples show this.

Or can I just insert a <ul> in the body text class and it will continue with the same font... which doesn't seem to be working.

Thanks, Peter

[Nick_W]

>>Or can I just insert a <ul> in the body text class and it will continue with the same font... which doesn't seem to be working.

Have you tried this? ;)

Nick

[peterinwa]

P.S.

Here's my code:

/* Body text: paragraph left body regular*/
.plbr {
text-align: left;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 20px;
color: #0000cc}

<p class='plbr'>
We welcome your e-mails, but please read the following before writing us:
</p><p class='plbr'>
<ul>
<li>If you...

We welcome your... comes out in the correct font.

If you... comes out in list format, but not in the correct font.

[peterinwa]

Oops! Mistake of a true self-taught novice. I just had to change <ul> to <ul class="plbr">

Thanks, Peter

[MonkeeSage]

Make a body {} rule to hold all your global stuff for the page, e.g.,

body {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 20px;
background: white;
color: #0000cc;
}

Then just change what you need in the other rules, e.g.,

p {
color: orange;
font-size: 50px;
}

Then all your body styles are inherited to the other elements (like the unordered list), and only those that are over-rided by the separate rules will be different.

Top-down instead of bottom-up. :)

Jordan

[peterinwa]

Thanks, that's REALLY helpful!

[peterinwa]

MonkeeSage, I did that and it worked great with Internet Explorer. I put everything in the Body and only changes like left/center justification in the paragraphs. In fact I could just use <p align=center> without even stating a class and it worked fine.

Unfortunately it fails in Netscape 7.1. Looks like the Body definitions of font size etc. don't fall into the body of the page. I'll have to put all that back into definitions for para center, para left, etc.

[peterinwa]

P.S.

Actually with Netscape the font and color and other parameters specified in Body do seem to fall into the text of the page; only font size doesn't.

[MonkeeSage]

Peter:

That's odd, the only thing I can think of is that there may be another style over-riding the one you're trying to set. Try using the "!important" indicator in the one that isn't working, like "font-size: 20px!important;" and see if that works. Also be sure to check your syntax, make sure you didn't miss a semi-colen or colen anywhere, because NN is alot less forgiving about that kind of thing than IE is. NN needs every rule to be in this format: "attribute: value;"

Jordan

[JimbAround]

You shouldn't nest <UL><LI></LI></UL> in a <P> tag.
Just removing that wrapping tag might fix it.

Also, try this for your CSS. Give UL a class, and make a Contextual Selector for the child tag LI.

* * * * * * * * * * * * * * *
/* Body text: paragraph left body regular*/
.plbr, .plbr li {
text-align: left;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 20px;
color: #0000cc
}

* * * THEN * * *

<p class='plbr'>We welcome your e-mails, but please read the following before writing us:</p>
<ul class='plbr'>
<li>If you...</li>
</ul>
<p class='plbr'>Keep on going...</p>
* * * * * * * * * * * * * * *

good luck

--jim