Is is possible to set different styles for different UL types?
I know ho to set a an image for the UL tag, for example:
<style type="text/css">
<!--
ul {list-style-image:url(<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/images/smilies/smile.gif">http://forums.webdeveloper.com/images/smilies/smile.gif</a><!-- m -->)}
-->
</style>
Now I would like to set an other image for <UL TYPE=square> and an other one for <UL TYPE=circle>
How may I do that?
/EvaYou must name them... Here, this is a code for the circle things..
<style type="text/css">
<!--
UL.YOUR_classification
{
list-style-image:url(<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/images/smilies/smile.gif">http://forums.webdeveloper.com/images/smilies/smile.gif</a><!-- m -->)
}
UL.YOUR_second_classification
{
list-style-type: circle
}
UL.YOUR_third_classification
{
list-style-type: square
}
-->
</style>
<!-- The following goes in the body -->
<ul class="YOUR_classification">
<li>Your words</li>
<li>Your words</li>
<li>Your words</li>
<li>Your words</li>
</ul>
<ul class="YOUR_second_classification">
<li>Your words</li>
<li>Your words</li>
<li>Your words</li>
<li>Your words</li>
</ul>
<ul class="YOUR_third_classification">
<li>Your words</li>
<li>Your words</li>
<li>Your words</li>
<li>Your words</li>
<li>Your words</li>
</ul>Another valid way (not yet supported in IE) is:
ul[type="square"] {
list-style-image:url(smile.gif);
}
Read about it: <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/selector.html#q1">http://www.w3.org/TR/REC-CSS2/selector.html#q1</a><!-- m -->
----
of course, as jonathan said, you can have
<ul class="maker1">
<li>...
</ul>
ul.marker1 { list-style-image: url(smile.gif) }
This is your best choice as it will be displayed properly in IE as well as other browsers like NS6+, Opera etc.I figured out the class="something" by myself. I was kind of hoping for something like
ul[type="square"] . But it does not work in the IE browser we are using (5.5)
The thing is, the user has a tool to write information in a Rich text field and he/she is allowed to create bulleted list and even choose the type of the list. But usualy, he is not using HTML, even if it is possible. I was hoping we could give him the posibility to use different lists with different types and put the correct image out by the CSS.
Well, I quess I have to learn them some HTML then.
Thanks anyway
/Eva
I know ho to set a an image for the UL tag, for example:
<style type="text/css">
<!--
ul {list-style-image:url(<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/images/smilies/smile.gif">http://forums.webdeveloper.com/images/smilies/smile.gif</a><!-- m -->)}
-->
</style>
Now I would like to set an other image for <UL TYPE=square> and an other one for <UL TYPE=circle>
How may I do that?
/EvaYou must name them... Here, this is a code for the circle things..
<style type="text/css">
<!--
UL.YOUR_classification
{
list-style-image:url(<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/images/smilies/smile.gif">http://forums.webdeveloper.com/images/smilies/smile.gif</a><!-- m -->)
}
UL.YOUR_second_classification
{
list-style-type: circle
}
UL.YOUR_third_classification
{
list-style-type: square
}
-->
</style>
<!-- The following goes in the body -->
<ul class="YOUR_classification">
<li>Your words</li>
<li>Your words</li>
<li>Your words</li>
<li>Your words</li>
</ul>
<ul class="YOUR_second_classification">
<li>Your words</li>
<li>Your words</li>
<li>Your words</li>
<li>Your words</li>
</ul>
<ul class="YOUR_third_classification">
<li>Your words</li>
<li>Your words</li>
<li>Your words</li>
<li>Your words</li>
<li>Your words</li>
</ul>Another valid way (not yet supported in IE) is:
ul[type="square"] {
list-style-image:url(smile.gif);
}
Read about it: <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/selector.html#q1">http://www.w3.org/TR/REC-CSS2/selector.html#q1</a><!-- m -->
----
of course, as jonathan said, you can have
<ul class="maker1">
<li>...
</ul>
ul.marker1 { list-style-image: url(smile.gif) }
This is your best choice as it will be displayed properly in IE as well as other browsers like NS6+, Opera etc.I figured out the class="something" by myself. I was kind of hoping for something like
ul[type="square"] . But it does not work in the IE browser we are using (5.5)
The thing is, the user has a tool to write information in a Rich text field and he/she is allowed to create bulleted list and even choose the type of the list. But usualy, he is not using HTML, even if it is possible. I was hoping we could give him the posibility to use different lists with different types and put the correct image out by the CSS.
Well, I quess I have to learn them some HTML then.
Thanks anyway
/Eva