List Item Image

Squiz Matrix Support
1

Hello,


I have created a menu using the UL and LI tags and I am trying to use an image instead of the bullet poing using a style sheet. The image does not display in the list. Here is my code in my style sheet:



li { list-style-image: url(mysource_files/sidearrow.gif); }



Here is my HTML:



<div class="subnav">

<mysource_asset>

<ul>

<li>

<a href="<mysource_print var="asset_link" />" class="<mysource_print var="settings.class" />" ><mysource_print var="asset_short_name" /></a>

</li>

</ul>

</mysource_asset>

</div>



I have uploaded the image within the design. As a test I hardcoded the style with the LI tag, ie, <li style=" list-style-image: url(mysource_files/sidearrow.gif) "> which works fine.



Any suggestions … ?



thanks

2

Stylesheets don't replace the mysource_files/ location. Put that CSS style information into the parsefile for the design itself.

3

thanks it worked. However, it would be good to have all css in an external file.

4

[quote]thanks it worked. However, it would be good to have all css in an external file.
[right][post=“9182”]<{POST_SNAPBACK}>[/post][/right][/quote]



You can use the CSS File asset for that, but it means the configuration gets more complicated.

5

[quote]You can use the CSS File asset for that, but it means the configuration gets more complicated.
[right][post=“9185”]<{POST_SNAPBACK}>[/post][/right][/quote]



I actually created a CSS File Asset, which had the above CSS in there, li { list-style-image: url(mysource_files/sidearrow.gif); }. Should a CSS File Asset replace mysource_files/sidearrow.gif, because it wasn’t working?



Thanks

6

[quote]I actually created a CSS File Asset, which had the above CSS in there, li { list-style-image: url(mysource_files/sidearrow.gif); }.  Should a CSS File Asset replace mysource_files/sidearrow.gif, because it wasn’t working?
[right][post=“9196”]<{POST_SNAPBACK}>[/post][/right][/quote]



The image has to be an associated file of the CSS File asset for this to work. You will also need to use the linked_css design area in your design to link to the CSS File asset itself. Check the Design Manual for more information.

7

[quote]The image has to be an associated file of the CSS File asset for this to work. You will also need to use the linked_css design area in your design to link to the CSS File asset itself. Check the Design Manual for more information.
[right][post=“9197”]<{POST_SNAPBACK}>[/post][/right][/quote]



Thanks, I didn’t associate the image file to the CSS File Asset, but instead it was associated with Design Asset.

Cheers