View Full Version : How Do I Make Bullets Go Across not Down


directall
11-11-2006, 10:45 PM
Hi! I would like to know how to make bullets go across and not down.

Example (a + sign equals a bullet)

+Links +About +Contact

NOT:

+Links
+About
+Contact

Thanks for any help!

angelic.deception
11-12-2006, 01:45 AM
I'm not sure if this can be done using only HTML, but I'm pretty sure it can be done using CSS, by adding this to the stylesheet:
<style type="text/css">
li { display: inline; }
</style>
Hope that helps. =)

directall
11-12-2006, 02:26 AM
Thanks for the reply. I added it to my CSS Style Sheet but nothing happened. It is no big deal so I'll just not use a list. Thanks anyways!

angelic.deception
11-12-2006, 04:06 AM
Hmn, it worked for me. Perhaps there's a conflict somewhere. If you'd like to post your stylesheet, I'd be glad to help. =)

angelic.deception
11-12-2006, 04:19 AM
** Apologies for the double post. **

Just realised that you want the bullets to still appear when you set the li to inline. This can be achieved, but you need to create a background image (just a small one, nothing too fancy) and apply it to the li.
li {
display: inline;
padding-left: 1em;
background: url(bullet.gif) no-repeat;
}
You'll need to adjust the left padding according to the width of your image. It is in ems right now, but you can change that to pixels if you wish.

Hope that helps. =)

J to the izzosh
11-12-2006, 02:15 PM
Floating the list item elements can achieve the same effect without discarding the bullets, but you may have a hard time setting margins and padding so the bullets don't overlap the actual content. Especially so, considering the inconsistencies in displaying lists and their items among the various major browsers. Such a pain... You would also have to clear the element after the list to prevent the floated list items from floating into its content.

li {
float:[left/right];
}

whatever_element_is_after_the_list {
clear:both;
}

fallen4loki
11-18-2006, 08:00 AM
Thanks for the reply. I added it to my CSS Style Sheet but nothing happened. It is no big deal so I'll just not use a list. Thanks anyways!

if you can't get your bullet thing to work you might want to consider writing your links like this link<b> | </b>link<b> | </b>link | ect. it will make the |'s bold (this is the key above enter holding shift) It creats a nice effect and it's not a pain in the....rear....it will look something like this

link | link | link | link | link | link

Don't know if that helps or not but it was just an idea!

:waves: