In my previous question, I've been using CSS to create auto generated list numbering for <li></li> tags. In another task, I need to create another list that will have title in between of the list as picture shown below.
Above example can be achieve using below code
HTML
<ol class="main">
<span class="title">Title</span>
<li>
Content
</li>
<li>
Content
</li>
<span class="title">Title</span>
<li>
Content
</li>
</ol>
CSS
ul {counter-reset:section}
li {margin:15px 0;text-align:justify}
li:before {counter-increment:section;content:""}
.main {list-style-position:inside;list-style-type:none;padding:0}
.main span {font-weight:700;text-decoration:underline}
.inner {padding:0}
.inner ul {counter-reset:section}
.inner ul > li:before {content:""}
ul {list-style-type:lower-alpha}
However, this code doesn't work in some browser like Opera. This is because in HTML 5, <span></span> tag can't be nested within element <ol></ol>.
jsFiddle that work in Firefox, Chrome and Internet Explorer.
Here's a pure CSS version which works in Chrome 26 and FF 20 (Haven't tested on other browsers). The change from your earlier question is that you don't need to reset your counter every time.
/* Don't reset every time!!! */
/* ol.inner {counter-reset:section;} */
ol.inner li {counter-increment:section;}
ol.inner li:before {content: counters(section,"") ". ";}
You can nest the <ol> inside an unordered list and assign a start position for each:
<ul class="main">
<li>Title Of Section
<ol>
<li>Content 1</li>
</ol>
</li>
<li>Title Of Section
<ol start="2">
<li>Content 1</li>
<li>Content 2</li>
<li>Content 3</li>
</ol>
</li>
</ul>
I put together a quick fiddle which uses jquery to automatically update the atart positions of each ordered list.
Related
The question pretty much explains it but I have list items I want to put a simple diamond icon before them but when I try to use ::before it ends up putting the image above instead of the same line and I can't really seem to find out how to put it right before the list icon on the same line.
Like I said the image is just a small diamond, its 5px by 5px
.list-menu::before {
content: url('../images/menu-icons/image-before.png');
}
<div class="sb-slidebar sb-left sb-style-push">
<nav>
<ul>
<li class="list-menu">Home</li>
</ul>
</nav>
</div>
There's no need to use the ::before pseudo-element here at all. You can just use a background image:
.list-menu {
background-image: url('http://placehold.it/16x16');
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px; /* Adjust according to image size to push text across. */
}
<div class="sb-slidebar sb-left sb-style-push">
<nav>
<ul>
<li class="list-menu">Home</li>
</ul>
</nav>
</div>
Well, list-style-image is made for that.
Supported since IE 4.0. That should be enough I guess.
ul {
list-style-image: url('http://placehold.it/12x12');
}
<ul>
<li> Text content </li>
<li> Text content </li>
<li> Text content </li>
</ul>
Answer 2022
Nowadays you can use ::marker pseudo element
li::marker {
content: ' 🤖 '
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
This is pretty straightforward.
I have the following HTML structure:
<ul id="myContactList">
<li>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
...
</ul>
and the trouble maker CSS:
ul#myContactList>li>ul>li {
float:left; /* Trouble maker */
}
Here's the JSFiddle.
Why isn't the last ul#myContactList>li being targeted by li:nth-child(odd)?
Thanks in advance, cheers! :)
It is targeting it, but you have an issue with the floats not being cleared in the last list item. See http://jsfiddle.net/ekXjy/4/ (specifically line 20 of the CSS, which causes a new float context for each list item).
ul#myContactList>li>ul {
list-style-type:none;
padding:0;
overflow: hidden; /* New style, to clear the floats contained within */
}
The clear:both you had for ul#myContactList>li>ul clears the floats for the list items preceding the last one, but nothing cleared the floats in the last item. Using overflow:hidden to give each list item its own block context fixes that.
I am trying to get my first menu to work. I got the basics off of CSS Menu without javascript . I am trying to make it as simple as possible. I got to look close to what I want it to look (Not exactly what I REALLY want it to look like):
http://jsfiddle.net/EjXgU/2/
The main problem is submenus. They stack one below the other instead to the right of the parent menu. Also, the first level of submenus do not stack right below the line on the main menu, but within it.
Another problem I was able to notice, I want to add an rgba background-color (transparency). However, for every submenu level, the transparency changes.
I also accept any css3 tips to make it look "flashy" and fancy =)
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title: css-menu-without-javascript</title>
</head>
<body>
<nav>
<ul id="menu">
<li>Home</li>
<li>With sub-menus -->
<ul class="submenu">
<li>Submenu 1</li>
<li>Submenu 2 -->
<ul class="submenu">
<li>Sub-submenu 1</li>
<li>Sub-submenu 2</li>
</ul>
</li>
</ul>
</li>
<li>Menu item 3</li>
<li>With sub-menus -->
<ul class="submenu">
<li>Submenu 3</li>
<li>Submenu 4 -->
<ul class="submenu">
<li>Sub-submenu 3</li>
<li>Sub-submenu 4 -->
<ul class="submenu">
<li>Sub-sub-submenu 1</li>
<li>Sub-sub-submenu 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Menu item 3</li>
</ul>
</nav>
</body>
</html>
CSS:
/*https://stackoverflow.com/questions/4873604/css-menu-without-javascript*/
#menu li>ul { display: none; }
#menu li:hover>ul { display: block; }
/*End of Nathan MacInnes' code*/
nav { position: relative; }
#menu> li { float: left; padding:10px; border: 1px ridge #cccccc;}
#menu a {
text-decoration:none;
font-size: 20px;
color:#191919;
padding:10px;
}
.submenu { background-color: rgba( 0,0,0,0.5 ); }
If you're wanting CSS-only drop-down menus, then check out Son of Suckerfish. It's pretty much the de facto way of achieving such.
There is a bit on using JavaScript to get around earlier version of Internet Explorer's lack of support for pseudo elements, but I think this is IE7 and below, so can probably be dropped, depending on what level of support you're wanting to have for older browsers such as IE < 7. Other browsers (Firefox, Chrome, Safari, Opera etc) will display the menu and function just fine with the CSS only.
You could try
.submenu { background-color: rgba( 0,0,0,0.25 );
margin-left: 25px;}
The transparency value is additive — a submenu within a submenu gets that added twice, so a second submenu will be less transparent. Starting with a lower value allows that to be useful.
Adding the margin displaces the text to the right, and I rather like the way each submenu "embraces" its own children.
http://jsfiddle.net/EjXgU/3/
I'm puzzled by this. In a nested list, by setting the height of LI elements the list, the items overlap. What is the explanation for this, and what is the proper way apply height without overlap effect? (I want height, not padding or margins.)
.aaa {background:#ccf;}
.bbb {background:#fcc;}
.bbb li {height:25px;}
<ul class="aaa">
<li>one one one</li>
<li>two, too
<ul>
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
<li>three</li>
<li>here comes four</li>
</ul>
<ul class="bbb">
<li>one one one</li>
<li>two, too
<ul>
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
<li>three</li>
<li>here comes four</li>
</ul>
<li>two, too
<ul> <-- this list is part of your LI
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
Since you have a list nested in a list, the inner list overflows because it is bigger than 25px.
Use min-height instead of height.
The second tier li is inheriting the CSS from the top tier li
You need come CSS like
ul li ul li {/*style to hit the bottom tier*/}
This looks like you are making a menu - Tuts like this (http://www.devinrolsen.com/pure-css-vertical-menu/) could advise you for better code but Padding and margin are recognised techniques to achieve what you apparently want
How could I have the tab to be on hover mode while I rollover the drop down sub-menu.
Does it require javascript or it could be done solely on CSS?
<li id="anchor" class="title dropdown">Main Tab
<div class="column">
<ul>
<li class="subtitle">Button 1</li>
<li class="subtitle">Button 2</li>
<li class="subtitle">Button 3</li>
</div>
</li>
As matpol suggested, you can use css to do it, and use the css hover fix to sort it in IE.
As a side note, you don't need that div in there, everything you need to do style wise can be done by styling the nested li element (you also need to close the second ul too). I'm guessing its just a quickly done code snippet anyway, but I thought I'd bring it up :)
Update;
Tbh howver mega the dropdown is, you shouldn't need divs in that level (you can put them in the <li>'s if you need to).
Something like this...
<li id="anchor" class="title dropdown">Main Tab
<ul class="column">
<li class="subtitle">Button 1</li>
<li class="subtitle">Button 2</li>
<li class="subtitle">Button 3</li>
</ul>
</li>
/* styles */
li#anchor:hover {
/* Styles for tab hover state, will be in effect when you're hovering over any child ul/li elements */
}
li#anchor ul.column {
display: none;
/* Styles for this ul, float, position etc */
}
li#anchor:hover ul.column {
display: block;
}
Its untested, but I've done more of these than I'd care to remember :P
you can do it with CSS but need JS for older crappier browsers(ie6) e.g.
li .column{
display: none;
}
li:hover .column{
display: block
}
IE6 only supports hover on anchor tags hence the need for JS.