I have a little problem with my overlay hover. It's not working well, because when i hover on .portfolio-project (text-layer) the hover on .portfolio-overlay is turning of. It's obvious but how to make it work together?
#portfolio .portfolio-grid {
padding: 0px;
}
#portfolio .portfolio-project-name {
position: relative;
background-image: url('https://s16.postimg.org/5pfokew6t/GMZlk_Sr.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 550px;
transition: ease-in .2s;
}
#portfolio .portfolio-overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(222, 39, 94, 0.0);
z-index: 1;
transition: ease-in .3s;
}
#portfolio .portfolio-overlay:hover {
background-color: rgba(222, 39, 94, 0.8);
}
#portfolio .portfolio-project {
z-index: 1;
position: absolute;
left: 15%;
top: 30%;
max-width: 70%;
text-align: center;
color: #fff;
p {
margin-top: 20px;
}
i {
margin-top: 20px;
font-size: 40px;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="sass/main.min.css">
<script src="https://use.fontawesome.com/ca1269ff60.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<section id="portfolio">
<div class="container-fluid portfolio-container">
<div class="row">
<a href="#" target="_blank">
<div class="portfolio-grid col-xs-12 col-md-4">
<div class="portfolio-overlay"></div>
<div class="portfolio-project-name">
<div class="portfolio-project">
<h2>Project Name</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis dui non tortor gravida porta at imperdiet nibh. Ut finibus sapien vel nibh porta lacinia.</p>
<i class="fa fa-angle-double-right" aria-hidden="true"></i>
</div>
</div>
</div>
</a>
</div>
</section>
You can add pointer-events: none; to your #portfolio .portfolio-project rules
#portfolio .portfolio-grid {
padding: 0px;
}
#portfolio .portfolio-project-name {
position: relative;
background-image: url('https://s16.postimg.org/5pfokew6t/GMZlk_Sr.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 550px;
transition: ease-in .2s;
}
#portfolio .portfolio-overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(222, 39, 94, 0.0);
z-index: 1;
transition: ease-in .3s;
}
#portfolio .portfolio-overlay:hover {
background-color: rgba(222, 39, 94, 0.8);
}
#portfolio .portfolio-project {
z-index: 1;
position: absolute;
left: 15%;
top: 30%;
max-width: 70%;
text-align: center;
color: #fff;
pointer-events:none;
p {
margin-top: 20px;
}
i {
margin-top: 20px;
font-size: 40px;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="sass/main.min.css">
<script src="https://use.fontawesome.com/ca1269ff60.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<section id="portfolio">
<div class="container-fluid portfolio-container">
<div class="row">
<a href="#" target="_blank">
<div class="portfolio-grid col-xs-12 col-md-4">
<div class="portfolio-overlay"></div>
<div class="portfolio-project-name">
<div class="portfolio-project">
<h2>Project Name</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis dui non tortor gravida porta at imperdiet nibh. Ut finibus sapien vel nibh porta lacinia.</p>
<i class="fa fa-angle-double-right" aria-hidden="true"></i>
</div>
</div>
</div>
</a>
</div>
</section>
You need to wrap .portfolio-project-name into .portfolio-overlay. It has to be a child of the element you are hovering over.
add the class:
.portfolio-project {
pointer-events:none;
}
Related
I'm creating a dating site to learn web dev and I don't know how to make background-color work, it just doesn't on specific divs. What should I change? I tried a lot of things but nothing happened.
Adding lorem ipsum so I can ask this question... just skip this
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut felis magna. Cras lectus sapien, porttitor quis elit id, lacinia pellentesque urna. Fusce gravida felis sit amet purus mattis, sed faucibus turpis hendrerit. Integer convallis sagittis pulvinar. Curabitur tristique faucibus lorem iaculis egestas. Vivamus vitae lacus placerat, efficitur diam et, volutpat augue. Cras at purus vitae neque ultricies iaculis. Maecenas pellentesque ipsum nisi.
My code:
* {
padding: 0;
margin: 0;
color: black;
}
body {
overflow: hidden;
}
.container {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
width: 95%;
height: 750px;
}
nav {
display: flex;
justify-content: space-between;
font-family: 'Pattaya', sans-serif;
font-size: 39px;
}
.logo {
cursor: pointer;
margin-top: auto;
margin-bottom: auto;
}
.menu {
margin-top: auto;
margin-bottom: auto;
}
nav ul {
list-style-type: none;
}
nav ul li {
padding: 30px;
display: inline-block;
}
nav ul li a {
text-decoration: none;
}
nav ul li a:hover {
background-color: #ede;
border-radius: 10px;
}
.circle {
z-index: -2;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ede;
clip-path: circle(600px at right 800px);
}
.circlebig {
z-index: -2;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ede;
clip-path: circle(940px at left);
}
.content {
display: flex;
justify-content: space-between;
font-family: 'Rubik', sans-serif;
font-size: 56px;
}
.text {
transform: translateY(25%);
}
.love {
font-size: 70px;
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: move 400s linear infinite;
}
#keyframes move {
to {
background-position: 4500vh;
}
.freeplan {
z-index: 3;
display: block;
background-color: #666 !important;
}
.paidplan {
z-index: 3;
display: block;
background-color: #35f !important;
}
<link href="https://fonts.googleapis.com/css2?family=Pattaya&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght#1,300&display=swap" rel="stylesheet">
<main>
<div class="container">
<nav>
<div class="logo">
<img src="img/logo.png">
</div>
<div class="menu">
<ul>
<li> ⁣ ⁣ Plans ⁣ ⁣ </li>
<li> ⁣ ⁣ About ⁣ ⁣ </li>
<li> ⁣ ⁣ Login ⁣ ⁣ </li>
</ul>
</div>
</nav>
<section class="content">
<div class="freeplan">
Freeplan
<img src="img/kiss.png">
</div>
<div class="paidplan">
Paidplan
<img src="img/kiss.png">
</div>
<img src="img/kiss.png">
</section>
<div class="circle"></div>
<div class="circlebig"></div>
</div>
</main>
You didn't close the curly brackets:
#keyframes move {
to {
background-position: 4500vh;
} // <==
}
I think you may miss the '#keyframes' curly bracket. please replace the #keyframes' as like my code.
#keyframes move {
to {
background-position: 4500vh;
}
}
.dropbtn {
border: none;
padding: 4px;
}
.dropbtn img {
margin-top: 15px;
}
.dropdown {
position: relative;
display: inline-block;
width: 75px;
text-align: center;
height: 55px;
}
.dropdown:hover {
position: relative;
display: inline-block;
width: 75px;
text-align: center;
height: 55px;
border-radius: 1px;
border: 2px solid #202020;
}
.dropdown img {
height: 25px;
width: 25px;
}
a {
text-decoration: none;
}
.dropdown-content {
width: 75px;
text-align: center;
display: none;
position: absolute;
background-color: #141414;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 2;
padding-top: 4px;
padding-bottom: 4px;
top: 50px;
}
.dropdown-content a {
padding: 11px 4px;
text-decoration: none;
display: block;
border-radius: 40px;
width: 50px;
height: 50px;
margin: auto;
border: 1px solid #191919;
}
.dropdown-content a:hover {
background-color: #141414;
border: 1px solid #848484;
}
.dropdown:hover .dropbtn,
.active {
background-color: #191919;
opacity: 25%;
}
<header>
<div class="container">
<div class="header-container">
<div class="logo">
<img src="logo.svg" alt="" style="width: 209px;">
</div>
<div class="language dropdown">
<img src="elements/can.png" alt="">
<div class="dropdown-content" style="display: none;">
<img src="elements/aus.png" alt="new zealand flag">
<img src="elements/can.png" alt="canada flag">
<img src="elements/sou.png" alt="quebec flag">
<img src="elements/ger.png" alt="germany flag">
</div>
</div>
</div>
</div>
</header>
<div class="main">
<div class="container">
<div class="main-content">
<div class="star">
<img src="img-bg.svg" alt="">
<div class="content">
<h1 class="logo-middle"><img src="logo.svg" alt=""></h1>
<h1 class="title"><span>H1</span> Title</h1>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus
a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor </p>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>All rights reserved</p>
</footer>
<div class="overlay"></div>
<script>
let dcontent = document.querySelector(".dropdown-content")
document.querySelector(".dropdown").addEventListener("click", showLan)
function showLan() {
if (dcontent.style.display == "none") {
dcontent.style.display = "block"
document.querySelector(".overlay").style.display = "block"
}
document.querySelector(".overlay").addEventListener("click", function() {
dcontent.style.display = "none"
document.querySelector(".overlay").style.display = "none"
})
}
</script>
I can't manage to change my language menu background color when active, language menu should have a thin border when hover, and when active top language icon should have a lighter grey background, like in picture 3, I tried almost everything and can't make it work, instead of grey background there is this thin border like on hover.
You need to wrap your .dropdown and .dropdown-content on a div container and implement some css stying rules.
Here try to check my demo
.dropdown-container {
position: relative;
z-index: 2;
width: max-content;
}
.dropbtn {
border: none;
padding: 4px;
}
.dropbtn img {
margin-top: 15px;
}
.dropdown {
position: relative;
display: inline-block;
width: 75px;
text-align: center;
height: 55px;
}
.dropdown:hover {
position: relative;
display: inline-block;
width: 75px;
text-align: center;
height: 55px;
border-radius: 1px;
}
.dropdown img {
height: 25px;
width: 25px;
}
a {
text-decoration: none;
}
.dropdown-content {
width: 75px;
text-align: center;
display: none;
position: absolute;
background-color: #141414;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding-top: 4px;
padding-bottom: 4px;
}
.dropdown-content a {
padding: 11px 4px;
text-decoration: none;
display: block;
border-radius: 40px;
width: 50px;
height: 50px;
margin: auto;
border: 1px solid #191919;
}
.dropdown-content a:hover {
background-color: #141414;
border: 1px solid #848484;
}
.dropdown:hover,
.active {
background-color: #191919;
opacity: 25%;
}
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1;
}
.display {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>head</title>
</head>
<body>
<header>
<div class="container">
<div class="header-container">
<div class="logo">
<img src="logo.svg" alt="" style="width: 209px;" />
</div>
<div class="dropdown-container">
<div class="language dropdown">
<img src="Sphere.png" alt="" />
</div>
<div class="dropdown-content">
<img src="Sphere.png" />
<img src="Sphere.png" />
<img src="Sphere.png" />
<img src="Sphere.png" />
</div>
</div>
</div>
</div>
</header>
<div class="main">
<div class="container">
<div class="main-content">
<div class="star">
<img src="img-bg.svg" alt="" />
<div class="content">
<h1 class="logo-middle"><img src="logo.svg" alt="" /></h1>
<h1 class="title"><span>H1</span> Title</h1>
<p>
This is Photoshop's version of Lorem Ipsum. Proin gravida nibh
vel velit auctor aliquet. Aenean sollicitudin, lorem quis
bibendum auctor, nisi elit consequat ipsum, nec sagittis sem
nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit
amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio
tincidunt auctor
</p>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>All rights reserved</p>
</footer>
<div class="overlay"></div>
<script>
const dcontent = document.querySelector(".dropdown-content");
const overlay = document.querySelector(".overlay");
document.querySelector(".dropdown").addEventListener("click", () => {
dcontent.classList.toggle("display");
overlay.classList.toggle("display");
});
overlay.addEventListener(
"click",
(e) => {
e.stopPropagation();
dcontent.classList.toggle("display");
overlay.classList.toggle("display");
},
false
);
</script>
</body>
</html>
You may also go to codesandbox https://codesandbox.io/s/amazing-thunder-k38kd?file=/index.html
I'm having this problem that my header,footer and bar part are not fixed when i scroll through the page if i attach an image the image kinda off overlaps and becomes above the header.
this is the css code:
*{
padding: 0;
margin: 0;
}
.header{
height: 80px;
width: 100%;
background: url(images/header.jpeg);
position: fixed;
}
.bar{
width: 100%;
height: 43px;
background: url(images/menu-boarder.jpeg);
flex-flow: row wrap;
align-items: center;
position: fixed;
}
body{
margin-left: auto;
margin-right: auto;
margin-bottom: 100px;
margin-top: 20px;
overflow: auto;
width: 80%;
}
.menu{
float: left;
list-style: none;
margin-top: 10px;
}
.menu li{
display: inline-block;
}
.menu li a{
color: #fff;
text-decoration: none;
padding: 10px;
font-family: sans-serif;
font-size: 24px;
}
.menu li a:hover{
background: #fff;
color: #333;
padding: 43px;
font-weight: bold;
}
.search {
display: flex;
float: right;
padding-top: 7px;
position: relative;
right:80px;
}
.searchTerm {
width: 400%;
border: 3px solid #000000;
color: #000000;
border: 3px solid #000000;
padding-bottom: 10px;
padding-top: 20px;
padding-right: 25px;
padding-left: 15px;
height: 20px;
}
.searchTerm:focus{
color: #000000;
}
.homeage_product {
position: relative;
width: 50%;
}
.homeage_but {
width: 100%;
height: auto;
}
.searchButton {
width: 100px;
border: 1px solid #000000;
background: #000000;
padding-right: 8px;
padding-left: 10px;
color: #FFFFFF;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.fa-shopping-cart, .glyphicon-user{
color: #000000;
}
#lblCartCount {
font-size: 12px;
background-color: crimson;
color: #fff;
padding: 0 5px;
vertical-align: top;
}
.form-inline {
display: flex;
}
.footer{
width: 100%;
height: 100px;
background: url(images/footer.jpeg);
bottom: 0px;
left: 0px;
right: 0px;
position: fixed;
margin-bottom: 0px;
}
the html code :
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<title>Cookie|Bakery shop</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<div class="header">
</div>
<br><br><br><br>
<div class="bar">
<ul class="menu">
<li>Home</li>
<li>Contact us</li>
<li>About us</li>
<li>Product</li>
</ul>
<div class="search">
<form class="form-inline">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button type="submit" class="searchButton"><i class="fa fa-search"></i></button>
</form>
also here i can't figure out why the following <div> tag is not clickable (meaning the user and the shooping cart):
<div class="icons">
<a herf="xx.html"><i class="fa fa-shopping-cart" style="font-size:36px; margin-right: 10px;">
<asp:Label ID="lblCartCount" ForeColor="White"/>3</i></a>
<a herf=""><i class="glyphicon glyphicon-user" style="font-size:30px; margin-right: 5px; "></i></a>
</div>
</div>
the rest of the html code:
</div>
<div class="content">
<!-- Image of a product with button refrence to the product it self -->
<div class="homeage_product" >
<img src="images/cake.jpg" alt="" style="width:100%; height:300px; padding: 0;">
<button class="homeage_but" >CLICK ME!</button>
</div>
</div>
<h4><center><u>Welome to our Bakery shop!</u></center></h4>
<p>
Lorem ipnam dolor sit amet, consectetur adipiscing elit Sed felis turpis, ulturicies nee herndrerit a
ullarneorper in maars Donee a erat molestie, condimentum ex eu, vehicula elst Ut egestas consectenor
libero, et dictum elir tineidunt sed Sed tellus nisi, faciliais sut nulla eu, euismod blandit marpia. Praesent
uficies semper auctor. Quisque eftieitur sollacstudin metus pec porta. Donec bbero notla, accumsan ut
negue sit amet, tincsdurt facilisis felis. Phasellus ac ante pretium, vehicula ex sed, feugsat ipsum Nullam
dapibus erat vitae ligula venenatis vestibulum Morbi aliquam sapien eu volutpet volutpat. Quisquue
sapien nisl, pulvinar eu finabua eget, tempus quis ante Cras sed blandst eros. Quisque posuere eros at
tellus tincidtant tristique.
</p>
<div class="footer">
</div>
</body>
</html>
Add z-index your header style in css:
.header
{
z-index: 99;
}
The z-index property specifies the overlay order of positioned elements. Elements with a greater z-index will therefore always be in front of elements with a lower z-index. Setting the z-index to a value greater than (or even equal to) 0 sets that element to be on top of non-positioned elements with no z-index specified. You could always set it to a value lower than 99, but, it is common practice to avoid potential clashes with other positioned elements.
Let me know if this works for you :)
So, I made a really cool website. Then, in a separate file, I made a really cool navigation bar. However, when I put them together, the navigation bar is gone. The background of the very first div called "list" should be filled and should bigger, however, it is not. Hopefully, someone can help me to have the navigation bar and site on the same page. Thanks!
.list {
background-color: #666;
color: #111111;
height: 105px;
width: 100%;
}
.list a {
margin-top: 20px;
float: right;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 25px;
}
.list a:hover {
background-color: #70b5ff;
color: #111111;
}
.list a.on {
background-color: #81ff7c;
color: #005604;
}
.imagefornav {
width: 160px;
height: 100px;
}
body, html {
height: 100%;
margin: 0;
margin-top: 0;
padding: 0;
font-family: Verdana, sans-serif;
line-height: 35px;
font-weight: 300;
color: #797a7c;
}
.title {
letter-spacing: 5px;
color: #1d3863;
text-align: center;
text-decoration: underline overline;
font-size: 35px;
line-height: 75px;
margin-top: 13%;
text-transform: uppercase;
opacity: 1.00;
padding-right: 370px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 370px;
animation: Fadein 2s ease-in;
}
#keyframes Fadein {
from {
opacity: 0;
}
to {
opacity: 0.80;
}
}
.imgc1, #imgc2, #imgc3, #imgc4 {
position: relative;
opacity: 0.80;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.imgc1 {
background-image: url("http://pluspng.com/img-png/ocean-background-png-hd-superior-ocean-background-wallpapers-widescreen-for-desktop-2560.jpg");
height: 700px;
width: 100%;
margin: 0;
margin-top: -16px;
}
.border1 {
padding: 1px;
background-color: #111;
font-family: arial, sans-serif;
}
#imgc2 {
background-image: url("https://wallpaperstream.com/wallpapers/full/desert-sand/Algodones-Dunes-Desert-Sand-HD-Wallpaper.jpg");
height: 600px;
background-position: center right;
}
#Imgtxt1 {
font-size: 41px;
line-height: 100px;
color: #111111;
padding-top: 100px;
}
#imgc3 {
background-image: url("http://pluspng.com/img-png/ocean-background-png-hd-superior-ocean-background-wallpapers-widescreen-for-desktop-2560.jpg");
height: 650px;
}
#section1 {
text-align: center;
padding: 50px 70px;
font-size: 19px;
}
#section2 {
text-align: center;
padding: 50px 70px;
background-color: #666;
color: #f4f4f4;
height: 50%;
margin: 0px;
}
#section3 {
height: 400px;
width: 100%;
}
.invis {
visibility: hidden;
}
#BF {
font-size: 15px;
animation: Comein 200s ease-in;
padding-left: 0px;
text-align: left;
visibility: hidden;
opacity: 0;
}
#keyframes Comein {
0% {
opacity: 0;
padding-left: 0px;
visibility: hidden;
}
6% {
opacity: 0;
padding-left: 0px;
visibility: hidden;
}
7% {
opacity: 1;
padding-left: 600px;
visibility: visible;
}
100% {
padding-left: 601px;
opacity: 1;
}
}
#ranger {
font-size: 25px;
padding-left: 5px;
}
#borderabout {
background-color: #666;
width: 100%;
color: #FFFFFF;
text-align: center;
border-radius: 25px;
opacity: 0.70;
}
#borderourgoal {
font-size: 35px;
line-height: 70px;
}
#ourgoal {
letter-spacing: 10px;
}
#you {
font-size: 60px;
}
#about {
letter-spacing: 10px;
}
#border3 {
background-color: #1be2e5;
opacity: 0.60;
height: 650px;
color: #111111;
}
#opacityforborder3 {
padding-top: 200px;
font-size: 30px;
}
#imgtxt2 {
height: 100%;
}
.button1 {
border-radius: 15px;
margin-top: 80px;
margin-left: 605px;
border: none;
background-color: #666;
color: #FFFFFF;
padding: 20px;
text-align: center;
text-decoration: none;
font-size: 25px;
}
.button1:hover {
background-color: #FFFFFF;
color: #666;
border-style: solid;
border-width: 1.5px;
border-color: #666;
}
#contacts {
font-size: 25px;
text-align: center;
width: 100%;
}
#button2 {
padding: 10px;
margin-left: 300px;
height: 100px;
width: 100px;
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Gmail_Icon.svg/100px-Gmail_Icon.svg.png");
border: none;
border-radius: 25px;
margin-top: 25px;
}
#button2:hover {
padding: 10px;
margin-left: 285px;
height: 140px;
width: 140px;
background: url("https://lh6.ggpht.com/8-N_qLXgV-eNDQINqTR-Pzu5Y8DuH0Xjz53zoWq_IcBNpcxDL_gK4uS_MvXH00yN6nd4=w140-rw");
border: none;
border-radius: 25px;
margin-top: 5px;
}
#Mygmail {
font-size: 20px;
margin-left: 290px;
margin-bottom: 0px;
width: 75%;
}
#dots {
visibility: hidden;
}
#refs {
float: right;
margin-right: 10px;
}
#linktext {
font-size: 17px;
margin-left: 35px;
}
#link01 {
margin-left: 300px;
}
#link1 {
margin-left: 170px;
}
#link2 {
margin-left: 60px;
}
#link3 {
margin-left: 125px;
}
#link4 {
margin-left: 50px;
}
a {
color: #60d16b;
}
#imgc4 {
background-color: #666;
height: 300px;
color: #FFFFFF;
}
#image1 {
height: 265px;
width: 400px;
margin-top: 20px;
margin-left: 20px;
}
#byme {
margin-left: 350px;
font-size: 13px;
}
<!DOCTYPE html>
<html>
<head>
<title>Resource Rangers</title>
<link href="CSS for 4th project (1).css" rel="stylesheet">
</head>
<style>
</style>
<body>
<div class="List">
<a class="a1" href="about.asp">Lack of Water</a>
Waters Journey
How
Why?
<a class="on" href="default.asp">Home</a>
</div>
<div class="imgc1"><br>
<div class="title">
<div class="border1">
<h3 align="center"> Resource Rangers </h3>
</div>
</div>
</div>
<div id="section1">
<div id="about">
<h2> About </h2>
</div>
<section>
<div id="borderabout">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse blandit tortor varius, suscipit
felis nec, consectetur est. Fusce at commodo velit. Aenean dictum ipsum est, ut congue ligula
condimentum et. Nullam cursus a purus id maximus. Sed ullamcorper erat neque, placerat pellentesque
lectus scelerisque sit amet. Fusce mi enim, bibendum gravida ex vel, dignissim aliquam dui. Etiam
porta augue non dignissim sagittis. Suspendisse at quam a felis hendrerit aliquam. Sed elementum
dapibus venenatis. Sed a neque ac tellus auctor dictum ac ut ante. Cras a lectus et nisl faucibus
venenatis. Pellentesque placerat dolor at dolor bibendum maximus. Nullam faucibus massa at enim
blandit ultrices. Nulla dapibus lacinia turpis eu aliquam. Morbi at fringilla tortor, eu eleifend
leo. <span id="ranger">Resource Ranger!</span>
</p>
</div>
</section>
</div>
<div id="imgc2">
<div id="Imgtxt1">
<div id="border2">
<h1 align="center"> "When the Wells dry, we know the worth of water"
<span class="invis">.</span>
<div id="BF"> - Benjamin Franklin </div>
</h1>
</div>
</div>
</div>
<div id="section2">
<section>
<div id="ourgoal">
<h2> Our Goal </h2>
</div>
<div id="borderourgoal">
<p>
<span id="you">You</span> to be inspired to and help you get involved, for the benefit of our
community of , as well as the global community, and our planet.
</p>
</div>
</section>
</div>
<div id="imgc3">
<div id="Imgtxt2">
<div id="border3">
<div id="opacityforborder3">
<h1 align="center" class="moreinfo"> To find out more information </h1>
<button class="button1" onclick="location.href = 'default.asp';">Click Here</button>
</div>
</div>
</div>
</div>
<div id="section3">
<span id="contacts">
<h2> Contacts </h2>
</span>
<div id="Mygmail">
<h3> My Gmail
<span id="dots">......................................................</span>More References
</h3>
</div>
<div id="stuff1">
<button id="button2" onclick="location.href = 'https://www.lipsum.com/feed/html';"></button>
<span id="refs"> <span id="linktext">Here are some more links if you are looking to go more in depth into
water conservation! </span><br>
<span id="link01">https://saveourwater.com</span><br>
<span id="link1"> https://www.farnellfamily.com/cfarnell/why/default.html</span><br>
<span id="link2"> https://learn.eartheasy.com/guides/45-ways-to-conserve-water-in-the-home-and-yard/</span><br>
<span id="link3"> https://www.constellation.com/energy-101/water-conservation-tips0.html</span><br>
<span id="link4"> https://www.lipsum.com/feed/html</span></span>
</div>
</div>
<div id="imgc4">
<div id="Imgtxt3">
<div id="border4">
<img id="image1" src="wix3.png">
<span id="byme">By All rights reserved</span>
</div>
</div>
</div>
</body>
<script type="text/javascript"></script>
</html>
In your html you apply the class List.
however, in your CSS you call .list (lowercase l).
Change your HTML class to list and it will work.
Edited the snippet. In the html use 'list' instead of 'List'. Also I have made, .list position as fixed.
.list {
background-color: #666;
color: #111111;
height: 105px;
width: 100%;
position: fixed;
top: 0;
z-index: 1000;
}
.list a {
margin-top: 20px;
float: right;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 25px;
}
.list a:hover {
background-color: #70b5ff;
color: #111111;
}
.list a.on {
background-color: #81ff7c;
color: #005604;
}
.imagefornav {
width: 160px;
height: 100px;
}
body, html {
height: 100%;
margin: 0;
margin-top: 0;
padding: 0;
font-family: Verdana, sans-serif;
line-height: 35px;
font-weight: 300;
color: #797a7c;
}
.title {
letter-spacing: 5px;
color: #1d3863;
text-align: center;
text-decoration: underline overline;
font-size: 35px;
line-height: 75px;
margin-top: 13%;
text-transform: uppercase;
opacity: 1.00;
padding-right: 370px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 370px;
animation: Fadein 2s ease-in;
}
#keyframes Fadein {
from {
opacity: 0;
}
to {
opacity: 0.80;
}
}
.imgc1, #imgc2, #imgc3, #imgc4 {
position: relative;
opacity: 0.80;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.imgc1 {
background-image: url("http://pluspng.com/img-png/ocean-background-png-hd-superior-ocean-background-wallpapers-widescreen-for-desktop-2560.jpg");
height: 700px;
width: 100%;
margin: 0;
margin-top: -16px;
}
.border1 {
padding: 1px;
background-color: #111;
font-family: arial, sans-serif;
}
#imgc2 {
background-image: url("https://wallpaperstream.com/wallpapers/full/desert-sand/Algodones-Dunes-Desert-Sand-HD-Wallpaper.jpg");
height: 600px;
background-position: center right;
}
#Imgtxt1 {
font-size: 41px;
line-height: 100px;
color: #111111;
padding-top: 100px;
}
#imgc3 {
background-image: url("http://pluspng.com/img-png/ocean-background-png-hd-superior-ocean-background-wallpapers-widescreen-for-desktop-2560.jpg");
height: 650px;
}
#section1 {
text-align: center;
padding: 50px 70px;
font-size: 19px;
}
#section2 {
text-align: center;
padding: 50px 70px;
background-color: #666;
color: #f4f4f4;
height: 50%;
margin: 0px;
}
#section3 {
height: 400px;
width: 100%;
}
.invis {
visibility: hidden;
}
#BF {
font-size: 15px;
animation: Comein 200s ease-in;
padding-left: 0px;
text-align: left;
visibility: hidden;
opacity: 0;
}
#keyframes Comein {
0% {
opacity: 0;
padding-left: 0px;
visibility: hidden;
}
6% {
opacity: 0;
padding-left: 0px;
visibility: hidden;
}
7% {
opacity: 1;
padding-left: 600px;
visibility: visible;
}
100% {
padding-left: 601px;
opacity: 1;
}
}
#ranger {
font-size: 25px;
padding-left: 5px;
}
#borderabout {
background-color: #666;
width: 100%;
color: #FFFFFF;
text-align: center;
border-radius: 25px;
opacity: 0.70;
}
#borderourgoal {
font-size: 35px;
line-height: 70px;
}
#ourgoal {
letter-spacing: 10px;
}
#you {
font-size: 60px;
}
#about {
letter-spacing: 10px;
}
#border3 {
background-color: #1be2e5;
opacity: 0.60;
height: 650px;
color: #111111;
}
#opacityforborder3 {
padding-top: 200px;
font-size: 30px;
}
#imgtxt2 {
height: 100%;
}
.button1 {
border-radius: 15px;
margin-top: 80px;
margin-left: 605px;
border: none;
background-color: #666;
color: #FFFFFF;
padding: 20px;
text-align: center;
text-decoration: none;
font-size: 25px;
}
.button1:hover {
background-color: #FFFFFF;
color: #666;
border-style: solid;
border-width: 1.5px;
border-color: #666;
}
#contacts {
font-size: 25px;
text-align: center;
width: 100%;
}
#button2 {
padding: 10px;
margin-left: 300px;
height: 100px;
width: 100px;
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Gmail_Icon.svg/100px-Gmail_Icon.svg.png");
border: none;
border-radius: 25px;
margin-top: 25px;
}
#button2:hover {
padding: 10px;
margin-left: 285px;
height: 140px;
width: 140px;
background: url("https://lh6.ggpht.com/8-N_qLXgV-eNDQINqTR-Pzu5Y8DuH0Xjz53zoWq_IcBNpcxDL_gK4uS_MvXH00yN6nd4=w140-rw");
border: none;
border-radius: 25px;
margin-top: 5px;
}
#Mygmail {
font-size: 20px;
margin-left: 290px;
margin-bottom: 0px;
width: 75%;
}
#dots {
visibility: hidden;
}
#refs {
float: right;
margin-right: 10px;
}
#linktext {
font-size: 17px;
margin-left: 35px;
}
#link01 {
margin-left: 300px;
}
#link1 {
margin-left: 170px;
}
#link2 {
margin-left: 60px;
}
#link3 {
margin-left: 125px;
}
#link4 {
margin-left: 50px;
}
a {
color: #60d16b;
}
#imgc4 {
background-color: #666;
height: 300px;
color: #FFFFFF;
}
#image1 {
height: 265px;
width: 400px;
margin-top: 20px;
margin-left: 20px;
}
#byme {
margin-left: 350px;
font-size: 13px;
}
<!DOCTYPE html>
<html>
<head>
<title>Resource Rangers</title>
<link href ="CSS for 4th project (1).css" rel ="stylesheet">
</head>
<style>
</style>
<body>
<div class="list">
<a class= "a1" href="about.asp">Lack of Water</a>
Waters Journey
How
Why?
<a class= "on" href="default.asp">Home</a>
</div>
<div class= "imgc1">
<br>
<div class= "title">
<div class= "border1">
<h3 align="center"> Resource Rangers </h3>
</div>
</div>
</div>
<div id= "section1">
<div id= "about">
<h2> About </h2>
</div>
<section>
<div id= "borderabout">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse blandit tortor varius, suscipit felis nec, consectetur est. Fusce at commodo velit. Aenean dictum ipsum est, ut congue ligula condimentum et. Nullam cursus a purus id maximus. Sed ullamcorper erat neque, placerat pellentesque lectus scelerisque sit amet. Fusce mi enim, bibendum gravida ex vel, dignissim aliquam dui. Etiam porta augue non dignissim sagittis. Suspendisse at quam a felis hendrerit aliquam. Sed elementum dapibus venenatis. Sed a neque ac tellus auctor dictum ac ut ante. Cras a lectus et nisl faucibus venenatis. Pellentesque placerat dolor at dolor bibendum maximus. Nullam faucibus massa at enim blandit ultrices. Nulla dapibus lacinia turpis eu aliquam. Morbi at fringilla tortor, eu eleifend leo. <span id= "ranger">Resource Ranger!</span>
</p>
</div>
</section>
</div>
<div id= "imgc2">
<div id="Imgtxt1">
<div id= "border2">
<h1 align="center"> "When the Wells dry, we know the worth of water"
<span class= "invis">.</span> <div id= "BF"> - Benjamin Franklin </div> </h1>
</div>
</div>
</div>
<div id= "section2">
<section>
<div id= "ourgoal">
<h2> Our Goal </h2>
</div>
<div id= "borderourgoal">
<p>
<span id= "you">You</span> to be inspired to and help you get involved, for the benefit of our community of , as well as the global community, and our planet.
</p>
</div>
</section>
</div>
<div id= "imgc3">
<div id="Imgtxt2">
<div id= "border3">
<div id= "opacityforborder3">
<h1 align="center" class= "moreinfo"> To find out more information </h1>
<button class= "button1" onclick="location.href = 'default.asp';">Click Here</button>
</div>
</div>
</div>
</div>
<div id= "section3">
<span id= "contacts">
<h2> Contacts </h2>
</span>
<div id= "Mygmail">
<h3> My Gmail<span id= "dots">......................................................</span>More References</h3></div>
<div id= "stuff1">
<button id= "button2" onclick="location.href = 'https://www.lipsum.com/feed/html';"></button>
<span id= "refs"> <span id= "linktext">Here are some more links if you are looking to go more in depth into water conservation! </span><br>
<span id="link01">https://saveourwater.com</span>
<br>
<span id= "link1"> https://www.farnellfamily.com/cfarnell/why/default.html</span><br>
<span id= "link2"> https://learn.eartheasy.com/guides/45-ways-to-conserve-water-in-the-home-and-yard/ </span><br>
<span id= "link3"> https://www.constellation.com/energy-101/water-conservation-tips0.html</span><br>
<span id= "link4"> https://www.lipsum.com/feed/html</span></span>
</div>
</div>
<div id= "imgc4">
<div id="Imgtxt3">
<div id= "border4">
<img id= "image1" src="wix3.png">
<span id="byme">By All rights reserved</span>
</div>
</div>
</div>
</body>
<script type="text/javascript">
</script>
</html>
in your html class name "List" where as in css its "list". change "List" to "list" in html. please keep the class name in html and css same. or else they will not work.
.list {
background-color: #666;
color: #111111;
height: 105px;
width: 100%;
}
<div class="List">
</div>
<!-- in the above class name is "List". change it to "list" -->
<div class="list">
</div>
I'm making a site and using a grid for my body. Now I'm trying to make a footer for my site but my footer is getting placed right of my main body.
I think the problem might be something with my container though I'm not really sure...
.container {
display: grid;
grid-template-columns: 50% auto;
height: auto;
align-self: center;
margin: 0 65px;
height: 90% auto;
}
I really wouldn't know how to fix this. Can somebody please help me?
This is my HTML & CSS:
body,
html {
height: 100%;
margin: 0;
width: 100%;
}
body {
font-family: "Montserrat";
display: grid;
grid-template-columns: 100% auto;
grid-template-rows: 90% auto;
background-color: rgb(27, 27, 27);
color: white;
}
.bg,
.bg2 {
width: 100%;
height: 100%;
position: absolute;
}
.bg {
-webkit-clip-path: polygon(66% 67%, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(66% 67%, 100% 0, 100% 100%, 0% 100%);
z-index: -1;
background-color: #053970;
}
.bg2 {
z-index: -2;
background-color: #004288;
-webkit-clip-path: polygon(49% 67%, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(49% 67%, 100% 0, 100% 100%, 0% 100%);
}
.container {
display: grid;
grid-template-columns: 50% auto;
height: auto;
align-self: center;
margin: 0 65px;
height: 90% auto;
}
a {
color: black;
}
a:visited {
color: black;
}
ul {
list-style-type: none;
perspective: 1000px;
}
ul a li {
display: grid;
grid-template-columns: 20% auto;
border-radius: 10px;
padding: 15px;
cursor: pointer;
transform: rotateY(-30deg) rotateX(15deg);
position: absolute;
opacity: 0.8;
border-bottom: 4px solid rgba(0, 0, 0, .2);
mix-blend-mode: multiply;
width: 500px;
}
ul a:nth-child(1) li {
background: #a9cfe2;
top: -105px;
z-index: 2;
}
ul a:nth-child(2) li {
background: #85b890;
z-index: 1;
top: 0px;
}
ul a:nth-child(3) li {
background: #cca6a6;
z-index: 0;
top: 105px;
}
ul a li:hover {
transform: rotateY(-22deg) rotateX(7deg) scale(1.05);
transition: transform .45s ease-out;
z-index: 3;
mix-blend-mode: normal;
}
footer {
height: 10%;
width: 100%;
background-color: #333;
bottom: 0;
left: 0;
display: initial;
float: bottom;
}
img {
margin-top: 5;
width: 70px;
}
h1 {
font-size: 3em;
margin-top: 0;
margin-bottom: 0;
}
h2 {
font-size: 2em;
margin-top: 0;
}
#left>p {
color: #aaa;
line-height: 1.5em;
}
#right {
margin-left: 15%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="styles/main.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
<div class="bg"></div>
<div class="bg2"></div>
<div class="container">
<div id="left">
<h1>Supercool Website</h1>
<h2>Supercool website for cool kids only</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac quam augue. Suspendisse potenti. Phasellus at vestibulum nunc. Phasellus suscipit elit odio, feugiat varius quam hendrerit sed. Mauris fringilla blandit maximus. Cras magna metus,
imperdiet congue convallis eu, finibus eget urna. In ac porttitor diam, sit amet sagittis tellus. Nullam consequat luctus ornare. Nulla vitae lectus vitae nisi dapibus ultricies. Aenean tempus nisl sit amet augue luctus pulvinar. Phasellus scelerisque
aliquet lorem.</p>
</div>
<div id="right">
<ul>
<a href="#">
<li>
<img src="img/img1.png">
<span>
<strong>Option 1</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</span>
</li>
</a>
<a href="#">
<li>
<img src="img/img2.png">
<span>
<strong>Option 2</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</span>
</li>
</a>
<a href="#">
<li>
<img src="img/img3.png">
<span>
<strong>Over Ons</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</span>
</li>
</a>
</ul>
</div>
</div>
</body>
</html>
Maybe Your Forgetting
grid-template-rows: auto 1fr auto;?
Check Out This Article Maybe It Might Help.
https://dev.to/niorad/keeping-the-footer-at-the-bottom-with-css-grid-15mf