In my ol below, i want the first li to hide its number, and then the second li to start at 1. Is this possible?
Heading Herewith no number - so hide the 1.
so this li would be number 1.
this would be number 2.
etc
etc
Another Option (See http://jsfiddle.net/ECjLs/)
HTML
<ol class="my-awesome-counter">
<li>Hello</li>
<li value="1">Hello</li>
<li>Hello</li>
<li>Hello</li>
</ol>
CSS
li:first-child {
list-style:none;
}
You can hide the number using CSS and use the "value" attribute to set the ordinal value of an entry and any subsequent entry.
<ol>
<li style="font-weight: bold; list-style-type:none">Heading Herewith no number - so hide the 1.</li>
<li value="1">so this li would be number 1.</li>
<li>this would be number 2.</li>
<li>etc</li>
<li>etc</li>
</ol>
you could try css counters: http://jsfiddle.net/QKgMq/
html:
<ul>
<li>first</li>
<li>true first</li>
<li>second</li>
</ul>
css:
ul>li:nth-child(2) {
counter-reset: term;
}
li{
list-style-type: none;
}
li:first-child:before{
content:'';
}
li:before {
counter-increment: term;
content: counter(term);
margin-left: -10px;
margin-right: 10px;
}
Html:
Item one
Item two
Item three
Item four
simply using css you can do the following to hide the first number from the ol list:
CSS:
ol li:first-child {
list-style:none;
}
Result :
Item One
2 Item two
3 Item three
4 Item four
Related
I am curious, how to change the code that drop-down opens and closes only by clicking on the link. Because now it also closes and opens if you click on the body of the drop-down itself.
$(document).ready(function(){
$( "ul" ).click(function() {
$(this).children('li:not(.init)').slideToggle(0);
$(this).find("li.init").toggleClass("init1");
});
});
.selectContainer ul{
width:200px;
}
.selectContainer ul li
{
border:1px solid green;
width:100%;
cursor:pointer;
list-style: none;
}
.selectContainer ul li:not(.init){
display:none;
float:left;
}
li.init{position:relative;}
li.init:after{content:"\2193 ";position:absolute;right:5px;}
li.init1:after{content:"\2191 ";position:absolute;right:0;}
<div class="selectContainer">
<ul>
<li class="init">Select</li>
<li data-value="value 1">Option 1</li>
<li data-value="value 2">Option 2</li>
</ul>
</div>
You can try:
$( "ul li.init" ).click(function(e) {
$('li:not(.init)').slideToggle(0);
$(this).toggleClass("init1");
});
You query the "ul"-element with $( "ul" ) and define it's click. Obviously all the space after it is part of the ul-element.
Why don't you try to set the $("li.init").click instead. Inside the function you could query for the "ul" just as in your example. But set the .click of the "li".
So, I have attempted to create a horizontal list for use on a new website I am designing. I have attempted a number of the suggestions found online already such as setting 'float' to left and such - yet none of these have worked when it comes to fixing the problem.
ul#menuItems {
background: none;
height: 50px;
width: 100px;
margin: 0;
padding: 0;
}
ul#menuItems li {
display: inline;
list-style: none;
margin-left: auto;
margin-right: auto;
top: 0px;
height: 50px;
}
ul#menuItems li a {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-weight: bolder;
color: #000;
height: 50px;
width: auto;
display: block;
text-align: center;
line-height: 50px;
}
<ul id="menuItems">
<li>
Home
</li>
<li>
DJ Profiles
</li>
</ul>
Currently I am unsure of what is causing this issue, how would I go about and resolve it?
Updated Answer
I've noticed a lot of people are using this answer so I decided to update it a little bit. No longer including support for now-unsupported browsers.
ul > li {
display: inline-block;
/* You can also add some margins here to make it look prettier */
}
<ul>
<li> some item
</li>
<li> another item
</li>
</ul>
This fiddle shows how
http://jsfiddle.net/9th7X/
ul, li {
display:inline
}
Great references on lists and css here:
http://alistapart.com/article/taminglists/
I guess the simple solution i found is below
ul{
display:flex;
}
A much better way is to use inline-block, because you don't need to use clear:both at the end of your list anymore.
Try this:
<ul>
<li>
some item
</li>
<li>
another item
</li>
</ul>
CSS:
ul > li{
display:inline-block;
}
Have a look at it here : http://jsfiddle.net/shahverdy/4N6Ap/
You could also use inline blocks to avoid floating elements
<ul>
<li>
some item
</li>
<li>
another item
</li>
</ul>
and then style as:
li{
/* with fix for IE */
display:inline;
display:inline-block;
zoom:1;
/*
additional styles to make it look nice
*/
}
that way you wont need to float anything, eliminating the need for clearfixes
Here you can find a working example, with some more suggestions about dynamic resizing of the list.
I've used display:inline-block and a percentage padding so that the parent list can dynamically change size:
display:inline-block;
padding:10px 1%;
width: 30%
plus two more rules to remove padding for the first and last items.
ul#menuItems li:first-child{padding-left:0;}
ul#menuItems li:last-child{padding-right:0;}
strong tex
ul {
list-style: none;
display: flex;
justify-content: space-around;
}
<ul>
<li>bla</li>
<li>blabla</li>
<li>blablabla</li>
</ul>
I want to add a drop down menu in "about us" tab in main menu, I tried hard but its not showing,
Here is the html code for the lists,
<li>
About Us
<ul class="sub-menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</li>
and here is my css for the drop down menu I have created:
#menu ul li{float:none}
#menu ul li a{background:none !important;}
#menu ul li a:hover{background:url(../images/menu_active.gif) top repeat-x !important;display:block}
#menu ul{border:solid 1px #FC0;position: absolute;z-index: 100;background: #000;width:300px;display:none}
In this fiddle is a working version of your code:
Jsfiddle
Explanation:
You are not selecting the write <ul> in your css
#menu ul li:hover ul{background:url(../images/menu_active.gif) top repeat-x !important;display:block;}
#menu ul li ul{border:solid 1px #FC0;z-index:999;background: #000;width:300px;display:none;}
Check for the full code the JSFiddle
If you want to select a <li> of a <ul> in a <ul>or<li> Use this in your css.
ul li ul li {}
This is an example for dropdown in pure css.
.sub-menu { display: none; }
.menu:hover + .sub-menu { display: block; }
http://jsfiddle.net/greatghoul/TDA62/
I'm using a bit of javascript to create a dropdown that appears when an image is clicked. Currently the initial image is centered, but the drop down is appearing at the left of the frame... and I'm stumped. Help would be greatly appreciated. My code is below:
<div align="center" class="dropdown">
<img alt="Select Your District Here" onclick="showMenu()" src="images/buttons/select_district.png" style="width: 200px; height: 36px;" />
<ul aria-labelledby="dLabel" class="dropdown-menu" id="district-dd2" onmouseout="hideMenu()" role="menu" style="display:none">
<li>
Arbuckle</li>
<li>
Country Estates</li>
<li>
Strawberry</li>
<li>
Walnut Ranch</li>
</ul>
<script type="text/javascript">
function showMenu(){
document.getElementById("district-dd2").style.display="block";
}
function hideMenu(){
document.getElementById("district-dd2").style.display="none";
}
</script></div>
Site can be seen here: http://www.waterutilitymanagementservices.com/deloro/water-districts.html
EDIT: CSS for dropdown-menu added. FYI, this site is using joomla beez template with bootstrap, with css heavily modified. the code below comes from bootstrap.css
.dropdown-menu > li > a {
clear: both;
color: #333333;
display: block;
font-weight: normal;
line-height: 20px;
padding: 3px 20px;
white-space: nowrap;
}
EDIT 2: More CSS - After scouring all my css files, it looks like all the references to dropdowns are in bootstrap.css. Rather than past all of them here (which would be long), i posted the CSS as a txt file here: http://www.waterutilitymanagementservices.com/boostrap.txt
This seems really simple, but I can't get the syntax correct w/ the following scenario. I have some dropdown menus defined for the top of a screen. I want the list-items (each LI) to be AT LEAST as wide as its parent LI. It seems like an easy job for min-width and inherit, but I haven't been able to get it to work properly.
Right now, the "inherit" word just gets underlined in VS as if it's not recognized. The page will build/load fine, but it's clearly not reading the argument, as the LI controls aren't as wide as their parent LI's. Any help is appreciated.
Here is part of my HTML:
<ul id="javascriptDDM">
<li> MAIN OPTION 1
<ul>
<li> Choice 1 </li>
<li> Choice 2 </li>
<li> Choice 3 </li>
</ul>
</li>
<li> MAIN OPTION 2
<ul>
<li> Choice 1 </li>
<li> Choice 2 </li>
<li> Choice 3 </li>
</ul>
</li>
</ul>
... EDIT - here is ALL of the javascriptDDM CSS:
#javascriptDDM { width: auto; margin: 0; padding: 0 }
#javascriptDDM li { width: auto; float: left; list-style: none }
#javascriptDDM li a { display: block; background: #606668; padding: 5px 12px; text-decoration: none; border-right: 1px solid white; border-top: none; color: White; white-space: nowrap; background-position:left center; }
#javascriptDDM li a:hover { background: #999999; color: #FFFFFF; }
#javascriptDDM li ul { width: auto; margin: 0; padding: 0; position: absolute; visibility: hidden; z-index: 1000 }
#javascriptDDM li ul li { min-width: inherit; float: none; display: inline }
#javascriptDDM li ul li a{ color: #FFFFFF;background: #999999 }
#javascriptDDM li ul li a:hover { color: #000000; background: #FFFFFF}
Inherit will make the min-width property take the same "specified" value as the parent's min-width property. If you don't set min-width on a parent element, it won't have any value.
First of all, you should set your LI display mode to block. In this case, you will be at least able to control width of it.
WEFX
Only "block level" elements will inherit the width of their parents. The "a" element is not inherently a "block" level element.
So, to remedy this, you should either add a "display:block" to the "a" element, or, instead, place the min-width CSS on the li instead of the a.