I want to have a border-bottom effect on hover.
I am using transition property on hover, however after the transition-duration is over the border size changes/reduces by a pixel or so, which seems weird. Please help fix this and also would love to know the reason for this effect.
HTML -
<nav class="navbar">
<ul>
<li>
Home
</li>
<li>
About us
</li>
<li>
Contact us
</li>
</ul>
</nav>
CSS -
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar {
width: 90vw;
margin: 0 auto;
font-size: 1.2rem;
background-color: #f1f1f1;
}
.navbar ul {
display: flex;
list-style: none;
justify-content: center;
}
.navbar ul li {
padding: 10px 20px;
margin: 5px;
color: #333;
cursor: pointer;
border-bottom: 4px solid transparent;
}
.navbar ul li:hover {
color: orangered;
border-bottom: 4px solid orangered;
transition: all 1s;
}
Here is the code - https://codepen.io/rawn01/pen/bGBmBdK
The reason for this happening is how the browser optimizes rendering. For animating / transitioning effects it often separates the affected element into a separate "composition layer" for performance reasons.
You can try several ways to attempt to fix the graphical issue:
add will-change attribute in order to tell the browser to keep the element on a separate layer
modify your transition: all 1s to a more specific one (e.g. transition: color 1s, border-bottom-color 1s). Also make sure to only modify the border-bottom-color attribute, not the whole border-bottom attribute with size and type (even though it stays the same)
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I can't figure out how to remove this space from my navbar and the picture..
The CSS code I have for the navbar and the image is:
a {
text-decoration: none;
color: white;
padding-right: 5px;
padding-left: 5px;
padding-top: 0;
}
a:hover {
color: black;
}
header {
background-color: #C0C0C0;
margin: 3px 60px 0;
}
li {
display: inline;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
nav {
position: relative;
text-align: center;
}
ul {
list-style-type: none;
}
#bikebanner {
position: relative;
left: 65px;
}
#bikebanner is the image id.
And the html goes like so:
<header>
<img src="images/bicyclebanner.jpg" id="bikebanner" alt="People riding bikes." title="Biking">
<h1 id="pagetitle">Cycling Tours</h1>
<nav>
<ul>
<li>About Us</li>
<li>Ask Us</li>
<li>Destinations</li>
<li>FAQ</li>
<li>Reviews</li>
<li>Seminars</li>
<li>Trip Prep</li>
</ul>
</nav>
</header>
Looking for a universal fit as I have other things with white space between them as well.
Thanks.
Try adding this to your css:
img{
display:block;
}
img is of type inline-block which adds a little space which is hard to find.
setting it to block should fix it.
what space you are talking about ?
Keep in mind h1 by default has white space around it
every h1-h6 tag has a margin top and bottom by default. i think if you overwrite this in your css you have what you want.
h1 {
margin: 0;
padding: 0;
}
look at this jsfiddle https://jsfiddle.net/zn7wtdLp/
This drives a lot of people crazy initially and the solution is not obvious, but images, lists and list items end up with a small space like this due to the font size inherited by or set on the img or ul. If you do nothing, the img and ul inherit the body font size (often 14px - 16px) with results in this 0.25rem (or 3.5px - 4px) space issue.
Nav Items
There are two popular solutions:
Float your list items left and make sure that you add a clearfix to your ul or its container, or
My preferred solution: Set the font-size on the ul to 0 and then the font-size on the li to 1rem (or whatever).
So my CSS would look something like this:
ul {
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
font-size: 1rem;
}
Images
If you set the image to display: block, this would kill the space below the image. This comes with its own caveats as well. For example, if you want it centered after you switch it to display: block;, you'll need to set the side margins to auto. Something like this:
header img {
display: block;
margin: 0 auto;
}
The problem is display:inline. This treats the elements like text, so if you have
<li>...</li>
<li>...</li>
you have the problem you mentioned, because the linebreaks cause a space.
Try to put your list elements like this:
<li>...</li><li>...</li>
For other solutions see here
built a simple no-dropdown horizontal nav for a new site design and its all working fine like normal except that between 2 buttons is a phantom white space that doesn't appear in dragonfly's metrics, or in the code, but is visible on the screen when the li's hover rule applies. and it does not appear between each li, just between 2 specific lis. i have attached images below showing what i mean:
no problem, everything looks as it should:
on the right side of the hovered li is a px of whitespace that shouldnt be there:
.navi {
display: inline-block;
height: 50px;
max-height: 50px;
overflow: hidden;
list-style: none;
float: right;
}
.navi li {
float: left;
}
.navi li a {
padding: 16px;
border-left: 1px solid #8bd854;
font-size: 16px;
text-decoration: none;
line-height: 50px;
color: #8c8c8c;
transition: all 0.5s ease;
}
.navi li a:hover {
background-color: rgba(13, 137, 0, 0.61);
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.57);
color: #fff;
}
<ul class="navi">
<li>Home</li>
<li>About</li>
<li>Lawn Care</li>
<li>Tree & Shrub Removal</li>
<li>Contact</li>
</ul>
any idea where this may be coming from? It's not a huge deal if not Solvable but it is an annoyance.
Thanks in advance
An easy way to fix this is by using the font-size:
.navi {
font-size: 0;
}
.navi li {
font-size: 1rem;
}
This sets the font size of the list to zero and the font size of the list element to the size of the root element (you may use any other unit – except em – if you want to).
I'm not entirely sure what is causing this. Maybe it's webkit or some nuance of CSS, but at least in this one particular case, you can add display:block to .navi li a and change padding: 16px to padding: 0 16px on that same rule. Unfortunately I can't figure out why this works but my best guess is that whitespace is causing the issue.
I was able to reproduce the issue in Chrome by setting the zoom to 110%. Perhaps, you could set the zoom of all the navigation elements and their children to be zoom: 1.0;.
It is probably just whitespace. try
<ul class="navi"
><li>Home</li
><li>About</li
...
></ul>
I am working on a sidebar, where I have 'a' elements inside 'li's, applying CSS code on them, and giving them border. However when I apply border-bottom on the 'a' elements, space between the elements is also effected. How can I remove this space between them? Thanks.
Sidebar image link: http://imgur.com/gntSanx
Code [html] :
<div id="container">
<div class="sidebar">
<ul id="nav">
<li><a href="#" class="selected">Dashboard</li>
<li><a href="#">Booter Hub</li>
<li><a href="#">Stresser</li>
<li><a href="#">Friends</li>
<li><a href="#">Search</li>
<li><a href="#">Purchase</li>
</ul>
</div>
<div class="content">
Code [CSS] :
ul#nav li a {
color: #ccc;
display: block;
padding: 10px;
font-size: 0.8em;
border-bottom: 1px solid #0A0A0A;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s
}
You need to be a bit careful here. First, zero out the margin and padding for the parent ul element (which will also zero out the same for the li child elements).
You can then add the styling to the a elements as you need for your design.
#nav {
margin: 0;
padding: 0;
list-style: none;
}
#nav li {
border: 1px dotted blue;
}
#nav li a {
display: block;
padding: 10px;
border-bottom: 1px solid red;
background-color: beige;
)
<ul id="nav">
<li>Dashboard</li>
<li>Booter Hub</li>
<li>Stresser</li>
<li>Friends</li>
<li>Search</li>
<li>Purchase</li>
</ul>
You request is unclear but it sounds as though you are suggesting that adding the border increases the height of the elements.
To have the borders/padding be included in the overall element dimensions you can use the box-sizing:border-box css property.
The box-sizing property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.
Examples
box-sizing: content-box;
box-sizing: padding-box;
box-sizing: border-box;
box-sizing: inherit;
border-box
The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode. Note: Padding & border will be inside of the box e.g. IF .box {width: 350px}; THEN you apply {border: 10px solid black;} RESULT {rendered in the browser} .box {width: 350px;}
Box-sizing # MDN
First thing.. Close that a tag...
<li>Dashboard</li>
Once you have done that you will get the following result (I have removed the ul list-style, margin and padding, I am assuming you have done the same in other code not shared in the question)...
ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav li a {
border: 1px solid pink;
}
#nav li a {
text-decoration: none;
color: #ccc;
display: block;
padding: 10px;
font-size: 0.8em;
border-bottom: 1px solid #0A0A0A;
}
<div id="container">
<div class="sidebar">
<ul id="nav">
<li>Dashboard</li>
<li>Booter Hub</li>
<li>Stresser</li>
<li>Friends</li>
<li>Search</li>
<li>Purchase</li>
</ul>
</div>
<div class="content">
*remember to add text-decoration: none; to remove the default a tag underline.
Recently I have noticed that when you are styling menu item on:hover, some properties like text-shadow, color, background and and many others are applied to the menu item that is currently be hovered over.
However, it seems that the padding property is applied to all the menu items, not just the menu item being hovered over.
Here's an example: http://codepen.io/Bizzet/pen/LEvopq
.main-navigation a {
display: block;
text-decoration: none;
color: #fff;
font-size: 1.1em;
transition: 1s;
margin-bottom: -7px;
}
.main-navigation a:hover {
margin-bottom: 0;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
}
As you can see in Codepen, the text-shadow is applied to a single menu item while the padding is applied to all the elements.
What can I do to prevent this?
I only want one menu item to hover at once.
The padding is not being applied to all menu items. What's happening is that the height of the parent container is being expanded by the hover effect, and since the other menu items are top-aligned, they raise as well.
Try this:
.main-navigation a:hover {
...
margin-bottom: 0;
margin-top: -7px;
}
Demo
Problem
Your ul li a's have a negative margin-bottom initially.
When you hover over an a, though, you reset the margin-bottom to 0. This causes the box to grow in size and push the whole nav-bar upwards.
Insight
The padding is not being applied to all list items. One of the links in your nav boxes is pushing the whole navigation bar up, which gives the appearance of applying the padding to all list items.
Demo
Run this snippet for a demo. The menu-items are black.
header {
min-height: 10em;
background: rgba(0, 0, 0, 0.25);
position: relative;
}
h1 {
text-align: center;
}
.container {
background: green;
list-style: none;
position: absolute;
padding: 0;
margin: 0;
bottom: 0;
}
.container:after {
display: block;
content: '';
clear: both;
}
li {
float: left;
margin-right: 0.5em;
display: inline-block;
background: black;
position: relative;
}
span {
color: red;
margin-bottom: -0.75em;
display: block;
transition: all 3s;
}
span:hover {
margin-bottom: 0;
}
<header>
<h1>Title</h1>
<ul class="container">
<li class="item">
<span>Hello</span>
</li>
<li class="item">
<span>there</span>
</li>
<li class="item">
<span>friend</span>
</li>
</ul>
</header>
Solution
It should be noted that negative margins are usually not encouraged, unless you want element overlap. If it is necessary, it can be better to set a negative margin on 1 parent element than each individual child.
To hack this particular problem together, just replace this:
a:hover { margin: 0; }
with this:
a:hover { transform: translateY(-70%); }
Keep in mind that you might have to add -browser- prefixes to the transform rule. Browser support here
Ok this is simple thing. I firstly created a usual "Home" Button linking to the Home Page of the website, but the word "Home" looked too obvious. Hence I tried to insert an icon in place of that word, but its not fitting properly. I have tried some things in my css but its messing up the whole (used to create the navigation menu). The screenshot is attached. Please if someone can see whats wrong.
CSS:-
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
text-decoration:solid;
}
ul#menu li a
{
color: black;
background-color: #f5b45a;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
/*CSS3 properties*/
border-radius: 4px 4px 0 0;
}
HTML:-
<ul id="menu">
<li id="Home_Link"><img src="../../Image_Data/Home_Icon.ico" id="Home_Icon"/></li>
<li>MEN</li>
<li>WOMEN</li>
<li>KIDS</li>
<li>DESIGN!!</li>
With your current styles you will need to play around with the vertical-alignment and margins for the image, something like:
ul#menu li#Home_Link a img {
vertical-align: text-bottom;
margin-bottom: -5px;
}
As a side note, your use of ID's for elements is not recommended - use classes if needed. And reduce the specificity of your style declarations, e.g. .home-link img