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.
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;
}
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;
}
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.
I am making a simple menu and I have a problem.
In my menu, there are several different options with a lightgrey top border. When you hover over the links i have there backgrounds turn lightgrey as well but there is still a small line above each link where they lightgrey background color does not cover.
See the picture below:
I do not want that line to be there. I have tried using padding but to no effect.
#wrapper {
width: 500px;
border-top: lightgrey 3px solid;
}
li a {
color: white;
font-size: 20px;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
height: 40px;
padding-left: 10px;
padding-right: 10px;
}
li a:hover {
color: black;
background: lightgrey;
}
ul {
display: inline;
list-style: none;
}
li {
display: inline;
}
nav {
height: 40px;
width: 100%;
background-color: darkgreen;
text-align: right;
}
<div id="wrapper">
<nav>
<ul>
<li>Home
</li>
<li>News
</li>
<li>Articles
</li>
<li>Forum
</li>
<li>Contact
</li>
<li>About
</li>
</ul>
</nav>
</div>
<div id="wrapper">
<nav>
<ul>
<li>Home</li>
<li>News</li>
<li>Articles</li>
<li>Forum</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</div>
css
#wrapper{
width: auto;
margin-right:25%;
margin-left:25%;
}
nav{
display: table;
background-color:darkgreen;
border-top:lightgrey 3px solid;
}
ul{
padding: 0;
margin:10px 0 0 0;
}
li{
list-style: none;
float: left;
}
a{
text-decoration: none;
color: white;
font-size:20px;
background-color: darkgreen;
padding: 10px;
}
a:hover{
text-decoration: none;
color: black;
font-size:20px;
background:lightgrey;
}
I decided just to float the <li>'s, instead of using inline-block or using a table layout:
li {
float: left;
}
li a {
font-size: 20px;
text-decoration: none;
padding: 0 10px;
height: 40px;
line-height: 40px;
display: block;
color: white;
}
Updated JSfiddle
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;
}