Bullets With Custom Images

I was asked today how you might make a bullet list in Thesis with images instead of standard bullets today. It depends on the bullet image you want to use. Mine was a 16px x 16px image. You have to play around with line-height and padding CSS values to get it to look right. And those values will be dependent on the size of your bullet image and your text.

Here is my bullet list :

Example of an Unordered Bullet List
  • Dogs
  • Cats
  • Birds
  • Fish
  • Rocks

Here is the HTML that goes in the post
HTML for image bullets in unordered list

Here is the CSS that you add to custom.css
HTML for image bullets in unordered list

How To Make Divs Nest

Fixing Divs That Won’t Nest Properly

Sometimes you’ll be designing a page and you’ll have an outer div, with two nested divs, one floated left (say for a menu), and the other floated right (say for the page content).

But when you run your page, the container div refuses to contain the two floated divs. Sometimes the divs are also wrapping. First you should ensure that the container div is about 30px wider than the two divs it’s supposed to contain. Add temporary borders to all the divs so that you can see what you are doing.

Once the divs are no longer wrapping, you’ve reduced the problem to getting the dives to nest properly.

Code might look something like this :

  <div id="maincolumns" style="border:#FF0066 solid 2px">
    <p>Text at the top of the containing div</p>
    <div id="leftthin" style="border:#0066FF solid 2px">
       some menu items
    </div> <!-- end of leftthin -->
    <div id="rightthick" style="border:#33CC00 solid 2px">
      <h1>My Article Heading</h1>
      <p>
        Lorem ipsum dolor sit amet . . .
      </p>
      <p>
        Vivamus imperdiet . .
      </p>
    </div>  <!-- end of rightthick -->
    <div style="clear:both"></div>
   <p>Text at the bottom of the containing div</p>
  </div>  <!-- end of main columns -->

But instead of nesting, it produces output like this, where the two floated columns are outside the container column.

Divs behaving badly

The Solution

You can easily fix the problem by adding overflow:auto to the style of the containing div. And when you do, this is the result.

Divs behaving beautifully