I wanted to create a navigation bar, at the top of my page, that would follow no matter what way you scroll.
I created it, and after that created a slideshow under it. The problem is, that everything related to my slideshow, will interrupt the navigation bar, when it scrolls through it, they overlap. I don't know how to fix this, and would like to get some help :)
CSS
/* HEADER - HEADER - HEADER */
/* Style the header */
.header {
background-color: lightgray;
padding: 20px;
text-align: center;
}
/* Style the top navigation bar */
.menu_navigation {
position: fixed;
overflow: hidden;
background-color: #333;
top: 0;
width: 100%;
}
/* Style the topnav links */
.menu_navigation a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 15px 25px;
text-decoration: none;
}
/* Change color on hover */
.menu_navigation a:hover {
background-color: rgb(0, 162, 255);
color: black;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width:600px) {}
.column {
width: 100%;
}
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {
vertical-align: auto;
position: relative;
top: 52px;
}
#billede1, #billede2, #billede3 {
filter: blur(8px);
}
/* Slideshow container */
.slideshow-container {
width: 1500;
}
/* Next & previous buttons */
.prev, .next {
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
transition: 0.6s ease;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #000000;
font-size: 30px;
padding: 8px 12px;
position: absolute;
bottom: -1200px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
.footer {
background-color:blue;
text-align: center;
padding: 10px;
}
html
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="menu_navigation">
Men
Women
Children
About Us
News
</div>
<!-- Slideshow, for under navigationsbaren-->
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="C:\Users\Wahab\Desktop\hjemmesidenprojekt\billeder\1.jpg" id="billede1" style="width:100%" height="1000px">
<div class="text">Skjorte - 150 kr</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="C:\Users\Wahab\Desktop\hjemmesidenprojekt\billeder\2.jpg" id="billede2" style="width:100%" height="1000px">
<div class="text">Mørke blå Chino bukser - 540 kr</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="C:\Users\Wahab\Desktop\hjemmesidenprojekt\billeder\3.jpg" id="billede3" style="width:100%" height="1000px">
<div class="text">Hvide Chinos - 430 kr</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
</body>
</html>
You need to set the z-index of the navbar higher than any other z-index of any element.
The z-index provides a hierarchical structure of when elements are stacked amongst each other.
You can fix this by adding a z-index CSS property to your .menu_navigation class. The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
.menu_navigation {
position: fixed;
overflow: hidden;
background-color: #333;
top: 0;
width: 100%;
z-index: 100;
}
Related
I am trying to embed a previous and next button onto the image such that both buttons resize and stay on the image when resized. But the problem is the buttons don't stay on the image and resize in a way that isn't consistent with what I want. I also want my image to be on the right side of the screen and text on the left side instead of on the center.
I thought if I had put the button in a div that is the child of the div my photos were in, the buttons would automatically be embedded onto the photo but that didn't work. I also set my parent container to relative and child container to absolute thinking that would work.
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none
}
img {
vertical-align: middle;
}
/* Slideshow container */
.photos {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -200px;
color: aqua;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
position: absolute;
color: aqua;
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.btn-responsive {
/* matches 'btn-md' */
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
#media (max-width:760px) {
/* matches 'btn-xs' */
.btn-responsive {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
<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>Test Page</title>
<link rel="stylesheet" href="./styles/test.css">
</head>
<body>
<div class="center">
<div class="photos">
<img class="mySlides fade" src="photos/quote1.jpg" style="width:95.7%" />
<img class="mySlides fade" src="photos/quote2.jpg" style="width:95.7%" />
<img class="mySlides fade" src="photos/quote3.jpg" style="width:95.7%" />
<img class="mySlides fade" src="photos/quote4.jpg" style="width:95.7%" />
<img class="mySlides fade" src="photos/quote5.jpg" style="width:95.7%" />
<img class="mySlides fade" src="photos/quote6.jpg" style="width:95.7%" />
<img class="mySlides fade" src="photos/photo8.png" style="width:95.7%" />
<div class="img-overlay btn-responsive">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
Set the <img>s to expand edge to edge of it's container .photos and keep aspect ratio as well by changing img ruleset:
img {
object-fit: contain;
width: 100%;
}
Also, remove margin-top: -200px from .next, .prev
I didn't see any text in OP code and didn't quite understand exactly what you wanted with text.
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.querySelectorAll(".slides");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.slides {
display: none
}
img {
object-fit: contain;
width: 100%;
}
.photos {
max-width: 1000px;
position: relative;
margin: auto;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
color: aqua;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
user-select: none;
}
.prev {
left: 0;
border-radius: 0 3px 3px 0;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.4);
}
.btn-responsive {
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
#media (max-width:760px) {
.btn-responsive {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
}
.active,
.dot:hover {
background-color: #717171;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
<!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>Test Page</title>
<link rel="stylesheet" href="./styles/test.css">
</head>
<body>
<div class="center">
<div class="photos">
<img class="slides fade" src="https://www.pcgamesn.com/wp-content/uploads/2022/05/v-rising-castle-heart-decay-900x506.jpg" />
<img class="slides fade" src="https://www.pcgamesn.com/wp-content/uploads/2022/05/jurassic-world-evolution-2-dominion-dlc-900x506.jpg" />
<img class="slides fade" src="https://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans//41627993/0bc70a88bed9dad1ba5898beb33c72476c2ccc10.jpg" />
<img class="slides fade" src="https://www.pcgamesn.com/wp-content/uploads/2022/05/lost-ark-character-creation-900x506.jpg" />
<img class="slides fade" src="https://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans//9164327/b4569cd9085bd5d186c30877bc1251f03fc6e06a.jpg" />
<div class="img-overlay btn-responsive">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
iceiscold! Welcome to Stack Overflow.
I don't know if you have a specific reason for your widths, but setting the images to 100% width and set object-fit: contain should solve your resizing issues. If you need them smaller, you can control that by setting the photo container size, or creating a custom container for the <img>.
As for the layout question, to have a text and an image side by side, I recommend you to use display: flex. Flex is a nice CSS property for handling layouts. Another option would be to use display: grid, which is another way to handle layouts (see Grid). For your case, I think flex is a bit more straightforward.
Basically what you need:
.parent{
display: flex;
}
.child1, child2{
flex: 1;
}
.parent will create a column layout, and with flex:1 you are telling the flex property that both child1 and child2 should have the same width. You can play with that by setting flex: 0.25, etc. I used this on your code to create a description column and a photo column.
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
.center {
display: flex;
border: 1px solid black;
}
.descriptions {
flex: .75;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
}
.mySlides {
display: none
}
img {
object-fit: contain;
vertical-align: middle;
width: 100%;
}
.photos {
flex: 1;
max-width: 1000px;
position: relative;
margin: auto;
border: 1px solid blue;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
color: aqua;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
user-select: none;
}
.next {
position: absolute;
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.active,
.dot:hover {
background-color: #717171;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
<div class="center">
<div class="descriptions">
<p>I am a test description</p>
</div>
<div class="photos">
<img class="mySlides fade" src="https://pbs.twimg.com/profile_images/1498641868397191170/6qW2XkuI_400x400.png" />
<img class="mySlides fade" src="https://upload.wikimedia.org/wikipedia/en/9/95/Test_image.jpg" />
<img class="mySlides fade" src="https://pbs.twimg.com/profile_images/1498641868397191170/6qW2XkuI_400x400.png" />
<div>
<a class="prev" onClick="plusSlides(-1)">❮</a>
<a class="next" onClick="plusSlides(1)">❯</a>
</div>
</div>
</div>
Return to post
I have been asked to create an image gallery for a test website for a mini project at work with a few other people. I have created the gallery and the pop up images based on the code here: http://www.w3schools.com/howto/howto_css_modal_images.asp
The layout of the gallery itself is fine as there will be more images, but when I click on the images in the gallery, the images that pop up are all different sizes. We have been trying for a while now to give the images a fixed width and height to ensure that when they pop up they are all the same size and centred in the middle so that the user does not have to scroll up and down. Changing the width then results in the next and previous arrows being all over the place. We have made a few tweaks to the code but so far have been unable to get the desired result.
Can someone please point us in the right direction on how we can achieve this.
This is the code we have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<title>PRINTS</title>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* Style the Image Used to Trigger the Modal */
* {
box-sizing: border-box;
margin: 0;
padding: 0 10px;
}
.image-container {
width: 100%;
height: 70%;
columns: 4;
}
.myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
max-width: 100%;
padding: 1px;
}
.myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
padding: 0;
width: 90%;
max-width: 100px;
position: relative;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
/* Hide the slides by default */
.mySlides {
display: none;
}
.image-wrapper {
position: absolute;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 20px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
img.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: relative;
top: 0;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Trigger the Modal -->
<div class="image-container">
<img class="myImg" src="https://images.unsplash.com/photo-1526512340740-9217d0159da9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmVydGljYWx8ZW58MHx8MHx8&w=1000&q=80.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow">
<img class="myImg" src="https://images.all-free-download.com/images/graphiclarge/bridge_holiday_horizontal_landscape_nature_nobody_603727.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow">
<img class="myImg" src="https://cdn.fstoppers.com/styles/full/s3/photos/2019/02/857ebd7658e56c84a4dc65cc4453a305.jpg?itok=rpCL6_UU.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow">
<img class="myImg" src="https://www.difrusciaphotography.com/wp-content/uploads/2015/04/The-Awakening_Moraine-Lake-Alberta-Canada_03.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow">
<img class="myImg" src="https://www.jessleephotos.com/images/xl/overlook-autumn.jpg" onclick="openModal();currentSlide(5)" class="hover-shadow">
<img class="myImg" src="https://images.freeimages.com/images/small-previews/7cb/father-tree-1377206.jpg" onclick="openModal();currentSlide(6)" class="hover-shadow">
<img class="myImg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQnERA1ahoVfRaMs2rPHKYlx-cUXeA8_N2DWA&usqp=CAU.jpg" onclick="openModal();currentSlide(7)" class="hover-shadow">
<img class="myImg" src="https://images.unsplash.com/photo-1506522167817-40236fa71038?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8M3wxMzc4NDI3fHxlbnwwfHx8fA%3D%3D&w=1000&q=80.jpg" onclick="openModal();currentSlide(8)" class="hover-shadow">
</div> <!-- end image-container div -->
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext"> 1 / 46</div>
<img src="https://images.unsplash.com/photo-1526512340740-9217d0159da9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmVydGljYWx8ZW58MHx8MHx8&w=1000&q=80.jpg">
</div>
<div class="mySlides">
<div class="numbertext"> 2 / 46</div>
<img src="https://images.all-free-download.com/images/graphiclarge/bridge_holiday_horizontal_landscape_nature_nobody_603727.jpg">
</div>
<div class="mySlides">
<div class="numbertext"> 3 / 46</div>
<img src="https://cdn.fstoppers.com/styles/full/s3/photos/2019/02/857ebd7658e56c84a4dc65cc4453a305.jpg?itok=rpCL6_UU.jpg">
</div>
<div class="mySlides">
<div class="numbertext"> 4 / 46</div>
<img src="https://www.difrusciaphotography.com/wp-content/uploads/2015/04/The-Awakening_Moraine-Lake-Alberta-Canada_03.jpg">
</div>
<div class="mySlides">
<div class="numbertext"> 5 / 46</div>
<img src="https://www.jessleephotos.com/images/xl/overlook-autumn.jpg">
</div>
<div class="mySlides">
<div class="numbertext"> 6 / 46</div>
<img src="https://images.freeimages.com/images/small-previews/7cb/father-tree-1377206.jpg">
</div>
<div class="mySlides">
<div class="numbertext"> 7 / 46</div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQnERA1ahoVfRaMs2rPHKYlx-cUXeA8_N2DWA&usqp=CAU.jpg">
</div>
<div class="mySlides">
<div class="numbertext"> 8 / 46</div>
<img src="https://images.unsplash.com/photo-1506522167817-40236fa71038?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8M3wxMzc4NDI3fHxlbnwwfHx8fA%3D%3D&w=1000&q=80.jpg">
</div>
<!-- Next/previous controls -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<script>
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</body>
</html>
Try setting a max height on your images, max-height: 90vh; for example. VH units are the height of the viewport, so the images won't ever be taller than 90% of the viewport height in this instance. Then you can set the image widths to have max-width: 100%; and the user won't need to scroll. Also change your .mySlides CSS when the slide is active to use display: flex; rather than display: block; to allow you to center the image easily.
Try this adding these updated CSS rules:
.modal-content {
width: 500px;
max-width: 100%;
}
.mySlides img {
max-height: 90vh;
max-width: 100%;
}
When slide is active:
.mySlides {
display: flex;
flex-direction: column;
}
I have a simple grid layout with a main area on top and a nav area on bottom. I am just starting using css grid and am having trouble with having a responsive image that stays in the grid container. It is not shrinking responsively when the browser resizes, and is extending past the border of its container. I have tried min-height/min-width: 0, object-fit: contain, changing sizes from vh/vw to 100%, changing max-widths/heights to different px and % sizes, and I still can't figure out how to make this responsive using grid. I searched pretty extensively, but nothing seems to have helped. I'm sure it's something simple that I missed, but I'm at a loss right now.
I also want to use just HTML and CSS if possible without any libraries like Bootstrap.
I put some outlines on different elements to make it easier to see what's happening that don't seem to be showing in the snippet, so if it's easier to inspect the code here is a link to the site:
https://mountainflow.design/portfolio.html
/* Box Sizing */
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*,
*::before,
*::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
/* body 100% with no margin or padding */
html {
height: 100vh;
}
body {
min-height: 100vh;
}
html,
body {
margin: 0;
padding: 0;
}
/* =================== Start Style Sheet ==========================
================================================================ */
body {
background-color: #000000;
color: #ffffff;
}
a {
color: inherit;
text-decoration: none;
}
/* Main Section */
.folio-main-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 80% 1fr;
height: 100vh;
width: 100vw;
}
.folio-main {
outline: blue solid thin;
grid-column: 1 / 3;
grid-row: 1 / 2;
display: flex;
justify-content: center;
align-items: center;
min-height: 0;
min-width: 0;
}
.gallery-container {
outline: pink solid thin;
max-width: 970px;
min-height: 0;
min-width: 0;
position: relative;
}
/* .slideshow {
display: none;
} */
.slideshow img.responsive {
max-width: 970px;
height: auto;
}
/* .caption {
} */
/* Nav Section */
.folio-nav {
outline: red solid thin;
grid-column: 1 / 2;
grid-row: 2 / 3;
align-self: end;
justify-self: end;
padding: 2em;
}
.folio-nav ul {
display: flex;
flex-direction: row;
list-style-type: none;
}
.folio-nav li {
background: -webkit-linear-gradient(#eeeeee, rgb(158, 104, 246));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
li {
margin-left: 2em;
}
/* Button animations */
.folio-nav li:nth-child(1) {
position: relative;
left: -1000px;
animation: navFadeIn 3s ease-in 2s forwards;
}
.folio-nav li:nth-child(2) {
position: relative;
left: -1000px;
animation: navFadeIn 3s ease-in 1.85s forwards;
}
.folio-nav li:nth-child(3) {
position: relative;
left: -1000px;
animation: navFadeIn 3s ease-in 1.7s forwards;
}
.folio-nav li:nth-child(4) {
position: relative;
left: -1000px;
animation: navFadeIn 3s ease-in 1.55s forwards;
}
.folio-nav li:nth-child(5) {
position: relative;
left: -1000px;
animation: navFadeIn 3s ease-in 1.4s forwards;
}
#keyframes navFadeIn {
0% {
opacity: 0;
}
85% {
left:0;
}
89% {
left: -5px;;
}
93% {
left: 0;
}
97% {
left: -3px;
}
100% {
left:0;
opacity: 1;
}
}
<body>
<div class="folio-main-container">
<div class="folio-main">
<div class="gallery-container">
<div class="slideshow">
<a target="_blank" href="https://sheltered-meadow-24497.herokuapp.com/" title="Fur Butlr">
<img class="responsive" src="https://github.com/mountainflow/portfolio_03/blob/master/assets/images/furButlr_970x600.png?raw=true" alt="Fur Butlr" />
</a>
<div class="caption">Fur Butlr</div>
</div>
</div>
<!-- <div class="gallery-container">
<a target="_blank" href="https://chat-meme-3fbf6.firebaseapp.com/" title="ChatMeme">
<img src="./assets/images/chatMeme_970x600.png" alt="ChatMeme" />
</a>
</div>
<div class="gallery-container">
<a target="_blank" href="https://mighty-everglades-33601.herokuapp.com/" title="Friend Finder">
<img src="./assets/images/friendFinder_970x600.png" alt="Friend Finder" />
</a>
</div>
<div class="gallery-container">
<a target="_blank" href="./assets/images/liri.gif" title="Liri">
<img src="./assets/images/liri_970x600.png" alt="Liri" />
</a>
</div> -->
</div>
<div class="folio-nav">
<ul>
<li>Home</li>
<li>Resume</li>
<li>About</li>
<li>Github</li>
<li>LinkedIn</li>
</ul>
</div>
</div>
</body>
Once I get the grid responsiveness worked out this will be a slideshow.
Thanks in advance
max-width: 100% will work for what you need.
I need to create a fairly static page divided into regions with an image carousel on the right (hcentered and vcentered)
This needs to be very browser compatible, so flexbox is not really an option
Here is a mockup image of what I'm after:
Mockup
The Code I have thus far is as follows, but I can for the life of me not get the right hand image to be centered and middle aligned:
$(function() {
// var exits = ['fadeOut', 'fadeOutDown', 'fadeOutUpBig', 'bounceOut', 'bounceOutDown', 'hinge',
// 'bounceOutUp', 'bounceOutLeft', 'rotateOut', 'rotateOutUpLeft', 'lightSpeedOut', 'rollOut'];
// var entrances = ['fadeIn', 'fadeInDown', 'fadeInRight', 'bounceIn', 'bounceInRight', 'rotateIn',
// 'rotateInDownLeft', 'lightSpeedIn', 'rollIn', 'bounceInDown' ];
var exits = ['fadeOut'];
var entrances = ['fadeInRight'];
var photos = $('#photos'),
ignoreClicks = false;
$('.arrow').click(function(e, simulated) {
if (ignoreClicks) {
// If clicks on the arrows should be ignored,
// stop the event from triggering the rest
// of the handlers
e.stopImmediatePropagation();
return false;
}
// Otherwise allo this click to proceed,
// but raise the ignoreClicks flag
ignoreClicks = true;
if (!simulated) {
// Once the user clicks on the arrows,
// stop the automatic slideshow
clearInterval(slideshow);
}
});
// Listen for clicks on the next arrow
$('.arrow.next').click(function(e) {
e.preventDefault();
// The topmost element
var elem = $('#photos #innerdiv:last');
// Apply a random exit animation
elem.addClass('animated')
.addClass(exits[Math.floor(exits.length * Math.random())]);
setTimeout(function() {
// Reset the classes
elem.attr('class', '').prependTo(photos);
// The animation is complate!
// Allow clicks again:
ignoreClicks = false;
}, 10);
});
// Start an automatic slideshow
var slideshow = setInterval(function() {
// Simulate a click every 1.5 seconds
$('.arrow.next').trigger('click', [true]);
}, 1000);
});
/* https://tutorialzine.com/2013/02/animated-css3-photo-stack */
body {
/* overflow:hidden;*/
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
#photos {
/* margin:0 auto; */
/*position:relative; */
}
#photos .outerdiv {
position: relative;
}
#photos .middlediv {
/* position:absolute; */
/* display:inline-block; */
/* width:450px; */
/* height:450px; */
/* overflow:hidden; */
background-color: #fff;
z-index: 10;
border: 1px solid #aaa;
/* -webkit-animation-duration: 1s; */
-moz-animation-duration: 1s;
/* animation-duration: 1s; */
}
#photos .innerdiv {
/* position:absolute; */
/* top:0px; */
/* left:0px; */
/* right:0px; */
/* bottom:0px; */
width: 450px;
height: 450px;
background-size: cover;
background-position: center;
/*overflow:hidden;*/
/* width:400px; */
/* height:400px; */
position: absolute;
}
.lefttop {
grid-area: lefttop;
width: 50vw;
height: 33.3vh
}
.leftcenter {
grid-area: leftcenter;
width: 50vw;
height: 33.3vh
}
.leftbottom {
grid-area: leftbottom;
width: 50vw;
height: 33.3vh
}
.rightfull {
grid-area: rightfull;
width: 50vw;
}
.grid-container {
display: grid;
grid-template-areas: 'lefttop rightfull' 'leftcenter rightfull' 'leftbottom rightfull';
grid-gap: 1px;
background-color: #2196F3;
padding: 1px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 0px;
font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid-container">
<div class="lefttop">left top</div>
<div class="leftcenter">left center</div>
<div class="leftbottom">left bottom </div>
<div class="rightfull">
<div id="photos" class="outerdiv">
<div class="middlediv">
<div class="innerdiv" style="background-image:url(http://127.0.0.1:81/wordpress/wp-content/uploads/2018/08/20180823_132842-01-400x347.jpeg)"></div>
</div>
<div class="middlediv">
<div class="innerdiv" style="background-image:url(http://127.0.0.1:81/wordpress/wp-content/uploads/2018/07/20180806_162813-01-1-400x389.jpeg)"></div>
</div>
<div class="middlediv">
<div class="innerdiv" style="background-image:url(http://127.0.0.1:81/wordpress/wp-content/uploads/2018/08/20180820_153720-01-400x356.jpeg)"></div>
</div>
</div>
</div>
</div>
Ideally, I would want to use grid or table but it seems like table does not allow for vertical merging of cells.
IE10 and above needs to be supported.
The image in the carousel should be a percentage of the width or height of the right hand column to make it relatively responsive to different screen sizes.
I have used the photo carousel at https://tutorialzine.com/2013/02/animated-css3-photo-stack and modified the code and javascript slightly as I thought using divs would be easier than UL's and LI's, but the results are just about the same.
Any guidance on how to achieve this without too many dirty fixes would be very much appreciated!
In other words:
a simple page, divided into two equal columns.
The left column should have a logo and some links spaced vertically away from the middle horizontal line of the screen.
The right column should be half the screen width, and full screen height with the image carousel centered and middle of the column with responsive width and height.
here is a fiddle with your requirement, I was based on the mock image in your question, I hope this help you.
Here is the HTML:
<div class="grid-container">
<div class="lefttop">
<h1>
LOGO
</h1>
</div>
<div class="leftbottom">
<ul>
<li>
home
</li>
<li>
about
</li>
<li>
contact
</li>
</ul>
</div>
<div class="rightfull">
<div id="photos" class="outerdiv">
<div class="middlediv">
<img class="innerdiv" src="https://picsum.photos/200/300/?random">
</div>
<div class="middlediv">
<img class="innerdiv" src="https://picsum.photos/200/300/?random">
</div>
<div class="middlediv">
<img class="innerdiv" src="https://picsum.photos/200/300/?random">
</div>
</div>
</div>
</div>
And tht SCSS
/* https://tutorialzine.com/2013/02/animated-css3-photo-stack */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
.grid-container {
overflow: hidden;
display: grid;
height: 100% !important;
grid-template-columns: repeat(2, 50%);
grid-template-rows: repeat(2, 50%);
background-color: #2196F3;
& > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 0px;
// font-size: 30px;
}
.lefttop, .leftbottom {
grid-column: 1;
}
.lefttop {
&::before, & > h1 {
display: inline-block;
vertical-align: bottom;
}
&::before {
content: '';
height: 100%;
}
grid-row: 1;
position: relative;
h1 {
font-size: 3rem;
font-weight: 100;
}
}
.leftbottom {
grid-row: 2;
ul {
margin: 1rem auto;
li {
list-style: none;
display: inline;
&:not(:first-child):not(:last-child)::before {
content: '-';
}
&:not(:first-child):not(:last-child)::after {
content: '-';
}
a {
text-decoration: none;
color: inherit;
}
}
}
}
.rightfull {
grid-column: 2 / 3;
grid-row: 1 / 3;
position: relative;
img {
top: 0;
left: 0;
padding: 1rem;
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
https://jsfiddle.net/cisco336/wpfzL03k/1/
Here is MS Edge screenshot
MS IE11 screenshot
When I'm on the site the menu is hidden. Then when I resize the page and use the hamburger the menu is showing normally. When I resize the page back the menu is still visible. After refreshing site the problem is repeating.
U see the problem on my demo page:
I'll be really glad if you help me with this.
Thanks.
Code:
body {
min-height: 100%;
}
/* HEADER */
#header {
position: absolute;
top: 0px;
left: 0px;
height: 1000px;
right: 0px;
overflow: hidden;
}
.backgroundheader {
top: 0 !important;
position: relative !important;
height: 350px;
background-color: #333;
box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1);
background-image: url("images/bamboo.png"), url("images/bamboo2.png");
background-repeat: no-repeat;
background-size: 560px, 195px;
width: 100%;
min-width: 100%;
background-position: top right, top left
}
.logo {
left: 0 !important;
position: absolute;
height: 200px;
width: 600px;
margin-top: 70px;
box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.8);
background-color: #AB2732;
float: left !important
}
/* HEADER */
/* MENU */
ul {
list-style-type: none;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
padding: 0;
overflow: hidden;
font-size: 220%;
font-family: menu
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 23px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
.vyber {
position: absolute;
background-color: #AB2732;
background-size: 100%;
width: 100%;
height: 100px;
margin-top: 410px;
-webkit-animation-name: example;
/* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s;
/* Safari 4.0 - 8.0 */
animation-name: vysunuti;
animation-duration: 0.8s;
box-shadow: inset -0px 0 40px rgba(0, 0, 0, 0.7);
margin-bottom: 200px;
}
.hamburger {
visibility: hidden;
}
.hamburger-box {
margin-top: 80px;
}
#media screen and (max-width: 1246px) {
ul {
top: 345px;
z-index: 99
}
ul li {
;
background-color: #333;
display: block;
text-align: center;
width: 100%
}
.hamburger {
visibility: visible
}
.hamburger-box {
-webkit-animation: hamburger 0.5s ease-in-out;
animation: hamburger 0.5s ease-in-out;
}
}
#-webkit-keyframes hamburger {
from {
opacity: 0
}
to {
opacity: 1
}
}
#font-face {
font-family: menu;
src: url("fonty/menu.otf");
}
/* MENU */
/* MENU */
<div class="nav" id="header">
<div class="backgroundheader">
<div class="logo"></div>
<div class="simple-ss"></div>
<div id="container">
<div class="navbar-header">
<button style="right: 0 !important; position: absolute;margin-right: 30px;margin-top: 350px;z-index: 10" class="hamburger hamburger--spring navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div class="vyber">
<div class=" collapse " id="bs-example-navbar-collapse-1">
<div class="navbar-header">
<ul>
<li>
O nás
</li>
<li>
Restaurace
</li>
<li>
Running sushi
</li>
<li>
Kontakt
</li>
<li>
Fotogalerie
</li>
</ul>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The hamburger is not your problem.
Here is pseudo code how your website works now:
YOUR PSEUDO CODE
var showMenu = false;
var showButton = false;
if 1246px > windowWidth
showButton = true;
if buttonIsClicked == true
showMenu = !showMenu;
(if it is true it will set to false)
(if it is false it will set to true)
PROBLEM
So you need to show your menu when a user gets on the website.
When the windowWidth is smaller then the 1246px you stop showing the menu and shows the button.
Now when the user disables the menu and make the windowWidth bigger than 1246px you need to enable the menu again. this will look like this in pseudo code.
GOOD PSEUDO CODE
var showMenu = true;
var showButton = false;
if 1246px > windowWidth
showButton = true;
showMenu = false;
if 1246px < windowWidth
showMenu = true;
if buttonIsClicked == true
showMenu = !showMenu;
With this knowledge you should be able to solve your css