Squidoo CSS Tricks: Images and Bullets

When my lenses are blessed, I like to thank the Squid Angel. It is a big honor to receive a SquidBlessing. The Squid Angels are a group of volunteers on Squidoo. More information can be found on this Squid Angel lens.

This Lens has been blessed by


VBright105

Angel Graphic courtesy of GransGrans Animations

A bulleted list is great for, well lists! However, a standard list can be a bit boring.... Take a look:

• A standard bulleted list
• Line 2
• Line 3

Effective, but a little plain. Wouldn't it be great if you could jazz them up -- to look like these:

• A jazzy star as your point.


• Some space underneath each point to make it easy to read.

or this:

• A different image with the text a bit further away...

Well, follow these instructructions and you'll be producing wonderfully beautiful bulleted lists like these.

The first thing you need to know is that you need these two codes:

<ul> Is the code to open an 'unordered list'. Any item that you want to appear in your bulleted list, needs to appear after this code.

<li> Is the code to identify each list item. That is the item that requires a bullet point of some sort.

</li> Is the code to identify the end of each list item.

</ul> is the code to identify the end of the bulleted list.

The thing to remember with HTML code is that nearly every code is a pair..... and bulleted lists are no different. You require a pair of each of the codes <ul> and </ul> as well as <li> and </li>.

Your basic un-numbered list will look like:
<ul>
<li>Your list text goes here</li>
<li>Your list text goes here</li>
<li>Your list text goes here</li>
</ul>

To style your bullet points, you need to know a couple of things:

1. The image you want to use; and
2. The web address (or url) of where the image is stored

The url, or webaddress, will look some thing:

http://yourwebaddress.com/image.jpg

Once you have this information, you can then style your list.

To add your image as your dot point, add the following to your <ul> style code: list-style-image:url(websiteurl)

It will look like: <ul style="list-style-image:url(http://yourwebsite.com/image.jpg);">

Now that you have your image set, you may want to change the spacing between the image and the text. This will depend on the effect you are trying to achieve and sometimes you will use an image that needs more space after it.

To change the spacing between the image and your text, add the following to your <li> style code: padding-left:35px;

It will look like: <li style="padding-left:35px;">

Remember!!! The larger the number, the more space between the bullet and the text

Some examples:

• The padding-left style is set to 35px

Changing the number 60px:

• The padding-left style is set to 60px

O.K, so they look pretty good right? But, what if you don't want them set right against the left margin? For various reasons, you may want the bullets to be indented - maybe to balance the page or paragraph.

To indent the bullets, you need to know about the margin-left: style attribute. Let's say you want to indent your list 20px from the left hand margin - your list would be:

<li style="margin-left:20px;">

Some examples:

• The margin-left style is set to 35px

Changing the number 20px:

• The margin-left style is set to 20px

Changing the number 40px:

• The margin-left style is set to 40px

You can combine the style elements to achieve the effects you want

e.g:
<li style="margin-left:20px;padding-left:15px;">

The above example will look like:

• The margin-left style is set to 20px and the padding-left style is set to 15px

Now I haven't covered every possible style attribute here, but I've given you some basics... I've summarized these attributes below - feel free to copy them to your hearts content:

Summary of styling attributes for un-numbered lists:

<ul>: Identifies the start of your un-numbered list

list-style-image:url(image_url): Applies a different image as the bullet point to a list

<li>: Identifies the start of your un-numbered list item

padding-left:10px: Will add space between the bullet image and the text. The larger the number, the more space between

margin-left:10px: Will indent the bulleted list to the left, the higher the number, the larger the indent

</li>: Identifies the end of your un-numbered list item

</ul>: Identifies the end of your un-numbered list

BONUS!!!
I didn't cover this styling option, but if you're feeling brave or adventurous, see how this goes...

margin-right:10px: Will indent the bulleted list on the right, the higher the number, the larger the indent. This is cool if you don't want your list to be full width of the section.

These books may help in demystifying CSS and the coding of unnumbered lists.

CSS:
The Missing Manual

The Zen of CSS Design:
Visual Enlightenment for the Web
(Voices That Matter)

