HTML, AAARGH!!! I’m ranting it out

HTML coding is a pain in the arse. And CSS coding, that’s just something else!

All I want is a list that doesn’t look like crap. Take a look:

  1. This
  2. Looks
  3. Like
  4. Crap

And:

  • This
  • Too
  • Looks
  • Crap

I want zeros before my numbers and I want dashes instead of dots. And I might fancy some colour, too.

I quickly discover that I can’t change the default HTML code for lists unless I go all CSS on it. Well, that’s a minefield of things that don’t work for me.

So I figure I can format what I want longhand in HTML. It’ll be easy. Take me an hour, max.

Naturally, I don’t know these codes so I cut and paste.

After some trial and error, I got this little beauty:

01Much nicer
02I prefer this
03But look! If I keep on typing and chatting away, and saying nothing about anything, LOOK! The first line doesn’t over-hang! Well, this ain’t a proper list.

Some more trail and error delivers this corker:

01Still nice
02But wait?
03What the hell! No! Well, this ain’t a proper list.

And my third attempt…

01This looks all good in editor…

02Lets preview…
03What! Where is there a space?! I don’t want a space between 01 & 02! I just want the list like it looks in editor. I’ll take a picture…

Picture:

Screen Shot 2017-09-26 at 19.53.15.png

See! That’s all I want. Why is this so difficult?

(Brownie points for spotting my typo)

So, onward my quest goes.

01 – I go back to basics
02 – I do away with colours, sizes and typefaces
03 – I try it this way instead and does it work? I got a bit more typing, a bit more waffling to go, and YES!!! It works! It works works works!

Let’s try some colour…

01 – Oooh, that’s one!
02 – And two!
03 – And three! Let’s keep chatting a moment to see if this over-hangs. On the next one I’ll use a different number! YES!

Okay, and now a different size…

01This is big writing and this is small.
02 – This is big writing and this is small. Lots and lots and lots and lots and lots and lots and it’s seems alright in editor…
03 – Now lets preview YAY! Still not lined up though…

I don’t know how to do that. I can’t find a code for the space around a word.

You know what? It’s good enough. It’ll annoy me but it’s better than crap. And even if I did find the code, if there is one, I can guarantee it’ll be a pain in the arse!

For those unwise of the HTML way, this is what it looks like:

Screen Shot 2017-09-26 at 19.50.05.png

Gibberish.

It’s lots and lots of <> and “” and : and headaches.

Ooh, I did want my list in a different font, let’s try that quickly…

01This is Papyrus and this isn’t.
02This is also Papyrus and this also isn’t.
03Here, too! and now let me keep chatting to check that hang. Chat chat chat away for ever and ever and ever…

Alright, fine. I can do it. I barely feel any achievement.

I need a stiff drink.

Thank you for your help! It’s been nice ranting with you!