I am building a menu with css from a nested ordered list. What I am trying to achieve - without success yet - is that each nesting level is placed in a seperate row. I created a test case on codepen and I would appreciate any help solving this issue. Here's the pen: http://codepen.io/peterschmidler/pen/CkzpF
Thanks a lot in advance!
Peter
Edit: Thanks for the hint to the correct nesting of the list. But I still could't solve the main issue: How to render the list in seperate rows for each active level. I updated the code to clarify the issue: http://codepen.io/anon/pen/lzHda
I would highly appreciate any help, that solves the problem with pure CSS.
Thanks.
You did not nest your lists properly. <ol> can only contain <li>. You should put your nested <ol> inside an <li>. Something like this:
<ol>
<li>main1</li>
<li>main2
<ol>
<li>sub1</li>
<li>sub2
<ol>
<li>subsub1</li>
</ol>
</li> <!-- closing sub 2 -->
<li>sub3</li>
</ol>
</li> <!-- closing main 2 -->
<li>main3</li>
</ol>
This shouild put you back on track...
Each new <ol> in a nested list should be put under <li>.
In your case, try to nest this part of your code:
<ol>
<li>
Team
</li>
<ol>
<li>
Peter
</li>
<li>
Schmidler
</li>
</ol>
</ol>
in an <li>. Like this:
<li>
Team
<ol>
<li>Peter</li>
<li>Schmidler</li>
</ol>
</li>
Related
Vue 3 removes the white-space between inline-block elements. This means I'll have to go back through quite a few of my sites and update the CSS before I can safely upgrade from version 2. Is there a way to turn this off?
See the following for an example:
<ol>
<li style="display: inline-block">A » </li>
<li style="display: inline-block">B</li>
</ol>
https://jsfiddle.net/27vwLn6u/
Here's the same example in Vue 2:
https://jsfiddle.net/3d0jcnmf/
This is now supported since Vue 3.1.0. See https://github.com/vuejs/vue-next/pull/1600 for more information.
Basically now you need to add the following when creating the app:
app.config.compilerOptions.whitespace = 'preserve';
Here's the updated example:
https://jsfiddle.net/bscz2306/
Looks like you already found the answer at
https://github.com/vuejs/vue-next/issues/2431#issuecomment-712451346
V3 automatically condenses the white space.
You can get around it by using a single line.
<div id="app">
<ol>
<li style="display: inline">A » </li>
<li style="display: inline">B</li>
</ol>
<ol>
<li style="display: inline-block">A » </li> <li style="display: inline-block">B</li>
</ol>
{{foo}}
</div>
I was looking into the code, and looks like pre tags are handled differently, but I haven't found a way to pass isPreTag to the component.
I want to implement a dropdown menu in a wordpress theme. <ul> function is not working properly because there are in both files CSS theme and menu. Maybe there is a conflict between these two CSS files for <ul> function. How can i make to work separate from each other the <ul> function.
Thanks.
use
<ul id="firstul">
<li></li>
</ul>
<ul id="secondul">
<li></li>
</ul>
I'm completely new to HTML and CSS, so please bear with me.
I want to change the color of an individual list item in an ordered list, but I don't want the list number to change style. I also need to do this within the one html-document -- no separate CSS.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Test-page </title>
</head>
<body>
<h1> An html-file </h1>
<ol>
<li> Item 1 </li>
<li style="color:blue"> Item 2 </li>
<li> Item 3 </li>
</ol>
</body>
</html>
The only thing I can think of to solve this using inline styling, is:
<ol>
<li> Item 1 </li>
<li><p style="color:blue"> Item 2 </li>
<li> Item 3 </li>
</ol>
But the list items will appear to be separate paragraphs.
I don't want to use the font-tag, and I want to use HTML5. I want it to be as short as possible, in one file, therefore inline styling.
Any CSS rule that you set on a li element also applies to the list item marker (bullet, number). This is inconvenient, and CSS still lacks any way to style the list marker separately.
So your approach of using something like <li><p style="color:blue"> Item 2 </li> is the workaround you need to use, but when selecting the added inner element, you need to consider the consequences. A p element has default top and bottom margin, so using it, you would need to remove them here:
<li><p style="color:blue; margin:0"> Item 2 </li>
A simpler way is to use div instead of p, since div is a semantically emply block-level container element, which causes no change in default rendering except that its content starts on a fresh line and the content after it starts on a fresh line, which happens here anyway due to the list markup. So:
<li><div style="color:blue"> Item 2</div></li>
Instead of div, you can use span, if there is only inline (phrase-level) content. But div is more flexible, as it allows elements like inner lists, tables, etc.
LIke this
demo
css
ol li span{
color:blue;
}
Try using the span tag in place of p. And don't forget to close the tags properly:
<ol>
<li><span style="color:blue">Item 2</span></li>
</ol>
All the best.
<li><span style="color:blue">Item</span>2</li>
What would be prefered semantic and accessible markup for this divider list?
I'm using jQuery mobile for a project and it uses this mark-up
<ul data-role="listview" data-dividertheme="d" data-inset="true">
<li data-role="list-divider">A</li>
<li>Adam Kinkaid</li>
<li>Alex Wickerham</li>
<li>Avery Johnson</li>
<li data-role="list-divider">B</li>
<li>Bob Cabot</li>
<li data-role="list-divider">C</li>
<li>Caleb Booth</li>
<li>Christopher Adams</li>
</ul>
I think for dividers (A,B,C...) HTML Heading tags should be used.
Definately not ul since it is aplhabetical it should be either ol with list-style-type:upper-alpha; with nested list.
I would go with a html something like:
<ol>
<li>
<ul>
<li>Adam</li>
<li>Alan</li>
</ul>
</li>
</ol>
Sample: http://jsfiddle.net/easwee/8UUbh/5/
I would use a definition list
<dl data-role="listview" data-dividertheme="d" data-inset="true">
<dt data-role="list-divider">A</dt>
<dd>blblblaba</dd>
</dl>
I know that the titles are not definition titles, but its clear what elements are the dividers and what elements are the contents.
edit i think #easwee's solution is much better in a semantic point of view.
I want to create a horizontal submenu in wordpress with wp_nav_menu();
As it is now I output the whole menu with wp_nav_menu but since the children is outputted inside theire parents I cant make a submenu. Just a dropdown menu.
I want it to look some what like this. Home, articles, about and contact are pages and inspiration, technology and interview are categories.
Home Articles About Contact
Inspiration Technology Interview
(if I have pressed on Articles)
So this is what it looks like:
<ul class="mainmenu">
<li>Home</li>
<li>Articles
<ul class="submenu">
<li>Inspiration</li>
<li>Technology</li>
<li>Interview</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
And this is what I want:
<ul class="mainmenu">
<li>Home</li>
<li>Articles</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="submenu">
<li>Inspiration</li>
<li>Technology</li>
<li>Interview</li>
</ul>
Someone got and idea? :) thx
Don't modify template code, you should do this with css.
Sample here : http://jsfiddle.net/2G9dQ/1/
What about using wp_list_pages() instead of wp_nav_menu() so you can have the main and sub menus with something like this:
<ul id="mainmenu">
<?php wp_list_pages("title_li=&depth=1"); ?>
</ul>
<ul id="submenu">
<?php wp_list_pages("title_li=&depth=1&child_of=".$post->post_parent ); ?>
</ul>
Sorry to post a second answer, but it is a completely different solution with jQuery (just one line of js though): http://jsfiddle.net/AFC2r/. The CSS there is obviously just to make it appear clearer.
$(function() {
$(".mainmenu .submenu").detach().insertAfter('.mainmenu');
});
Depending on your needs, soju's CSS-only solution could be better of course.
The easiest way is just create 2 separated menus, in wp-admin.