Border-bottom issue (expanding downwards on hover) - html

I'm working on a navigation, and I can't seem to figure out how to make the bottom border increase in size upwards, instead of expanding downwards (which in turn extends my header a few pixels), I could fix the extending header with setting a height, but the the border will still extend downwards instead of upwards.
The CSS:
header {
margin: 0;
padding: 0;
left: 0;
top: 0;
width: 100%;
position: absolute;
background: #000000;
}
ul {
list-style-type: none;
display: block;
margin: 0 0 0 20px;
padding: 0;
}
ul li {
display: inline-block;
padding: 0;
}
ul li a{
display: block;
border-bottom: 1px solid #fff;
font-size: 19px;
}
ul li a:hover{
border-bottom: 2px solid #fff;
background: #333;
font-size: 19px;
}
The HTML:
<header>
<ul id="nav">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
</ul>
</header>
The JSFiddle:
http://jsfiddle.net/Artsen/EZWvF/

So you want to increase the border-bottom to the top, right?
I've actually had to do this for a website recently. There is no other way than to set specific padding, and border properties.
I edited your jsfiddle here: http://jsfiddle.net/EZWvF/2/ (changed some properties to make the test case more visible)
The principle is: Swap the pixel values from padding-bottom and border-bottom on hover.
These are the key lines to your solution:
ul li a {
border-bottom: 1px solid white;
padding-bottom: 5px;
}
ul li a:hover {
border-bottom: 5px solid white;
padding-bottom: 1px;
}
Note: This only works if you don't add a css-transition. If you unquote the css-transition I put in the fiddle, you'll see that the div still expands to the bottom. If you want a ss-transition you'll need to add a separate div to the li's to mimic a border.

As Tyblitz suggested using extra padding value on :hover works great when you don't need a transition.
If you need transition and don't want to introduce an extra div you can do it using the line-height/height approach for controlling the vertical height.
so instead of doing this:
.nav-element a {
color: gray;
padding: 25px 15px;
transition: all ease-in-out 0.2s;
display: block;
text-decoration: none;
}
do this:
.nav-element a {
color: gray;
padding: 0 15px;
line-height: 70px;
height: 70px;
transition: all ease-in-out 0.2s;
display: block;
text-decoration: none;
}
See example where it doesn't work here
and does work (using the line-height/height) here

Related

How can I make individual items on the nav bar stretch?

In my navagation bar, I want only hovered on elements to stretch out and change color, but it seems the whole navagation bar stretches. I've tried changing what must be hovered on to trigger the animation, but nothing seems to be working. Can you identify and correct my error?
#keyframes mouse {
0% {
background-color: #35B1C2;
height: 40px
}
100% {
background-color: #2F9EBD;
height: 60px
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #35B1C2;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li:hover {
animation-fill-mode: forwards;
animation-duration: 0.5s;
animation-name: mouse;
}
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
<ul>
<li>Home</li>
<li>About Me</li>
<li>Projects</li>
</ul>
You can remove the overflow:hidden and add
overflow:visible;
height:45px; /* The height of your navbar */
to your ul element.
Try this:
ul, li a:hover {
font-size: 30px;
color: red;
}
There is actually no error in your code. What happens is that the ul box contains the li boxes. So, when you hover on a li box and the li box's height increases from 40px to 60px, the ul box that is containing that box also stretches out because it needs to contain the li box.
So, you just need to work around that issue. I'd suggest not using the ul box at all, but that's just something I think is more efficient because you realize you don't actually really need it (you'd still need to contain the navigation bar inside of a box, maybe a div or header).
You have not set a nav bar heigh. So when the li height change on hover, the navbar will adjust its height to fit the content. Instead of going with animation, I would do this with a simple transition. Add a min-height to the navbar and apply a transition property to the ul tag. Also apply an overflow:visible on hover
See snippet below
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #35B1C2;
min-height: 50px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li :hover {
background-color: #2F9EBD;
height: 60px;
transition: all 1s;
}
ul:hover {
overflow: visible;
}
li {
border-right: 1px solid #bbb;
transition: all 1s;
}
li:last-child {
border-right: none;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Projects</li>
</ul>
</body>
</html>

How can I have, in CSS, a double background color and the text centered in the second background color element?

I'd like to do something like this image:
ul menu li tags
Should I use a double tag for every element?
For example:
<ul class="menu">
<div class="outside"><li class="inside">Firefox</li></div>
<div class="outside"><li class="inside">Chrome</li></div>
<div class="outside"><li class="inside">Opera</li></div>
</ul>
Or maybe a double li tag?
I have tried in CSS the linear-gradient property, but with just one tag, and as I want to get the same result like in the image, it seems to me that there has to be two different tags with different background colors and the one with the black color just has to have a higher z-index property.
I'm quite new and a bit bad at design and styling, so I just can thank you so much in advance for your help!
You can use the pseudo element ::before to create the left colored side
Note, the div's you used is invalid as a direct child of an ul, so I removed them
ul.menu {
display: flex;
list-style: none;
padding: 0;
}
ul.menu li {
margin: 0 5px;
}
ul.menu a {
position: relative;
display: inline-block;
width: 120px;
background: black;
color: white;
padding: 4px 0 4px 10px;
text-decoration: none;
text-align: center;
}
ul.menu a::before {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
background: gray;
width: 10px;
}
<ul class="menu">
<li>Firefox</li>
<li>Chrome</li>
<li>Opera</li>
</ul>
Or a left border
ul.menu {
display: flex;
list-style: none;
padding: 0;
}
ul.menu li {
margin: 0 5px;
}
ul.menu a {
position: relative;
display: inline-block;
width: 120px;
background: black;
color: white;
padding: 4px 0;
text-decoration: none;
text-align: center;
border-left: 10px solid gray;
}
<ul class="menu">
<li>Firefox</li>
<li>Chrome</li>
<li>Opera</li>
</ul>
You can use linear-gradient, just place both values of the gradient to be at the same point (ex: gray 10%, black 10%) so they split the background at that point.
Side Note: You should also remove the outter divs around your li tags, because they are not valid inside ul element.
ul.menu {
list-style: none;
display: flex;
}
ul.menu li.inside {
background: linear-gradient(to right, gray 10%, black 10%);
margin-left: 5px;
padding: 5px 5px 5px 20px;
width: 120px;
display: block;
box-sizing: border-box;
}
li a {
color: white;
}
<ul class="menu">
<li class="inside">Firefox</li>
<li class="inside">Chrome</li>
<li class="inside">Opera</li>
</ul>

How to fix animation problems css3

I made an effect for my search input, when it's focused its spreads to 100% width with nice smooth transition, but he also push other li elements and they don't have nice 'animation'. They just 'jump' away from search input.
My html:
<div class="navigation">
<div class="col-lg-6 col-xs-12">
<ul>
<li>Home</li>
<li>About</li>
<li><input type="search" name="search" placeholder="Search..."></li>
</ul>
</div>
</div>
My CSS:
.navigation {
text-align: right
}
.navigation ul {
list-style: none;
margin-top: 22px;
}
.navigation li {
display: inline-block;
font-size: 20px;
padding-right: 12px;
}
.navigation li a {
color: #d3d5d7;
text-decoration: none;
transition: color 1s;
}
.navigation li a:hover {
color: #2980b9;
}
input[type=search] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('../images/searchicon.png');
background-position: 10px 14px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.6s;
transition: width 0.6s;
}
input[type=search]:focus {
width: 100%;
}
Any suggestions how to fix this?
Also i made codepan: codepan.io
This is because it is inside an <li>, which is generally not where you want your <input> to be. You can place it outside of the <ul> and float it, or position it in a different way. This way it will push the content correctly.
I set up a quick fiddle for you here, it's a bit crude, but it shows what it is supposed to show. https://jsfiddle.net/176hxsuj/
If you do however want it in the <li>, animate the <li> instead of the <input>.

