PDA

Click to See Complete Forum and Search --> : Bullets

tunatamaker
03-14-2006, 04:31 PM
Hello,
I want to add custom bullets in dreamweaver. Can someone give me step by step directions on how to do this, because I a novice. I would really appreciate it. Plus I am only 15 years old, and trying to increase my knowledge. :D
wesbos
03-14-2006, 04:50 PM
all you have to do is us css to define a bullet and give it a url for the image

like so


<style type="text/css">

.bullet {list-style-image: url(/images/icons/bullet.gif);}

</style>

<ul class="bullet"><li>List Item 1</li></ul>
Norsk
03-14-2006, 04:52 PM
try these and Google css list items

HTML

<ul>
<li>Bulleted list item</li>
<li>Bulleted list item</li>
<li>Bulleted list item</li>
<li>Bulleted list item</li>
<li>Bulleted list item</li>
</ul>
<ul class="Square">
<li>Bulleted list item</li>
<li>Bulleted list item</li>
<li>Bulleted list item</li>
<li>Bulleted list item</li>
<li>Bulleted list item</li>
</ul>
<ul class="Circle">
<li>Bulleted list item</li>
<li>Bulleted list item</li>
<li>Bulleted list item</li>
<li>Bulleted list item</li>
<li>Bulleted list item</li>
</ul>
<ol>
<li>List item number 1</li>
<li>List item number 2</li>
<li>List item number 3</li>
<li>List item number 4</li>
<li>List item number 5</li>
</ol>


CSS


UL, OL {
margin-top: 15px;
margin-bottom: 15px;
}
UL.Square {
margin-top: 15px;
margin-bottom: 15px;
list-style-type: square;
font: 11px/140% Arial, Helvetica, sans-serif;
color: #99f;
}
UL.Circle {
margin-top: 15px;
margin-bottom: 15px;
list-style-type: circle;
font: 11px/140% Arial, Helvetica, sans-serif;
color: #f90;
}
pcthug
03-14-2006, 07:33 PM
<html>
<head>
<style type="text/css">
ul {list-style-image: url(path/to/customized/image.gif);}
</style>
...
<ul>
<li>Whoa! I have got a customized image next to me</li>
</ul>
</body>
</html>

http://www.w3schools.com/css/css_list.asp