How to remove or edit surrounding white space? - html

How can I remove all the white spaces in the surrounding or edit it? I mean how to make the white spaces less thicker? ____________________________________________________________________________________________________________________________________________________________________________________________________________________
*,
*:after,
*:before {
padding: 0;
margin: 0;
font-family: Arial;
}
ul {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
list-style: none;
width: 955px;
height: 450px;
border-radius: 3px;
overflow: hidden;
box-shadow: 1px 1px 3px 1px;
}
li {
position: relative;
width: 190px;
height: 450px;
float: left;
border-left: 1px solid white;
-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
transition: all 0.7s;
box-shadow: -2px 0 10px 2px;
border-color: rgb(0, 0, 0);
}
ul li:first-child {
border: none;
}
span {
display: block;
position: absolute;
bottom: 0;
width: 50%;
color: white;
white-space: nowrap;
padding: 20px;
background: -moz-linear-gradient(
left,
rgba(0, 0, 0, 0.65) 0%,
rgba(0, 0, 0, 0) 100%
); /* FF3.6+ */
background: -webkit-gradient(
linear,
left top,
right top,
color-stop(0%, rgba(0, 0, 0, 0.65)),
color-stop(100%, rgba(0, 0, 0, 0))
); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(
left,
rgba(0, 0, 0, 0.65) 0%,
rgba(0, 0, 0, 0) 100%
); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(
left,
rgba(0, 0, 0, 0.65) 0%,
rgba(0, 0, 0, 0) 100%
); /* Opera 11.10+ */
background: -ms-linear-gradient(
left,
rgba(0, 0, 0, 0.65) 0%,
rgba(0, 0, 0, 0) 100%
); /* IE10+ */
background: linear-gradient(
to right,
rgba(0, 0, 0, 0.65) 0%,
rgba(0, 0, 0, 0) 100%
); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
}
img {
width: 800px;
height: 450px;
}
ul:hover li {
width: 50px;
cursor: pointer;
}
ul li:hover {
width: 750px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Currency Notes</title>
</head>
<body>
<div class="country-flags">
<ul>
<li>
<span>MYR</span>
<img src='images/malay.png' /></li>
<li>
<span>RMB</span>
<img src='images/china-flag-medium.jpg' /></li>
<li>
<span>USD</span>
<img src='images/united-states-of-america-flag-medium.jpg' /></li>
<li>
<span>SGD</span>
<img src='images/singapore-flag-medium.jpg' />
</li>
<li>
<span>HKD</span>
<img src='images/new HK.jpg' />
</li>
</ul>
</div>
</body>
</html>


Can you please try this:
body {
padding: 100px;
}
ul {
position: absolute;
display: flex;
align-content: center;
justify-content: center;
list-style: none;
width: 100%;
height: 100%;
border-radius: 3px;
overflow: hidden;
box-shadow: 1px 1px 3px 1px;
}
li {
position: relative;
width: 190px;
height: 75%;
float: left;
border-left: 1px solid white;
-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
transition: all 0.7s;
box-shadow: -2px 0 10px 2px;
border-color: rgb(0, 0, 0);
}

Related

Dropdown Menu Element Not Displaying

I'm making a website that uses a group of images as a menu.
I was able to get one side to properly display the dropdown (slideout, in this case) menus. But even though both sides are identical, the other one does not display the menu on mouseOver.
I looked through the code for the last hour, and just can't find what is wrong.
Here is the jsFiddle.
Thanks :)
* {
box-sizing: border-box;
}
h1 {
font-size: 50px;
color: aliceblue
}
.topbar{
margin-top: 0px;
padding: 1px;
background-color:#605E5E;
border-bottom-style:inset;
border-bottom-color: #888888;
}
.touch-menu{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#eda954+0,e5933b+29,e59f54+56,e89230+79,e89230+91,e89230+100 */
background: rgb(237,169,84); /* Old browsers */
background: -moz-linear-gradient(top, rgba(237,169,84,1) 0%, rgba(229,147,59,1) 29%, rgba(229,159,84,1) 56%, rgba(232,146,48,1) 79%, rgba(232,146,48,1) 91%, rgba(232,146,48,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(237,169,84,1) 0%,rgba(229,147,59,1) 29%,rgba(229,159,84,1) 56%,rgba(232,146,48,1) 79%,rgba(232,146,48,1) 91%,rgba(232,146,48,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(237,169,84,1) 0%,rgba(229,147,59,1) 29%,rgba(229,159,84,1) 56%,rgba(232,146,48,1) 79%,rgba(232,146,48,1) 91%,rgba(232,146,48,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eda954', endColorstr='#e89230',GradientType=0 ); /* IE6-9 */
display: flex;
padding: 10px;
}
ul {
text-align: center;
list-style-type: none;
margin: 10px;
vertical-align: middle;
}
.slideout-content-top-left, .slideout-content-bottom-left {
display: none;
height: 95%;
margin: 10px 0px 10px 0px;
min-width: 16px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
background-color: #736E6F;
z-index: 1;
}
.slideout-content-top-right, .slideout-content-bottom-right {
display: none;
height: 95%;
margin: 10px 10px 10px 0px;
background-color: #736E6F;
min-width: 16px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
vertical-align: middle;
}
.menu-top-right :hover + .slideout-content-top-right , .menu-bottom-right :hover + .slideout-content-bottom-right {
display: inline-block;
}
.slideout-content-bottom-right:hover , .slideout-content-top-right:hover {
display: inline-block;
}
.menu-top-left :hover + .slideout-content-top-left , .menu-bottom-left :hover + .slideout-content-bottom-left {
display: inline-block;
}
.slideout-content-bottom-left:hover , .slideout-content-bottom-left:hover {
display: inline-block;
}
.touch-menu img:hover {
filter: brightness(1.25);
}
.column {
flex: 50%;
display: flex;
flex-direction: column;
vertical-align: middle;
}
.menu-top-left , .menu-bottom-left , .menu-bottom-right, .menu-top-right {
flex: 50%;
height: 100%;
}
.menu-bottom-left img, .menu-top-left img{
width: 50%;
height: 95%;
float: right;
margin: 10px 10px 10px 0px;
}
.menu-bottom-right img , .menu-top-right img {
width: 50%;
height: 95%;
float: left;
margin: 10px 0px 10px 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Heter Iska</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="images/favicon.png">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/styles.css">
<style>
body {font-family: "Lato", sans-serif}
</style>
</head>
<body>
<header>
<div class="topbar" align="center">
<h1>Links of Links</h1>
</div>
</header>
<div class="touch-menu" align="center">
<div class="column slideout-left" align="right">
<div class="menu-top-left" >
<div class="slideout-content-top-left" id="top-left">
<ul>
<li>
scaleLink 1
</li>
<li>
scaleLink 2
</li>
<li>
scaleLink 3
</li>
</ul>
</div>
<img class="slideout" src="https://avatarfiles.alphacoders.com/105/thumb-105223.jpg" alt="scale">
</div>
<div class="menu-bottom-left" >
<div class="slideout-content-bottom-left" id="bottom-left">
<ul>
<li>
bookLink 1
</li>
<li>
bookLink 2
</li>
<li>
bookLink 3
</li>
</ul>
</div>
<img class="slideout " src="https://avatarfiles.alphacoders.com/105/thumb-105223.jpg" alt="Book" >
</div>
</div>
<div class="column slideout-right" align="left">
<div class= "menu-top-right">
<img class="slideout " src="https://avatarfiles.alphacoders.com/105/thumb-105223.jpg" alt="topGavel">
<div class="slideout-content-top-right" id="top-right" >
<ul class="slidelist">
<li>
ugavelLink 1
</li>
<li>
ugavelLink 2
</li>
<li>
ugavelLink 3
</li>
</ul>
</div>
</div>
<div class="menu-bottom-right">
<img class="slideout" src="https://avatarfiles.alphacoders.com/105/thumb-105223.jpg" alt="bottomGavel">
<div class="slideout-content-bottom-right" id="bottom-right">
<ul>
<li>
lgavelLink 1
</li>
<li>
lgavelLink 2
</li>
<li>
lgavelLink 3
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="w3-container w3-padding-2 w3-center w3-opacity w3-dark-grey w3-xlarge">
<p class="w3-medium">Powered by Barack Obama</p>
</footer>
<script>
function expandTab(n) {
document.getElemen
}
</script>
</body>
</html>

Your css is wrong. You are using + instead >
* {
box-sizing: border-box;
}
h1 {
font-size: 50px;
color: aliceblue
}
.topbar {
margin-top: 0px;
padding: 1px;
background-color: #605E5E;
border-bottom-style: inset;
border-bottom-color: #888888;
}
.touch-menu {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#eda954+0,e5933b+29,e59f54+56,e89230+79,e89230+91,e89230+100 */
background: rgb(237, 169, 84); /* Old browsers */
background: -moz-linear-gradient(top, rgba(237, 169, 84, 1) 0%, rgba(229, 147, 59, 1) 29%, rgba(229, 159, 84, 1) 56%, rgba(232, 146, 48, 1) 79%, rgba(232, 146, 48, 1) 91%, rgba(232, 146, 48, 1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(237, 169, 84, 1) 0%, rgba(229, 147, 59, 1) 29%, rgba(229, 159, 84, 1) 56%, rgba(232, 146, 48, 1) 79%, rgba(232, 146, 48, 1) 91%, rgba(232, 146, 48, 1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(237, 169, 84, 1) 0%, rgba(229, 147, 59, 1) 29%, rgba(229, 159, 84, 1) 56%, rgba(232, 146, 48, 1) 79%, rgba(232, 146, 48, 1) 91%, rgba(232, 146, 48, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eda954', endColorstr='#e89230', GradientType=0); /* IE6-9 */
display: flex;
padding: 10px;
}
ul {
text-align: center;
list-style-type: none;
margin: 10px;
vertical-align: middle;
}
.slideout-content-top-left, .slideout-content-bottom-left {
display: none;
height: 95%;
margin: 10px 0px 10px 0px;
min-width: 16px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
background-color: #736E6F;
z-index: 1;
}
.slideout-content-top-right, .slideout-content-bottom-right {
display: none;
height: 95%;
margin: 10px 10px 10px 0px;
background-color: #736E6F;
min-width: 16px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
vertical-align: middle;
}
.menu-top-right:hover > .slideout-content-top-right, .menu-bottom-right:hover > .slideout-content-bottom-right {
display: inline-block;
}
.slideout-content-bottom-right:hover, .slideout-content-top-right:hover {
display: inline-block;
}
.menu-top-left:hover > .slideout-content-top-left, .menu-bottom-left:hover > .slideout-content-bottom-left {
display: inline-block;
}
.slideout-content-bottom-left:hover, .slideout-content-bottom-left:hover {
display: inline-block;
}
.touch-menu img:hover {
filter: brightness(1.25);
}
.column {
flex: 50%;
display: flex;
flex-direction: column;
vertical-align: middle;
}
.menu-top-left, .menu-bottom-left, .menu-bottom-right, .menu-top-right {
flex: 50%;
height: 100%;
}
.menu-bottom-left img, .menu-top-left img {
width: 50%;
height: 95%;
float: right;
margin: 10px 10px 10px 0px;
}
.menu-bottom-right img, .menu-top-right img {
width: 50%;
height: 95%;
float: left;
margin: 10px 0px 10px 10px;
}

Horizontal flyout menu - hide options

I need to create simple horizontal (left direction) flyout menu for button. I've prepared this DEMO.
.menu {
position: absolute;
right: 0;
height: 50px;
width: 50px;
color: white;
}
.menu li {
pointer-events: none;
position: relative;
display: inline-block;
vertical-align: middle;
list-style: none;
line-height: 100%;
transform: translateZ(0);
}
.menu a {
pointer-events: auto;
position: relative;
display: block;
min-width: 5em;
margin-bottom: .4em;
padding: .4em;
line-height: 100%;
font-size: 16px;
text-decoration: none;
color: white;
transition: background 0.3s;
}
.menu a:active, .menu a:focus {
background: #B44659;
}
.menu i {
display: block;
margin-bottom: .2em;
font-size: 2em;
}
.menu span {
font-size: .625em;
font-family: sans-serif;
text-transform: uppercase;
}
.menu li:hover ul {
transform: translateX(0);
background: #B44659;
}
.menu > li {
display: block;
}
.menu > li > a {
background: #7D294E;
}
.menu > li:hover {
z-index: 100;
}
.menu > li:hover a {
background: #B44659;
}
.menu > li a:hover {
background: #F56356;
}
.menu > li > a:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 4px;
opacity: 0;
background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(100%, rgba(0, 0, 0, 0)));
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
background: -o-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 );
transition: opacity 0.5s;
}
.menu > li:hover a:after {
opacity: 1;
}
.menu > li ul {
position: absolute;
z-index: -1;
top: 0;
right: 100%;
height: 100%;
width: auto;
white-space: nowrap;
transform: translateX(100%);
background: #B44659;
transition: 0.5s transform;
}
<ul class="menu">
<li>
<a href="#">
<span>ITEM 1</span>
</a>
<ul>
<li>
<a href="https://google.co.uk/" target="_blank">
<span>SUBITEM 1.1</span>
</a>
</li>
<li>
<a href="https://google.co.uk/" target="_blank">
<span>SUBITEM 1.2</span>
</a>
</li>
<li>
<a href="https://google.co.uk/" target="_blank">
<span>SUBITEM 1.3</span>
</a>
</li>
</ul>
</li>
</ul>
When you hover an item, the options slide from right to the left. The problem is to hide them - now they are just moved back to the right, but I would like to completely hide them. Is it possible to achieve this with pure CSS?

You can set overflow: hidden to your menu. Also you'll need to set a bigger width so when you slide the rest of the menu it won't overflow.
.visible-item{
width: 40px;
text-align: center;
}
.menu {
position: absolute;
right: 0;
height: 30px;
width: 50px;
color: white;
display: flex;
justify-content: flex-end;
overflow: hidden;
}
.menu:hover{
width: 400px;
}
.menu li {
pointer-events: none;
position: relative;
display: inline-block;
vertical-align: middle;
list-style: none;
line-height: 100%;
transform: translateZ(0);
}
.menu a {
pointer-events: auto;
position: relative;
display: block;
min-width: 5em;
margin-bottom: .4em;
padding: .4em;
line-height: 100%;
font-size: 16px;
text-decoration: none;
color: white;
transition: background 0.3s;
}
.menu a:active, .menu a:focus {
background: #B44659;
}
.menu i {
display: block;
margin-bottom: .2em;
font-size: 2em;
}
.menu span {
font-size: .625em;
font-family: sans-serif;
text-transform: uppercase;
}
.menu li:hover ul {
transform: translateX(0);
background: #B44659;
}
.menu > li {
display: block;
}
.menu > li > a {
background: #7D294E;
}
.menu > li:hover {
z-index: 100;
}
.menu > li:hover a {
background: #B44659;
}
.menu > li a:hover {
background: #F56356;
}
.menu > li > a:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 4px;
opacity: 0;
background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(100%, rgba(0, 0, 0, 0)));
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
background: -o-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 );
transition: opacity 0.5s;
}
.menu > li:hover a:after {
opacity: 1;
}
.menu > li ul {
position: absolute;
z-index: -1;
top: 0;
right: 100%;
height: 100%;
width: auto;
white-space: nowrap;
transform: translateX(100%);
background: #B44659;
transition: 0.5s transform;
}
<ul class="menu">
<li>
<a href="#" class="visible-item">
<span>ITEM 1</span>
</a>
<ul>
<li>
<a href="https://google.co.uk/" target="_blank">
<span>SUBITEM 1.1</span>
</a>
</li>
<li>
<a href="https://google.co.uk/" target="_blank">
<span>SUBITEM 1.2</span>
</a>
</li>
<li>
<a href="https://google.co.uk/" target="_blank">
<span>SUBITEM 1.3</span>
</a>
</li>
</ul>
</li>
</ul>

Image Not in Right Place Simple HTML CSS

I am trying to add a facebook image to my header, but something is pushing the facebook image to the far right of the screen. It should look like this:
but, instead, with my current css, it appears like this:
Any ideas why? I'm still learning proper techniques. I've copied a lot of the CSS from my photoshop design.
#charset "utf-8";
/* CSS Document */
.aseimg {
background-image: url("ASE_large.png");
position: absolute;
left: 721px;
top: 77px;
width: 173px;
height: 65px;
z-index: 61;
}
.NADAlogo {
background-image: url("NADAlogo.png");
position: absolute;
left: 916px;
top: 77px;
width: 245px;
height: 65px;
z-index: 62;
}
._5_Stars {
background-image: url("5 Stars.png");
position: absolute;
left: 1453px;
top: 97px;
width: 139px;
height: 26px;
z-index: 59;
}
.if_facebook_834722 {
background-image: url("if_facebook_834722.png");
position: relative;
left: 1183px;
top: 88px;
width: 45px;
height: 44px;
z-index: 65;
}
nav {
width: 100%;
background: #193441;
border: 1px solid #465d65;
border-right: none;
position: absolute;
left: -4px;
top: 146px;
z-index: 66;
}
nav ul {
overflow: hidden;
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
float: left;
text-align: center;
border-left: 1px solid #465d65;
border-right: 1px solid #ccc;
width: 25%;
/* fallback for non-calc() browsers */
width: calc(100% / 4);
box-sizing: border-box;
}
nav ul li a:hover {
background: -webkit-linear-gradient(rgba(25, 25, 25, 1), rgba(126, 158, 173, 0.5), rgba(255, 255, 255, 0.5));
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgba(25, 25, 25, 1), rgba(126, 158, 173, 0.5), rgba(255, 255, 255, 0.5));
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(25, 25, 25, 1), rgba(126, 158, 173, 0.5), rgba(255, 255, 255, 0.5));
/* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(25, 25, 25, 1), rgba(126, 158, 173, 0.5), rgba(255, 255, 255, 0.5));
/* Standard syntax (must be last)*/
}
nav ul li a:active {
background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(top, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(top, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
/* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
/* Standard syntax (must be last) */
}
nav ul li:first-child {
border-left: none;
}
nav ul li a {
display: block;
text-decoration: none;
color: #ffffff;
font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";
padding: 10px 0;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HighTech Auto Sales</title>
<link href="mainCSS.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="header">
<a itemprop="url" class="aselink" href="http://www.ase.com/Landing-Pages/Car-Owners/Find-a-Repair-Shop/Shop-Locator.aspx?Address=19111&d=75&sc=us">
<img class="aseimg" src="../Index%20Images/ASE_large.png"></a>
<a itemprop="url" class="NADAlogolink" href="http://www.niada.com/member_directory.php?te_mode=map_view">
<img class="NADAlogo" src="../Index%20Images/NADAlogo.png"></a>
<a itemprop="url" class="if_facebook_834722">
<img class="if_facebook_834722" src="../Index%20Images/if_facebook_834722.png"></a>
<img class="_5_Stars" src="../Index Images/5stars_small.png">
</div>
<nav>
<ul>
<li>Our Inventory</li>
<li>Superior Services</li>
<li>HighTech Blog</li>
<li>Contact & Location</li>
</ul>
</nav>
</body>
</html>

It seems it's sufficient if you remove the class if_facebook_834722 from the a link which wraps the facebook image, and change position:relative to postion: absolute in the CSS rule for the image (.if_facebook_834722) - see snippet below.
#charset "utf-8";
/* CSS Document */
.aseimg {
background-image: url("ASE_large.png");
position: absolute;
left: 721px;
top: 77px;
width: 173px;
height: 65px;
z-index: 61;
}
.NADAlogo {
background-image: url("NADAlogo.png");
position: absolute;
left: 916px;
top: 77px;
width: 245px;
height: 65px;
z-index: 62;
}
._5_Stars {
background-image: url("5 Stars.png");
position: absolute;
left: 1453px;
top: 97px;
width: 139px;
height: 26px;
z-index: 59;
}
.if_facebook_834722 {
background-image: url("if_facebook_834722.png");
position: absolute;
left: 1183px;
top: 88px;
width: 45px;
height: 44px;
z-index: 65;
}
nav {
width: 100%;
background: #193441;
border: 1px solid #465d65;
border-right: none;
position: absolute;
left: -4px;
top: 146px;
z-index: 66;
}
nav ul {
overflow: hidden;
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
float: left;
text-align: center;
border-left: 1px solid #465d65;
border-right: 1px solid #ccc;
width: 25%;
/* fallback for non-calc() browsers */
width: calc(100% / 4);
box-sizing: border-box;
}
nav ul li a:hover {
background: -webkit-linear-gradient(rgba(25, 25, 25, 1), rgba(126, 158, 173, 0.5), rgba(255, 255, 255, 0.5));
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgba(25, 25, 25, 1), rgba(126, 158, 173, 0.5), rgba(255, 255, 255, 0.5));
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(25, 25, 25, 1), rgba(126, 158, 173, 0.5), rgba(255, 255, 255, 0.5));
/* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(25, 25, 25, 1), rgba(126, 158, 173, 0.5), rgba(255, 255, 255, 0.5));
/* Standard syntax (must be last)*/
}
nav ul li a:active {
background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(top, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(top, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
/* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
/* Standard syntax (must be last) */
}
nav ul li:first-child {
border-left: none;
}
nav ul li a {
display: block;
text-decoration: none;
color: #ffffff;
font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";
padding: 10px 0;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HighTech Auto Sales</title>
<link href="mainCSS.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="header">
<a itemprop="url" class="aselink" href="http://www.ase.com/Landing-Pages/Car-Owners/Find-a-Repair-Shop/Shop-Locator.aspx?Address=19111&d=75&sc=us">
<img class="aseimg" src="../Index%20Images/ASE_large.png"></a>
<a itemprop="url" class="NADAlogolink" href="http://www.niada.com/member_directory.php?te_mode=map_view">
<img class="NADAlogo" src="../Index%20Images/NADAlogo.png"></a>
<a itemprop="url">
<img class="if_facebook_834722" src="../Index%20Images/if_facebook_834722.png"></a>
<img class="_5_Stars" src="../Index Images/5stars_small.png">
</div>
<nav>
<ul>
<li>Our Inventory</li>
<li>Superior Services</li>
<li>HighTech Blog</li>
<li>Contact & Location</li>
</ul>
</nav>
</body>
</html>

The positioning css is getting applied both to your <a> tag and the <img> it contains, since they both have the same class. The <a> is positioned using the top and left properties, but then the <img> is offset by equal amounts within that.
You will likely want to use different classes so you can handle their positions separately.
Html is not my main area, but I think in general it is considered a bad idea to use absolute positioning in this way... for example, it will require a rewrite if any of your images change size, and won't scale to mobile sizes that well. But for now, hope this will work as a quick fix.

Shadow/gradient in top and bottom of element

I was looking for a multi component date picker like the one in the image under, but didn't find anything on Github, or elsewhere.
So I decided to make one. I'm having problems implementing the CSS where it fades out on top and bottom.
I thought about using :before and :after in the container, but no success. Can I apply gradients in :before and :after
For example:
ol {
overflow: hidden;
width: 8em;
height: 6em;
text-align: center;
border: 0.5em solid black;
border-radius: 0.5em;
padding: 0px;
}
li {
margin: 0px;
list-style: none;
padding: 0.5em 0;
line-height: 1em;
border: 1px solid #ccf;
}
<ol>
<li>2010</li>
<li>2011</li>
<li>2012</li>
<li>2013</li>
<li>2014</li>
<li>2015</li>
<li>2016</li>
<li>2017</li>
<li>2018</li>
<li>2019</li>
<li>2020</li>
</ol>
How to make the shadow on top and bottom?

Yes, you can apply gradients in :before and :after elements.
Example:
ol {
overflow: hidden;
width: 8em;
height: 6em;
position: relative;
text-align: center;
border: 0.5em solid black;
border-radius: 0.5em;
padding: 0px;
}
ol:before {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom : 80%;
content: "";
background-image: linear-gradient(to bottom, rgba(0,0,0.1) 0%, rgba(0,0,0) 100%);
z-index: -1;
pointer-events: none;
}
ol:after {
position: absolute;
left: 0;
right: 0;
top: 20%;
bottom : 0;
content: "";
background-image: linear-gradient(to bottom, rgba(0,0,0.1) 0%, rgba(0,0,0) 100%);
z-index: -1;
pointer-events: none;
}
li {
margin: 0px;
list-style: none;
padding: 0.5em 0;
line-height: 1em;
border: 1px solid #ccf;
}

Ok, got it by using gradients not on :before / :after but in a new div which floats with position: absolute; like:
.fader {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 9em;
background: linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7) 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7) 100%);
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7) 100%);
pointer-events: none;
}
and the HTML:
<div class="date-picker">
<ol>
<li>2010</li>
<li>2011</li>
...
</ol>
<div class="fader"></div>
</div>
jsFiddle: https://jsfiddle.net/bo7dyx83/

