Here is my HTML
<ul class="menu">
<li class="menu__item">
</li>
<li class="menu__item">
<ul class="list"> // can I place this block inside here?
<li class="list__item">
...
</li>
<li class="list__item">
...
</li>
</ul>
</li>
</ul>
In this case, I place the block list inside the element menu__item.
I wonder, is this legal?
As per this documentation from BEM, we can nest the blocks. I.e. a block can have another block in it.
The only condition is that the children blocks should be independent on the parent.
https://en.bem.info/methodology/block-modification/#placing-a-block-inside-another-block
Yes, it is valid. See example from section Nested Lists
in - https://html.com/lists/.
Related
i am using below code
<div>
<div id="aboxound" >
<ul>
<li class="aHeader" >
<ul>
<li class="Name">Names</li>
<li class="Name">values</li>
</ul>
</li>
<li style="height:500px; overflow-y:scroll;">
<c:forEach items="${dataModel.List}" var="entry">
<li class="aUser" >
<ul>
<li class="userName"><c:out value="${entry.key}" /></li>
<li class="userName"><c:out value="${entry.value}" /></li>
</ul>
</li>
</c:forEach>
</li>
</ul>
</div>
</div>
Here i want to apply scroll to second list, by keeping first list as fixed header. My above code is not working.it add empty scroll first and then list item without scroll. What i am doing wrong
If you write overflow:scroll even the not content not heavy it shows scroll, use overflow:auto in your code inplace overflow-y:scroll.
I am attempting to make my unordered list look like this:
I am getting this (note the duplicate bullet point):
My code reads as follows:
<ul class="main-link">
<li>
articles/
</li>
<li>
<ul>
<li class="sub-link">
beliefs respect and facts
</li>
</ul>
</li>
</ul>
I would like the extra solid bullet point to be deleted some how. Can anyone point me in the right direction?
You need to remove only one li tag, something like this:
<ul class="main-link">
<li>
articles/
<ul>
<li class="sub-link">
beliefs respect and facts
</li>
</ul>
</li>
</ul>
You can add the second "ul" inside the same "li". Means it is also a part of first "li" content.
<ul class="main-link">
<li>
articles/
<ul>
<li class="sub-link">
beliefs respect and facts
</li>
<li class="sub-link">
beliefs respect and facts
</li>
</ul>
</li>
</ul>
I made a menu , I have worked with chrome but now when I try with firefox I get spacing between items
In chrome
In Firefox
Here's The CSS
http://jsfiddle.net/Mazala/mpc1o2gf/
HTML :
<nav>
<ul class="menu">
<li id="accueil">Accueil</li>
<li id="bureau">Bureau</li>
<li id="actualites">Actualités</li>
<li id="partenaires">Partenaires</li>
<li id="contact">Contact</li>
<li id="liens">Liens utiles</li>
<li id="Liens">lien+subtitles
<ul class="sousmenu">
<li id="Liens">Liens utiles</li>
<li id="Liens">Liens utiles</li>
<li id="Liens">Liens utiles</li>
<li id="Liens">Liens utiles</li>
</ul>
</li>
</ul>
</nav>
CSS in the link .
Thanks for help.
Using inline block will make any text/spaces between your elements treated as text, and style them accordingly. One quick fix (if pure images) was to set the font-size to 0 (that wouldn't work for you since you have actual text in there).
The easiest solution, if you don't care about having the perfect looking code and just getting it to work, is to remove all extra spaces in your code. Which I did to your code, and it works:
<ul class="menu">
<li id="accueil">Accueil</li><li id="bureau">Bureau</li><li id="actualites">Actualités</li><li id="partenaires">Partenaires</li><li id="contact">Contact</li><li id="liens">Liens utiles</li><li id="Liens">lien+subtitles<ul class="sousmenu"><li id="Liens">Liens utiles</li><li id="Liens">Liens utiles</li><li id="Liens">Liens utiles</li><li id="Liens">Liens utiles</li></ul></li>
</ul>
https://jsfiddle.net/mpc1o2gf/1/
That's a common issue with inline-block elements. By default, there some some spacing surrounding those elements. It's somewhat counter-intuitive but default behavior.
There are a few fixes to this. My preferred is to float the li elements. There are some caveats. Read this for a full understanding.
I am trying to make a bootstrap single level menu using angularJS.
It already works with js and html when the <li> is dynamically built.
Now I am trying to use AngularJS.
Suppose I have a JS object which has Cust and then orders inside.
How can I make a list menu
<ul>
<li ng-repeat="cust in customers">
<p>{{cust.name}}</p>
<li ng-repeat="order in cust.orders">
<p>{{order.desc}}</p>
</li>
</li>
<ul>
This doesn't load properly (overlapping items) as the first li can't be closed.
Christopher is right, you can't do without <ul>.
I think you can do this to have a one level menu :
<ul>
<li ng-repeat="cust in customers">
<p>{{cust.name}}</p>
<div ng-repeat="order in cust.orders">
<p>{{order.desc}}</p>
</div>
</li>
<ul>
And perhaps play with CSS to style in the way you want.
Or this, too :
<ul>
<li ng-repeat="cust in customers">
<p>{{cust.name}}</p>
<p ng-repeat="order in cust.orders">
{{order.desc}}
</p>
</li>
<ul>
That's invalid markup, you're missing a ul
Try
<ul>
<li ng-repeat="cust in customers">
<p>{{cust.name}}</p>
<ul>
<li ng-repeat="order in cust.orders">
<p>{{order.desc}}</p>
</li>
</ul>
</li>
</ul>
That should render it correctly, your bindings are correct.
The following menu works really fine in the browser, but I cant get it to validate as XHTML. I took this example out of my CSS Book. It says it is right, but seemingly it is not.
<ul id="leftNavi">
<li>
left menu1
</li>
<li class="SCNL">left menu2</li>
<ul id="subnavi">
<li>
menu2/1
</li>
<li>
menu2/2
</li>
<li>
menu2/3
<li>
</ul>
<li>
left menu3
</li>
</ul>
Here a link to the page: http://www.yiip.de/arbeit/testlayout/standard_template.html I am talking about the left menu.
<ul id="leftNavi">
<li >left menu1</li>
<li class="SCNL">left menu2
<ul id="subnavi">
<li>menu2/1</li>
<li>menu2/2</li>
<li>menu2/3</li>
</ul>
</li>
<li>left menu3</li>
</ul>
You had a couple of problems:
The line with 3 as the list item didn't have a correct closing <li> element; and
The subnav1 list wasn't contained within a <li> element. It can't be a direct child of another list, which was the main problem with validating your HTML.