Sometimes, the placement of the images that you include using the standard Squidoo Upload function just don't 'cut the mustard'. These images are fixed in their placement on your lens and sometimes it would be nice to be able to place an image wherever you would like.

For example, being able to place an image to the right of a certain bit of text in a lens.... like this:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sollicitudin libero id elit. Sed euismod nonummy neque. Nam dignissim urna vel urna. Nunc aliquet. Nunc vel dui mattis magna varius condimentum. Etiam lacus enim, aliquam ultricies, luctus ut, placerat id, lectus. Vestibulum laoreet commodo tortor. Nunc eget urna. Suspendisse ac orci. Vivamus quis tortor facilisis velit interdum blandit. Mauris euismod convallis diam. Quisque turpis metus, aliquam sed, euismod sit amet, mollis a, ligula. Maecenas ultricies turpis vitae augue. Suspendisse potenti. Etiam hendrerit cursus eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sollicitudin libero id elit. Sed euismod nonummy neque. Nam dignissim urna vel urna. Nunc aliquet. Nunc vel dui mattis magna varius condimentum. Etiam lacus enim, aliquam ultricies, luctus ut, placerat id, lectus. Vestibulum laoreet commodo tortor. Nunc eget urna. Suspendisse ac orci. Vivamus quis tortor facilisis velit interdum blandit. Mauris euismod convallis diam. Quisque turpis metus, aliquam sed, euismod sit amet, mollis a, ligula. Maecenas ultricies turpis vitae augue. Suspendisse potenti. Etiam hendrerit cursus eros.

Or, if you have a nifty bulleted list, using the tutorial above, you might want to add a picture to add depth or discussion, or simple to break all that text up... Something like:

• Point 1


• Point 2
  
• Point 3





• Point 1


• Point 2


• Point 3

Of course, where you position the images will depend on the amount of text in the bullet points and the effect you want to achieve. The image I've used here, is too tall and forces this paragraph to wrap on the right.

Here's how you do it:

The <p> is the opening 'paragraph' marker

The </p> is the closing 'paragraph' marker

style="float: right;" will make an object track to the right hand side of the area

style="float: left;" will make an object track to the left hand side of the area

The margin-left:, margin-right, margin-top, margin-bottom elements will allow you to adjust the margins on the placement of the paragraph

The width:, and height: elements modify the height and width of a paragraph to allow better placement on the screen.

So how do all these elements go together to layout a nice page??? Good question. Here are some practical examples to copy and experiment with.

Sample Paragraph, Image Wrapped On The Left

<p style="text-align:center; float:left; width:195px; margin:5px; margin-top:50px;"> <img src="http://mywebsite.com/images.jpg" width="195/" align="center" > </p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sollicitudin libero id elit. Sed euismod nonummy neque. Nam dignissim urna vel urna. Nunc aliquet. Nunc vel dui mattis magna varius condimentum. Etiam lacus enim, aliquam ultricies, luctus ut, placerat id, lectus. Vestibulum laoreet commodo tortor. Nunc eget urna. Suspendisse ac orci. Vivamus quis tortor facilisis velit interdum blandit. Mauris euismod convallis diam. Quisque turpis metus, aliquam sed, euismod sit amet, mollis a, ligula. Maecenas ultricies turpis vitae augue. Suspendisse potenti. Etiam hendrerit cursus eros.

In this example:

• The width and height elements are set to those of the image.
• The image is encased in paragraph markers
• The margin-top element is used to force the image paragraph down to be better positioned on the text. You may need to tweak this to make it look better.

And looks like:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sollicitudin libero id elit. Sed euismod nonummy neque. Nam dignissim urna vel urna. Nunc aliquet. Nunc vel dui mattis magna varius condimentum. Etiam lacus enim, aliquam ultricies, luctus ut, placerat id, lectus. Vestibulum laoreet commodo tortor. Nunc eget urna. Suspendisse ac orci. Vivamus quis tortor facilisis velit interdum blandit. Mauris euismod convallis diam. Quisque turpis metus, aliquam sed, euismod sit amet, mollis a, ligula. Maecenas ultricies turpis vitae augue. Suspendisse potenti. Etiam hendrerit cursus eros.