Try something like this:
<div class="date-picker">
<ol>
<li>2010</li>
...
</ol>
<div class="shadow"></div>
</div>
With the date-picker styled however you like (setting width and height), and the following CSS:
.date-picker {
position: relative;
width: 8em;
height: 6em;
border: 0.5em solid black;
border-radius: 0.5em;
}
ol {
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
text-align: center;
margin: 0;
padding: 0;
}
li {
margin: 0px;
list-style: none;
padding: 0.5em 0;
line-height: 1em;
border: 1px solid #ccf;
}
.shadow {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.2), transparent, transparent, rgba(0, 0, 0, 0.2));
}
This creates a gradient image overlay positioned in front of the ol which is the image's sibling. Keep in mind that the z-index of .shadow needs to be larger than that of the ol.
EDIT: Looking more closely at the image you posted, the gradient seems closer to quadratic than linear. If you want the list to look more rounded, making a non-linear gradient in photoshop or something would make it look much more three dimensional.

How come the navigation's box-shadow isn't showing?

I want to have the header's navigation to have a box shadow. However, the box-shadow seems to be hidden by the carousel I placed below it. I put a z-index of all children of #carousel but the box-shadow still doesn't show up.
(page snippet)
Here's what happens when I push #carousel down when I give it margin-top: 40px;
(another page snippet)
HTML
<header>
<nav>
<div class="container">
<h1><img src="images/logo.png" alt="" id="logo"></h1>
<h1 id="NHS">Newport High School</h1>
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Students</li>
<li>Parents</li>
<li>Activities & Atletics</li>
<li>Resources</li>
</ul>
</div><!--container--->
</nav>
</header><div id="carousel">
<div class="inner">
<ul>
<li><img src="images/example-slide-1.jpg" alt="Fish"></li>
<li><img src="images/example-slide-2.jpg" alt="Elephant"></li>
<li><img src="images/example-slide-3.jpg" alt="Giraffe"></li>
<li><img src="images/example-slide-4.jpg" alt="Fish"></li>
</ul>
</div>
</div>
CSS
/* - - - header - - - */
header {
background: rgb(30,27,27); /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,27,27,1) 0%, rgba(2,2,2,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,27,27,1)), color-stop(100%,rgba(2,2,2,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%);
box-shadow: 0px 3px 15px rgba(50, 50, 50, .7);
-webkit-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7);
-moz-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7);
z-index: 1000;
}
header h1, header li {
float: left;
}
header a {
color: #A1A1A1 ;
font-family: arial, helvetica, verana, sans-serif;
}
header a:hover {
color: #A1A1A1;
text-decoration: none;
}
#logo {
width: 50px;
}
#NHS {
margin: 1.8% 0 0 2%;
font-size: 1.2em;
text-transform: uppercase;
}
#NHS a {
color: #F6F6F6;
letter-spacing: 2px;
}
#nav {
float: right;
margin: 3% 0 0 0;
}
#nav li {
margin-right: 20px;
padding: 0;
}
#nav li:last-of-type {
margin-right: 0px;
}
#nav a {
font-size: .8em;
text-transform: uppercase;
padding-top: 3px;
font-weight: 400;
}
#nav a:hover {
border-top: 1px dotted #C41D0E;
}
/* - - - carousel - - - */
#carousel {
margin: 40px 0 0 0;
width: 100%;
overflow: hidden;
z-index: -999;
}
#carousel .inner {
box-sizing: border-box;
margin-left: -50px;
z-index: -5000;
}
#carousel ul {
width: 60000px;
height: 480px;
z-index: -5000;
}
#carousel li {
height: 480px;
float: left;
overflow: hidden;
z-index: -5000;
}
#carousel img {
text-align: center;
width: 1375px;
height: auto;
z-index: -5000;
}

Remember z-index only works with positioned elements. So both your carousel and header needs to have a position value other than static and then you can specify a higher z-index to the header. That way box-shadow will appear properly above the carousel.

You only need to add position:relative to the header. The carousel doesn't need a z-index alteration.

try adding !important to your shadowbox. I think that should work.
box-shadow: 0px 3px 15px rgba(50, 50, 50, .7) !important;
-webkit-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7) !important;
-moz-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7) !important;