0

I'm still new to this website making, and I'm having trouble with w3 schools Light box. I'm trying to move the images around but every time I do manage to move them it seems to look worse and worse. I have messed around with the CSS but still can't figure it out.

im trying so that the images look something like this gallerybut still make it use the lightbox.

source code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>alithroughthelens</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative&display=swap" rel="stylesheet">
</head>

<body class="body">
<div id="sideNavigation" class="sidenav"><script>
function openNav() {
    document.getElementById("sideNavigation").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}
 
function closeNav() {
    document.getElementById("sideNavigation").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
}
</script>
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">Home</a>
  <a href="#">Cuando Sale  el Sol</a>
  <a href="#">Obscurité et la Lumiere</a>
  <a href="#">la  Vie en Couleur</a>
  <a href="#">Vacante</a>
    <a href="#">About Me</a>
</div>
 
<nav class="topnav">
  <a href="#" onclick="openNav()">
    <svg width="30" height="30" id="icoOpen">
        <path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
        <path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
        <path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
    </svg>
  </a>
</nav>
 
<div id="main">
<h1 class="header">Alithroughthelens</h1>
<img src="Home/Artist copy.png" alt="" width="5918" height="3945" class="homeimg"/> </div>
</body>
</html>

css:

html, body,{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    height: 100%;
    margin: auto;
    width: 960px;
    overflow: hidden;
}
/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    left: 0;
    background-color: #B7B7A4;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
 
/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 18px;
    color: #6B705C;
    display: block;
    transition: 0.3s;
    font-family: 'Cinzel Decorative', cursive;
}
 
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #FFE8D6;
}
 
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
 
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
    overflow:hidden;
    width:100%;

}
body {
  overflow-x: hidden;
}
 
/* Add a black background color to the top navigation */
.topnav {
}
 
/* Style the links inside the navigation bar */
.topnav a {
    float: left;

    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}
 
/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color:#6B705C;
}
 
/* Add a color to the active/current link */
.topnav a.active {
    background-color:#6B705C;
    color:#6B705C;
}
 
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}
 
a svg{
  transition:all .5s ease;
 
  &:hover{
    #transform:rotate(180deg);
  }
}
 
#ico{
  display: none;
}
 
.menu{
  background: #000;
  display: none;
  padding: 5px;
  width: 320px;
  @include border-radius(5px);
 
  #transition: all 0.5s ease;
 
  a{
    display: block;
    color: #fff;
    text-align: center;
    padding: 10px 2px;
    margin: 3px 0;
    text-decoration: none;
    background: #444;
 
    &:nth-child(1){
      margin-top: 0;
      @include border-radius(3px 3px 0 0 );
    }
    &:nth-child(5){
      margin-bottom: 0;
      @include border-radius(0 0 3px 3px);
    }
 
    &:hover{
      background: #555;
    }
  }
}
.body {
    background-color: #FFE8D6;  
}
.header {
    font-family: 'Cinzel Decorative', cursive;
    padding-right: 64px;
    position: static;
    left: 41px;
    padding-left: 64px;
    text-align: center;
    color: #6B705C;
    padding-top: 0px;
    margin-top: -10px;
    font-size: 35px;
    font-size: 5vw;
}
.homeimg {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    height: auto;    
}
.row > .column {
  padding: 0 8px;
}

.row:after { 
  content: "";
  display: table;
  clear: both;
}

/* Create four equal columns that floats next to eachother */
.column {
    float: left;
    height: auto;
    width: 24%;
}

/* The Modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #6B705C;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* 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;
    background-color: #6B705C;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: #000000;
    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;
  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: #FFE8D6;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */
.caption-container {
    text-align: center;
    background-color: #6B705C;
    padding: 2px 16px;
    color: white;
}

img.demo {
    opacity: 0.6;
    width: 40%;
}

.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);
}
.pimg {
    width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    margin-top: -20px;
}
.csimg {
    width: 80%;
    display: block;
    position: static;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}
.pimgl {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: -20px;
    height: auto;
    width: 30%;
}
JLo27
  • 1
  • 1
  • Hey! What do you mean exactly by "move the images around"? Running it in the demo editor should be a good way to play around with the images. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_lightbox – iismaell May 11 '21 at 01:01
  • you need to post your works to here so people know what you're talking about – xxx May 11 '21 at 01:06

0 Answers0