height not applying to li item - html

Question

I am trying to implement LI items horizontally as seen in the screenshot however I am not able to increase the height of the li item. I tried creating a class and assigning it to the li item and that still doesnt seem to work. Tried applying the height to the UL item and still doesnt seem to work. Could somebody tell me what the problem is ?
html
<div id="navcontainer">
<ul class="liheight">
<li class="liheight">Team Management</li>
<li class="liheight">User Management</li>
</ul>
</div>
CSS
#navcontainer ul {
display: block;
list-style-type: disc;
padding-top:40px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
#navcontainer ul li {
display: inline;
border:5px solid #009ddc;
border-left: 5px solid #009ddc;
border-right: 5px solid #009ddc;
border-bottom:5px solid #009ddc;
border-top:5px solid #009ddc;
z-index: 0 !important;
padding: 0;
}
#navcontainer ul li a {
text-decoration: none;
padding: .1em 1em;
background: #fff;
color: #24387f !important;
}
#navcontainer ul li a:hover
{
color: #fff !important;
background-color: #009ddc;
}
.liheight {
min-height: 50px;
}
Desired height
Current implementation
Applying the solution

Answer 1

First answer explains it, but if you really want to keep 'inline' on li element, then just add line-height: 25px, or anything like that. It will increase line height and thus increase height of li element.

Answer 2

I am trying to implement LI items horizontally as seen in the
screenshot however I am not able to increase the height of the li item
This is accomplished using, display: inline-block. The reason is that when you try to increase the heigh of inline elements it has no effect, with inline-block it does.
Another way to make the li elements is to use floats: float: left
But it seems that what you are trying to accomplish is increase the height and width of the anchor tags, <a>, within the li elements and when the user hovers the pointer over it you get the blue color. This is done by making that inline element, the anchor tag, a block element and applying padding to make it grow.
Here are two possible solutions to your problem, you can choose the best one that fits your needs.
Solution one:
#navcontainer ul {
list-style-type: disc;
padding-top:40px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
#navcontainer ul li {
display: inline-block;
border:5px solid #009ddc;
border-left: 5px solid #009ddc;
border-right: 5px solid #009ddc;
border-bottom:5px solid #009ddc;
border-top:5px solid #009ddc;
z-index: 0 !important;
}
#navcontainer ul li a {
display: block;
text-decoration: none;
padding: 0.5em 4em;
background: #fff;
color: #24387f !important;
}
#navcontainer ul li a:hover
{
color: #fff !important;
background-color: #009ddc;
}
<div id="navcontainer">
<ul>
<li>Team Management</li>
<li>User Management</li>
</ul>
</div>
Solution two (using floats):
#navcontainer ul {
list-style-type: none;
padding-top:40px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
#navcontainer ul li {
float: left;
border:5px solid #009ddc;
border-left: 5px solid #009ddc;
border-right: 5px solid #009ddc;
border-bottom:5px solid #009ddc;
border-top:5px solid #009ddc;
z-index: 0 !important;
}
#navcontainer ul li a {
display: block;
text-decoration: none;
padding: 0.5em 4em;
background: #fff;
color: #24387f !important;
}
#navcontainer ul li a:hover
{
color: #fff !important;
background-color: #009ddc;
}
<div id="navcontainer">
<ul>
<li>Team Management</li>
<li>User Management</li>
</ul>
</div>
For further reading check out these articles:
CSS display: inline vs inline-block
https://developer.mozilla.org/en-US/docs/Web/CSS/display
https://alistapart.com/article/css-floats-101
https://developer.mozilla.org/en-US/docs/Web/CSS/float

Answer 3

Change #navcontainer ul li to use display: inline-block, as the use of inline is restricting its height.
Additionally:
I'd recommend you use classes rather than your very specific and non-reusable structure you're current implementing.
Do not use min-height, as this just prevents an element from going below this height, usually used when it's scalable.
Here's a js-fiddle, I've just changed the display property and added a height value. https://jsfiddle.net/g9aspo90/
EDIT:
To fix the background colour not filling out, you should set the background-color on the li tag, rather than the a tag. When you set the background-color on just the a tag, then it will only cover the a tag's area, which in our case was smaller than its parent (once we increased its size). And since in actuality all we want to do is give the li tag a white background, it makes much more sense to set it there.
Here's the fiddle: https://jsfiddle.net/g9aspo90/1/.
And these are the changes I made:
#navcontainer ul li a {
text-decoration: none;
padding: .1em 1em;
background: #fff;
color: #24387f !important;
}
#navcontainer ul li a:hover {
color: #fff !important;
background-color: #009ddc;
}
Becomes
#navcontainer ul li {
background: #fff;
color: #24387f !important;
}
#navcontainer ul li a {
text-decoration: none;
padding: .1em 1em;
color: #24387f !important;
}
#navcontainer ul li:hover {
color: #fff !important;
background-color: #009ddc;
}
Further comments:
I'd recommend you wrap the li tag in the a tag, rather than the other way around. This way the entire block will be a link, which I think is much nicer. So this:
<li class="liheight">
User Management
</li>
Would become this:
<a href="#">
<li class="liheight">
User Management
</li>
</a>
This messes up your styles a bit, but it should only take a few minutes to resolve. Good luck!
EDIT2: Here's how to resolve the styling issue, just changes the css selector #navcontainer ul li a to #navcontainer ul a li. https://jsfiddle.net/g9aspo90/3/

Answer 4

You can increase size of borders, your height and width will change according to that. Like this:
#navcontainer ul li {
display: inline;
border: 5px solid #009ddc;
border-left: 50px solid #009ddc;
border-right: 50px solid #009ddc;
border-bottom: 50px solid #009ddc;
border-top: 50px solid #009ddc;
z-index: 0 !important;
padding: 0;
}
My suggestion would be to use bootstrap, it has navigation class so you can group all things together and control all on same time.