I am trying to create a simple bulleted list but every time I use <ul> and <li> it messes the whole page up. How can I make this list bulleted?
Did you know that a single horse… <br />
Has a yearly farrier bill of $350<br />
Needs worming 4 times a year at $30<br />
Eats more than $100 in hay and $85 in grain<br />
Has a yearly vet fee of $300<br />
Plus other expenses at over $200/year<br />
Also can be found at:
http://www.influencealife.org/adopt.html
good to know somebody else here raises the bar for us all!
well, if instead giving the solution he would understand, i would’ve started with changes in OP’s style sheet page, i’m sure he would’ve developed a “cloud computing” of it.
i’ve opted for the short and clear way out. his job later is to improve.
i gave the OP what he wanted and by doing that i ensured he at least understood a few things. css cascading brought to discussion would’ve make for a good reason for him to lost any interest and become frustrated.
and surely doing all the work for him is not a good thing. i don’t condone offering complex professional solutions OPs don’t understand, but use them anyway. that is making sure of causing a disaster for him later, when facing changes in a code he cannot handle 
if he has the ability to wonder he’ll go further without me pushing him. otherwise, it’s like casting pearls before swine (no personal reference or attack here, just a saying).
Yep, that’s my story. 
… focus on logical lightweight code!
that’s a different story all together
if you put it like that you are right, of course!
but that would mean you would have to go and redo all the style sheet, not just these selectors. i just wanted to give the solution to the OP that he would understand. optimization was his homework after, if he wanted
add this:
div#body_text ul {
list-style-type:none;
margin-left: 60px;
}
@Rayzur: no need to write separate selector declarations with the same redundant rules. you just change the rules you want
Exactly, I can do the same with less code. And still have full control over the UL without having to add another selector.
I would clean some of the longhand css out of there and let the font style cascade from the parent
div#body_text {
float: right;
width: 1000px;
[B]background: url(images/bodybackground.png) repeat-y;
font:16px/22px Verdana, Geneva;
color: #123250;[/B]
}
div#body_text [B]p[/B] {
margin:0 20px 30px 20px;
}
div#body_text [B]ul[/B] {
margin:0;
padding:0 0 0 40px;
}
^ I agree that it must be taken in steps.
I need to correct one of my comments also -
I would clean some of the longhand css out of there and let the font style cascade inherit from the parent
change
div#body_text p {
clear: left;
color: #123250;
font-family: Verdana, Geneva;
font-size: 16px;
line-height: 22px;
margin-bottom: 30px;
margin-left: 20px;
margin-right: 20px;
}
to
div#body_text p, div#body_text ul {
clear: left;
color: #123250;
font-family: Verdana, Geneva;
font-size: 16px;
line-height: 22px;
margin-bottom: 30px;
margin-left: 20px;
margin-right: 20px;
}
Well you just need to style the UL now. You got to have the proper markup first and go from there.
Give me a minute and I’ll knock something together for you (if needed)
K now when I do that it loses the <p> properties which I want it to keep
check it out
http://www.influencealife.org/adopt.html
Hi,
The first thing you need to do is get it set up as list items in a UL and then it will get bullets by default unless you reset the list-style.
<ul>
<li>Did you know that a single horse...</li>
<li>Has a yearly farrier bill of $350</li>
<li>Needs worming 4 times a year at $30</li>
<li>Eats more than $100 in hay and $85 in grain</li>
<li>Has a yearly vet fee of $300</li>
<li>Plus other expenses at over $200/year</li>
</ul>
there is a SP member in Java forum. he has a signature: baby steps… baby steps…
my point.
otherwise, you are right. but if you throw at him many new things it will be useless. but if you manage to teach him at least one, you have succeeded.
I think the most important concepts anyone new to CSS needs to learn is The Cascade, Specificity, and Inheritance.
When they come to terms with those concepts it will reduce a large amount of redundant code and hopefully eliminate any confusion as to why their elements are picking up styles and where those styles are coming from.
Yes, it will take a while to learn CSS but lets start with the “C” in CSS.
if he has the ability to wonder he’ll go further without me pushing him. otherwise, it’s like casting pearls before swine (no personal reference or attack here, just a saying)
I learned to swim by being thrown in the water, not by reading about it. Of course there was someone standing there to pull me out if I didn’t come up.
If the OP starts drowning I’ll pull them out, but they need to get wet with some cascade and inheritance though. No better time than now to start learning about it. The link above will break the ice.
thanks guys I got it. All the coding I’ve done and I never really had to do a list. Thanks for all the help.
Sean
you’re welcome it was not a big deal, was it
That’s why I would not group them with the p styles noonope did.
Style the UL by itself and you will get full control of it alone.
Add left padding to the UL for an indent. You should also zero out the margins on the UL for browser consistency.
add this:
div#body_text ul {
list-style-type:none;
margin-left: 60px;
}
@Rayzur: no need to write separate selector declarations with the same redundant rules. you just change the rules you want
K got that now how do I tell it to indent?
http://www.influencealife.org/adopt.html