The above one is just a ul and li, i have added column count on ul. On hovering <a> tag it shows half in first column and another half in second column.
I have tried
display: inline-block;
display: block;
But i am getting same result. My code is below.
HTML
<ul class="classname">
<li>Column 1 - 1</li>
<li>Column 1 - 2</li>
<li>column 2</li>
<li>column 3 - 1</li>
<li>column 3 - 2</li>
<li>column 4</li>
</ul>
css
.classname {
-webkit-column-count: 4;
-moz-column-count: 4;
-o-column-count: 4;
column-count: 4;
}
.classname li {
font-size: 15px;
color: black;
display: block;
margin: 0px;
}
.classname li a {
display: block;
padding: 6px 10px;
font-size: 13px;
color: #444;
letter-spacing: 0.5px;
}
I think you need to play around break-inside: avoid-column;:
.classname {
-webkit-column-count: 4;
-moz-column-count: 4;
-o-column-count: 4;
column-count: 4;
}
.classname li {
font-size: 15px;
color: black;
display: block;
margin: 0px;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid-column;
}
.classname li a {
display: block;
padding: 6px 10px;
font-size: 13px;
color: #444;
letter-spacing: 0.5px;
}
li:nth-child(even) {
background: teal;
}
<ul class="classname">
<li>Column 1 - 1</li>
<li>Column 1 - 2</li>
<li>column 2</li>
<li>column 3 - 1</li>
<li>column 3 - 2</li>
<li>column 4</li>
</ul>
Related
When I define an .active class for an ordered list item, the item number is not styled.
li.active {
background-color: #212121;
width: 14em;
padding: 3px 6px;
border-radius: 8px;
}
<ol>
<li id="i1" class="active">Item 1</li>
<li id="i2">Item 2</li>
<li id="i3">Item 3</li>
</ol>
How to style the number together with the item?
Need to add some css and css counter
ol {
list-style: none;
counter-reset: item;
}
li {
counter-increment: item;
margin-bottom: 5px;
}
li:before {
content: counter(item) ".";
width: 15px;
margin-right: 5px;
text-align: center;
display: inline-block;
}
li.active {
background-color: #212121;
width: 14em;
padding: 3px 6px;
border-radius: 8px;
}
<ol>
<li id="i1" class="active">Item 1</li>
<li id="i2">Item 2</li>
<li id="i3">Item 3</li>
</ol>
Use list-style-position: inside
li.active {
background-color: #212121;
width: 14em;
padding: 3px 6px;
border-radius: 8px;
}
ol {
list-style-position: inside
}
<ol>
<li id="i1" class="active">Item 1</li>
<li id="i2">Item 2</li>
<li id="i3">Item 3</li>
</ol>
li.active {
background-color: #212121;
width: 14em;
padding: 3px 6px;
border-radius: 8px;
font-size: 1.5em;
color: red;
}
<ol>
<li id="i1" class="active">Item 1</li>
<li id="i2">Item 2</li>
<li id="i3">Item 3</li>
</ol>
This question already has answers here:
Change height-top of item when hover
(2 answers)
Closed 4 years ago.
https://jsfiddle.net/fnu483z0/5/
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
ul {
display: flex;
}
ul li {
list-style: none;
padding: 1em;
border-right: 1px solid #000;
background-color: #CCC;
}
ul li:last-child {
border-right: none;
}
ul li:hover {
padding-top: 40px;
background-color: #333;
}
The problem is that on hover other items are also affected, they also expand? Should look like this when hovering an item:
The problem is that on hover other items are also affected, they also expand?
Of course they do, because they are all children of the same flex container - and adding padding to one of the items changes the height of the container, so the others grow with it accordingly.
You can easily counter this by giving the hovered item a matching negative margin-bottom:
ul li:hover {
padding-top: 40px;
margin-bottom: calc(1em - 40px); // your default li padding was 1em,
// so we have to calculate the right difference here
background-color: #333;
}
https://jsfiddle.net/fnu483z0/18/
In your ul add ->
align-items: flex-start;
ul {
display: flex;
align-items: flex-start;
}
ul li {
list-style: none;
padding: 1em;
border-right: 1px solid #000;
background-color: #CCC;
}
ul li:last-child {
border-right: none;
}
ul li:hover {
padding-top: 40px;
background-color: #333;
position: relative;
z-index: 1;
}
<div>
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</div>
I'm trying to achieve the following result:
So far, I've written the following:
a {
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
border-top: 1px solid;
border-bottom: 1px solid;
padding-left: 1em;
line-height: 2em;
}
li li {
margin-left: -1em;
padding-left: 2em;
border-bottom: none;
}
li li li {
margin-left: -2em;
padding-left: 3em;
border-bottom: none;
}
Demo: https://jsfiddle.net/9h891a0s/1/
However, I am looking for a solution that would allow for infinite depth. Is there a clean solution for this?
Take a look of this by using the position:absolute tricks for the borders.
body {
margin: 0;
padding: 1em;
}
body > ul {
border-bottom: 1px solid black;
overflow: hidden;
}
a {
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
line-height: 2em;
position: relative;
}
li ul {
padding-left: 1em;
}
li:after {
content:"\00A0";
position: absolute;
width: 200%;
left: -100%;
top: 0;
border-top: 1px solid black;
z-index: -1;
}
<ul>
<li>Level 1
<ul>
<li>Level 2</li>
<li>
Level 2
<ul>
<li>Level 3</li>
<li>Level 3</li>
<li>Level 3</li>
</ul>
</li>
<li>Level 2</li>
</ul>
</li>
</ul>
Fiddle Demo: http://jsfiddle.net/Lr5cmoo6/
You could fake the borders by applying a repeating linear-gradient as the background of the top level ul. Then you'd need to just need a single rule for your list items to set your padding.
Here's an example:
body{
font-family:arial;
font-size:14px;
margin:0;
}
body>ul{
background:linear-gradient(0deg,#000 3.333%,#fff 3.333%);
background-size:100% 30px;
}
ul{
margin:0;
padding:0;
list-style-type:none;
}
li{
line-height:30px;
padding:0 1em;
}
<ul>
<li>Level 1
<ul>
<li>Level 2</li>
<li>
Level 2
<ul>
<li>Level 3</li>
<li>Level 3</li>
<li>Level 3</li>
</ul>
</li>
<li>Level 2</li>
</ul>
</li>
</ul>
There's no way to increase the margin/padding of an element by the nesting.
May this could help you:
a {
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
border-top: 1px solid;
border-bottom: 1px solid;
line-height: 2em;
}
li li {
border-bottom: none;
}
li li a {
margin-left: 1em;
}
li li li a {
margin-left: 2em;
}
li li li li a {
margin-left: 3em;
}
I'm trying to get my navbar centered on my page with the edges of navbar going for entire length of browser window. I cannot figure this out. I think it has something to do with the float:left of the individual nav items. I want this nav bar to be orange background across entire browser window, but the actual nav items to be centered on page. I've copied code below and working demo below that.
<div id="nav-wrapper">
<div id="navmenu">
<ul class="nav" >
<li>About
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Members & Groups
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Meetings & Events
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
</ul>
<!-- hp navigation end -->
</div>
</div>
#nav-wrapper {
width:100%;
background: #ff6633;
margin 0 auto;
}
#navmenu{
margin 0 auto;
width:100%;
}
#navmenu ul {
list-style-type: none;
padding: 0;
}
.nav li > a {
background: #ff6633;
color: white;
width: 137px;
}
.nav > li > a {
display: block;
height: 100%;
padding: 0px;
color: #000000;
text-decoration: none;
text-align: center;
line-height: 32px;
outline: none;
border-right: 1px solid #D6D3D3;
}
.nav > li:hover > a {
color:#333;
}
.nav > li {
padding: 0;
height: 30px;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: -0.5px;
font-size: 14px;
}
.nav li {
float: left;
}
.nav li > ul {
position: absolute;
display: none;
border-bottom: 0;
width: 220px;
z-index: 9999;
}
.nav li > ul > li > a {
text-decoration: none;
color: #0f2992;
display: block;
padding:5px 3px 5px 10px;
text-indent:-7px;
}
.nav li:hover > ul {
display: block;
}
http://codepen.io/trevoray/pen/KwJPLO
#navmenu{
margin 0 auto;
width:100%;
}
#navmenu ul {
list-style-type: none;
padding: 0;
text-align:center
}
.nav li > a {
background: #ff6633;
color: white;
width: 137px;
}
.nav li > ul > li {
width:100%;display:inline-block
}
.nav > li > a {
display: block;
height: 100%;
padding: 0px;
color: #000000;
text-decoration: none;
text-align: center;
line-height: 32px;
outline: none;
border-right: 1px solid #D6D3D3;
width:100%;
}
.nav > li:hover > a {
color:#333;
}
.nav > li {
padding: 0;
height: 30px;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: -0.5px;
font-size: 14px;
position: relative;
width: 32%;
}
.nav li {
display:inline-block
}
.nav li > ul {
position: absolute;
display: none;
border-bottom: 0;
width: 100%;
z-index: 9999;
list-style:none;
text-align: left !important;
}
.nav li > ul > li > a {
text-decoration: none;
color: #0f2992;
display: block;
padding:5px 3px 5px 10px;
text-indent:-7px;
width:100%;
box-sizing: border-box;
}
.nav li:hover > ul {
display: block;
}
<div id="nav-wrapper">
<div id="navmenu">
<ul class="nav" >
<li>About
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Members & Groups
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Meetings & Events
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
</ul>
<!-- hp navigation end -->
</div>
</div>
try this :http://jsfiddle.net/au07b2r3/3/
i remove float left from li ..and set display : inline-block
I am hoping that someone could help me out with a css problem that has been driving me crazy all day. I know I'm missing something obvious here, I just don't see it. If you can help that would be greatly appreciated.
Here is the fiddle http://jsfiddle.net/taglegacy/HK7Hy/
And here is the css:
body
{
margin: 20;
padding: 20;
text-align: center;
font: 85% arial, helvetica, sans-serif;
background: #f1f1f1;
color: #444;
}
#container
{
text-align: left;
margin: 0 auto;
width: 700px;
height: 400px;
background: #FFF;
}
/*---NavigationBar---*/
ul
{
font-family: Arial, Verdana;
font-size: 14px;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
float: left;
background: #9b1b19;
}
ul li
{
display: block;
position: relative;
float: left;
border-right: 1px solid #fff;
}
li ul
{
display: none;
position:absolute;
left:0;
}
ul li a
{
display: block;
text-decoration: none;
color: #fff;
padding: 5px 15px 5px 15px;
background: #9b1b19;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover
{
background: #af1f1c;
}
li:hover ul
{
display: block;
position: absolute;
background: #af1f1c;
}
li:hover li
{
float: none;
font-size: 11px;
background: #af1f1c;
border-top: 1px solid #fff;
}
li:hover a
{
background: #af1f1c;
}
li:hover li a:hover
{
background: #af1f1c;
}
Here is the HTML:
<body>
<div id="container">
<ul>
<li>Menu 1</li>
<li>Menu 2
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
<li>Submenu 4</li>
<li>Submenu 6</li>
</ul>
</li>
<li>Menu 4
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Really Long Submenu 3 Really Long</li>
</ul>
</li>
</ul>
</div>
</body>
The "really long" list item is being cut off because your submenu ul is set to the width of it's parent li. Take out the width: 100% and it'll show the enter text.
Move it so that it only applies to the parent ul to retain the navbar width:
#topnav { width: 100% }
Fiddle
I think, a position:absolute is needed for the 2nd ul. Play around a bit with padding-top and/or top. In the example the padding-top is equal to height of main menu items.
ul#topnav > li > ul {position: absolute; top:0; left:0; padding-top:36px;}
should work, good luck!