I need to markup a ladder for upcoming tournaments, and I can't find any way to mark it up semantically. The only way I've seen so far is to mark it up as a table, and I'd like to avoid that at all costs.
Any ideas?
I've found one example at Accessible NCAA Tournament Bracket which uses a mix of ul/li to achieve it. It's far from perfect (it could uses li + li instead of the "top/bottom" classes, but it's a start.
I'd do it like this, although would also maybe add title attributes to the list items also in order to make the horizontal relationship more accessible
eg <li class="gameThree" title="winner of round One game 2 vs winner of round one game 5">
<ol id="tournamentLadder">
<li id="roundOne">
<ul class="matches">
<li class="gameOne>
<ol class="teams">
<li class="home">Teamname1</li>
<li class="visitors">Teamname2</li>
</ol>
</li>
</ul>
</li>
<li id="roundTwo">
</li>
<li id=final">
</li>
</ol>
Related
I am trying to put the BEM naming convention in action but having some confusions about naming the HTML elements. I really want to understand do I really need to provide the class name for each HTML element.
Let's say I have the following code and for example:
<ul class="nav">
<li class="nav__list"><a href="#" class="nav__link>Home</a></li>
<li class="nav__list"><a href="#" class="nav__link>Services</a></li>
</ul>
I don't want to apply CSS to the <li> elements.
So, in that case, do I need to use the element name for the <li> tag. i.e. <li class="nav__list">...</li> ?
Can I just use the element name for the anchor tag without giving element name nav__list to the <li> element?
Here is what I am thinking to do because I don't want to apply styles to the CSS to <li>:
<ul class="nav">
<li><a href="#" class="nav__link>Home</a></li>
<li><a href="#" class="nav__link>Services</a></li>
</ul>
first of all, you should have to follow BEM most of the developer followers BEM only because BEM is good at the naming convention and it's shows the standard naming convention for coding. it depends on you if you want to use BEM you can use or else it's your wish but I suggest you follow BEM it's good in standard.
you can use this
<ul class="nav">
<li class="nav__list"></li>
<li class="nav__list"></li>
</ul>
as well as this one
<ul class="nav">
<li></li>
<li></li>
</ul>
now you don't want to give style to li but in future client say you to give style to li that time what you will do again you will change the code so you have to use this below HTML code
<ul class="nav">
<li class="nav__list"></li>
<li class="nav__list"></li>
</ul>
I want to write the following ul list.
<ul>
<li class="home">home</li>
<li class="intro">intro</li>
<li class="other">other</li>
<li class="contact">contact</li>
</ul>
1.To write four lines.
home
intro
other
contact
2.To press v into visual mode ,and select all the four lines.
3.To ctrly,
4.To input ul>li[class=""]*
<ul>
<li class="">home</li>
<li class="">intro</li>
<li class="">other</li>
<li class="">contact</li>
</ul>
At last to input home intro other contact into class="" one by one.
Is there more quick way write class name in ul with emmet?
Can you try this?
ul>li.home+li.intro+li.other+li.contact
Since you have custom class names which doesn't have a numerical pattern, you have to enter the class names manually.
If you need to be quicker, you can use the implicit tag names from Emmet.
ul>.home+.intro+.other+.contact
Available in cheat sheet https://docs.emmet.io/cheat-sheet/
i have a list
<ul>
<li class="range1">Entry</li>
<li class="range1">Entry</li>
<li class="range1">Entry</li>
<li class="range2">Entry</li>
<li class="range2">Entry</li>
<li class="range2">Entry</li>
</ul>
Now i want to select the last li with the class "range1". Problem is, that this list is dynamic cause of a sql database output, so i cant work with nth-child.
li.range1:last-child
doesnt work. I dont want use Javascript so is it possible to just use CSS?
You cannot apply last-of-type or last-child to a CSS class.
You can either us Javascript or change your HTML a little bit (preferable solution):
<ul class="range">
<li class="range1">Entry</li>
<li class="range1">Entry</li>
<li class="range1 range__last">Entry</li>
<li class="range2">Entry</li>
<li class="range2">Entry</li>
<li class="range2 range__last">Entry</li>
</ul>
last-child works only for the last element of its parent irrespective of the class name differentiation that you specify.
alternatively li.range1:nth-child(3) can be used. otherwise it should have separate container classes for both the lists that u specify
How can be printed ordered list from number 6 with html only (if its not possible how should be done)?
Example:
6.home
7.place
8.etc..
9.etc..
Thanks
Use the start attribute:
<ol start=6>
<li>home</li>
<li>place</li>
...
</ol>
Note that its use is deprecated so you shouldn't use it in new documents. The W3C recommends replacing its use by CSS Counters.
(In my humble opinion though, this is partially a mistake, since the number with which a list starts isn't always a pure style choice. Numbered lists carry semantics as well and in this case I consider a number to start with semantics, not style.)
An alternative way in HTML only is:
<ol>
<li value="6">test</li>
<li>This should be 7</li>
</ol>
This allows more flexibility since you can reset numbering mid list but it is still deprecated. As Johannes Rössel said you should use CSS methods if possible.
Are you asking for the syntax for
<ol start="6">
<li></li>
<li></li>
</ol>
However, according to w3.org the start value is deprecated on OL...
This solution may not look efficient but it works (only in IE). This way you don't have to use the deprecated start attribute.
CSS code:
.hideme { display:inline;}
HTML code:
<ol id="num">
<li class="hideme"></li>
<li class="hideme"></li>
<li class="hideme"></li>
<li class="hideme"></li>
<li class="hideme"></li>
<li>home</li>
<li>place</li>
<li>etc</li>
<li>etc</li>
<li>etc</li>
<li>..</li>
</ol>
Though it works, I feel it's ugly.
I need to divide into groups several <li> elements in a list, is it possible?
(I know I an give each element different class names/separate into different <ul>)
Have you considered nested UL's? I believe this would validate:
<UL>
<LI>
<UL>
<LI></LI>
<LI></LI>
<LI></LI>
</UL>
</LI>
<LI>
<UL>
<LI></LI>
<LI></LI>
<LI></LI>
<LI></LI>
<LI></LI>
</UL>
</LI>
</UL>
Your CSS trick was my first guess; too bad you can't use that.
According to the XHTML schema (or one the schema anyway), the only thing you put inside a <ul> is a <li>, as described at http://www.w3.org/TR/2006/WD-xhtml-modularization-20060705/abstract_modules.html#s_listmodule
You might tweak the appearance of the list items using CSS, by assigning different class values to the <li> elements.
<li class="group1"> ...
<li class="group1"> ...
<li class="group1"> ...
<li class="group2"> ...
<li class="group2"> ...
<li class="group2"> ...
Have you considered using multiple-inheritance of CSS classes? This can be a bit messy to maintain, but it will solve the case of the same entry in multiple groups. The HTML looks something like this:
<ul class="pizza-toppings">
<li class="meat">pepperoni</li>
<li class="meat">bacon</li>
<li class="vegetarian">cheese</li>
<li class="vegetarian vegan">mushrooms</li>
<li class="vegetarian vegan">onions</li>
</ul>
Here we have three groups (meat, vegetarian and vegan) and some toppings, like mushrooms and onions, are part of more that one group.
I believe your only options are the ones you've already identified, multiple lists or via classes, since for an li to be in the list defined by a ul or an ol, it must be the immediate child of that ul/ol (reference).
If you need to separate into different groups items from one unordered list than they should belong to different lists isn't it OR should be grouped in an ordered list (many ULs in one OL).
If this is for presentation needs (to display one list on many columns) and you can solve a few constraints, the second technique in https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5810687.html or explained also here : http://www.communitymx.com/content/article.cfm?page=2&cid=27F87
Such groups exist for select (optgroup) but obviously you can't separate the option elements because you must select only one of them so they should belong to the same element.