Solved

adding a hanging indent to a bullet list

Posted on 2004-04-06
5
3,754 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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
JavaScript: Issue with onClick 5 41
Form Submit falis 6 33
Which non-HTML GUI front end to use with Java? 3 19
Button and js nou working 3 6
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

816 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

9 Experts available now in Live!

Get 1:1 Help Now