I'm attempting to create a navigation menu that shows a border when an item is hovered over. While it currently looks fine, the other menu items are pushed out of the way when one item is hovered over. How would I go about making them stay put?
I've tried a few methods that were answered here but none of them have worked.
I've included a fiddle below.
nav {
float: left;
width: 100%;
}
ul {
float: left;
list-style:none;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
ul li {
display: block;
float: left;
list-style: none;
position: relative;
right: 50%;
margin: 0px 0px 0px 1px;
padding: 5px 40px;
color: white;
line-height: 1.3em;
}
li a:hover {
border: solid 1px black;
padding: 5px 10px;
}
a {
color: black;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
}
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>MUSIC</li>
<li>STORE</li>
<li>LIVE</li>
<li>CONTACT</li>
</ul>
</nav>
View on JSFiddle
Because you are adding padding on hover. Move the padding from hover to anchor.
li a:hover {
border: solid 1px black;
}
a {
color: black;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
border: solid 1px transparent;
padding: 5px 10px;
}
Here is the fiddle.
Move the padding property from 'li a: hover' to 'a'.
a {
color: black;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
padding: 5px 10px;
}
Related
I want to know how to put a logo in my css navbar because I don't know how to put a logo in my css navbar. I have no clue on how to put the logo in the css navbar so it would be very nice if one of yall can help me out.
body {
margin: 0px;
}
ul {
list-style-type: none;
overflow: hidden;
margin: 0px auto;
background: #222;
padding: 0px;
}
li {
float: right;
font-size: 20px;
}
li a {
text-decoration: none;
color: white;
padding: 20px 20px;
display: block;
text-align: center;
}
ul li a:hover {
border-bottom: 3px solid grey;
padding-bottom: 17px;
}
img {
height: 70px;
}
<img src="https://oyster.ignimgs.com/mediawiki/apis.ign.com/minecraft/a/ad/Bat.png?width=325">
<ul>
<li>Contact</li>
<li>About</li>
<li>Home</li>
</ul>
The first thing you need to do is to create a columnar structure and have the background on the parent. And then add the logo to the left and links to the right. The best way to do is to use the <header> and <nav> tags as they are really semantic.
Here's something you might find useful:
body {
margin: 0px;
}
/* Add these */
header {
overflow: hidden;
background: #666;
}
header h1 {
float: left;
padding: 0 20px;
}
header nav {
float: right;
padding: 20px 0 0;
}
/* End Add these */
ul {
list-style-type: none;
overflow: hidden;
margin: 0px auto;
padding: 0px;
}
li {
float: left; /* Changed here. */
font-size: 20px;
}
li a {
text-decoration: none;
color: white;
padding: 20px 20px;
display: block;
text-align: center;
}
ul li a:hover {
border-bottom: 3px solid grey;
padding-bottom: 17px;
}
img {
height: 70px;
}
<header>
<h1>
<img src="https://oyster.ignimgs.com/mediawiki/apis.ign.com/minecraft/a/ad/Bat.png?width=325" />
</h1>
<nav>
<ul>
<li>Contact</li>
<li>About</li>
<li>Home</li>
</ul>
</nav>
</header>
Also, I just changed the background colour from #222 to #666 to keep it websafe and also make the logo visible. Feel free to change it.
Preview
Here is a fiddle that I hope will help you get you on the right track;
https://jsfiddle.net/Lyrw49mj/7/
HTML
<ul>
<li class="NavHeader"><a><img src="https://oyster.ignimgs.com/mediawiki/apis.ign.com/minecraft/a/ad/Bat.png?width=325"></a></li>
<li>Contact</li>
<li>About</li>
<li>Home</li>
</ul>
CSS
body {
margin: 0px;
}
ul {
list-style-type: none;
overflow: hidden;
margin: 0px auto;
background: #222;
padding: 0px;
}
li {
float: right;
font-size: 20px;
}
li a {
text-decoration: none;
color: white;
padding: 20px 20px;
display: block;
text-align: center;
}
ul li a:hover {
border-bottom: 3px solid grey;
padding-bottom: 17px;
}
.NavHeader a img{
position: relative;
top: 0px;
left: 0px;
height: 70px;
width: auto;
}
.NavHeader a:hover{
border-bottom: none;
padding-bottom: 20px;
}
Right now I am stuck with this ribbon bookmark. I don't know how to make a navigation bar where ribbon is like in those two pictures:
Normal
On mouseover
How ribbon looks when page is active.
How ribbon looks when you slide cursor on selected menu. it should slide out.
nav[role="top"] {
width:60%;
float:right;
}
nav[role="top"] li {
float:right;
}
nav[role="top"] ul {
list-style-type: none;
margin: 10px;
padding: 0;
overflow: hidden;
}
nav[role="top"] li a {
color: #b3b3b2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
width:50px;
font-size:11px;
font-family: 'Pontano Sans', sans-serif;
font-weight:600;
}
nav[role="top"] li:hover {
width: 0;
height: 30px;
border-right: 35px solid #103252;
border-left: 35px solid #103252;
border-bottom: 12px solid transparent;
}
<nav role="top">
<ul>
<div class="ribbon">
<li>home</li>
<li>news </li>
<li>blog</li>
<li>photos</li>
</div>
</ul>
</nav>
Here is my solution for this:
nav[role="top"] ul {
list-style-type: none;
float: right;
}
nav[role="top"] li {
display: inline-block;
position: relative;
float: right;
}
nav[role="top"] a {
display: block;
color: #b3b3b2;
text-align: center;
padding: 14px 0;
text-decoration: none;
width: 70px;
font-size: 11px;
font-family: 'Pontano Sans', sans-serif;
font-weight: 600;
background-color: #103252;
}
nav[role="top"] a::after {
content: '';
display: block;
position: absolute;
width: 0;
height: 20px;
border-right: 35px solid #103252;
border-left: 35px solid #103252;
border-bottom: 12px solid transparent;
}
nav[role="top"] a:hover::after {
height: 30px;
}
<nav role="top">
<ul>
<div class="ribbon">
<li>home</li>
<li>news </li>
<li>blog</li>
<li>photos</li>
</div>
</ul>
</nav>
Please be aware that element div is not allowed as child of element ul. It's not valid.
My problem is that I want to have spacing between the navigation links. I have searched over the internet but all I get are reducing the space.
To be specific, I want to have spacing in between each navigation link that are bordered with a black border.
These are my codes for the navigation bar. I would really appreciate some help. thank you.
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 200px;
background-color: #fff;
border: 5px solid #000;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li {
text-align: center;
border-bottom: 5px solid #000;
}
li:last-child {
border-bottom: none;
}
li a:hover {
background-color: #555;
color: white;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Here it is:
<style>
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 200px;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
border: 5px solid #000;
background-color: #fff;
}
li {
text-align: center;
margin-bottom:10px;
}
li:last-child {
margin-bottom:0;
}
li a:hover {
background-color: #555;
color: white;
}
</style>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Demo: https://jsfiddle.net/4fLbx4xa/
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<style>
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 200px;
background-color: #fff;
}
li{
width:100%;
display: block;
margin-top:10px; //this is the height you want
border: 5px solid #000;
color: #000;
background:#000;
padding:10px 0;
}
li a {
text-align: center;
padding: 8px 16px;
text-decoration: none;
color:#fff;
}
li:first-child {
margin-top:0;
}
li:hover {
background-color: #555;
color: white;
}
</style>
You need to use margin to add the white space, but the borders needed a little tweaking, see comments below
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 200px;
background-color: #fff;
/*border: 5px solid #000; moved to LI element*/
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
margin-bottom:10px; /*add some margin to create the white space*/
border: 5px solid #000; /*add the border to each LI element rather than UL*/
}
li {
text-align: center;
/*border-bottom: 5px solid #000; remove this bottom border as handled in LI css*/
}
Not sure what you want to achieve but i understood a line between the links, this might help you also if you want it below the links..
ul {
list-style-type: none;
position: fixed;
margin-top: 50px;
padding: 0;
width: 400px;
background-color: #fff;
border: 5px solid #000;}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;}
li {
text-align: center;
float: left;
border-right:solid 1px black;
}
li a:hover {
background-color: #555;
color: white;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
I am trying to figure out how to remove the last black section of my secondary nav.
I want the "wishlist" link to be the last thing there, not have the border and then more black space afterwards basically. I'm just not sure how to do this.
my html:
<title>LOST Collector</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<!--Header-->
<header>
<a href="http://www.lostcollector.com">
<img src="images/logo.png" alt="Lost Collector" title="Lost Collector"/>
</a>
<!--Primary navigation-->
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</nav>
</header>
<!-- Secondary Navigation -->
<ul id="navigation_layout">
<li>Artwork</li>
<li>Autographs</li>
<li>Books/Magazines</li>
<li>Clothing</li>
<li>Dvds and Cds</li>
<li>Film Crew</li>
<li>Original Props</li>
<li>Special Events</li>
<li>Toys and games</li>
<li>Trading cards</li>
<li>Everything else</li>
<li>Wish list</li>
</ul>
my css:
body {
width: 1200px;
height: 130px;
margin: 0 auto;
background-color: #ffffff;
color: #111111;
font-family: "Georgia", "Times New Roman", serif;
font-size: 90%;
}
header a {
float:left;
display:inline-block;
}
header a img {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right:10px;
display: inline;
height: 112px;
width:; 113px;
}
nav {
display: inline;
float: right;
}
nav ul {
list-style: none;
display: inline;
}
nav ul li {
display: inline-block;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #000000;
margin-right: 50px;
padding: 40px 30px;
padding: right 10px;
}
nav li a {
display: inline-block;
padding: 4px 3px;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #000000;
}
nav li a:hover {
color: #ff0000;
background-color: #ffffff;
}
/*secondary navigation*/
#navigation_layout {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #000000;
border-bottom: 1px solid #ffffff;
border-top: 1px solid #ffffff;
}
#navigation_layout li {
float: left;
}
#navigation_layout li a {
display: block;
padding: 4px 3px;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #ffffff;
border-right: 2px solid #ffffff;
}
#navigation_layout li a:hover {
color: #ff0000;
background-color: #fff;
}
I have put it into a jsfiddle here, so it is clearer what I am trying to do.
https://jsfiddle.net/thzfm0fe/1/
Apply the background color to your list items <li> and not the <ul>.
Remove background-color from here:
#navigation_layout {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
/* background-color: #000000; */
border-bottom: 1px solid #ffffff;
border-top: 1px solid #ffffff;
}
And add to here:
#navigation_layout li {
float: left;
background-color: black;
}
https://jsfiddle.net/thzfm0fe/3/
A <ul> by default is a block level element and will fill up the full width of the parent element. Your list items <li> did not fill up the full width of the parent but your <ul> did, hence the extra black after your list items.
By applying the background color to the <li> you don't need to add white border to your anchors anymore. You could apply a margin instead.
I've set up the following CSS. Everything looks fine except for one thing. When I roll over the links in the nav, the entire "button" is filled with the background color, whereas when I rollover the links in the footer, only the the are behind the text is filled. How do I resolve this so that the entire "button" is filled in the footer, preferably without resort to classes and images (meaning, leverage HTML5/CSS3 as much as possible)?
i've looked at this via multiple web browsers. i am guessing it is because the list items are displayed inline, but i don't know the solution.
--- CSS ---
#CHARSET "UTF-8";
* {
margin: 0;
padding: 0;
}
html * {
margin: 0;
/*padding: 0; SELECT NOT DISPLAYED CORRECTLY IN FIREFOX */
}
/* GENERAL */
body {
background: #fff;
color: #333;
font-family: verdana, "MS Trebuchet", arial, helvetica, sans-serif;
font-size: 62.5%;
margin: 0 auto;
width: 960px;
}
header {
background-color: #999;
border: 1px solid #999;
border-radius: 25px;
margin-top: .5em;
}
header h1 {
color: #fff;
font-weight: bold;
font-size: 2.4em;
margin: .8em 0 .3em 0;
text-align: center;
}
nav {
margin: 1em 30em;
padding: .8em 1.2em;
}
nav ul {
padding-left: 1.5em;
list-style: none;
}
nav ul li {
}
nav ul a {
display: block;
text-decoration: none;
}
nav ul li a {
background-color: #FFF;
border: 1px solid #999;
border-radius: 25px;
color: #222;
display: block;
font-size: 1.2em;
font-weight: bold;
margin-top: 5px;
margin-bottom: 5px;
padding: 12px 10px;
text-align: center;
text-decoration: none;
}
nav ul a:hover {
color: #333;
background: #ccc;
}
nav#baseball {
display: none;
}
nav#football {
display: none;
}
footer {
border-top: 1px solid #ccc;
margin-top: .5em;
margin-bottom: 1em;
padding: .8em 1.2em;
}
footer ul {
list-style: none;
text-align: center;
}
footer ul li {
border: 1px solid #999;
border-radius: 25px;
display: inline;
margin: 0.0em 1.0em 0.0em 1.0em;
padding: 0em 1.5em 0 1.5em;
}
footer ul a {
/* display: block; */
text-decoration: none;
}
footer ul li a {
color: #222;
}
footer ul a:hover {
color: #333;
background: #ccc;
}
--- HTML ---
<header>
<h1>Sports Fan</h1>
</header>
<nav id='sports'>
<ul>
<li>Baseball
</li>
<li>Basketball
</li>
<li>Football
</li>
<li>Hockey
</li>
<li>Soccer
</li>
</ul>
</nav>
<nav id='baseball'>
<ul>
<li>Homerun
</li>
<li>Big Hit
</li>
<li>Double Play
</li>
<li>Bad Call
</li>
</ul>
</nav>
<nav id='football'>
<ul>
<li>Touchdown
</li>
<li>Big Play
</li>
<li>Sack
</li>
<li>Interception
</li>
<li>Bad Call
</li>
</ul>
</nav>
<footer>
<ul>
<li>Choose
</li>
<li>Manage
</li>
<li>About
</li>
</ul>
</footer>
Placed updated code in a jsFiddle
CSS changes:
footer li{ display:inline }
footer ul a{
border: 1px solid #999;
border-radius: 25px;
display: inline-block;
margin: 0.0em 1.0em 0.0em 1.0em;
padding: 0em 1.5em 0 1.5em;
text-decoration: none;
color: #222;
}