Unordered list indenting - Post ID...
How can I adjust the unordered list, so when a list item is longer than one line, the next line starts with an indent and starts under the text of the previous line instead below the bullet point.
"Yay!" someone with good text formatting taste!
I'm no expert and haven't tried RSD yet (too chicken for now), but I use:
<ul style="list-style-position:outside;">* will make the list items indent.
<ul style="list-style-position:inside;"> will bring overlapping list items to the left margin.
Works with <ol> too.
* I normally put it in a separate style-sheet though e.g. { list-style-position:outside; } , not in-line like the examples above.
I also play around a lot with margins, line-height etc for the <li> items themselves to fine-tune the overall look, as I've done on my home page http://www.drivingnt.com/index.html
I'm a coding amateur and I haven't used RSD at all but I would assume you'd go into the stylesheet files to make adjustments - others on the forum with better knowledge than me will be able to advise you.
I'm no expert and haven't tried RSD yet (too chicken for now), but I use:
<ul style="list-style-position:outside;">* will make the list items indent.
<ul style="list-style-position:inside;"> will bring overlapping list items to the left margin.
Works with <ol> too.
* I normally put it in a separate style-sheet though e.g. { list-style-position:outside; } , not in-line like the examples above.
I also play around a lot with margins, line-height etc for the <li> items themselves to fine-tune the overall look, as I've done on my home page http://www.drivingnt.com/index.html
I'm a coding amateur and I haven't used RSD at all but I would assume you'd go into the stylesheet files to make adjustments - others on the forum with better knowledge than me will be able to advise you.
http://www.drivingnt.com/
Windows 7
Windows 7
With the unordered list selected, I go to List Settings in the Design panel and set the Position to Outside instead of Inside. I think that is the effect that is being requested.
Frank
Frank
Frank, setting it to outside, doesnt solve it. It places the bullet really outside of the column.
I will try the solution of Zipper to put it into the custom.css.
I will try the solution of Zipper to put it into the custom.css.
Indeed so. One can however however adjust that with left padding. I find about 16% does the trick.
Frank
Frank
How wonderful, it works. I had changed the right padding, instead of left padding.
So easy. So Position to outside and Left padding 20, add that to a class and it's changed everywhere.
Thanx Frank.
So easy. So Position to outside and Left padding 20, add that to a class and it's changed everywhere.
Thanx Frank.
Being new at this and previously working with Dreamweaver as my website development software, I'm finding this very cumbersome and difficult to grasp. I need to have the overrun of a second line in a list item indent. I tried to understand what you were explaining in this thread, but I cannot replicate. Not sure if Version 1.2 of RSD has items in different places. Any help would be appreciated.
The steps mentioned below are somewhat lengthy to explain, but take only a minute or two to do.
A. What had been requested was a way for an unordered list with bullet marks to have the left end of text rows line up even when a list item wrapped to a second row. I do this as in the following example.
1. I click on the Elements panel icon(3 parallel lines) at the top right of the screen and drag an Unordered List to a column in the main panel.
2. With the (pseudo Latin) unordered list selected -
a. I click on the Design panel icon(pencil) at the top right of the screen.
b. In the Dimensions section of the Design panel I reduce the Width percentage until the text of the top list item wraps.
c. As the left side of the wrapped text is not lined up as requested, I go to the List Settings section of the Design panel and use the Position drop-down menu to change the position from Inside to Outside.
The above completes the job of lining up the wrapped text, but if it is wished to keep the bullet marks within the column, I make the following further adjustment -
d. In the Dimensions section of the Design panel I go to the right-hand (i.e. the fourth) box of the Padding line, and click on the up arrow until the bullet marks reach the position desired.
B. If one didn't want the second line of wrapped text items merely to line up with the first line as above, but wanted to have its left end indented, I would do it as follows.
1. I would go through the steps as in A above up to and including step 2b.
2. In the top section of the Design panel I would click on the down arrow in the Amount box until there was only 1 element/list item.
3. In the main panel I would click on that list item to select it.
4. In the Dimensions section of the Design panel I would go to the right-hand (i.e. the fourth) box of the Padding line, and click on the up arrow until all the text was indented to where I wanted the second line indented.
5. In the Typography section of the Design panel I would go to the first box (the Indent box) of the Spacing line, and click the down arrow (to create a negative indent) until the first line was back to where I wanted it.
6. In the last line of the Element section of the Design panel I would click the middle (Duplicate) button to create as many list items as were needed.
Frank
A. What had been requested was a way for an unordered list with bullet marks to have the left end of text rows line up even when a list item wrapped to a second row. I do this as in the following example.
1. I click on the Elements panel icon(3 parallel lines) at the top right of the screen and drag an Unordered List to a column in the main panel.
2. With the (pseudo Latin) unordered list selected -
a. I click on the Design panel icon(pencil) at the top right of the screen.
b. In the Dimensions section of the Design panel I reduce the Width percentage until the text of the top list item wraps.
c. As the left side of the wrapped text is not lined up as requested, I go to the List Settings section of the Design panel and use the Position drop-down menu to change the position from Inside to Outside.
The above completes the job of lining up the wrapped text, but if it is wished to keep the bullet marks within the column, I make the following further adjustment -
d. In the Dimensions section of the Design panel I go to the right-hand (i.e. the fourth) box of the Padding line, and click on the up arrow until the bullet marks reach the position desired.
B. If one didn't want the second line of wrapped text items merely to line up with the first line as above, but wanted to have its left end indented, I would do it as follows.
1. I would go through the steps as in A above up to and including step 2b.
2. In the top section of the Design panel I would click on the down arrow in the Amount box until there was only 1 element/list item.
3. In the main panel I would click on that list item to select it.
4. In the Dimensions section of the Design panel I would go to the right-hand (i.e. the fourth) box of the Padding line, and click on the up arrow until all the text was indented to where I wanted the second line indented.
5. In the Typography section of the Design panel I would go to the first box (the Indent box) of the Spacing line, and click the down arrow (to create a negative indent) until the first line was back to where I wanted it.
6. In the last line of the Element section of the Design panel I would click the middle (Duplicate) button to create as many list items as were needed.
Frank
Thanks, Frank. That's an excellent response and it's exactly what I was looking for when I came to the forum today. Imagine my surprise to see a post of exactly what I wanted not even six hours old.
For the lurkers: in step 2.c, if you don't see the list setting section:
The List Settings section is normally between the Transitions and Dimensions section. If you don't see the List Settings section, that probably means you're looking at the List Item instead of the Unordered List. There are two fast ways to fix that.
First, undo the changes you made in step 2.b by using the Undo command (Edit | Undo) or by pressing Ctrl+Z. You might need to do that several times because each Undo will only change one small step.
Next do either:
1) In the main panel, hover the mouse over the bullet text. You should see a pop-up in the upper-left corner of the bullet that says List Item. Click on the down arrow on that popup and choose Unordered List.
or
2) Click the Inspector panel (the one with a box with a magnifying glass on it) near the upper-right corner of the screen.
If necessary, scroll down until you see the highlighted List Item. Click the Unordered List row that is the parent of the List Item that is highlighted.
Continue with the Frank's instructions from step 2.a.
Curtis
For the lurkers: in step 2.c, if you don't see the list setting section:
The List Settings section is normally between the Transitions and Dimensions section. If you don't see the List Settings section, that probably means you're looking at the List Item instead of the Unordered List. There are two fast ways to fix that.
First, undo the changes you made in step 2.b by using the Undo command (Edit | Undo) or by pressing Ctrl+Z. You might need to do that several times because each Undo will only change one small step.
Next do either:
1) In the main panel, hover the mouse over the bullet text. You should see a pop-up in the upper-left corner of the bullet that says List Item. Click on the down arrow on that popup and choose Unordered List.
or
2) Click the Inspector panel (the one with a box with a magnifying glass on it) near the upper-right corner of the screen.
If necessary, scroll down until you see the highlighted List Item. Click the Unordered List row that is the parent of the List Item that is highlighted.
Continue with the Frank's instructions from step 2.a.
Curtis
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.