Alright so the problem is this, when I hover over the li:a my entire div will drop down a bit and then come back once I finish hovering. Im just trying to set it so it will just show the border-bottom without dropping the entire div a bit down
<div id="header_left">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
and the css configuration is
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
border-bottom: 2px solid green;
}
just add a transparent border to the none hovered state of your element.
like this:
li a {
border-bottom: 2px solid transparent;
}
this will help getting rid of the bumpiness on hover.
If you are trying to get the individual menu item hovered on to show the border at the bottom then you might want to set an ID for each menu item and specify what it does in css on hover. As it is right you are targeting everything which is why the whole thing drops on hover. Its an easy fix, just needs a few more lines of code.
Always adds "box-sizing: border-box" to include borders and padding inside box model
Set default transparent border and change only the color on hover
* {
box-sizing: border-box;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-bottom: 2px solid transparent;
}
li a:hover {
border-color: green;
}
<div id="header_left">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
Related
Very new to coding, I'm having an issue. I want to turn my list that is used in my header into buttons. However, even though I set ul to list-style-type: none; the area where the bullet was seems to still be there, because when I go to make a button that area has the border applied to it.
If you need any more information please let me know!
ul {
display: flex;
list-style-type: none;
}
li {
padding: 30px;
border: 0.05em dotted #35b8b1;
margin: 1em;
/* text-decoration: none; */
}
.button {
border: 1px solid #ffffff;
border-radius: 50%;
padding: 10px;
}
<nav>
<ul>
<li><a class="button" href="#HTML">HTML</a></li>
<li><a class="button" href="#CSS">CSS</a></li>
<li><a class="button" href="#JS">JS</a></li>
</ul>
</nav>
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>
My drop down menu was working when I only had one navigation bar, but now that the tutoring pages of my business became sub pages in a website featuring all my businesses, I made the tutoring navigation bar a subnavbar, and at that point, my drop down menus stopped working. When I hover over "services," "contact me," and "resources," I should see a drop down menu, but I don't, so now there are several pages clients can not access. I do not get why they stopped working, and I have tried to research this, but I feel like I have done everything right...
CSS CODE
**/* 1st Navigation Bar */**
#nav {
width: 100%; /* Spans the width of the page */
height: 40px;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(94, 185, 176);
}
.navbar {
height: 40px;
margin: 0;
padding: 0;
border-right: 1px solid #54879d;
}
.navbar li {
height: 50px;
width: 155px;
float: right;
text-align: center;
list-style: none;
margin: 0;
background-color: rgb(94, 185, 176);
font: normal 200%/110% 'chocolatebox deco regular',sans-serif;
font-size: 16px;
}
.navbar a {
padding: 14px 0; /* Adds a padding on the top and bottom so the text appears centered vertically */
border-left: 1px solid #74e3d8; /* Creates a border in a slightly lighter shade of blue than the background. */
border-right: 1px solid #4d9a92; /* Creates a border in a slightly darker shade of blue than the background. */
text-decoration: none; /* Removes the default hyperlink styling. */
color: black;
display: block;
}
.navbar li a:hover {
background-color: #ffe643;
}
.navbar li.active {
background-color: #ffe643;
border-bottom: 5px dashed black;
text-decoration: underline;
}
**/* 2nd Nav bar */**
#subnav {
width: 100%; /* Spans the width of the page */
height: 40px;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ffe643;
}
.subnavbar {
height: 40px;
margin: 0;
padding: 0;
border-right: 1px solid #54879d;
}
.subnavbar li {
height: 50px;
width: 155px;
float: right;
text-align: center;
list-style: none;
margin: 0;
background-color: #ffe643;
font: normal 200%/110% 'chocolatebox deco regular',sans-serif;
font-size: 16px;
}
.subnavbar a {
padding: 14px 0; /* Adds a padding on the top and bottom so the text appears centered vertically */
border-left: 1px solid #fefefb; /* Creates a border in a slightly lighter shade of yellow than the background. */
border-right: 1px solid #fee121; /* Creates a border in a slightly darker shade of yellow than the background. */
text-decoration: none; /* Removes the default hyperlink styling. */
color: black;
display: block;
}
.subnavbar li:hover, a:hover {
background-color: #CFEAE7;
}
.subnavbar li.active {
background-color: #CFEAE7;
**/* Drop down menu */**
.subnavbar li ul {
display: none; /* Hides the drop-down menu */
z-index: 999;
height: 50px;
margin: 0; /* Aligns drop-down box underneath the menu item */
padding: 0; /* Aligns drop-down box underneath the menu item */
background-color: rgb(94, 185, 176);
}
.subnavbar li:hover ul {
display: block; /* Displays the drop-down box when the menu item is hovered over */
}
.subnavbar li ul li a {
border-left: 1px solid #74e3d8;
border-right: 1px solid #74e3d8;
border-top: 1px solid #4d9a92;
border-bottom: 1px solid #4d9a92;
}
.subnavbar li ul li a:hover{
background-color: #ffe643;
}
HTML CODE (This is the code for both nav bars)
<div id="nav">
<ul class="navbar">
<li>Content Writing</li>
<li>Editing</li>
<li>Video Courses</li>
<li class="active">Tutoring</li>
<li><a href=http://tutorwithkatie.org/Blog/blog-2>Blog</a></li>
<li>Home</li>
</ul>
<div id="subnav">
<ul class="subnavbar">
<li></li>
<li>Resources
<ul>
<li>English Resources</li>
<li>Math Resources</li>
<li>Study skills and organization Resources</li>
<li>Parent Resources</li>
</ul>
</li>
<li>Contact Me
<ul>
<li>Request Information</li>
<li>Schedule new client appoitnment</li>
<li>Contact Details</li>
</ul>
</li>
<li>Policies</li>
<li>Current Students
</li>
<li>Services
<ul>
<li>English Tutoring</li>
<li>Homeschool English</li>
<li>Math Tutoring</li>
<li>Online Tutoring</li>
</ul>
</li>
</ul>
<div>
So I have display: none; to hide it and then display: block; to show it on hover, but it no longer displays it on hover. It used to and then the moment I added the first nav bar and called this class .subnavbar, it stopped working....
The reason it isn't working is because you have a lot of issues:
Extra * in your code that are causing CSS issues and are messing up with you CSS. Take all the comment lines out that look like this:
**/* Drop down menu */**
and replace them with a valid comment like this:
/* Drop down menu */
There also is a missing closing } on this CSS rule
.subnavbar li.active {
background-color: #CFEAE7;
and also change this line on the #subnav from overflow: hidden; to overflow: visible; to display the SubNav when you hover over it.
#subnav {
width: 100%; /* Spans the width of the page */
height: 40px;
margin: 0;
padding: 0;
overflow: visible;
background-color: #ffe643;
}
Also a missing closing </div> tag in the HTML for <div id="nav"> and also you have a <div> instead of a closing </div> at the end of the <div id="subnav">.
Here is a working JSFIDDLE for reference where it is working. Hope that clears things up.
I must create a navigation bar exactly how it's shown in the picture below. I was trying to for a whole day. You can see the only code I could write below. The problem is that I used a method from here: Separators For Navigation, but I don't know how to put links and borders to make it look like in the picture. The orange line under the navigation bar doesn't belong to it.
I have a PSD Photoshop file from which I can extract elements of the navigation bar. That's the source of the nav_border.png.
target navigation bar image
my result
My HTML code:
<div id="navbar">
<ul>
<li>First time at auction ?</li>
<li>Next auctions</li>
<li>Rules</li>
<li>Terms of use</li>
<li>FAQ</li>
<li>Contacts</li>
<li></li>
</ul>
</div>
My CSS code (so far):
#navbar {
float: left;
width: 776px;
height: 40px;
border-radius: 8px 8px 0 0;
background-color: #003366;
}
#navbar ul {
list-style-type: none;
}
#navbar li {
float: left;
}
#navbar a {
color: white;
text-decoration: none;
}
#navbar li + li{
background:url('nav_border.png') no-repeat top left;
padding-left: 10px;
margin-left: 30px;
}
Here's a fiddle that should get you headed in the right direction
https://jsfiddle.net/fx6gtj6o/
#navbar {
background: blue;
border-radius: 8px 8px 0 0;
ul {
list-item-type: none;
padding: 0;
li {
display: inline-block;
text-align: center;
padding: 10px 10px;
border-right: 1px solid black;
a {
color: #FFF;
}
}
}
}
No reason to use any of the images from the actual mockup, you can get everything done with CSS
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;
}