/    Sign up×
Community /Pin to ProfileBookmark

Horizontal Bullet Points

Copy linkTweet thisAlerts:
Sep 19.2008

Hi,

Using CSS, how do I display bullet points automatically, so they display like the following?:

[B]* Bullet Point 1 * Bullet Point 2 * Bullet Point 3 * Bullet Point 4[/B]

[CODE]<ul>
<li>Bullet Point 1</li>
<li>Bullet Point 2</li>
<li>Bullet Point 3</li>
<li>Bullet Point 4</li>
</ul>[/CODE]

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelSep 19.2008 — A horizontally UL list is "display:inline;" which by default [B]removes[/B] the "list-style-type:[I]value[/I];" (it is "none" by default for "display:inline;") whereby "value" would be [I]disc, circle, square[/I], etc

To get these back, it must be implicitly stated.

Or you could use [B]list-style-image:url();[/B] use a background-image on the "<li>" itself. Some padding might be required, someting like "padding-left:20px;" to get the 'image' to show up
Copy linkTweet thisAlerts:
@KDLASep 19.2008 — Or, you could float left the <li> with a width set.
Copy linkTweet thisAlerts:
@F_DanialsauthorSep 20.2008 — To get these back, it must be implicitly stated.[/QUOTE]

How would you get the bullets back, without using a background-image (list-style-image)?
Copy linkTweet thisAlerts:
@WebJoelSep 21.2008 — How would you get the bullets back, without using a background-image (list-style-image)?[/QUOTE] Bullets [I]are[/I] "list-style-[I][B]type[/B][/I]; A "horizontally display" UL list, is "display:inline;" and the default for this IS "list-style-type:none;". This is to eliminate confusion in a society that reads left-to-right, lest user thinks that the " * " is a "LI" itself. But you can 'force' it back, if you need to, by explicitly stating the list-style-type:value;

But to create the visual of this without "list-style-type;value;", use a "background-image" on the LIs. This is actually okay and good, because background-image is presentational and therefore, can be entirely handled by the CSS.

A 20px by 20px "<img>" of the asterisk " * " positioned would suffice. You could use a 'site logo' for the "<img>" too. I have done this, like, for a site about ferrets; I used my 'user avatar' image as "bullets" for LIs.

Something like:li {background:url(asteriskImage.jpg) 0;....}[/QUOTE]whereby "asterisk.jpg" is the 20px x 20px " * " IMAGE, and " 0 " is position-left:0; (the default unstated position-top; is always "center").

Keep in mind now, that this 20-px wide "image" will be covered-over by whatever 'text' or 'content' appears IN the LI, so you want to "padding-left:30px;" in the LI, to give a 10px "gap" between the " * " and the text... so:

li {background:url(asteriskImage.jpg) 0; padding-left: 20px; }....[/QUOTE] would be your code.

When using an IMG for background-image:url() on LIs, you can make the width/height be whatever size you want. I just chose 20px x 20px for the sake of the asterisk image. A typical 'line-height' (height & width of scrollbar, etc) is 20px.

Still with me here? If you have problems, post back & I can whip something up and show code. ?

KDLA's suggestion to float:left; width set width is also good

'lists' are a LOT of fun to do! ? So many ways to do stuff, so many variations!
Copy linkTweet thisAlerts:
@F_DanialsauthorSep 22.2008 — Cheers for that reply! ?

The following code works correct in FF, but not in IE.

How do I get the code to work in both FF and IE and therefore be cross browser compatible?

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
ul
{
float: right;
}

li
{
float:left;
}
</style>
</head>
<body>

<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>

</body>
</html>[/CODE]
Copy linkTweet thisAlerts:
@FangSep 22.2008 — If you float a list the bullets will not be displayed in IE. Add background images.
×

Success!

Help @F_Danials 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 6.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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...