How to format text within a sidebar?

torystcyr

I have a site with an html sidebar. I think I finally got it to look and feel like I want it except for one issue:

The text within the sidebar is a row bulleted subjects. However, if the text is too long it will continue on the next line but the problem is the second line doesn't indent to stay consistent with the first line.

So if the first line is

• The earthly

Sanctuary

Instead I am hoping that sanctuary would be indented so it would align with the "The" of the previous line and even possibly have less space between the lines so it's clear that the second line is a continuation of the first line.

I have attached an image of what the sidebar currently looks like and I am placing my code below:

- - - - - - -

<div style="height:920px;w

idth:180px;border:1px solid #ccc;
background-color:white;color:black;scrollbar-base-color:gold;
font:16px/26px Georgia, Garamond, Serif;overflow:scroll;overflow-y:scroll;overflow-x:hidden;">
<p style="height:-10%;">
</p>
<li>
<a href="http://www.example.com">
The Earthly Sanctuary
</a>
</li>
<li>
<a href="http://www.example.com">
The Sanctuary Furniture
</a>
</li>
<li>
<a href="http://www.example.com">
Religion
</a>
</li>
<li>
<a href="http://www.example.com">
Christian
</a>
</li>
<li>
Faith
</li>
<li>
Bible
</li>
<li>
God
</li>
<li>
Jesus
</li>
<li>
Holy Spirit
</li>
<li>
Revelation
</li>
<li>
Daniel
</li>
<li>
Prophecy
</li>
<li>
Beast
<p>
</p>
</li>
</div>

visioncraft

Hi there, @torystcyr! Are you coding your sidebar by hand, using an HTML widget? Is there a reason why you chose to do it that way instead of, let's say, just using a Text Widget, or a List Widget?

You could use the Text Widget, for example, to give you the list formatted already, with the text indented as you wish. If you then wanted to add "special effects" not already available within the Text Widget itself — eg., hover effects, or borders and margins between list items — you could always select 'Edit HTML/CSS…' in the widget's menu, and then do some fine-tuning. That is probably the easiest way to get you the result you want, requiring the list amount of hand-coding (and maintenance).

If you do want to hand-code your sidebar, then in order to style your <li> elements the way you want you'll need to create hanging indents. This can be done by using the text-indent CSS property, using the hanging keyword — like this:

li {
  text-indent: 1em hanging;
}

You may need to play with the width of the indent — change 1em to whatever measurement you need to get the text on the second line to align properly with the text on the first.

But once again, you might find it easier to format this just using a Text or List Widget. Hope this helps!