Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Changing the colour of a list? 2
- Thread starter funkymonk
- Start date
-
1
- #2
Hi mate,
The following uses squares instead..
<ul type=square>
<li> One
<li> Two
<li> Three
</ul>
The following uses an image that you specify..
<dl>
<dt><dd><img src="bullet.gif"> One
<dt><dd><img src="bullet.gif"> Two
<dt><dd><img src="bullet.gif"> Three
<dt><dd><img src="bullet.gif"> Four
</dl>
Hope this helps Wullie
The following uses squares instead..
<ul type=square>
<li> One
<li> Two
<li> Three
</ul>
The following uses an image that you specify..
<dl>
<dt><dd><img src="bullet.gif"> One
<dt><dd><img src="bullet.gif"> Two
<dt><dd><img src="bullet.gif"> Three
<dt><dd><img src="bullet.gif"> Four
</dl>
Hope this helps Wullie
-
1
- #3
cian
Technical User
- Oct 11, 2001
- 1,383
Indeed it can Rod, with just a bit of CSS
list-style-type: disk | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
list-style-image: URL(sumthin.gif)
I presume also:
list-style-color: #??????
É
<!--#include file="profound quotation" -->
list-style-type: disk | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
list-style-image: URL(sumthin.gif)
I presume also:
list-style-color: #??????
É
<!--#include file="profound quotation" -->
- Thread starter
- #4
cian
Technical User
- Oct 11, 2001
- 1,383
Hi funkymonk,
sorry I gave an inaccurate and incomplete answer, I just checked it and the colour code I gave you was bull!
Between the <head> tags of your document you can put for example:
<style type="text/css">
<!--
ul { color: #ffccff;
list-style-type: square; (or)
list-style-image: URL(sumthin.gif)
}
-->
</style>
to have different types of lists on the same page:
ul.list1 {list-style-image: URL(sumthin.gif)}
ul.list2 {list-style-image: URL(sumthin.gif)}
or
ol.list1 etc etc
In your HTML then
<ul class="list1">
<li> etc
or <ul class="list2">
<li> etc
Sorry i'm a bit rushed today so i'm not explaining it very well.
You should check out the W3C pages, they explain it very well.
É
<!--#include file="profound quotation" -->
sorry I gave an inaccurate and incomplete answer, I just checked it and the colour code I gave you was bull!
Between the <head> tags of your document you can put for example:
<style type="text/css">
<!--
ul { color: #ffccff;
list-style-type: square; (or)
list-style-image: URL(sumthin.gif)
}
-->
</style>
to have different types of lists on the same page:
ul.list1 {list-style-image: URL(sumthin.gif)}
ul.list2 {list-style-image: URL(sumthin.gif)}
or
ol.list1 etc etc
In your HTML then
<ul class="list1">
<li> etc
or <ul class="list2">
<li> etc
Sorry i'm a bit rushed today so i'm not explaining it very well.
You should check out the W3C pages, they explain it very well.
É
<!--#include file="profound quotation" -->
- Thread starter
- #6
- Thread starter
- #8
Yeah, I remember enjoying it when I started.
Fisrt looked at classes and went urgh? Looked again and went ahhhh!
Looks pretty straight forward, not like JavaScript. Tried that once, not sure if I'm going back. heheheh...
rod@sameplanet.co.uk
********************
Fisrt looked at classes and went urgh? Looked again and went ahhhh!
Looks pretty straight forward, not like JavaScript. Tried that once, not sure if I'm going back. heheheh...
rod@sameplanet.co.uk
********************
Hi Cian, funkymonk,
Setting the ul-color or li-color in the style sheet not only make the bullit in color, but also makes the complete text in the <LI>-line the same color.
Use this workaround to make only the bullit colored and the text black (or another color):
In your HTML then
<ul class="list1">
<li><font color="black">your text</font></li> etc
or <ul class="list2">
<li><font color="red">text LI-line</font></li> etc
-----------------------------------------------------
just another trick with CSS:
You can indent some <LI>-line's with:
li.line1 {left:27px; position:relative;}
and then in the HTML
<li class= "line1">
-----------------------------------------------------
Hope this helps,
Erik
<!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (!! Many Happy Returns !! -->
Setting the ul-color or li-color in the style sheet not only make the bullit in color, but also makes the complete text in the <LI>-line the same color.
Use this workaround to make only the bullit colored and the text black (or another color):
In your HTML then
<ul class="list1">
<li><font color="black">your text</font></li> etc
or <ul class="list2">
<li><font color="red">text LI-line</font></li> etc
-----------------------------------------------------
just another trick with CSS:
You can indent some <LI>-line's with:
li.line1 {left:27px; position:relative;}
and then in the HTML
<li class= "line1">
-----------------------------------------------------
Hope this helps,
Erik
<!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (!! Many Happy Returns !! -->
- Thread starter
- #10
- Status
Similar threads
- Locked
- Question
- Locked
- Question
