Solved

adding a hanging indent to a bullet list

Posted on 2004-04-06
5
3,747 Views
Last Modified: 2010-08-05
How could you add a hanging indent to a bullet list without adding extara leading space?
0
Comment
Question by:CABITSS
5 Comments
 
LVL 6

Expert Comment

by:dgelinas
ID: 10767024
<style>
#navcontainer ul li a
{
background: transparent url(../images/bulletNon.gif) left center no-repeat;
text-align: left;
text-indent: 5;  //Change this here to create more or less indent..  Can even use negative.
font: bold 9pt arial;
text-decoration: none;
}
</style>

<body>
<div id="navcontainer">
  <ul id="navlist">
    <li><a href="">Bullet One</a></li>
    <li><a href="">Bullet Two</a></li>
    <li><a href="">Bullet Three</a></li>
    <li><a href="">Bullet Four</a></li>
  </ul>
</body>
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 10767034
one way is to use the blockquote tag:

<ul>
  <li><blockquote> your content 1 </blockquote></li>
  <li><blockquote> your content 2 </blockquote></li>
</ul>
0
 
LVL 4

Expert Comment

by:monolith_888
ID: 10767046
Do you mean something like this?

<table border=0 cellpadding=0 cellspacing=0 width="200">
  <tr valign=top>
    <td>&#149;&nbsp;</td>
    <td>Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 Item 1 </td>
  </tr>
  <tr valign=top>
    <td>&#149;&nbsp;</td>
    <td>Item 2 </td>
  </tr>
  <tr valign=top>
    <td>&#149;&nbsp;</td>
    <td>Item 3 </td>
  </tr>
</table>

-blake
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 500 total points
ID: 10770788
dgelinas has the right idea in using the indent.
One other thing to be careful with though is that the indent actually moves the bullets to the left, as opposed to the indent to the right - so if it's an issue, you need to counter that indent with the margin setting:

<html>
<head>
<style type="text/css">

.placeholder
{
width       : 170px;
padding     : 10px 10px 0 0;
border      : 3px solid gray;
}

ul.one li
{
margin-left : 10px;
text-indent : -10px;
}

ul.two li
{
text-indent : -10px;
}

</style>
</head>
<body>

<div class="placeholder">
  <ul>
    <li>This will wrap and have no indent</li>
  </ul>
</div>
<div class="placeholder">
  <ul class="one">
    <li>This will look like the first with an indent</li>
  </ul>
</div>
<div class="placeholder">
  <ul class="two">
    <li>This will move to the left and have an indent</li>
  </ul>
</div>

</body>
</html>
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now