Override a border without moving it

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;
}

How can I make box-shadow work with margins added?

When I put in a margin it adds 5px to the right as I expect it too, but it creates problems with my box-shadow. I want the box-shadow to be able to cover that space (white space) created by the margins. Is there a work around for that? Obviously if you don't have any margins the box-shadow looks fantastic.
Here is my CSS
#horizontalNav{
margin: 0;
padding: 0;
}
#horizontalNav ul{
margin: 0;
padding: 0;
box-shadow: 5px 5px 10px #888888;
}
#horizontalNav ul li{
margin-right: 5px; /* Make this margin a 0 to see what it looks like without margin added */
padding: 0;
list-style: none;
position: relative;
float: left;
background: linear-gradient(to bottom right, rgba(181,147,38,0.1), rgba(181,125,22,1));
}
#horizontalNav ul li a{
text-align: center;
width: 150px;
height: 30px;
display: block;
color: white;
border: 1px solid black;
text-decoration: none;
text-shadow: 1px 1px 1px black;
}
#horizontalNav ul ul{
position: absolute;
visibility: hidden;
top: 32px;
}
#horizontalNav ul li:hover ul{
visibility: visible;
}
#horizontalNav ul li:hover{
background: linear-gradient(to bottom right, rgba(167,120,38,0.1), rgba(167,136,42,1));
}
#horizontalNav ul li:hover ul li a:hover{
background: linear-gradient(to bottom right, rgba(180,105,45,0.1), rgba(180,135,15,1));
}
#horizontalNav ul li a:hover{
color: black;
}
#horizontalNav ul li ul li a:hover{
color: #120801;
}
Here is my HTML
<div id="wrapper">
<div id="horizontalNav">
<ul>
<li>Home
<ul>
<li>Home Sub 1</li>
<li>Home Sub 1</li>
<li>Home Sub 1</li>
<li>Home Sub 1</li>
<li>Home Sub 1</li>
</ul>
</li>
</ul>
</div>
</div>
If you don't want the box shadow on the ul, then try putting the box-shadow on another element. The actual link seems to achieve what you want, but then grabs the top level link, so you might need to target even more specifically.
#horizontalNav ul ul a {
box-shadow: 5px 5px 10px #888888;
}
Actually... that's not the best element to add it too. Here is a stripped down fiddle with a complete answer. I also urge you to see how giving the right elements classes, (the fist ul) it makes things much more readable.
jsFiddle
why you are adding margin-right to 5px it seems worthless. For space you should add padding-right to 5px;