Lists [Archive] - Web Hosting Talk

View Full Version : Lists

OscarGuy

03-06-2009, 10:11 AM

I have a set of lists in a sidebar that is set to 180px. The lists wrap to the next line. Is there a way to change the padding just for the wrapped portion so that it isn't directly under the first letter of the list?
so, instead of it looking like this...
Edit: I can't get it to show what I want it to look like because I can't figure out how to get this forum set the font to courier and to not have it truncate spacing at the beginning of a line...

axiological design

03-06-2009, 12:54 PM

do you have what you're trying to fix posted anywhere? It'd be helpful to be able to look at your code.

OscarGuy

03-06-2009, 07:39 PM

I don't have it anywhere. I'm working on a redesign of my site and so, my live site doesn't have the codes. Here's what I have, hopefully it's relevant.
CSS:
ul{
line-height: 110%;
padding-left: 10px;
color: #21536A;
list-style-type: none;
}
HTML: <li>4/1: Why Do We Even Try</li>
<li>4/1: Hey, Guys, The King's Back</li>
<li>4/1: Just When I Needed You Least</li>
These are in a column that's only 180px wide, so it wraps to the next line. So, in the last item, "Just When I Needed You Least" wraps, the You Least starts the next line right under the 4/1. I want it to start further right than that...In MS Word, it's called the Hanging Indent.

Replicada

03-07-2009, 07:35 AM

How about shrinking the font / widening the column and fixing it all ?
It's not recommended you add extra paddings on wrapping text as not all browsers use the same fonts and therein you get inconsistency issues. The only method I can think of doing this is by using a span on the wrapping text to pad it further, however this is bad code and I highly dissaprove of it all.
Dan

tim2718281

03-07-2009, 07:31 PM

You could make each list item a paragraph, and define a hanging indent paragraph style:
<html>
<head>
<style type="text/css">
.hang { text-indent: -2em; margin-left: 2em; }
</style>
</head>
<body>
<ul>
<li>4/1: Why Do We Even Try</li>
<li>4/1: Hey, Guys, The King's Back Hey, Guys, The King's Back Hey, Guys, The King's Back Hey, Guys, The King's Back</li>
<li>4/1: Just When I Needed You Least</li>
</ul>
</body>
</html>

OscarGuy

03-07-2009, 07:51 PM

That sort of does what I want it to do, but I can't seem to get it to indent very far. I was just kinda hoping that list elements would have some special way of widening the hanging indent...

tim2718281

03-07-2009, 08:11 PM

Well, if you use list-style-type of "none", you can define the indent and margin for list items:
<html>
<head>
<style type="text/css">
ul.none {list-style-type: none;text-indent: -5em; margin-left: 8em; }
</style>
</head>
<body>
<ul class="none">
<li>4/1: Why Do We Even Try</li>
<li>4/1: Hey, Guys, The King's Back Hey, Guys, The King's Back Hey, Guys, The King's Back Hey, Guys, The King's Back</li>
<li>4/1: Just When I Needed You Least</li>
</ul>
</body>
</html>
But if you want a list-style-type other than "none", you can set the paragraphs to omit the blank line:
<html>
<head>
<style type="text/css">
.hang { text-indent: -3em; margin-left: 5em; margin-bottom: 0; margin-top:0 ;}
</style>
</head>
<body>
<ul>
<li>4/1: Why Do We Even Try</li>
<li>4/1: Hey, Guys, The King's Back Hey, Guys, The King's Back Hey, Guys, The King's Back Hey, Guys, The King's Back</li>
<li>4/1: Just When I Needed You Least</li>
</ul>
</body>
</html>

OscarGuy

03-07-2009, 08:20 PM

Ah. That did what I needed it to do. I had to switch up to px since that's what I'm using, but I still managed to get it to work with a -35px/35px off-set.