CSS Circle

Posts Tagged ‘css advanced list

May 12th/ Top reasons your CSS columns are messed up

Posted by: siddesigner on: December 10, 2008

I believe the recent surge in popularity of CSS frameworks comes from a lack of basic understanding of the CSS box model and how it’s implemented across browsers. I wanted to share with you some quick tips on how to avoid easy pitfalls so you can create your own CSS framework in no time flat, [...]

How to Assign Custom List Bullets with CSS

Posted by: siddesigner on: October 4, 2008

1. In your html page embed link to your css file:

<html>
<head>
<title>Test Document</title>
<link href=”styles.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
</body>
</html>

2. Create your bulleted list. Here is ours:

<p>Most popular apple varieties in New England today:</p>
<ul>
<li>McIntosh</li>
<li>Cortland</li>
<li>Red Delicious</li>
<li>Empire</li>
<li>Rome</li>
</ul>

3. In css file we will redefine <li> tag. Let’s change these default bullets to our custom bullets.

li {
list-style-position: outside;
list-style-image: url(your_bullet.gif);
}

4. Format [...]