I need to make a list 100% height, and each list item 20%. I was able manage this. But when adding a border at the bottom of each list item, the list becomes more than 100% height and scrollbar appears.
How to make a list with borders fit the the screen height ?
html,body {height:100%; margin:0;}
.list {
width: 200px;
height:100%;
}
.list ul {
height:100%;
margin: 0;
padding:0;
list-style: none;
}
.list ul li {
border-bottom: 1px solid #000; /* Scrollbar appears with this*/
height:20%;
}
.list ul li a {
text-decoration: none;
display: block;
padding: 1em 1em 1em 0.2em;
color:#000;
}
.list ul li a:after
{
content:"»";
float:right;
}
<div class="list">
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
<li>List 5</li>
</ul>
</div>
Try adding this to your .list ul li :
box-sizing: border-box;
Try the following code :
html,body {height:100%; margin:0;overflow:hidden;}
.list {
width: 200px;
height:100%;
}
.list ul {
height:100%;
margin: 0;
padding:0;
list-style: none;
}
.list ul li {
border-bottom: 1px solid #000;
box-sizing:border-box;
height:20%;
}
.list ul li a {
text-decoration: none;
display: block;
padding: 1em 1em 1em 0.2em;
color:#000;
}
.list ul li a:after
{
content:"»";
float:right;
}
<div class="list">
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
<li>List 5</li>
</ul>
</div>
html,body {height:100%; margin:0;}
.list {
width: 200px;
height:100%;
}
.list ul {
height:100%;
margin: 0;
padding:0;
list-style: none;
}
.list ul li {
border-bottom: 1px solid #000; /* Scrollbar appears with this*/
box-sizing:border-box;
height:20%;
}
.list ul li a {
text-decoration: none;
display: block;
padding: 1em 1em 1em 0.2em;
color:#000;
}
.list ul li a:after
{
content:"»";
float:right;
}
<div class="list">
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
<li>List 5</li>
</ul>
</div>
Use box-sizing property.
box-sizing: border-box;
Related
How do I make the <h1> element and the <ul> element inline?
What I have tried so far:
body{
margin:0;
}
header{
background:#999;
color:white;
padding:15px 15px 0px 15px;
}
header h1{
margin:0;
display: inline;
}
nav ul{
margin:0;
display: inline;
}
nav ul li{
background:black;
color:white;
display: inline-block;
list-style-type: none;
padding:5px 15px;
}
nav ul li a {
color:white;
}
<header>
<h1>My Page</h1>
<nav>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</nav>
</header>
Just change the parent element <header> to a flexbox using display:flex; like this:
header{
display: flex;
/* other css properties below */
}
Check and run the following Code Snippet for a practical example of the above flexbox approach:
/* CSS */
body {
margin:0;
}
header{
background:#999;
color:white;
padding:15px 15px 0px 15px;
display: flex;
}
header h1{
margin:0;
}
nav ul{
margin:0;
}
nav ul li{
background:black;
color:white;
display: inline-block;
list-style-type: none;
padding:5px 15px;
}
nav ul li a {
color:white;
}
<!-- HTML -->
<header>
<h1>My Page</h1>
<nav>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</nav>
</header>
I am trying to create a vertical drop-down menu but i am failing to align drop-down content properly. I is appearing as if indented, which i don't want.
Drop-down Text should be vertically aligned
#sidenav{
margin-top:25%;
margin-left:25%;
width:250px;
max-width:250px;
background:#454545;
}
#sidenav input {
box-sizing: inherit;
width:100%;
padding:5px;
margin-top: 5px;
border:none;
border-bottom: 2px solid #666666;
background: transparent;
color:white;
font-size: 18px;
font-style: italic;
opacity: 0.8;
}
#sidenav li{
list-style:none;
font-size: 18px;
width:inherit;
padding:5px 0px 5px 5px;
position: relative;
color:#ffffff;
}
#sidenav li::first-letter,#sidenav a::first-letter{
text-transform: uppercase;
}
#sidenav a{
text-decoration: none;
display: block;
color:#ffffff;
margin:0px;
}
.dropdown-content{
background:#666666;
display: none;
}
.dropdown-bt:hover .dropdown-content{
display: block;
}
<section id='sidenav'>
<input type="text"placeholder="search..."id='mysearch'onkeyup="filterSearch()">
<li>item 1</li>
<li>item 2</li>
<li class="dropdown-bt">dropdown - content
<ul class="dropdown-content">
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
</ul>
</li>
<li>item 3</li>
<li>item 4</li>
</section>
Drop-down content is giving some kind of margin on its left
which i don't want.
If I understood you correctly, remove the padding from unordered list:
ul {
padding:0;
}
In your case:
.dropdown-content{
background:#666666;
display: none;
padding:0;
}
There is a 5px padding from its parent (#sidenav li) so you will need to compensate somehow, one way is to do margin-left: -5px in the child (.dropdown-content)
#sidenav{
margin-top:25%;
margin-left:25%;
width:250px;
max-width:250px;
background:#454545;
}
#sidenav input {
box-sizing: inherit;
width:100%;
padding:5px;
margin-top: 5px;
border:none;
border-bottom: 2px solid #666666;
background: transparent;
color:white;
font-size: 18px;
font-style: italic;
opacity: 0.8;
}
#sidenav li{
list-style:none;
font-size: 18px;
width:inherit;
padding:5px 0px 5px 5px;
position: relative;
color:#ffffff;
}
#sidenav li::first-letter,#sidenav a::first-letter{
text-transform: uppercase;
}
#sidenav a{
text-decoration: none;
display: block;
color:#ffffff;
margin:0px;
}
.dropdown-content{
background:#666666;
display: none;
margin-left:-5px; /*compensate to the 5px padding from its parent*/
padding: 0; /*optional if you don't want padding inside*/
}
.dropdown-bt:hover .dropdown-content{
display: block;
}
<section id='sidenav'>
<input type="text"placeholder="search..."id='mysearch'onkeyup="filterSearch()">
<li>item 1</li>
<li>item 2</li>
<li class="dropdown-bt">dropdown - content
<ul class="dropdown-content">
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
</ul>
</li>
<li>item 3</li>
<li>item 4</li>
</section>
You never declared the unordered list for your top level list and the padding on your input field (search) was causing the field to be wider than the max width that you set in you container. To adjust for this padding I modified how the padding was being applied (top and bottom padding has 5px and left and right have 0).
#sidenav{
margin-top:25%;
margin-left:25%;
width:250px;
max-width:250px;
background:#454545;
}
#sidenav input {
box-sizing: inherit;
width:100%;
padding:5px 0px;
margin-top: 5px;
border:none;
border-bottom: 2px solid #666666;
background: transparent;
color:white;
font-size: 18px;
font-style: italic;
opacity: 0.8;
}
#sidenav li{
list-style:none;
font-size: 18px;
width:inherit;
padding:5px 0px 5px 5px;
position: relative;
color:#ffffff;
}
#sidenav li::first-letter,#sidenav a::first-letter{
text-transform: uppercase;
}
#sidenav a{
text-decoration: none;
display: block;
color:#ffffff;
margin:0px;
}
.dropdown-content{
background:#666666;
display: none;
}
.dropdown-bt:hover .dropdown-content{
display: block;
}
<section id='sidenav'>
<input type="text"placeholder="search..."id='mysearch'onkeyup="filterSearch()">
<ul>
<li>item 1</li>
<li>item 2</li>
<li class="dropdown-bt">dropdown - content
<ul class="dropdown-content">
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
</ul>
</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</section>
Created a navigation menu with one drop menu. For some reason I am unable to get the correct CSS dropping the menu on "Main 3." Would someone mind looking at my CSS to see if there is something I may have missed.
HTML
<ul class="navmenu">
<li>Main 1</li>
<li>Main 2</li>
<li>
Main 3
<ul>
<li>Sub 1</li>
<li>Sub 2 </li>
<li>Sub 3</li>
<li>Sub 4</li>
</ul>
</li>
<li>Main 4</li>
<li>Main 5</li>
<li>Main 6</li>
<li>Main 7</li>
</ul>
CSS
.navmenu{
background: #510E2A;
height: 35px;
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
text-align: justify;
}
.navmenu li{
float: left;
}
.navmenu li a{
display: block;
padding:9px 20px;
text-decoration: none;
font-family: THCFontSemiBold;
color: #f3ac3f;
font-weight: bold;
}
.navmenu ul{
list-style-type: none;
position: absolute;
z-index: 1000;
left: -9999em;
}
.navmenu li:hover{
position: relative;
}
.navmenu li:hover ul {
left:0px;
top:30px;
background:#5FD367;
padding:0px;
}
.navmenu li:hover ul li a {
padding:5px;
display:block;
width:168px;
text-indent:15px;
background-color:red;
}
.navmenu li:hover ul li a:hover { background:#005555; }
Fiddle is here
Just remove overflow from navmenu
.navmenu{
background: #510E2A;
height: 35px;
margin: 0;
padding: 0;
list-style-type: none;
text-align: justify;
}
Updated Fiddle
I'm trying to show a UL with two LI's per row and have all of the text centered. So far the LI's simply go to the left side of the UL.
ul {
text-align: center;
list-style-type: none;
width: 100%;
}
ul li {
display: inline;
}
ul li:nth-child(2n+1) {
clear: both;
}
<ul style="">
<li>item
</li>
<li>item
</li>
<li>item
</li>
<li>item
</li>
</ul>
You need to float the lis (and not make them inline), and clear the left of odd lis
ul
{
list-style:none;
text-align: center;
}
ul li
{
float: left;
}
ul li:nth-child(2n+1) { /*or ul li:nth-child(odd)*/
clear: left;
}
https://jsfiddle.net/nivas/yyt46dkL/
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
}
ul {
display: inline-block;
list-style-type: none;
overflow: hidden;
}
li {
width: 50%;
float: left;
}
a {
display: block;
border: 1px solid;
margin: .25em;
}
a:hover {
background-color: silver;
}
a:link, a:visited, a:hover, a:active {
text-decoration: none;
}
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Forth item</li>
</ul>
Figured it out.
ul {
text-align: center;
list-style-type: none;
width: 100%;
}
ul li {
display: inline;
}
ul li:nth-child(2n+1) {
clear: both;
}
ul li:nth-child(2n+1)::before{
display: block;
content: ' ';
}
<ul style="">
<li>item
</li>
<li>item
</li>
<li>item
</li>
<li>item
</li>
</ul>
I have problem with the select the last-child element!
I created page something like this for navbar:
<nav>
<ul>
<li>list numeber 1</li>
<li>list numeber 2
<ul>
<li>sub list item</li>
<li>sub list item</li>
<li>sub list item</li>
</ul>
</li>
<li>list numeber 3</li>
<li>Sign Out</li>
</ul>
</nav>
with css something like this:
nav {
background: yellow;
}
ul {
list-style: none;
}
li {
padding: 10px 15px;
display: inline-block;
position: relative;
}
ul li:last-child {
float: right;
background: #ddd;
}
ul li ul {
display: none;
position: absolute;
background: #eee;
top: 39px;
left: 0;
}
ul li:hover ul {
display: block;
}
ul li ul li {
display: block;
}
i want to add BG for last-child (Sing out) in for Ul , but when see the sub-items, last-child of that get background like the parent. but i dont want to get color. how can i fix that...?
i dont want to use any class or id or JavaScript!
i there any way...?
TnX
Change ul li:last-child to nav > ul > li:last-child.
The > character is the direct-descendent selector.
changes mentioned in comment line
<nav>
<ul>
<li>list numeber 1</li>
<li>list numeber 2
<ul id="menu">// changes-here id is mentioned.
<li>sub list item</li>
<li>sub list item</li>
<li>sub list item</li>
</ul>
</li>
<li>list numeber 3</li>
<li>Sign Out</li>
</ul>
</nav>
Changes mentioned in comment line
nav {
background: yellow;
}
ul {
list-style: none;
}
li {
padding: 10px 15px;
display: inline-block;
position: relative;
}
#menu li:last-child {// changes-here i refer the id of that menu
float: right;
background:green;
}
ul li ul {
display: none;
position: absolute;
background: #eee;
top: 39px;
left: 0;
}
ul li:hover ul {
display: block;
}
ul li ul li {
display: block;
}
For Demo:JSFIDDLE
First, your padding on the li elements will have unpredictable results on different browsers. I suggest coding in Firefox or Chrome. instead, put the padding on the a tag.
li a {
padding: 10px 15px;
}
li {
/*padding: 10px 15px; */
display: inline-block;
position: relative;
}
Second, you can use a decendant selector to specify the depth of the CSS, and override less specific selectors.
ul li ul, ul li:last-child {
background: #eee;
}
ul li ul {
display: none;
/*background: #eee;*/
position: absolute;
top: 39px;
left: 0;
}