I have a small design problem in my css, and I'd like to know if someone could check it out for me. The design problem is in the rollover effect of my horizontal navigation. There seems to be some sort of added margin or padding, but I'm having trouble finding the problem in the css. I will paste the code I'm using below, so you can see for yourself. You won't be able to see the problem until you rollover the navigation list items.
HTML:
<div class="Horiznav">
<ul>
<li id="active">Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
<li>Link #5</li>
</ul>
</div>
CSS:
.Horiznav {
background: #1F00CA;
border-top: solid 1px #fff;
border-bottom: solid 1px #fff;
}
.Horiznav ul {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #fff;
text-Align: center;
margin: 0;
padding-top: 5px; padding-bottom: 5px;
}
.Horiznav ul li {
display: inline;
}
.Horiznav ul li a {
padding-top: 5px;
padding-bottom: 5px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
.Horiznav ul li a:hover {
background: #16008D;
color: #fff;
}
#active a { border-left: 1px solid #fff; }
Since you have the li elements display:inline the problem (extra gap to the left of each menu/list item) is as a result of the white-space in the HTML markup. You can either:
A - Get rid of the white-space in the HTML:
<ul><li id="active">Link #1</li><li>Link #2</li><li>Link #3</li><li>Link #4</li><li>Link #5</li></ul>
B - Or, use the font-size:0 trick:
Set font-size:0 on the ul container and override this with font-size:whatever on the li child elements:
.Horiznav ul {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #fff;
text-Align: center;
margin: 0;
padding-top: 5px; padding-bottom: 5px;
font-size: 0; /* #1 */
}
.Horiznav ul li {
display: inline;
font-size: 16px; /* #2 */
}
http://jsfiddle.net/EZSvC/4/
C - Or, use a floated layout:
Float the li elements (they are then implicitly displayed as blocks) and clear the floats on the ul container with overflow:hidden. However, you will need to give the container width and apply margin:0 auto if you want it centred.
http://jsfiddle.net/EZSvC/5/
just add "display:inline-block" in "Horiznav ul li a" in you css
.Horiznav ul li a {
padding-top: 5px;
padding-bottom: 5px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
display:inline-block;
}
here is the jsFiddle file
hope this will solve your problem.
Related
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
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.
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
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/
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.
I would like add a border-bottom that displays when I hover over it with the mouse. I want it to override the border underneath so it looks like it changes colour. An example of this can be found here http://www.formaplex.com/services (in the nav bar)
Here is a jsfiddle https://jsfiddle.net/ey006ftg/
Also, a small question: does anyone know why there is a small gap in-between the the links (can be seen when hovering from link to link) and how to get rid of it.
Thanks
Just add this to your css:
nav a {
border-bottom: solid transparent 3px;
}
Here's a jsfiddle with the above code: https://jsfiddle.net/AndrewL32/ey006ftg/1/
You can use a negative margin to overlay the border below, as shown:
nav {
border-top: 1px solid grey;
border-bottom: 3px solid black;
width: 100%;
font-size:0;
}
nav ul {
width: 1056px;
margin: 0 auto;
text-align: center;
width: 1056px;
}
nav ul li {
display: inline-block;
width: 17%;
}
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
}
nav a:hover {
color: orange;
transition: 0.2s;
border-bottom: solid orange 3px;
margin-bottom: -10px;
}
a {
color: black;
text-decoration: none;
outline: 0;
}
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</nav>
As for fighting the inline gap, seeing as you defined a font-size later for the a tag, I would just add a font-size:0, which I added to nav in the above Snippet.
fiddle demo
Simply set your default border to transparent - change color on hover
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: solid transparent 3px; /* add this! */
transition:0.3s; /* or even this :) */
}
Try this fiddle
To set border-bottom the way you want, you have to add border to anchor tag like this:
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: 3px solid black;
}
and to make sure the space between menu items is gone use a little fix adding negative margin to your li tags inside menu like this:
nav ul li {
display: inline-block;
width: 17%;
margin-right: -4px;
}
I am working on a navigation links, there is a some gaps in between the links.
Got some solution for earlier questions from stackoverflow which says to remove the whitespaces between anchor tags as some browser will treat them as newline. In my case there are no spaces between thee anchor tags.
enter link description here
<div id="nav">
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</div>
#nav{
background-color:#000000;
}
#nav ul {
height: 50px;
padding: 0;
margin: 0;
text-align:center;
border:1px solid #fff;
}
#nav ul li {
display: inline-block;
height: 50px;
width: 150px;
text-align: center;
border-right:1px solid #fff;
border-left:1px solid #fff;
list-style: none;
font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #000000;
}
#nav ul li a{
padding: 18px 0;
text-decoration: none;
color: white;
display: block;
}
A quick solution would be to use float: left instead of display: inline-block for #nav ul li. Here's a complete article on how to remove the white space between inline-block elements using various methods.
By the way, the white space between each menu item which you see now is because of the border-right and the border-left.
#nav{
background-color:#000000;
}
#nav ul {
height: 50px;
padding: 0;
margin: 0;
text-align:center;
border:1px solid #fff;
}
#nav ul li {
float: left;
height: 50px;
width: 150px;
text-align: center;
border-right:1px solid #fff;
border-left:1px solid #fff;
list-style: none;
font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #000000;
}
<div id="nav">
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</div>
You don't have whitespaces in the anchor tags but you do have in the li tags. The li tags are the ones with inline-block. You should either remove those as well, or use font-size: 0; on the ul tag and then reset to the correct font-size in the li tag.
You should think of inline-block elements as really big characters, that way you can understand them easier.
font-size: 0 should be an answer!. In my case I make div including anchor tags.
After putting font-size: 0 on div, the space between anchor tags.
I'm trying to add space between a bottom border line and my <li> item but no luck.
My code:
<div class="menuwrap">
<div class="menu">
<ul>
<li>Home
</li>
<li>Query
</li>
<li>Reports
</li>
</ul>
</div>
</div>
CSS styles:
.menu {
color: #000;
background: #FFF;
}
.menu ul {
list-style: none;
display: inline;
float: left;
padding-left: 40px;
margin-top: 90px;
}
.menu li {
float:left;
margin-left:10px;
}
.menu li a:hover {
padding: 0 10px 0 10px;
font-size: xx-large;
border-bottom: 1px solid white;
border-spacing: 20px;
}
.menu li a {
text-decoration: none;
color: #000;
font-weight: bold;
font-size: large;
}
.menuwrap {
overflow:hidden;
}
I tried couple of different things, but nothing worked so far. border-spacing is not doing what I want. I tried padding-bottom and that also didn't work. Can someone tell me how to achieve that? I want a space between the "li" item and its border-bottom.
Adding a padding-bottom or margin-bottom seems to be working.
li:hover{
padding-bottom: 10px;
}
Here's a FIDDLE
or
li:hover{
margin-bottom: 10px;
}
Here's a FIDDLE
Update: After reading your comment and having a look at the fiddle you provided, I've created one which does what you are trying to do. It's different from the code you provided but it's easier to read and you can modify it according to your needs
.menu{
list-style-type: none;
}
.menu li{
display: inline-block;
*display: inline;
zoom: 1;
margin: 10px;
}
.menu li a{
text-decoration: none;
color: #000;
border-bottom: 2px solid #000;
padding-bottom: 30px;
}
.menu li a:hover{
font-size: 2em;
font-weight: bold;
}
FIDDLE
I guess you didn't give your styles. padding-bottom works. Please check http://jsfiddle.net/VZCrq/8/
I have this menu:
#navbar {
text-align: center;
margin: auto;
padding: 0;
height: 1em;
}
#navbar li {
list-style: none;
float:left; }
#navbar li a:hover{
background-color: #CCC;
}
#navbar li a {
border: 1px solid #000;
display: block;
margin-right: 18px;
margin-left: 18px;
padding: 3px 8px;
background-color: #FFF;
color: #000;
text-decoration: none; }
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: #FFF;
border-bottom: 1px solid #000;
color: #000; }
#navbar li li a:hover {
background-color: #CCC; }
<ul id="navbar">
<li>Start</li>
<li>Vad?</li>
<li>Kom igång!</li>
<li>Läringsartikler<ul>
<li>Subitem One</li>
<li>Second Subitem</li>
<li>Numero Tres</li></ul>
</li>
<li>Läringsfilmer<ul>
<li>Subitem One</li>
<li>Second Subitem</li>
<li>Numero Tres</li></ul>
</li>
</ul>
as you can see in navbar { i tried to use text-align: center or margin:auto but it still wont center the whole menu..
why?
when i change the navbar li to float center instead of float left then it make the whole menu stupid big
You need to specify a width on your navbar ul.
#navbar {
text-align: center;
margin: auto;
padding: 0;
height: 1em;
width: 400px;
}
There is NO center value for 'float' style attribute
-- Oops dint see that comment
As mentioned, there is no Float:center. In order to center using margin-left and margin-right auto, you either need to set a width (as mentioned above) or change it to display:block.
If you don't want to set a width or can't, there's a CSS hack called Shrink Wrapping that is easy to setup.