This is my code, I've started making a simple menu but the problem is that it is not 100% height. I've tried many solutions I have seen on similar posts but none of them help. I have tried setting the min-height, changing between % and vh, and much more but none of it worked.
M.AutoInit()
let sideMenu=document.getElementById("sideMenu")
sideMenu.addEventListener("mouseenter",()=>{
sideMenu.setAttribute("class", "col s12 m12 l12 side-menu")
})
sideMenu.addEventListener("mouseleave",()=>{
sideMenu.setAttribute("class", "col s2 m2 l2 side-menu")
})
.side-menu{
background-color: #b9ffc8;
height: 100% !important;
transition:ease-in-out .3s;
}
.side-menu:hover{
background-color: #5eff81;
}
.side-menu-wrapper{
height: 100% !important;
}
.row {
height: 100vh !important;
}
.menu-icon{
color:darkgrey;
transition: ease-in-out .3s;
}
.side-menu:hover .menu-icon{
color:white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="row">
<div class="col s3 m2 l2 side-menu-wrapper">
<div class="row">
<div class="col s2 m2 l2 side-menu" id="sideMenu">
<i class="small material-icons menu-icon">dehaze</i>
</div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
Add margin: 0; to the .row class. To be more precise add margin-bottom: 0;.
You can also remove all the !important's from the height's.
.side-menu {
background-color: #b9ffc8;
height: 100%;
transition: ease-in-out 0.3s;
}
.side-menu:hover {
background-color: #5eff81;
}
.side-menu-wrapper {
height: 100%;
}
.row {
height: 100vh;
margin-bottom: 0;
}
.menu-icon {
color: darkgrey;
transition: ease-in-out 0.3s;
}
.side-menu:hover .menu-icon {
color: white;
}
See it in action on codepen: https://codepen.io/manaskhandelwal1/pen/rNWLVLg
Presuming you are talking about the little gap at the bottom.
Row is a Materialize class:
.row {
margin-left: auto;
margin-right: auto;
margin-bottom: 20px
}
So if you change your row class to:
.row {
height: 100vh !important;
margin-bottom:0px !important
}
It will override the materialise margin-bottom:20px .
And you'll get 100% height
Related
I´m having trouble with animating a dropdown menu with css. I need it to work with css3 and not jQuery or javascript. I've added all the rules neccessary but still the opacity tag inside my tranistion tag in my css appears like a normal word and is not marked like the other tags and so the effect dont works.
body {
background-color: rgb(20, 20, 20);
margin: 0px;
}
.menu {
height: 100vh;
display: flex;
align-items: center;
}
.menu-item {
color: aliceblue;
font-size: clamp(2rem, 7vw, 7rem);
font-family: 'Orbitron', sans-serif;
display: block;
text-decoration: none;
padding: clamp(0.25rem, 0.5vw, 1rem) 0rem;
transition: opacity 400ms ease;
}
.menu-items {
margin-left: 100px;
position: relative;
z-index: 2;
}
.menu-items:hover>.menu-item {
opacity: 0.3;
}
.menu-items:hover>.menu-item:hover {
opacity: 1;
}
.menu-background-pattern {
height: 100vh;
width: 100vw;
background-image: radial-gradient( rgba(2255, 255, 255, 0.1) 9%, transparent 9%);
background-position: 0% 0%;
background-size: 12vmin 12vmin;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
<!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">
<title>Rahim's Portfolio Page</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght#600&display=swap" rel="stylesheet">
</head>
<body>
<div class="menu">
<div class="menu-items">
Projects
Resume
Testemony
Kontakt
</div>
<div class="menu-background-pattern"></div>
</div>
</body>
</html>
I am making a site and the text that says what's new in the code snippet below is not fitting at the top of the box I created.
:root {
--border-width: 100px;
--border-height: 200px;
--border-color: #000;
--box-color: #A8CCC9;
--background-color: #75B9BE;
}
.lftSector {
border-style: dashed;
width: var(--border-width, 100px);
height: var(--border-height, 200px);
padding: 50px;
border: 6px solid var(--border-color, gray);
background-color: var(--box-color);
}
body {
background-color: var(--background-color);
}
ol {
width: var(--border-width);
float: left;
}
<!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="https://Wick-Gallery.nikhilharry.repl.co/style.css">
<title>Gallery</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght#0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap" rel="stylesheet">
<link href="gstyle.css" rel="stylesheet">
</head>
<body>
<h1> Welcome to the gallery</h1>
<div class="lftSector">
<h1 class="content">What's New?</h1>
<ol>
[BETA]</div> Transformation</li>
</ol>
</div>
</body>
</html>
As you see, this makes a background with a box and text. Please show me how to position the <h1> at the top of the box with the border I created.
This should help. That 50 px padding was removed and then width and min-width were used to control the width of the box. Also applied margin css to the h1.
:root {
--border-width: 100px;
--border-height: 200px;
--border-color: #000;
--box-color: #A8CCC9;
--background-color: #75B9BE;
}
.lftSector {
border-style: dashed;
width: 50%; /* changed */
min-width: 200px; /* added */
height: var(--border-height, 200px);
border: 6px solid var(--border-color, gray);
background-color: var(--box-color);
}
body {
background-color: var(--background-color);
}
ol {
width: var(--border-width);
float: left;
}
.content { /* added */
margin: 0 .5rem; /* added */
} /* added */
<!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="https://Wick-Gallery.nikhilharry.repl.co/style.css">
<title>Gallery</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght#0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap" rel="stylesheet">
<link href="gstyle.css" rel="stylesheet">
</head>
<body>
<h1> Welcome to the gallery</h1>
<div class="lftSector">
<h1 class="content">What's New?</h1>
<ol>
<a href="linkoftruth">
<li>
<div id="beta">[BETA]</div> Transformation</li>
</a>
</ol>
</div>
</body>
</html>
There were a few problems with your code. Firstly, the header was being smushed, because you used padding to give your div its size, as opposed to a width and a height. Next, you were calling on variables from :root, but also trying to pass values into those variables. To achieve your solution, I fixed the issues mentioned, as well as created two new div sections - one for the header, and one for the list. Also, you were wrapping your li elements in a tags. It should be the other way around.
:root {
--border-width: 100px;
--border-height: 200px;
--border-color: #000;
--box-color: #A8CCC9;
--background-color: #75B9BE;
}
body {
background-color: var(--background-color);
}
.lftSector {
width: 300px;
height: 300px;
border: 6px solid var(--border-color, gray);
background-color: var(--box-color);
}
.lftSector > div {
width: 100%;
text-align: center;
height: 20%;
display: flex;
justify-content: center;
align-items: center;
}
#content {
width: 100%;
height: 80%;
}
<h1> Welcome to the gallery</h1>
<div class="lftSector">
<div>
<h1 class="content">What's New?</h1>
</div>
<div id="content">
<ol>
<li><span id="beta">[BETA]</span>Transformation</li>
</ol>
</div>
</div>
Additionally, I'd recommend usually setting your widths to be percentages, or based on vw/vh. Just a tip.
I have the following HTML block.
/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {
height: 1500px;
}
/* Set gray background color and 100% height */
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
.center-banner {
height: 145px;
background-repeat: no-repeat;
}
.work-box-container .work-box {
background: url(https://i.postimg.cc/Z5gq4xHd/Promotionaloff.png);
}
.work-box-container:hover .work-box {
background: url(https://i.postimg.cc/ZKwRDSyj/Promotionalon.png);
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {
height: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid center-banner">
<div class="row content">
<div class="">
<div class="work-box-container ">
<div class="work-box center-banner">
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid">
<p>Footer Text</p>
</footer>
</body>
</html>
Hover effect is not working properly on first load.
I have checked here, but couldn't make it work.
use transition-delay on your hover, so that it will kind of animate the hover feature which looks smooth transition.
/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {
height: 1500px;
}
/* Set gray background color and 100% height */
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
.center-banner {
height: 145px;
background-repeat: no-repeat;
}
.work-box-container .work-box {
background: url(https://i.postimg.cc/Z5gq4xHd/Promotionaloff.png);
}
.work-box-container:hover .work-box {
background: url(https://i.postimg.cc/ZKwRDSyj/Promotionalon.png);
transition-delay: 0.3s;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {
height: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid center-banner">
<div class="row content">
<div class="">
<div class="work-box-container ">
<div class="work-box center-banner">
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid">
<p>Footer Text</p>
</footer>
</body>
</html>
I got it to stop jumping by editing work-box-container and work-box like so
.work-box-container{
background: url(https://i.postimg.cc/Z5gq4xHd/Promotionaloff.png)
}
.work-box {visibility:hidden}
.work-box-container:hover .work-box {
visibility:visible;
background: url(https://i.postimg.cc/ZKwRDSyj/Promotionalon.png)
}
See now:
/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {
height: 1500px;
}
/* Set gray background color and 100% height */
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
.center-banner {
height: 145px;
background-repeat: no-repeat;
}
.work-box-container{
background: url(https://i.postimg.cc/Z5gq4xHd/Promotionaloff.png)
}
.work-box {visibility:hidden}
.work-box-container:hover .work-box {
visibility:visible;
background: url(https://i.postimg.cc/ZKwRDSyj/Promotionalon.png)
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {
height: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid center-banner">
<div class="row content">
<div class="">
<div class="work-box-container ">
<div class="work-box center-banner">
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid">
<p>Footer Text</p>
</footer>
</body>
</html>
Because the first time you hover the image it needs to get loaded. This takes some time, hence the effect.
You can solve this in a couple of ways:
One way is to use some sort of preloading
Another way (in my opinion, the preferred way) would be to just use one image and just change it:
/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {
height: 1500px;
}
/* Set gray background color and 100% height */
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
.center-banner {
height: 145px;
background-repeat: no-repeat;
}
.work-box-container .work-box {
background: url(https://i.postimg.cc/Z5gq4xHd/Promotionaloff.png);
}
.work-box-container:hover .work-box {
opacity: .7; /*NOTE: only opacity changed here, no second image needed*/
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {
height: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid center-banner">
<div class="row content">
<div class="">
<div class="work-box-container ">
<div class="work-box center-banner">
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid">
<p>Footer Text</p>
</footer>
</body>
</html>
If u want smooth transition,Try this:-
-The best way in css is to PRELOAD the image to avoid the glitch on first load.
/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {
height: 1500px;
}
/* Set gray background color and 100% height */
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
.center-banner {
height: 145px;
background-repeat: no-repeat;
}
.work-box-container .work-box {
background: url(https://i.postimg.cc/Z5gq4xHd/Promotionaloff.png);
transition:all 0.3s;
}
.work-box-container:hover .work-box{
background-image: url(https://i.postimg.cc/ZKwRDSyj/Promotionalon.png);
}
body:after{
display:none;
content: url(https://i.postimg.cc/ZKwRDSyj/Promotionalon.png);
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {
height: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid center-banner">
<div class="row content">
<div class="">
<div class="work-box-container ">
<div class="work-box center-banner">
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid">
<p>Footer Text</p>
</footer>
</body>
</html>
Best way to accomplish this is to use CSS sprite image technique. I have accomplished using it. Please adjust your image height and background-position to your need.
.work-box {
background: transparent url(https://i.ibb.co/LN767Nr/sprite.png) -0 -0 no-repeat;
height: 70px;
width: 1334px;
}
.work-box:hover {
background: transparent url(https://i.ibb.co/LN767Nr/sprite.png) -0 -70px no-repeat;
height: 70px;
width: 1334px;
}
<div class="work-box-container ">
<div class="work-box">
</div>
</div>
The text of second h5 element doesnt resize properly and get out over the background color, I also tested put the h5 inside a div and apply css to the div but it didnt work, what am I missing?
Here is the relevant code (I had to remove other elements and css properties):
.container {
position: relative;
display: inline-block;
margin-top: 50px;
}
.card .front {
color: white;
text-align: center;
font-weight: bold;
position: absolute;
}
.card .front h5 {
background-color: #5E92F2;
padding: 10px 0 10px 0;
margin-top: 98%;
width: 198px;
height: 44px;
}
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<section class="container">
<div class="card">
<div class="front" style="background-image: url('image.jpg');">
<h5>Image 1</h5>
</div>
<div class="back">Abc</div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front" style="background-image: url('image.jpg');">
<h5>Image 1 With more text</h5>
</div>
<div class="back">Abc</div>
</div>
</section>
try this :
h5{
font-size: 100%;
}
As the h5 has a fixed height, that is the expected behavior.
Change to min-height: 44px; in the .card .front h5 rule
.container {
position: relative;
display: inline-block;
margin-top: 50px;
}
.card .front {
color: white;
text-align: center;
font-weight: bold;
position: absolute;
}
.card .front h5 {
background-color: #5E92F2;
padding: 10px 0 10px 0;
margin-top: 98%;
width: 198px;
min-height: 44px;
}
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<section class="container">
<div class="card">
<div class="front" style="background-image: url('image.jpg');">
<h5>Image 1</h5>
</div>
<div class="back">Abc</div>
</div>
</section>
<section class="container">
<div class="card">
<div class="front" style="background-image: url('image.jpg');">
<h5>Image 1 With more text</h5>
</div>
<div class="back">Abc</div>
</div>
</section>
For h5 you are adding height: 44px; so the font-size is taking default h5 font size if you decrease the font size it will fix the issue or increase the height of h5
so use something like
.card .front h5{
font-size:16px;
}
or
.card .front h5{
height:64px;
}
Your css set heigth of the element to 44px and font-size to 1.25rem, change one of the properties or both, for example heigth to auto if you want to keep font-size, or change font-size to 100% if you want to keep the heigth of the element. There are several ways to do this.
This may be a really simple solution, but I cannot seem to find it.
I basically would like the second green div to show as well under the first brown one, so as you scroll down the page the green one will pop up as well.
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.content {
height: 1500px;
background-color: brown;
}
.parallax-bg {
padding: 400px 0;
background-image: url(skyline.jpg);
background-size: cover;
background-attachment: fixed;
-webkit-transition: all .02s ease;
-moz-transition: all .02s ease;
transition: all .02s ease;
z-index: 1;
}
.parallax-bg h1 {
text-align: center;
font-size: 100px;
font-family: Arial;
color: white;
}
#seconddiv {
background-color: green;
height: 1000px;
padding: 100px 0;
}
#media screen and (max-width: 568px) {
.parallax-bg h1 {
color: blue;
font-size: 50px;
position: relative;
top: -100px;
color: white;
}
}
</style>
</head>
<body>
<div class="content">
<div class="parallax-bg">
<h1>First Section</h1>
</div>
<div class="parallax-bg" id="seconddiv">
<h1>Second Section</h1>
</div>
</div>
</body>
</html>