473,390 Members | 1,339 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,390 software developers and data experts.

changing the bullet of <li>

Hello to ciwas!

Is there a way to change the bullet form, color, etc, of the element
<li> under<ul> via css? Any reply will be appreciated.
--
Freundliche Gruesse,
Netzteil - Udo Marx
http://www.netzteil.com
mailto:ma**@netzteil.com
Jul 21 '05 #1
8 61472
On Tue, 18 Jan 2005 08:38:31 GMT, Udo Marx wrote:
Is there a way to change the bullet form, color, etc, of the element
<li> under<ul> via css?


You can do lots with bullets, even use your own image.
Have a look here: http://www.alistapart.com/articles/taminglists/ or do a
simple Google for css bullet and you'll finds heaps of examples.
--
Groet,
Adriana
,---- [hint]
| throw rubbish out if you want to reach me by e-mail
'----

Jul 21 '05 #2
I found it very useful to use a positioned background-image for <li>s
and set liste-style-image to none. If you need a graphical bullet it's
more flexible than using liste-style-image:url(...);

Chris

A.Translator wrote:
On Tue, 18 Jan 2005 08:38:31 GMT, Udo Marx wrote:

Is there a way to change the bullet form, color, etc, of the element
<li> under<ul> via css?

You can do lots with bullets, even use your own image.
Have a look here: http://www.alistapart.com/articles/taminglists/ or do a
simple Google for css bullet and you'll finds heaps of examples.

Jul 21 '05 #3
Chris Leipold <cl******@dietzk.de> wrote:
I found it very useful to use a positioned background-image for <li>s
and set liste-style-image to none. If you need a graphical bullet it's
more flexible than using liste-style-image:url(...);


An interesting idea... I guess you mean something like

li { list-style-type: none;
background: url(../images/bullet.gif) no-repeat;
padding-left: 1em; }

(and perhaps setting the left margin and padding of the ul element to zero
or something small, to avoid the excessive default indentation).

But it's probably best to wrap it inside @media screen { ... }, since most
browsers by default omit background images in printing.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 21 '05 #4
"Jukka K. Korpela" <jk******@cs.tut.fi> wrote:
I found it very useful to use a positioned background-image for <li>s
and set liste-style-image to none. If you need a graphical bullet it's
more flexible than using liste-style-image:url(...);
An interesting idea... I guess you mean something like

li { list-style-type: none;
background: url(../images/bullet.gif) no-repeat;
padding-left: 1em; }


One possible reason to do this is that Gecko based browsers don't
position image bullets cosmetically in a nice manner when text is
zoomed. Using the background image hack the bullet can be positioned
with "0 50%", this works better when zoomed in Gecko.

People who are pernickety about list bullet alignment with respect to
the list text may also like it because using list-style-image causes a
small difference between Opera & IE versus Gecko.

For static offsets a list-style-image can be given a transparent top
and/or left edge.
(and perhaps setting the left margin and padding of the ul element to zero
or something small, to avoid the excessive default indentation).

But it's probably best to wrap it inside @media screen { ... }, since most
browsers by default omit background images in printing.


Indeed. Another drawback is that if the user has images disabled a UA
can decide to use the standard bullet (Opera does this). Needless to say
that this only works if the bullet image has been specified using the
list-style-image property.

--
Spartanicus
Jul 21 '05 #5
A.Translator wrote:
On Tue, 18 Jan 2005 08:38:31 GMT, Udo Marx wrote:

Is there a way to change the bullet form, color, etc, of the
element <li> under<ul> via css?

You can do lots with bullets


Yet, but I find something missing from CSS regarding list bullets. On
more than one occasion, I wanted to change the bullet to a plus sign, or
a hyphen, or some other textual character. Too bad we don't have

list-marker: "*";

or some such thing. Lacking such a property, authors turn to images of a
plus sign, requiring another http connection, more bytes, and less
flexibility.

--
Brian
Jul 21 '05 #6
*Brian* <us*****@julietremblay.com.invalid>:

Yet, but I find something missing from CSS regarding list bullets. On
more than one occasion, I wanted to change the bullet to a plus sign, or
a hyphen, or some other textual character. Too bad we don't have

list-marker: "*";

or some such thing.


That would be

::marker {content: '*'}

with the CSS 3 Lists draft <http://www.w3.org/TR/css3-lists/#markers>.

--
"Opportunity is missed by most people
because it is dressed in overalls and looks like work."
Thomas Alva Edison
Jul 21 '05 #7
Christoph Paeper wrote:
Brian:
I wanted to change the bullet to a plus sign, or a hyphen, or some
other textual character. Too bad we don't have

list-marker: "*";

or some such thing.

That would be

::marker {content: '*'}

with the CSS 3 Lists draft
<http://www.w3.org/TR/css3-lists/#markers>.


Ah! Good to know that. Of course, it'll be years before it is of any
use. :-( Not to sound cranky, but why wasn't this in CSS 1? It seems
like a pretty simple thing to implement.

--
Brian
Jul 21 '05 #8
*Brian* <us*****@julietremblay.com.invalid>:
Christoph Paeper wrote:
::marker {content: '*'}
<http://www.w3.org/TR/css3-lists/#markers>.
Of course, it'll be years before it is of any use.


Sure, although I guess it's one of the first CSS3 things we'll see being
implemented. (Not counting the ones already being supported by one or
another UA.)
Not to sound cranky, but why wasn't this in CSS 1?


CSS 1 and 2 had a different concept concerning list markers ('display:
marker'), that never got implemented anywhere AFAIK. Therefore it's
perhaps not that bad, that CSS3 breaks backwards compatibility in this
regard.

--
Useless Fact #7:
It cost 7 million dollars to build the Titantic
and 200 million to make a movie about it!
Jul 21 '05 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

8
by: Michael | last post by:
This is a two-part question to which I haven't been able to find an answer anywhere else. 1. Is it possible to format the bullet/number character of the <li>? In my styles sheet, I have the <li>...
4
by: Matt | last post by:
Hi, Got an unordered list with 100% width, with 5 list items of 20% width styled to fill the width of the container element. Renders fine in Mozilla, but when you change the size of the window...
4
by: abs | last post by:
Anybody has an idea how to get the <ul> element which is not nested in <li> element ? In other words I have several lists like this: <ul id="1"> <li>Aaaaaaaa</li> <li>Bbbbbbbb</li>...
2
by: Shaun | last post by:
Hello! I have a quick question regarding CSS and having it applied to all elements. I am trying to eliminate the gap between a paragraph and a list that usually occurs in html and I've found...
2
by: Andrew Donaldson | last post by:
I'd welcome some help in understanding what's going on with graphical browsers in the navigation list at: http://www.bounceandtickle.org.uk/index.html (This site is not about what it might...
1
by: Alex Nitulescu | last post by:
Hi. Something puzzles me: VS.NET says that "per the active schema, li cannot be nested within td". However, the code works fine, and the result is as I expected. Is there something wrong in...
5
by: Syl | last post by:
Hello experts!! The top menu navigation bar displays perfectly in IE, but does not display properly in Mozilla or Netscape : http://checkeredshirt.com/textonly.html For some reason the non-IE...
10
by: BobaBird | last post by:
When <liis set to {max-width:45em;}, the bullets move from the top to the bottom of the <li>. Also, the bullet for a top-level <liends up on the same line as the last <liof its nested list, with...
1
by: Chinsu | last post by:
<html> <head> <style> #ex { width: 700px; background: red; float: left; } a, span { display: block;
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.