/    Sign up×
Community /Pin to ProfileBookmark

How to format a list ( <ul>, <li> ) using CSS.

Copy linkTweet thisAlerts:
Aug 03.2007

Hello;

Can somebody tell me if the style sheet formatting for the list below is proper?

I hobbled the CSS formatting for the list together using the information from this page:
[url]http://www.alistapart.com/articles/taminglists/[/url]

The list does not have bullets (that’s the way I want it to look). I am just wanting to make sure that it does not show bullets in some browsers.

I can’t see where the style sheet formatting below specifically omits the bullets. I would feel better about it if I could emphatically express in the CSS formatting that bullets are to be omitted.

Do I need to somehow specifically state in the CSS formatting that bullets are to be omitted or is it ok the way it is?

On the page it looks something like this:

[B][COLOR=”Blue”]»Oak »Maple »Ash »Pine »Hickory »Redwood[/COLOR][/B] (this is how I want it to look)

[code=php]
<style type=”text/css”>
ul.inlineList
{
margin: 0px;
}
li.inlineList {
border-style: none;
padding-left: 2px;
padding-right: 0px;
padding-bottom: 0px;
display: inline;
margin: 3px;
}
</style>

<ul class=”inlineList”>
<li class=”inlineList”>»Oak</li>
<li class=”inlineList”>»Maple</li>
<li class=”inlineList”>»Ash</li>
<li class=”inlineList”>»Pine</li>
<li class=”inlineList”>»Hickory</li>
<li class=”inlineList”>»Redwood</li>
</ul>
[/code]

Thanks.

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@thambaAug 03.2007 — Use the property:

list-style: none;

That will ensure you dont have any bullets or anything else showing up in the list.

For more details on styling the ul,li view:

http://www.w3schools.com/css/css_list.asp
Copy linkTweet thisAlerts:
@KnoxVolauthorAug 03.2007 — thamba;

Thanks.? I appreciate the help.
Copy linkTweet thisAlerts:
@OctoberWindAug 03.2007 — additionally (since it looks misleading in your post), be sure to escape the right angle brackets in your li.

<li class="inlineList">[B]&raquo;[/B]Oak</li>

also: (a question in a response) if you define a class for ul, do you need to redefine the same class for each li? or does that inherit from the parent ul?
Copy linkTweet thisAlerts:
@CentauriAug 03.2007 — Just a quick note - to save yourself some typing, you don't have to declare a class for each <li> - as the <ul> is identified, you can reference the <li>s from this.
[CODE]<style type="text/css">
ul.inlineList {
margin: 0px;
}
ul.inlineList li {
border-style: none;
padding-left: 2px;
padding-right: 0px;
padding-bottom: 0px;
display: inline;
margin: 3px;
list-style: none;
}
</style>



<ul class="inlineList">
<li>&raquo;Oak</li>
<li>&raquo;Maple</li>
<li>&raquo;Ash</li>
<li>&raquo;Pine</li>
<li>&raquo;Hickory</li>
<li>&raquo;Redwood</li>
</ul> [/CODE]
Copy linkTweet thisAlerts:
@KnoxVolauthorAug 05.2007 — Thanks everyone for the help. I appreciate it.
Copy linkTweet thisAlerts:
@bulgarian388Aug 05.2007 — Or you can skip this altogether:

[CODE]
ul.inlineList {
margin: 0px;
}
[/CODE]

And do this:

[CODE]
.inlineList {
margin: 0px;
}
[/CODE]

No matter what your still selecting the element with the inlineList class attribute, so adding a "ul" in front of the ".inlineList" is pointless. Not that its going to make your page load faster, but if you do it a lot, the difference can be quite nice (I know because I used to write that way).

Also, do you have a border specified somewhere else? Li's don't have borders, so unless your declaring it somewhere else you can get rid of it. It just bloats your code otherwise.
×

Success!

Help @KnoxVol spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...