Streaming live at 10am (PST)

How to create a structured ordered list


#1

Hi Folks

I need to create an ordered list with typesetting and layout like the image sample below.
Not sure how to do this in Webflow, or if it can be done without exporting and writing code.


#2

For the example you're showing, you don't need ol or ul but dl: description list.

http://www.w3schools.com/html/html_lists.asp

You should write it in a text editor and add it as code in Webflow, then style it with the UI. That would be the best for your html structure.

Edit: if you really need the ordering thing with numbers, then you can go for this structrure and use only webflow widgets:

<ol>
    <li>
        <ul>
            <li>Item one</li>
            <li>An explanation of the item.</li>
       </ul>
    </li>
    <li>
        <ul>
            <li>Item two</li>
            <li>An explanation of the item.</li>
        </ul>
    </li>
</ol>

But the real good thing would be ol-li-dl-dt-dd and repeat, a mix of wf widgets and custom code in html widget.


#3

Thanks for the quick reply Vincent.

I expected I'd have to go to a description list, writing the code myself.

Will Webflow allow gray numbers and orange description titles?
I can't seem to get it to give 2 colours to different text in the same line (I'm new to Webflow).

And I guess my next question is how to add custom code.
I expect this question has been answered elsewhere in the forum.
(I have no problem writing the actual description list, though I'm fairly new to HTML).

Cheers


#4

(I should note that I was able to kludge the two colour text thing by putting two inline block text elements side by side and colouring them differently.)


#5

I think so, test it and come back with a preview link it will be easier to figure out.

select the text part, click on the paint icon, add a class name, add properties.

click here on top right Support link, search for "custom code" and you'll get everything you need (:

what does kludge mean?


#6

Ha. Sorry.

A "kludge" is a clumsy workaround.

In other words, I made it work, but the code would probably make a coding expert look at me with disgust.

: )

Thanks for the help!


#7

Hey Vincent,

When you say preview link, do you mean sharing the test site address to view within Webflow? Or do you mean giving you a URL to view a published site within a browser? Let me know and I'll post. (Pardon my inexperience : )

In the meantime, I've done some homework fiddling around with the UI and managed to make progress by putting an unordered list within an ordered list as you suggested.

I got different coloured text in one line via a span style in the little pop-up style tab and giving this span a class:

What I'd like to do now is put the "01,02,03" where the "1.,2.,3." are.
Then I'd like to be able to control the space between the numbers and the text and make sure they're left-aligned (not right aligned as they would appear in raw HTML or in outliner).

I realize I can turn off the "1.,2.,3.", but this would leave the "01,02,03" inside the leader text which, from an information design standpoint, is not ideal.

I realize that some of this may not be possible with Webflow, or even with CSS
(I'm just starting a CSS course now, so I'm pretty green).

BTW, when I embedded a Description List as custom HTML, I assigned classes in the HTML code, then made some text elements in Webflow, named them with the same classes as in the embedded HTML, and styled them.
The embed code with those class names then adopted the styles created in Webflow. But it ignored styling within a span element.
Perhaps when I post a preview site you can tell me if I'm doing something wrong.

Anyway, I know this is a lot in one message. Any help appreciated.

Thanks

Tom


#8

I'm sorry I'm on the move for the weekend... could you ping this to me again on Monday so I can look it in depth? For the public link, go to your site dashboard and spot the "share" button on the top right part. It gives access to your sites' designer view in read only mode, essential tool for being helped.


#9

Thanks Vincent,

Will do.

Have a good weekend!

T.


#10

Here's the share link:
https://preview.webflow.com/preview/velocity-threesixty-t27060648?preview=e33401c65833a158727da007abd7c277


#11

Nothing is really impossible with one or the other. It's only a matter of how you want to do it because there's always the choice. It could be this:

You're already kind of a Webflow expert really!

Can you give me a precise example of this in your page please?


#12

Hey Vincent

Yes, it's in the lower part of the page as per my preview link. Here's a screen grab of the area of the page in question:

I'm completely prepared to find I made a very basic HTML/CSS error. blush


#13

That's pretty cool - I didn't know that position thing existed. Thanks!
One issue though:
Notice your orange text in paragraph 2 is aligned differently from paragraph 1?
In typesetting, we would use tabs settings to align the orange text perfectly with the gray text beneath, and also account for the different character width of different numbers.
Like this:

Is there a way to set such hanging indents?

Cheers and thanks for your help. Enjoying learning Webflow

Update:
I checked for tab lengths, and it looks like it's still experimental in the CSS spec - wow. Hanging indents are really a typography basic. I wonder if there's another way to do it. confused


#14

Oksy...
With a little digging and your help I managed to make it work the way I want,
But I don't know why it worked =8-0

Preview link of the v2 page with all the other bumf removed:
https://preview.webflow.com/preview/velocity-threesixty-t30030254?preview=51ea22bd4c81d2956f99abea8d7b85c8

What I don;t understand here is that bullet item 1 can have its position set independently of the other items of the same class.
But bullets 2 to 7 all change together if any style change is made to them.
I've looked at the classes and hierarchy in the navigator, and they appear to be the same.
Any suggestions as to why this is happening?

Thanks for the help.


#15

What happens is CSS... you have an extra class on the first item, making it unique, when you change anything it only affects the original class + the extra class.

to make everything moves at once:

remove the property given to the last class:

click on the button to unfold the classes and select the parent class

Now everything moves:

That's how css works, hence webflow works.

You add extra classes to elements to give them uniqueness in styling but you can still affect them from their lower upper classes.


#16

Aaaaah. Perfect.

I was looking for an added class on the first instance.
But i was unclear on how to unfold the classes - that's why I missed it.

Thanks. That's very helpful!

This can hold me over until the CSS spec adds real typographic control of reverse indents.

Cheers and thanks again.

Appreciate the help.

T


#17

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.


#18