Stefan Helander

How to display list items inline and remove the bullet

/0 Comments/in /by

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.

 

Stefan Helander

Make a weblink (a href) not clickable

/0 Comments/in /by

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.