Unordered list on image subtitle does not works properly

  • Author
    Posts
  • #2448461

    andersbateva
    Member

    I tried to add this simple unordered list on an image subtitle that I had inserted on one of my posts.

    • <b>A</b>: Praça de São Mateus;
    • <b>B</b>: Parque Halfeld.

    But, WordPress first treats the ‘B’ item as sub-item of ‘A’ item. Them, if I tamper too much trying to discover how to fix the list, then WordPress inserts lots of
    in the list and break the list in two independent lists! What a mess!!

    The blog I need help with is andersbateva.wordpress.com.

    #2448580

    musicdoc1
    Member

    Hi,
    I wasn’t able to replicate the sub-item issue you describe. However, the does display HTML tags in visual mode, indicating an error. The HTML code which would result in the b tags functioning properly in visual mode would be

    <ul>
    	<li><b>A</b>: Praça de São Mateus;</li>
    	<li><b>B</b>: Parque Halfeld.</li>
    </ul>
    #2448581

    musicdoc1
    Member

    Correction:
    “However, the does display…” should have been “However, the list does display…”

    #2448675

    andersbateva
    Member

    The “b” tags are working properly. The problem is with the list.

    I think I discovered the subitem problem: the B item isn’t really a subitem, it’s just that the text is centered, and because the text of the B item is smaller, it seems like it’s a subitem of A. But this is wrong! The list should be centralized as a whole, not each item. Centralizing each item independently of the other causes this confusion.

    The problem of the list splitting into two separate ones can be reproduced this way:

    1. Type the code that me and you used, on the visual editor’s image attributes window;
    2. Go to the text editor. The list will be properly formatted (line breaks), independently of the way we type it;
    3. Go back to visual editor. The visual editor will interprete worngly the line breaks that WordPress inserted, and will replace it by “br”s, and split the two items to two lists.
    #2448699

    musicdoc1
    Member

    I don’t know why you’d even want to use a list for this purpose. On the map image in your most recent post, you’ve got a caption consisting of four lines. If you want the four lines block centered and yet each line aligned with the other at the left, there may be various ways to accomplish this. One easy way would be to using padding as follows:

    <p style="padding-left: 270px;">Trajeto do protesto:
    <b>A</b>: Praça de São Mateus;
    <b>B</b>: Parque Halfeld.
    Fonte: <a title="Google Maps" href="https://maps.google.com">Google Maps</a>.</p>

    The number of pixels necessary to center the block would vary depending on the width of the post or page content, a factor which is theme dependent.

    #2448700

    musicdoc1
    Member

    By the way, the “Increase indent” tab in the post editor toolbar automatically creates the style=”padding-left…” part of the code. Each click moves a line or block 30 pixels.

    #2448722

    andersbateva
    Member

    I want to use list because it adds the bullet before the text. I know that it’s possible to create an ordered list consisting of characters, but it’s ok to do this? Then why WordPress doesn’t give support to this option in the visual editor?

    #2448724

    timethief
    Member

    Then why WordPress doesn’t give support to this option in the visual editor?

    Does this help?
    Visual editor Row 1 icon 4
    https://en.support.wordpress.com/visual-editor/#row-1

    Unordered list (bullet points):

    • Item 1
    • Item 2
    #2448725

    timethief
    Member

    If that does not help please provide a link to this post “simple unordered list on an image subtitle that I had inserted on one of my posts.”

    Then type modlook into the sidebar tags on this thread for Staff help. How do I get a Moderator/Staff reply for my question? https://en.support.wordpress.com/getting-help-in-the-forums/#how-do-i-get-a-moderatorstaff-reply-for-my-question Then please subscribe to this thread so you are notified when they respond. To subscribe look in the sidebar of this thread, find the subscribe to topics link and click it.

    #2448730

    musicdoc1
    Member

    @ kixty9,

    The “b” tags are working properly. The problem is with the list.

    I think I discovered the subitem problem: the B item isn’t really a subitem, it’s just that the text is centered, and because the text of the B item is smaller, it seems like it’s a subitem of A. But this is wrong! The list should be centralized as a whole, not each item. Centralizing each item independently of the other causes this confusion.

    I’m still not clear on what the problem is that you see. In your two line list, with A and B items, both lines begin at the same point, after a bullet, as follows

    • <b>A</b>: Praça de São Mateus;
    • <b>B</b>: Parque Halfeld.

    The reason I corrected the <b> tags is because you obviously don’t want the tags to display visibly. Instead, it should look like this

    • <b>A</b>: Praça de São Mateus;
    • <b>B</b>: Parque Halfeld.

    which has the code

    <ul>
    	<li><b>A</b>: Praça de São Mateus;</li>
    	<li><b>B</b>: Parque Halfeld.</li>
    </ul>

    That was the one problem I detected, though it may not be an issue you are concerned with. I’m not sure what you mean by the list problem, because the bullets are aligned, the list is formed properly, and the text in the B item is not smaller than that of the A item. I don’t see what you are referring to in the example you provided above, or when you say

    it’s just that the text is centered, and because the text of the B item is smaller, it seems like it’s a subitem of A.

    Also, I don’t know what you are referring to regarding the “list splitting into two separate ones” issue that you describe. I don’t see that in your example. or in the example I found in caption of the map image on the post 3º ato pelo impeachment da Dilma. Can you provide an example, including the URL of the post or page in which it is found, on your site that illustrates this issue?

    #2448731

    musicdoc1
    Member

    Okay, I get it. The forums don’t display effect of the <b> tags properly, displaying the tags instead. Never mind my comments about that then. Strong tags can be used to display the bold letters for illustration purposes:

    • A: Praça de São Mateus;
    • B: Parque Halfeld.
    #2448780

    rachelmcr
    Staff

    Hi there,

    Can you provide a link to the post or page where you are having trouble with the list, so I can take a closer look at it?

    #2448789

    andersbateva
    Member
    #2448790

    rachelmcr
    Staff

    Thanks for that link — I understand now. The issue you described is specific to when you try to add lists to a caption. Captions aren’t designed to hold lists like that, so I’d recommend changing how you display the list:

    One option is to put the list underneath the image, but not in the caption area. That way the list will stay formatted how you want it to be.

    Another option is to paste in the bullet character • that’s used for lists. That will give you that bullet before each line without using HTML to create the list.

    #2448793

    andersbateva
    Member

    I think captions should be designed to hold lists.

    I don’t want to place the list out of the caption, because it makes the reading of the map less simple. I’m now using the bullet character, thanks for the idea.

    For the problem of the list being centralized line per line, I typed “style=’text-align:left'” on the “p” tag, so the “list” will not be messed by centralization.

The topic ‘Unordered list on image subtitle does not works properly’ is closed to new replies.