I have this web page in construction, that should have a button that displays more buttons, but for some reason I don't know, these on hover hidden buttons don't appear (I've used this: https://es.stackoverflow.com/questions/126579/como-se-crea-un-bot%c3%b3n-que-despliegue-mas-botones). Any one know how to make this buttons appear? it seems to work fine with the snippet, then: what can be the problem? I whant it to be in separated files.
var flag = false;
$("#botones").mouseenter(function() {
if (!flag) {
flag = true;
$("#resto").show(200, function() {
flag = true;
});
}
}).mouseleave(function() {
$("#resto").hide(200);
});
* {
margin: 0px;
padding: 0px;
}
div#general {
margin: auto;
display: grid;
margin-top: 0%;
width: 100%;
height: 100%;
background-color: #4f6d7a;
}
div#enlaces {
float: center;
display: center;
width: 100%;
height: 100px;
background-color: #166088;
}
div#tablas_carpetas {
position: relative;
display: flex;
flex-wrap: wrap;
width: 100%;
height: 1400px;
background-color: #DBE9EE;
}
div#tablas {
order: 1;
position: static;
background-color: #dfc0c0;
height: 600px;
width: 40%;
}
div#carpetas {
order: 2;
width: 60%;
height: 600px;
background-color: green;
}
#media all and (max-width: 450px) {
div#tablas_carpetas {
display: grid;
}
div#tablas {
width: 100%;
order: 1;
}
div#carpetas {
width: 100%;
order: 2;
}
}
<!doctype html>
<html lang="es">
<head>
<title>Viewer</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="index_style_viewer.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="botones.js"></script>
</head>
<body>
<div id="general">
<div id="enlaces">
</div>
<div id="tablas_carpetas">
<div id="tablas">
</div>
<div id="carpetas">
<div id="botones" onmouseover="">
<button id="principal_1">Redes Sociales</button>
<div id="resto" hidden>
<button>Facebook</button>
<button>Twitter</button>
<button>LinkedIn</button>
<button>Gooogle</button>
</div>
</div>
</div>
</div>
<div id="anuncios">
</div>
<div id="pie">
</div>
</div>
</body>
</html>
you have issue with your js condition i simply tried with jquery it works perfectly
$(document).ready(function(){
$("#botones").mouseenter(function(){
$("#resto").show();
});
$("#botones").mouseleave(function(){
$("#resto").hide();
});
});
* {
margin: 0px;
padding: 0px;
}
div#general {
margin: auto;
display: grid;
margin-top: 0%;
width: 100%;
height: 100%;
background-color: #4f6d7a;
}
div#enlaces {
float: center;
display: center;
width: 100%;
height: 100px;
background-color: #166088;
}
div#tablas_carpetas {
position: relative;
display: flex;
flex-wrap: wrap;
width: 100%;
height: 1400px;
background-color: #DBE9EE;
}
div#tablas {
order: 1;
position:static;
background-color: #dfc0c0;
height: 600px;
width: 40%;
}
div#carpetas {
order: 2;
width: 60%;
height: 600px;
background-color: green;
}
#media all and (max-width: 450px) {
div#tablas_carpetas {
display:grid;
}
div#tablas {
width: 100%;
order: 1;
}
div#carpetas {
width: 100%;
order: 2;
}
}
<!doctype html>
<html lang="es">
<head>
<title>Viewer</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="general">
<div id="enlaces">
</div>
<div id="tablas_carpetas">
<div id="tablas">
</div>
<div id="carpetas">
<div id="botones">
<button id="principal_1">Redes Sociales</button>
<div id="resto" hidden>
<button>Facebook</button>
<button>Twitter</button>
<button>LinkedIn</button>
<button>Gooogle</button>
</div>
</div>
</div>
</div>
<div id="anuncios">
</div>
<div id="pie">
</div>
</div>
</body>
</html>
Related
Is there any way to make the 3rd div positioned to fixed, because when I clicked the slideUp button, the divs are collapsing. I want all of them to slide up and down in their current position. I think its due to flexbox as it is centering the whole thing. I tried removing that but still it doesn't work.
$(document).ready(function () {
$("#btn2").click(function () {
$("#div1").slideUp();
$("#div2").slideUp("slow");
$("#div3").slideUp(3000);
});
$("#btn1").click(function () {
$("#div1").slideDown();
$("#div2").slideDown("slow");
$("#div3").slideDown(3000);
});
});
h1 {
text-align: center;
}
#btn1 {
position: absolute;
left: 60vw;
}
#btn2 {
position: absolute;
left: 20vw;
}
button {
padding: 15px 60px;
}
#flex {
display: flex;
position: absolute;
top: 30vh;
justify-content: space-around;
width: 99vw;
}
#flex > div {
width: 30vw;
border: 1px solid black;
height: 30vh;
}
#div1 {
background-color: blueviolet;
}
#div2 {
background-color: salmon;
}
#div3 {
background-color: greenyellow;
}
button:active,
button:visited {
background-color: yellow;
}
.white {
background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<script src="jquery.min.js"></script>
<title>Assignment</title>
</head>
<body>
<h1>Demonstrate slideUP() and slideDown() with different parameters.</h1>
<button id="btn1">CLick to slideDown boxes</button>
<button id="btn2">CLick to slideUp boxes</button>
<div id="flex">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Please try this once
You just need to add wrapper div and set it's width
.wrapper{
width:33.33%;
}
$(document).ready(function () {
$("#btn2").click(function () {
$("#div1").slideUp();
$("#div2").slideUp("slow");
$("#div3").slideUp(3000);
});
$("#btn1").click(function () {
$("#div1").slideDown();
$("#div2").slideDown("slow");
$("#div3").slideDown(3000);
});
});
h1 {
text-align: center;
}
#btn1 {
position: absolute;
left: 60vw;
}
#btn2 {
position: absolute;
left: 20vw;
}
button {
padding: 15px 60px;
}
#flex {
display: flex;
position: absolute;
top:200px;
justify-content: space-around;
width: 99vw;
}
#flex > div > div {
width: 30vw;
border: 1px solid black;
height: 30vh;
}
#div1 {
background-color: blueviolet;
}
#div2 {
background-color: salmon;
}
#div3 {
background-color: greenyellow;
}
button:active,
button:visited {
background-color: yellow;
}
.white {
background-color: white;
}
.wrapper{
width:33.33%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<script src="jquery.min.js"></script>
<title>Assignment</title>
</head>
<body>
<h1>Demonstrate slideUP() and slideDown() with different parameters.</h1>
<button id="btn1">CLick to slideDown boxes</button>
<button id="btn2">CLick to slideUp boxes</button>
<div id="flex">
<div class="wrapper">
<div id="div1"></div>
</div>
<div class="wrapper">
<div id="div2"></div>
</div>
<div class="wrapper">
<div id="div3"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Don't need to wrap div with extra div so You can achieve with existing div structure with help of justify-content: flex-end; property on #flex div.
And add css on child like: #flex > div { flex: 1 0 calc(100% / 3); max-width: calc(100% / 3);}.
Flexbox Source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You can try below snippet.
$(document).ready(function () {
$("#btn2").click(function () {
$("#div1").slideUp();
$("#div2").slideUp("slow");
$("#div3").slideUp(3000);
});
$("#btn1").click(function () {
$("#div1").slideDown();
$("#div2").slideDown("slow");
$("#div3").slideDown(3000);
});
});
h1 {
text-align: center;
font-size: 20px;
}
button {
padding: 15px 20px;
margin-bottom: 5px;
}
#flex {
display: flex;
position: relative;
justify-content: flex-end;
width: 100%;
}
#flex > div {
flex: 1 0 calc(100% / 3);
max-width: calc(100% / 3);
border: 1px solid black;
height: 30vh;
}
#div1 {
background-color: blueviolet;
}
#div2 {
background-color: salmon;
}
#div3 {
background-color: greenyellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Demonstrate slideUP() and slideDown() with different parameters.</h1>
<button id="btn1">CLick to slideDown boxes</button>
<button id="btn2">CLick to slideUp boxes</button>
<div id="flex">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
You could try this, this will automatically adjust based on how many divs you are putting inside your #flex. You are correct about the problem in your divs are, once they got 0 height, they will tend to disappear, and since they are centered by flex, divs are tend to center itself. Now enclosing it in divs will prevent it from disappearing.
$(document).ready(function () {
$("#btn2").click(function () {
$("#div1").slideUp();
$("#div2").slideUp("slow");
$("#div3").slideUp(3000);
});
$("#btn1").click(function () {
$("#div1").slideDown();
$("#div2").slideDown("slow");
$("#div3").slideDown(3000);
});
$("#flex div div").parent().css({
"width":((100 / ($("#flex div div").parent().length)).toFixed(0)-1)+ "%",
"display":"inline-block",
"vertical-align":"top"
});
});
h1 {
text-align: center;
}
#btn1 {
position: absolute;
left: 60vw;
}
#btn2 {
position: absolute;
left: 20vw;
}
button {
padding: 15px 60px;
}
#flex {
display: table;
position: absolute;
top: 30vh;
justify-content: space-around;
width: 99vw;
}
#flex > div > div{
width: 30vw;
border: 1px solid black;
height: 30vh;
}
#div1 {
background-color: blueviolet;
}
#div2 {
background-color: salmon;
}
#div3 {
background-color: greenyellow;
}
button:active,
button:visited {
background-color: yellow;
}
.white {
background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="style.css"/>
<script src="jquery.min.js"></script>
<title>Assignment</title>
</head>
<body>
<h1>Demonstrate slideUP() and slideDown() with different parameters.</h1>
<button id="btn1">CLick to slideDown boxes</button>
<button id="btn2">CLick to slideUp boxes</button>
<div id="flex">
<div>
<div id="div1"></div>
</div>
<div>
<div id="div2"></div>
</div>
<div>
<div id="div3"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
This is another approach. This doesn't rely on display:flex at all. Here we make the flex div have a position:relative and it's child i.e. flex>div or box have a position:absolute.
Now on starting of the JS code, I have added a bit to dynamically take care of the left position of these absolutely positioned child elements. In our case , div1 will end up with left = 0%, div2 with left = 33% and div3 with left = 66% . I have added a smooth transition as well to make up for the delay in positioning the elements.
Now your slideUp and slideDown is working on absolutely positioned elements which actually don't occupy any space like normal position:static (yes this is by default) elements. So you don't need to wrap them in additional individual divs now.
Also this is just one of the many approaches. Felt fancy so sharing it.
$(document).ready(function () {
let leftPos = 0;
let boxes = [...document.querySelectorAll('.box')];
for(let index = 1;index<boxes.length;index++)
{
boxes[index].style.left = `${(100/boxes.length)*index}%`;
}
$("#btn2").click(function () {
$("#div1").slideUp();
$("#div2").slideUp("slow");
$("#div3").slideUp(3000);
});
$("#btn1").click(function () {
$("#div1").slideDown();
$("#div2").slideDown("slow");
$("#div3").slideDown(3000);
});
});
h1 {
text-align: center;
}
#btn1 {
position: absolute;
left: 60vw;
}
#btn2 {
position: absolute;
left: 20vw;
}
button {
padding: 15px 60px;
}
#flex {
position: relative;
top: 30vh;
width: 99vw;
}
#flex > div {
width: 30vw;
position:absolute;
border: 1px solid black;
transition: left 0.5s;
height: 30vh;
}
#div1 {
background-color: blueviolet;
}
#div2 {
background-color: salmon;
left:0
}
#div3 {
background-color: greenyellow;
left:0
}
button:active,
button:visited {
background-color: yellow;
}
.white {
background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<script src="jquery.min.js"></script>
<title>Assignment</title>
</head>
<body>
<h1>Demonstrate slideUP() and slideDown() with different parameters.</h1>
<button id="btn1">CLick to slideDown boxes</button>
<button id="btn2">CLick to slideUp boxes</button>
<div id="flex">
<div class='box' id="div1"></div>
<div class='box' id="div2"></div>
<div class='box' id="div3"></div>
</div>
<script src="script.js"></script>
</body>
</html>
I'm practising with JavaScript and hiding the image and the button. The footer keeps coming to the top of the page every time I execute the command. How can I correct this? I've tried many different options and I can't seem to get it to work right like position: sticky, bottom:0; for example.
I'm extremely new to this coding thing so I'm pretty sure I have no idea what I'm doing.
jQuery(document).ready(function() {
$(".myButton").click(function(){
$(".poem").show();
$(".resize").show();
$(".main-image").hide();
});
$(".resize").click(function(){
$(".poem").hide();
$(".resize").hide();
})
})
#charset "utf-8";
/* CSS Document */
.main-image {
display: block;
width: 25%;
margin-bottom: 30px;
}
.container {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100%;
}
.overlay-content {
position: absolute;
bottom: 15%;
text-align: center;
width: 25%;
}
.resize {
position: absolute;
z-index: 1;
top: 0;
right: 0;
}
footer {
background-color: brown;
border: solid;
position: sticky;
bottom: 0;
}
.myButton {
margin-left: 50%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>practice_overlay</title>
<link href="Overlay.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="script_storage.js"></script>
</head>
<body>
<div class="container">
<p class="introduction">Lorem Ispum</p>
<img class="main-image" src="Devry Web Design Intro Course/Pictures/crystal-tear-3.jpg">
<div class="overlay-content">
<button class="resize">X</button>
<h1>Hello World</h1>
</div>
<p class="poem">Lorem Ispum</p>
</div>
<button class="myButton">X</button>
<footer>Lorem Ispum</footer>
</body>
</html>
You could use CSS grid - with the setup in the snippet below, you can "safely" work inside the div.outer part of the layout, without making the other parts of your page "jumping around" :)
jQuery(document).ready(function() {
$(".myButton").click(function() {
$(".poem").show();
$(".resize").show();
$(".main-image").hide();
});
$(".resize").click(function() {
$(".poem").hide();
$(".resize").hide();
})
})
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
display: grid;
grid-template-rows: calc(100vh - 30px) 30px;
grid-template-columns: 100%;
}
.outer {
background: gray;
padding: 8px 16px;
overflow-y: scroll;
display: flex;
flex-direction: column;
}
.container {}
#image {
height: 30px;
width: 30px;
}
.myButton {
margin: 0 auto;
}
footer {
background-color: brown;
padding: 8px 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<div class="outer">
<div class="container">
<p class="introduction">Introduction</p>
<img id="image" src="https://picsum.photos/30" alt="small image" />
<div class="overlay-content">
<button class="resize">X</button>
<h1>Hello World</h1>
</div>
<p class="poem">Lorem Ispum</p>
</div>
<button class="myButton">X</button>
</div>
<footer>
footer
</footer>
</div>
I'm trying to code 2048 using HTML/ CSS/ JS
I got the layout of the grid using this Html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>2048</title>
</head>
<body>
<div class = "wrapper">
<div class="gridd">
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
And for it I'm using this CSS:
* {
margin: 0;
padding: 0;
}
body {
background-color: #C2C2C2;
}
h1 {
font-family: Asap,sans-serif;
font-size: 24pt;
margin-top:35%;
text-align: center;
color: white;
}
.gridd {
width: 340px;
height: 340px;
background-color: #B4B4B4;
border-radius: 15px;
padding: 15px;
position: absolute;
margin: auto;
}
.gridd > div {
width: 100px;
height: 100px;
background-color:#787878;
border-radius: 15px;
margin:5px;
display: inline-block;
}
.wrapper{
position: absolute;
margin: 80px 0 0 200px;
}
I'm simply using this JS code to generate the initial twos on the grid:
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
var y = document.getElementsByTagName("H1");
y[getRandomInt(8)].innerHTML = 2;
y[getRandomInt(8)].innerHTML = 2;
Now, on load I'm getting this unpleasant scene:
Can someone help me understand what's going on please?
And how to fix it.
Thanks a lot.
Just add flex rules for selector .gridd:
.gridd{
...
display: flex;
flex-flow: wrap;
}
And replace display: inline-block with flex: auto in the selector .gridd >div:
.gridd >div{
...
flex: auto;
}
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
var y = document.getElementsByTagName("H1");
y[getRandomInt(8)].innerHTML = 2;
y[getRandomInt(8)].innerHTML = 2;
*{margin: 0;
padding: 0;
}
body{
background-color: #C2C2C2;
}
h1{
font-family: Asap,sans-serif;
font-size: 24pt;
margin-top:35%;
text-align: center;
color: white;
}
.gridd{
width: 340px;
height: 340px;
background-color: #B4B4B4;
border-radius: 15px;
padding: 15px;
position: absolute;
margin: auto;
display: flex;
flex-flow: wrap;
}
.gridd >div{
width: 100px;
height: 100px;
background-color:#787878;
border-radius: 15px;
margin:5px;
flex: auto;
}
.wrapper{
position: absolute;
margin: 80px 0 0 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>2048</title>
</head>
<body>
<div class = "wrapper">
<div class = "gridd" >
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
</div>
</div>
</body>
<!--script type="text/javascript" src="script.js"></script(-->
</html>
This can be simply fixed with changed to css file. use display: grid.
Also, do not use margin-top: 35%;. If you will make h1, or div, smaller or bigger, you will have to change the percentage too. Instead, you can center it via align-items: center.
This is the entire css file to fix the issue:
* {
margin: 0;
padding: 0;
}
body {
background-color: #c2c2c2;
}
h1 {
font-family: Asap, sans-serif;
text-align: center;
color: white;
}
.wrapper {
margin: 80px 0 0 200px;
border-radius: 15px;
background-color: #b4b4b4;
width: fit-content;
padding: 10px;
}
.gridd {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 5px;
}
.gridd > div {
background-color: #787878;
border-radius: 15px;
display: grid;
align-items: center;
}
It will center your h1 no matter what text size it is and no matter how big your div container.
EDIT
In fact, this entire thing can be made without a wrapper and extra div
HTML:
<div class="grid">
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
body {
background-color: #c2c2c2;
}
.grid {
margin: 80px 0 0 200px;
border-radius: 15px;
background-color: #b4b4b4;
width: fit-content;
padding: 10px;
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 5px;
}
.grid > h1 {
background-color: #787878;
border-radius: 15px;
display: grid;
align-items: center;
font-family: Asap, sans-serif;
text-align: center;
color: white;
}
If you want to style a grid layout, you should also use a grid. The tool for it is called CSS-Grid. It delcared by using display: grid;. To have th grid 3 column wide, you use grid-template-columns: repeat(3, min-content);. Thatw ay you have 3 columns with the width of the children. To have a gap between the different chidlren cards, you use grid-gap: 15px;
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
var y = document.getElementsByTagName("H1");
y[getRandomInt(8)].innerHTML = 2;
y[getRandomInt(8)].innerHTML = 2;
* {
margin: 0;
padding: 0;
}
body {
background-color: #C2C2C2;
}
h1 {
font-family: Asap, sans-serif;
font-size: 24pt;
margin-top: 35%;
text-align: center;
color: white;
}
.gridd {
width: min-content;
padding: 15px;
display: grid;
grid-template-columns: repeat(3, min-content);
grid-gap: 15px;
margin: auto;
background-color: #B4B4B4;
border-radius: 15px;
}
.gridd>div {
width: 100px;
height: 100px;
background-color: #787878;
border-radius: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>2048</title>
</head>
<body>
<div class="wrapper">
<div class="gridd">
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
</div>
</div>
</body>
<!--script type="text/javascript" src="script.js"></script(-->
</html>
I am trying to create a collapse navbar. I was wondering if you guys can check the code because whenever I refresh the website nothing happens and the console does not say any errors are in the code. The HTML, CSS, and JavaScript code are below. I would appreciate if you can look over it and give me feedback so that I can correct my mistake. Thank you
<!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>Welcome to my Portfolio</title>
</head>
<body>
<header class="index-header">
<a href="index.html" class="pic-link"
><img src="logo/logo.png" alt="" class="pic"
/></a>
<section class="container">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</section>
<nav class="index-nav">
<ul class="ul-index">
<li class="li-index">Home</li>
<li class="li-index">About</li>
<li class="li-index">Contact</li>
<li class="li-index">Portfolio</li>
</ul>
</nav>
<main class="index-main">
<img src="img/banner.png" alt="" class="main-img" />
</main>
</header>
<section id="home"></section>
<section id="about"></section>
<section id="contact"></section>
<section id="portfolio"></section>
<section id="case"></section>
</body>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"
></script>
<script src="js/main.js"></script>
</html>
#media screen and (min-width: 360px) {
* {
box-sizing: border-box;
}
.index-header {
width: 100%;
height: 100px;
background-color: #569188;
}
.index-header .pic-ink {
display: block;
}
.index-header .pic {
width: 100px;
height: 100px;
}
.index-header .container {
display: inline-block;
float: right;
}
.container .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.index-header .index-nav {
position: absolute;
top: 100px;
right: 0;
background-color: #569188;
width: 40vw;
height: 40vh;
z-index: 3;
opacity: 0;
}
.index-nav .ul-index {
display: flex;
flex-direction: column;
}
.ul-index .li-index {
display: flex;
justify-content: center;
padding: 15px;
font-size: 18px;
}
.ul-index .li-index .a-index {
text-decoration: none;
color: #111;
font-weight: 900;
}
.index-main {
}
.index-main .main-img {
width: 100vw;
height: 200px;
margin-bottom: 20px;
}
}
function showNav() {
let openBtn = document.querySelector(".container");
openBtn.addEventListener("click", () => {
document.querySelector(".index-nav").style.width = "40vw";
document.querySelector(".index-nav").style.height = "40vh";
document.querySelector("index-nav").style.opacity = "1";
showNav();
});
}
function hideNav() {
let closeBtn = document.querySelector(".container");
closeBtn.addEventListener("click", () => {
document.querySelector(".index-nav").style.width = "0";
document.querySelector(".index-nav").style.height = "0";
document.querySelector(".index-nav").style.opacity = "0";
hideNav();
});
}
There are a couple of things that need attention here. You should enclose the styling and javascript codes inside <style> and <script> tags if you want to keep them all in one file.
Also, see the modifications to the showNav and hideNav functions.
document.querySelector("index-nav") -> document.querySelector(".index-nav")
The class should be preceded by a .
showNav should call hideNav after execution to achieve the toggle event
function showNav() {
let openBtn = document.querySelector(".container");
openBtn.addEventListener("click", () => {
document.querySelector(".index-nav").style.width = "40vw";
document.querySelector(".index-nav").style.height = "40vh";
document.querySelector(".index-nav").style.opacity = "1";
hideNav();
});
}
function hideNav() {
let closeBtn = document.querySelector(".container");
closeBtn.addEventListener("click", () => {
document.querySelector(".index-nav").style.width = "0";
document.querySelector(".index-nav").style.height = "0";
document.querySelector(".index-nav").style.opacity = "0";
showNav();
});
}
#media screen and (min-width: 360px) {
* {
box-sizing: border-box;
}
.index-header {
width: 100%;
height: 100px;
background-color: #569188;
}
.index-header .pic-ink {
display: block;
}
.index-header .pic {
width: 100px;
height: 100px;
}
.index-header .container {
display: inline-block;
float: right;
}
.container .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.index-header .index-nav {
position: absolute;
top: 100px;
right: 0;
background-color: #569188;
width: 40vw;
height: 40vh;
z-index: 3;
opacity: 0;
}
.index-nav .ul-index {
display: flex;
flex-direction: column;
}
.ul-index .li-index {
display: flex;
justify-content: center;
padding: 15px;
font-size: 18px;
}
.ul-index .li-index .a-index {
text-decoration: none;
color: #111;
font-weight: 900;
}
.index-main {
}
.index-main .main-img {
width: 100vw;
height: 200px;
margin-bottom: 20px;
}
}
<!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>Welcome to my Portfolio</title>
</head>
<body onload="showNav()">
<header class="index-header">
<a href="index.html" class="pic-link"
><img src="logo/logo.png" alt="" class="pic"
/></a>
<section class="container">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</section>
<nav class="index-nav" >
<ul class="ul-index">
<li class="li-index">Home</li>
<li class="li-index">About</li>
<li class="li-index">Contact</li>
<li class="li-index">Portfolio</li>
</ul>
</nav>
<main class="index-main">
<img src="img/banner.png" alt="" class="main-img" />
</main>
</header>
<section id="home"></section>
<section id="about"></section>
<section id="contact"></section>
<section id="portfolio"></section>
<section id="case"></section>
</body>
</html>
I want to have an image inside a div (the violet one, see images below), whose dimensions are expressed in %, and that the image never go out from the div but resize when needed, keeping the aspect ratio.
Currently, my code is the following but the image comes out from the div as you can see in the pictures below.
html {
min-height: 100vh;
position: relative;
}
body {
height: 100vh;
overflow: hidden;
}
#grille {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
flex-direction: row;
display: flex;
background-color: red;
}
#colonne {
width: calc(100% / 3);
height: 100%;
background-color: green;
}
#cellule {
flex-direction: column;
width: 100%;
height: calc(100% / 3);
background-color: aqua;
}
#conteneurImage {
width: 100%;
height: 80%;
background-color: violet;
}
#conteneurImage img {
width: 100%;
height: auto;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="table.css" />
</head>
<body>
<div id="grille">
<div id="colonne">
<div id="cellule">
<div id="conteneurImage">
<img src="home.png">
</div>
<div id="conteneurTexte">
Accueil
</div>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
The result:
What I expect:
You can use "display: flex; justify-content: center; " in #conteneurImage. And then Use "width:auto;height:100%;" in #conteneurImage img.You can learn more about flex in https://css-tricks.com/snippets/css/a-guide-to-flexbox/
html {
min-height: 100vh;
position: relative;
}
body {
height: 100vh;
overflow: hidden;
}
#grille {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
flex-direction: row;
display: flex;
background-color: red;
}
#colonne {
width: calc(100% / 3);
height: 100%;
background-color: green;
}
#cellule {
flex-direction: column;
width: 100%;
height: calc(100% / 3);
background-color: aqua;
}
#conteneurImage {
width: 100%;
height: 80%;
background-color: violet;
display:flex;
justify-content: center;
}
#conteneurImage img {
width: auto;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="table.css" />
</head>
<body>
<div id="grille">
<div id="colonne">
<div id="cellule">
<div id="conteneurImage">
<img src="https://image.flaticon.com/icons/svg/2/2144.svg">
</div>
<div id="conteneurTexte">
Accueil
</div>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>