PDA

Click to See Complete Forum and Search --> : Horizontal Bullet Points

F.Danials
09-19-2008, 07:14 AM
Hi,

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

* Bullet Point 1 * Bullet Point 2 * Bullet Point 3 * Bullet Point 4

<ul>
<li>Bullet Point 1</li>
<li>Bullet Point 2</li>
<li>Bullet Point 3</li>
<li>Bullet Point 4</li>
</ul>
madwormer2
09-19-2008, 01:26 PM
You'll want to float 'em left in the ul.


.yarrrrgh li {
float: left;
margin: 4px;
}

<ul class="yarrrrgh">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
NogDog
09-20-2008, 04:16 PM
Alternatively, instead of floating the LI elements you can set them to display: inline;, instead (and use padding instead of margin to control the spacing). Which is better will depend on how exactly you want things to work.
F.Danials
09-20-2008, 07:07 PM
Using the display: inline method, how do I display the bullet points before the actual text? (Except for the first one ;))

Instead of:

* Bullet Point One
* Bullet Point Two
* Bullet Point Three
* Bullet Point Four

...Should be:

Bullet Point One * Bullet Point Two * Bullet Point Three * Bullet Point Four
NogDog
09-20-2008, 07:32 PM
You would need to either assign a CSS class to the first <li> or use a style attribute to set list-style-type:none; for it.
F.Danials
09-22-2008, 09:48 AM
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?

<!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>