<ul class="numberlist">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
.numberlist {
margin: 0;
padding: 0;
list-style-type: none;
}
.numberlist li {
counter-increment: step-counter;
margin-bottom: 10px;
}
.numberlist li::before {
content: counter(step-counter);
margin-right: 5px;
font-size: 1.7em;
background-color: #69C36E;
color: white;
font-weight: bold;
padding: 7px 15px;
/*border-radius: 3px;*/
}
the numbers and the p not coming in one line.
That’s because a paragraph is a block element.
Why are you using <ul> for this?
It looks like it should be either an <lo> or a <dl>
In the browser I tried changing to ol and also tried dl, but it didn’t fix what I am trying to achieve.
Ok. thanks. so block element can’t come in line, but inline-block can?
I don’t see anything like the code snippet at the “Live Link” page so I’m guessing.
There appears to be two issues. Using <ul> or <ol> and aligning the list with a <p>
IMHO if you want the list numbered, it seems <ol> would be the logical choice.
If that was only experimenting in an attempt to solve the alignment issue then I think you may be looking for inside / outside.
I don’t see why you have a <p> within a <li> anyway. You could do away with the paragraph altogether, use <ol> as others have suggested (using an ordered list rather than an unordered list isn’t going to change anything except it is more semantic).
You may then have to fiddle with positioning.
That was not the intention, it is a question of semantics.
Because you are numbering the list, it could be described as an ordered list (ol).
Because the items have a phrase, followed by an explanation of what that means, it could be a definition list (dl), with the content marked up with dt and dd tags.
You could try floating the pseudo elements left to bring things in line.
You mean I should change <p></p> with these tags?
Is there any tool that can keep me guiding if I am writing semantic code or not?
Honestly, I completely do not understand what is semantic code(I only have the partial understanding)
I use this → https://search.google.com/structured-data/testing-tool/u/0/ along with W3C validator tool.
with what should I replace the p tag? Please suggest?
Thanks for the image. I had assumed there was a paragraph adjacent to a list.
I have never put block level <p> tags inside a list item. Does that pass validation?
If the intent is to number paragraphs then I don’t think you should be using a list at all, but the “step-counter” directly on the paragraphs instead.
Just remove it. Use just the <li> or as @Mittineague suggests just <p> but not both. Why complicate things?
The tags you use to mark up the content should reflect the meaning of the content, or describe its purpose.
<ul> is an unordered list, so a list where the items relate to each other, but do not have any particular order to them, it would not matter if you shuffled the order.
<ol> is an ordered list, where the items are in a particular sequence, these are generally numbered.
<dl> is a definition list, think of a dictionary or glossary, each item has two parts, the term <dt> and a description <dd>.
It’s a case of knowing what the tags mean, then using them appropriately. I don’t know of a tool for it, machines are not good at recognising the meaning of content, humans are. In fact that is one reason for semantic mark-up, to help machines (such as screen readers and search bots) understand the meaning and context of your content.
Structured data has nothing to do with this, you are not using structured data in your pages, so are wasting your time testing for something that is not there. The reason you have no errors there is because there is nothing to test, that’s why it shows blank.
I wouldn’t consider these as a yes
Error: No p element in scope but a p end tag seen.
<li>
<span class="bold">Up todate products</span>
Our themes and plugins are ever evolving and thus you will find many updates in a theme life cycle.
</p>
</li>
Unless you have removed the opening p tags and forgot to remove the corresponding closing tags, it looks like the mark-up is getting “fixed” in unexpected ways.
From what I see from the live link it looks like @codeispoetry is wanting the ability to style the list marker differently from what a default <ol> list-marker can offer. But once again I may not be up to date on any new features that might have made this easier.
However, working with an <ol> along with counter-increment: and li::before you can certainly style the decimal marker easily.
Using a <p> tag within the <li> can allow you to vertically align the content to the list marker marker. With css off this would revert back to a normal OL.
I have no idea what the desired result is but I’m guessing something like this…
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Page</title>
<style>
.numberlist {
margin: 0;
padding: 0;
list-style: none;
}
.numberlist li {
counter-increment: step-counter;
margin-bottom: 1em;
padding: 0 .3em 0 3em;
background: #eee;
font-size: 1em;
line-height: 1.3;
}
.numberlist li p {
display: inline-block;
vertical-align: top;
margin: .8em 0 0;
}
.numberlist li span {
font-weight:bold;
}
.numberlist li::before {
content: counter(step-counter);
margin: 0 .2em 0 -1.84em;
background: #69C36E;
color: white;
font-weight: bold;
font-size: 1.6em;
padding: .3em .5em;
line-height: 1.2;
display:inline-block;
}
</style>
</head>
<body>
<ol class="numberlist">
<li><p><span>Up todate products:</span> Our themes and plugins are ever evolving and thus you will find many updates in a theme life cycle.</p></li>
<li><p><span>Fixing security vulnerabilities:</span> First and foremost, updates keep you safe from known security holes. This is especially important when there is a new release available for software you use, because most change logs and update notes reveal previously-known exploits that have already been patched. Public knowledge of these exploits leaves your application easy prey for malicious users who are out to exploit these now known issues. Of note are website Content Management Systems (CMSs) such as WordPress, Joomla and Drupal simply because of their common use. Not securing these by updating leaves your system open to compromise making your software vulnerable.</p></li>
<li><p><span>Better functionality</span></p></li>
<li><p><span>Squashing bugs</span></p></li>
<li><p><span>Salutation</span></p></li>
</ol>
</body>
</html>
If that is how the code is, then it looks like what the validator is doing is instead of flagging an incorrectly used p tag it is removing it but not removing the /p tag.
If the code is confusing the validator you can be almost certain it will also confuse at least some user agents as well.
If the paragraphs are indeed list items I think you should remove the p tags and style them to suit.
If instead they are paragraphs and not a true list then I think you should not put them in lists. But you could number them without putting them in lists.
Nice.
