Archive for March, 2013

 

How to display list items inline and remove the bullet

When using list items in HTML to create a horizontal list (for example in a horizontal menu) you need to display the list items not vertically which is standard, but horizontally. You will probably also want to remove the bullet. This is how you do it.

To display the list horizontally, use CSS display: inline

To remove the list item bullet, use CSS list-style: none

Example:

<ul>
  <li style="display: inline; list-style: none;">Menu item 1</li>
  <li style="display: inline; list-style: none;">Menu item 2</li>
  <li style="display: inline; list-style: none;">Menu item 3</li>
</ul>

Of course, the above is just to illustrate the technique. In a real world scenario this would be applied through a CSS class or id.

 

Share

Posted by on March 25th, 2013 No Comments

Make a weblink (a href) not clickable

Sometimes you have a need to prohibit a visitor from clicking on a link on your site. For example if you are including content from another soruce via Atom or RSS and they contain links.

The best way is of course to remove the link tag (<a href="" >) from the content. But if this is not possible an alternate solution can be to cover it with a transparent div placed on top of the content using the z-index.

Share

Posted by on March 18th, 2013 No Comments