I have a grid layout where I want "Category 9" to be positioned directly below "Category 5". Then, Category 13 to be under Category 9. Same situation for 8, 12 and 16. However, due to the presence of subcategories from "Category 7", "Category 5" has some height and is pushing "Category 9" down.
Category 10 shoul be under Subcategory 2, etc.
I tried with grid-row: 1 / -1, with grid-auto-flow: dense, but I'm not getting the result that I want.
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
list-style: none;
}
<ul class="grid">
<li> Category 1 </li>
<li> Category 2 </li>
<li> Category 3 </li>
<li> Category 4 </li>
<li> Category 5 </li>
<li> Category 6
<ul>
<li> Subcategory 1 </li>
<li> Subcategory 2 </li>
</ul>
</li>
<li> Category 7
<ul>
<li> Subcategory 1 </li>
<li> Subcategory 2 </li>
<li> Subcategory 3 </li>
<li> Subcategory 4 </li>
</ul>
</li>
<li> Category 8 </li>
<li> Category 9 </li>
<li> Category 10 </li>
<li> Category 11 </li>
<li> Category 12 </li>
<li> Category 13 </li>
<li> Category 14 </li>
<li> Category 15 </li>
<li> Category 16 </li>
</ul>
Related
I have a multi-level ul list like below.
<ul>
<li>
</li>
<li>
<a href="/">
</a>
<ul>
<li>
<ul>
<li>
</li>
<li>
<ul>
<li>
</li>
<li>
</li>
</ul>
</li>
</ul>
</li>
<li>
</li>
</li>
</li>
</ul>
There could be more levels inserted.
So I want every ul > li > a will have a padding-left+10 of it's parent a tag.
you can use forloop for adding css for all the anchor tags at once.
add class in anchor tag for get element by class
var lis = document.getElementByClass("link").getElementsByTagName("li");
after this you can implement css using javascript:
var sheet = window.document.styleSheets[0];
sheet.insertRule('a { padding-left: 50px; }', sheet.cssRules.length);
i tried to validate a .html file and received this error-
Error: Element ul not allowed as child of element ol in this context
<ol>
<li><span class="bold">Preheat Oven:</span> Preheat oven </li>
<li>To Mak</li>
<ul>
<li>Whisk together </li>
<li>Stir in water,.</li>
<li>Cook over</li>
<li>Stir in butter.</li>
<li>Place egg yolks</li>
<li>Whisk egg yolk . </li>
<li>Bring to a </li>
<li>Remove from heat. </li>
<li>Pour fill.</li>
</ul>
<li><span class="bold">Make Meringue:</span> bowl ...</li>
<ul>
<li> woamy.</li>
<li>Add sugar gradua. </li>
<li> sealing the edges at the crust.</li>
</ul>
<li>brown.</li>
</ol>
I cannot seems to figure out what I did wrong. Any suggestions?
You need to wrap the unordered list in list item tags, otherwise they are just floating around in the middle of no where:
<ol>
<li><span class="bold">Preheat Oven:</span> Preheat oven </li>
<li>To Mak</li>
<li>
<ul>
<li>Whisk together </li>
<li>Stir in water,.</li>
<li>Cook over</li>
<li>Stir in butter.</li>
<li>Place egg yolks</li>
<li>Whisk egg yolk . </li>
<li>Bring to a </li>
<li>Remove from heat. </li>
<li>Pour fill.</li>
</ul>
</li>
<li><span class="bold">Make Meringue:</span> bowl ...</li>
<li>
<ul>
<li> woamy.</li>
<li>Add sugar gradua. </li>
<li> sealing the edges at the crust.</li>
</ul>
</li>
<li>brown.</li>
</ol>
https://stackoverflow.com/a/15870503/8179067 i think the answer can be founded in this topic :)
"
This is because the content model for (and actually) is zero or more li elements
These two tags actually can't contain anything other than tags or nothing at all. If you have browsers will automatically close the tag before beginning the (well, the good ones).
try with this one :)
I'm using a plugin that has below output:
<div class="CUSTOM CODE">
<ul>
<li> line 1 </li>
<li> line 2 </li>
<li> line 3 </li>
<li> line 4 </li>
</ul>
</div>
The problem is I need to keep single line for example line1. I can control CSS classes only. Is is possible to do this job through CSS class?
Try using this kind of code.
.CUSTOM ul li:nth-child(2){
background:black;
}
You can use a combination of :not and :first-child
.CUSTOM li:not(:first-child){display:none;}
<div class="CUSTOM CODE">
<ul>
<li> line 1 </li>
<li> line 2 </li>
<li> line 3 </li>
<li> line 4 </li>
</ul>
</div>
This may not work in IE 8 or IE 7 : http://caniuse.com/#feat=css-sel3
At css, example changing line1:
ul li:nth-child(1)
{
/* example */
color: green;
border:2px solid black;
padding:6px;
}
Or at html, example changing line4 :
<div>
<ul>
<li> line 1 </li>
<li> line 2 </li>
<li> line 3 </li>
<li style="color:blue;padding:6px;"> line 4 </li>
</ul>
</div>
try this...
.CUSTOM.CODE li:first-child {display:none}
<div class="CUSTOM CODE">
<ul>
<li> line 1 </li>
<li> line 2 </li>
<li> line 3 </li>
<li> line 4 </li>
</ul>
</div>
I cant seem to find a straight answer on any website really.
As you can see on line 2 <li> is all alone with no </li> after louis
Im being told to close it toward the end, i don't get it sadly.
Line 2 and the second from the bottem are what I'm talking about.
<ul>
<li> Louis <<<<
<ol>
<li> Louis </li>
<li> Louis </li>
<ul>
<li> Louis </li>
<li> Louis </li>
<ol>
<li> Louis </li>
<li> Louis </li>
</ol>
</ul>
</ol>
</li> <<<<
</ul>
I have formatted your code to make more clear what is going on. All that is happening is that the lists are nested.
Please note, however, that the code you have posted is not actually valid HTML. UL and OL elements can only have LI elements as children. Nesting a UL directly inside an OL or vice versa is not valid syntax.
Most likely, you are trying to include the UL and OL elements inside LI elements, like this:
<ul>
<li> Louis
<ol>
<li> Louis </li>
<li> Louis
<ul>
<li> Louis </li>
<li> Louis
<ol>
<li> Louis </li>
<li> Louis </li>
</ol>
</li>
</ul>
</li>
</ol>
</li>
</ul>
Which renders like this:
Louis
Louis
Louis
Louis
Louis
Louis
Louis
One more little note: if you try to include <<<< in your HTML, it will break. I assume those were just for illustration in your question. If you want to output a literal < in HTML, use <.
<div class="fbtop">
<img src="https://static.solidshops.com/1441/files/Logo-site.png" title="Pieke Wieke" alt="Pieke Wieke">
<h2 class="title">Zelfgemaakt met liefde</h2>
<ul class="dropdown">
<li>
Naaibenodigdheden
<ul class="sub_menu">
<li>
Allerlei
</li>
<li>
Spelden
</li>
<li>
Naalden
</li>
</ul>
</li>
<li>
Stoffen
<ul class="sub_menu">
<li>
Effen
</li>
<li>
Katoen
<ul>
<li>
Pieke Wieke for Soft Cactus
</li>
<li>
Soft Cactus
</li>
<li>
Bedrukte katoen
</li>
<li>
Basics
</li>
<li>
Stretchkatoen
</li>
</ul>
</li>
<li>
Bedrukt
</li>
<li>
Stretch katoen
</li>
<li>
Tricot
</li>
<li>
Flannel
</li>
<li>
Gabardine
</li>
<li>
Ribfluweel
</li>
<li>
Voering
</li>
<li>
Teddy fleece
</li>
<li>
Geweven
</li>
</ul>
</li>
<li>
Flockfolie
</li>
<li>
Workshops
</li>
<li>
Waardebonnen
</li>
<li>
Vlieseline
</li>
<li>
Fournituren
<ul class="sub_menu">
<li>
Lint
</li>
<li>
Garen
</li>
<li>
Ritsen
</li>
<li>
Paspel
</li>
<li>
Biais
</li>
<li>
Elastiek
</li>
</ul>
</li>
</ul>
</div>
It's a classic way of doing dropdown menu's by css, to see it at work you can go to http://jsfiddle.net/W6Rhe/
There you'll also see the issue that I have with the menu. If you select the first item "Naaibenodigdheden" you'll see that the first sub menu item has front color white instead of red.
If you go to stoffen, you'll notice the same behaviour, if you select the sub menu "katoen" you'll notice the same behaviour again.
Now the cherry on the pie of this delicious issue is that when I adjust all my links to relative links (ie I remove https://blabla.blah.com) then All the items appear in red as intended.
What the hell am I doing wrong? I just don't get it.
ps tested this on chrome
ps2 it appears that when I replace the url in whatever is not what they are now, the problem does not occur, bizar is my only term for this behaviour
This code here:
ul.dropdown li a:visited,
ul.dropdown li a:hover
{
color:#fff;
}
is overriding the color on :visited links to white.
The reason the color changes when you use a relative URL is because the browser no longers sees it as visited, because it is a different path.
I have found the culprit, thanks to Andy for pointing me into the right direction:
ul.dropdown ul li a:hover,
ul.dropdown ul li a:active,
ul.dropdown ul li a:link {color: #e10707; }
He noticed that the links that were still white were in fact links colored trough the :visited attribute that was declared #fff or white :)
There is one state missing in the previous code block, indeed the a:visited color is not set to red, that's why it was white