You'll notice that the image looks a little (or a lot) lower, when compared to the text - it will need reviewing.

Sample Paragraph, Image Wrapped On The Right

<p style="text-align:center; float:right; width:195px; margin:5px; margin-top:50px;"> <img src="mywebsite.com/image.jpg" width="195/" align="center" > </p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sollicitudin libero id elit. Sed euismod nonummy neque. Nam dignissim urna vel urna. Nunc aliquet. Nunc vel dui mattis magna varius condimentum. Etiam lacus enim, aliquam ultricies, luctus ut, placerat id, lectus. Vestibulum laoreet commodo tortor. Nunc eget urna. Suspendisse ac orci. Vivamus quis tortor facilisis velit interdum blandit. Mauris euismod convallis diam. Quisque turpis metus, aliquam sed, euismod sit amet, mollis a, ligula. Maecenas ultricies turpis vitae augue. Suspendisse potenti. Etiam hendrerit cursus eros.

You'll notice that to move the image from the left to the right, all you need to do is change the float:left; element to float:right;. Simple, right? It now looks like:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sollicitudin libero id elit. Sed euismod nonummy neque. Nam dignissim urna vel urna. Nunc aliquet. Nunc vel dui mattis magna varius condimentum. Etiam lacus enim, aliquam ultricies, luctus ut, placerat id, lectus. Vestibulum laoreet commodo tortor. Nunc eget urna. Suspendisse ac orci. Vivamus quis tortor facilisis velit interdum blandit. Mauris euismod convallis diam. Quisque turpis metus, aliquam sed, euismod sit amet, mollis a, ligula. Maecenas ultricies turpis vitae augue. Suspendisse potenti. Etiam hendrerit cursus eros.

Let's now look at how you can position an image amongst bullets.... it's almost the same.

Floating an image on the right of a bulleted list
<p style="float: right; width:200px;margin-left:5px;"><img src="http://mywebsite.com/image.jpg"></p><ul style="list-style-image: url(http://mywebsite.com/star.jpg);">
<li style="margin-bottom:10px;">Point 1</li>
<li style="margin-bottom:10px;">Point 2</li>
<li style="margin-bottom:10px;">Point 3</li>
</ul>

This looks like:

• Point 1


• Point 2
  
• Point 3

Floating an image on the left of a bulleted list
<p style="float: left; width:200px;margin-left:5px;"><img src="http://mywebsite.com/image.jpg"></p><ul style="list-style-image: url(http://mywebsite.com/star.jpg);">
<li style="margin-bottom:10px;">Point 1</li>
<li style="margin-bottom:10px;">Point 2</li>
<li style="margin-bottom:10px;">Point 3</li>
</ul>

This looks like:

• Point 1


• Point 2
  
• Point 3

Carrying on from above, you notice that although the image is positioned on the left, the stars are over the image - which isn't a great thing....

So, it's necessary too play with the margin-right style attribute of the image to get the position correct.

Tweaking the space between the image and the stars
<p style="float: left; width:200px;margin-left:5px; margin-right:35px;"><img src="http://mywebsite.com/image.jpg"></p><ul style="list-style-image: url(http://mywebsite.com/star.jpg);">
<li style="margin-bottom:10px;">Point 1</li>
<li style="margin-bottom:10px;">Point 2</li>
<li style="margin-bottom:10px;">Point 3</li>
</ul>

This looks like:

• Point 1


• Point 2
  
• Point 3

Doesn't that look better?

So let's summarize...

Image Positioning

Use the <p> and </p> to position images

Style attributes:
float: right: Will position an image on the right hand side of a block of text

float: right: Will position an image on the right hand side of a block of text

float: left: Will position an image on the left hand side of a block of text

width and heightattributes are necessary to ensure the image floats appropriately.

margin-left, margin-right, margin-top, margin-bottom attributes will provide space around the image block

padding-left, padding-right, padding-top, padding-bottom attributes will provide space within the image block

Feel Free To Copy The Code On This Page To Layout Your Pages