Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

Wondering what is up with my lightbox gallery container divs.

Edrol97

Edrol97

Silver Coder
Hi all, I have 9 divs each representing a gallery. 7 of the divs display as they should, next to eachother or directly underneath, but two of the divs seem to go on another line. This is the CSS code
CSS: 
@font-face {
    font-family: Eliot Lord;
    src: url(Fonts/EliotlordhandRegular.ttf);
}
body {
    font-family: Eliot Lord;
}
.h1{
    font-size: xx-large;
}
.container {
    cursor: pointer;
    height: 100%;
    width: 100%;
  position: relative;
}
.galleries {
    overflow: hidden;
  position: relative;
}
.gallery1,
.gallery2,
.gallery3,
.gallery4,
.gallery5,
.gallery6,
.gallery7
.gallery8
.gallery9 {
    float: left;
}
.title_text {
    font-size: 36pt;
    font-weight: bold;
}
.caption_text {
    font-size: 25pt;
  height: 100%;
    width: 100%;
}
.slide-show_containers {
    margin-top: 50px;
    width: 100%;
  height: 500px;
}
.slide-show_1container,
.slide-show_2container,
.slide-show_3container,
.slide-show_4container,
.slide-show_5container,
.slide-show_6container,
.slide-show_7container,
.slide-show_8container,
.slide-show_9container{
    display: none;
  position: relative;
  margin: auto;
  height: 600px;
}
.image_slide1,
.image_slide2,
.image_slide3,
.image_slide4,
.image_slide5,
.image_slide6,
.image_slide7,
.image_slide8
.image_slide9 {
    height: 100%;
    width: 600px;
    overflow: hidden;
  display: none;
  margin: auto;
  text-align: center;
}
.previous_button,
.next_button,
.close_button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
    align-items: center;
    cursor: pointer;
    font-size: xx-large;
  position: absolute;
}
.previous_button {
    top: 50%;
    left: 10px;
}
.next_button {
    top: 50%;
    right: 10px;
}
.close_button {
    top: 10px;
    right: 10px;
}

and this is the HTML. I don't think it has anything to do with the JS in the file:
HTML: 
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Image carousel</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <h1>The Headlines</h1>
      <div class="container">
         <div class="galleries">
            <div class="gallery1">
               <img src="img/The Ballot Box.png" width="300px" onclick="LaunchLightbox(1)">
            </div>
            <div class="gallery2">
               <img src="img/Minute Books/Minute Books.png" width="300px" onclick="LaunchLightbox(2)">
            </div>
            <div class="gallery3">
               <img src="img/Art%20on%20a%20postcard/Artonapostcardlogo.png" width="300px" onclick="LaunchLightbox(3)">
            </div>
            <div class="gallery4">
               <img src="img/MFA%20Final%20Show%203.jpg" width="300px" onclick="LaunchLightbox(4)">
            </div>
            <div class="gallery5">
               <img src="img/GreenGrads Sketches/Jay&Co-Journal-Green-Grads.jpg" width="300px" onclick="LaunchLightbox(5)">
            </div>
            <div class="gallery6">
               <img src="img/Culture Wars/That's Racist.png" width="300px" onclick="LaunchLightbox(6)">
            </div>
            <div class="gallery7">
               <img src="img/BA/Kingston%20Degree%20show%20logo.png" width="300px" onclick="LaunchLightbox(7)">
            </div>
            <div class="gallery8">
               <img src="img/Tate Exchange/Tate Exchange Logo.jpg" width="300px" onclick="LaunchLightbox(8)">
            </div>
            <div class="gallery9">
               <img src="img/TrulyBrexishSummer/bentall.gif" width="300px" onclick="LaunchLightbox(9)"></div>
         </div>
         <div class="slide-show_containers">
            <div class="slide-show_1container">
               <div class="next_button" onclick="NextImage()">&#10233</div>
               <div class="previous_button" onclick="PreviousImage()">&#10232</div>
               <div class="close_button" onclick="CloseLightbox(1)">&#9746</div>
               <div class="image_slide1">
                  <img src="img/BA%20Exhibition%20View.png" width="400px">
                  <div class="title_text">Politics 24/7?</div>
                  <div class="caption_text">Come in. Take a seat! Make yourself at home, but something doesn't
                     feel quite right
                  </div>
               </div>
               <div class="image_slide1">
                  <img src="img/New%20Contemps%202019.png" width="400px">
                  <div class="title_text">Boris Can't Get Clean, however much he tries</div>
                  <div class="caption_text">Into the Gallery at South London Gallery, Leeds Art Gallery and The RA</div>
               </div>
               <div class="image_slide1">
                  <img src="img/Bad%20Times%20logo%20Colourised%20A5.png" width="400px">
                  <div class="title_text">Bad Times are here</div>
                  <div class="caption_text">With the media in the state that it's in, it's no wonder</div>
               </div>
               <div class="image_slide1">
                  <img src="img/Failing%20Everyday%20A5.png" width="400px">
                  <div class="title_text">Daily Fail</div>
                  <div class="caption_text">The Daily Mail is a bastion... of real FAKE NEWS</div>
               </div>
               <div class="image_slide1">
                  <img src="img/Sadly%20Substandard%20A5.png" width="400px">
                  <div class="title_text">A Very Standard State Of Affairs</div>
                  <div class="caption_text">Mr Lebedev needs to brush up on the truth</div>
               </div>
               <div class="image_slide1">
                  <img src="img/Nothing%20to%20see%20here.png" width="400px">
                  <div class="title_text">What has Rishi got to hide?</div>
                  <div class="caption_text">They'll be hiding more and more come the election</div>
               </div>
               <div class="image_slide1">
                  <img src="img/Out%20of%20Tune%20ideas.png" width="400px">
                  <div class="title_text">A Very Budget Cabinet Karaoke. </div>
                  <div class="caption_text">No ideas incoming</div>
               </div>
               <div class="image_slide1">
                  <img src="img/Budget%20Fare.png" width="400px">
                  <div class="title_text">They've Got A Ticket To Ride</div>
                  <div class="caption_text">One way ticket to nowhere for the Tories</div>
               </div>
               <div class="image_slide1">
                  <img src="img/Mayday%20Maynay!.png" width="400px">
                  <div class="title_text">Mayday Maynay!</div>
                  <div class="caption_text">SOS It's over Rishi!</div>
               </div>
               <div class="image_slide1">
                  <img src="img/That's%20Racist.png" width="800px">
                  <div class="title_text">Hester Festers</div>
                  <div class="caption_text">The Frank Hester row wages on, as the Tories are embroiled in a racism row</div>
               </div>
               <div class="image_slide1">
                  <img src="img/Ofcom%20Offence.png" width="400px">
                  <div class="title_text">GB Not News</div>
                  <div class="caption_text">When will the self-appointed Government psychopants learn that lies must be punished?</div>
               </div>
               <div class="image_slide1">
                  <img src="img/Budget%20Budget.png" width="400px">
                  <div class="title_text">The Budgetest of all Budgets</div>
                  <div class="caption_text">This budget won't stretch far</div>
               </div>
               <div class="image_slide1">
                  <img src="img/Vultures%20Circling.png" width="300px">
                  <div class="title_text">Very Nearly Dead Meat</div>
                  <div class="caption_text"></div>
               </div>
               <div class="image_slide1">
                  <img src="img/Culture Wars/Double Standards.png" width="400px">
                  <div class="title_text">Lionising Stupidity</div>
                  <div class="caption_text">Everyone's going mental over the England kit.</div>
               </div>
               <div class="image_slide1">
                  <img src="img/Cross%20Wires.png" width="400px">
                  <div class="title_text">Cross Wires</div>
                  <div class="caption_text">Both Russian leadership and ISIS are made up of angry men, but this is
                     something I didn't predict
                  </div>
               </div>
               <div class="image_slide1">
                  <img src="img/Nothing%20but%20Kate.png" width="250px">
                  <div class="title_text">With Apologies to Matt Groening</div>
                  <div class="caption_text">Princess of Wales Kate has been diagnosed with Cancer. I'm sorry, but millions
                     are going through what she is going through with far less support. It shouldn't be headline news
                  </div>
               </div>
               <div class="image_slide1">
                  <img src="img/Not%20The%20Right%20Damn%20Time.png" width="400px">
                  <div class="title_text">Not The Right Damn Time</div>
                  <div class="caption_text">Lizzo's off, next up is Rishi...
                  </div>
               </div>
               <div class="image_slide1">
                  <img src="img/After David Low.png" width="400px">
                  <div class="title_text">After David Low</div>
                  <div class="caption_text">The Speaker's in real deep trouble</div>
               </div>
               <div class="image_slide1">
                  <img src="img/Sleaze%20as%20Art.png" width="400px">
                  <div class="title_text">Sleaze as Art</div>
                  <div class="caption_text">The Conservatives have formally made sleaze into an artform as the HoneyTrap Tory remains
                     a member
                  </div>
               </div>
            </div>
            <div class="slide-show_2container">
               <div class="next_button" onclick="NextImage()">&#10233</div>
               <div class="previous_button" onclick="PreviousImage()">&#10232</div>
               <div class="close_button" onclick="CloseLightbox(2)">&#9746</div>
               <div class="image_slide2">
                  <img src="img/Minute%20Books/Minute%20Books.png" width="200px">
                  <div class="title_text">Minute Books</div>
                  <div class="caption_text">Minute Books is a project run by Barney Fagan, Sean O'Brien and Laurie Avon. This particular
                     project was to commemorate Britain's exit from the European Union in the month of January 2019
                  </div>
               </div>
               <div class="image_slide2">
                  <img src="img/Minute%20Books/Minute%20Books%2001:2019.png" width="250px">
               </div>
               <div class="image_slide2">
                  <img src="img/Minute%20Books/Minute%20Books%2015:01.png">
                  <div class="title_text">Crime Chaos</div>
                  <div class="caption_text">From The Times article of the 15th of January 2019, Johnson looks like he's got split
                     priorities
                  </div>
               </div>
               <div class="image_slide2">
                  <img src="img/Minute Books/Minute Books 30:01:2019.png">
               </div>
               <div class="image_slide2">
                  <img src="img/Minute Books/Minute Books 31:1:2019.png">
               </div>
            </div>
            <div class="slide-show_3container">
               <div class="next_button" onclick="NextImage()">&#10233</div>
               <div class="previous_button" onclick="PreviousImage()">&#10232</div>
               <div class="close_button" onclick="CloseLightbox(3)">&#9746</div>
               <div class="image_slide3">
                  <img src="img/Art on a postcard/Artonapostcardlogo.png">
               </div>
               <div class="image_slide3">
                  <img src="img/Art on a postcard/BombingBridgespostcard.png" width="600px">
               </div>
               <div class="image_slide3">
                  <img src="img/Art on a postcard/Don'tSwitchoffpostcard.png" width="600px">
               </div>
               <div class="image_slide3">
                  <img src="img/Art on a postcard/SendingLove.png" width="600px">
               </div>
               <div class="image_slide3">
                  <img src="img/Art on a postcard/TheEmborisment.png" width="600px">
               </div>
            </div>
            <div class="slide-show_4container">
               <div class="next_button" onclick="NextImage()">&#10233</div>
               <div class="previous_button" onclick="PreviousImage()">&#10232</div>
               <div class="close_button" onclick="CloseLightbox(4)">&#9746</div>
               <div class="image_slide4">
                  <img src="img/Exhibition%20right%20side%20view.jpg" width="600px">
                  <div class="title_text">Prepare for the Party</div>
                  <div class="caption_text">Boris Johnson isn't invited to this party</div>
               </div>
               <div class="image_slide4">
                  <img src="img/Exhibition%20Left%20Side Door%20View.png" width="600px">
               </div>
               <div class="image_slide4">
                  <img src="img/Pinata%20front%20on.jpg" width="600px">
               </div>
            </div>
            <div class="slide-show_5container">
               <div class="next_button" onclick="NextImage()">&#10233</div>
               <div class="previous_button" onclick="PreviousImage()">&#10232</div>
               <div class="close_button" onclick="CloseLightbox(5)">&#9746</div>
               <div class="image_slide5">
                  <img src="img/GreenGrads Sketches/1 standard car.png" width="300px">
               </div>
               <div class="image_slide5">
                  <img src="img/GreenGrads Sketches/12 million barrels of oil.png" width="300px">
               </div>
               <div class="image_slide5">
                  <img src="img/GreenGrads Sketches/45 degrees.png" width="300px">
               </div>
               <div class="image_slide5">
                  <img src="img/GreenGrads Sketches/Bernard Looney Tunes.png" width="300px">
               </div>
            </div>
            <div class="slide-show_6container">
               <div class="next_button" onclick="NextImage()">&#10233</div>
               <div class="previous_button" onclick="PreviousImage()">&#10232</div>
               <div class="close_button" onclick="CloseLightbox(6)">&#9746</div>
               <div class="image_slide6">
                  <img src="img/Culture Wars/A Bit Of A Mix Up.png" width="500px">
               </div>
               <div class="image_slide6">
                  <img src="img/Culture Wars/Blue Sky Thinking.png" width="500px">
               </div>
               <div class="image_slide6">
                  <img src="img/Culture%20Wars/Culture%20War%20On%20Woke.png" width="400px">
                  <div class="title_text">GB News has no culture</div>
                  <div class="caption_text">The Tories are looking for an election strategy and GB News has come to the rescue
                     providing them a desperately needed platform. It won't work.
                  </div>
               </div>
               <div class="image_slide6">
                  <img src="img/Culture Wars/God Save the UK.png" width="400px">
                  <div class="title_text">God Save The UK</div>
                  <div class="caption_text">We're doomed</div>
               </div>
               <div class="image_slide6">
                  <img src="img/Culture Wars/Double Standards.png" width="400px">
                  <div class="title_text">Double Standards</div>
                  <div class="caption_text">Our politics are really in the shitter</div>
               </div>
               <div class="image_slide6">
                  <img src="img/Culture Wars/That's Racist.png" width="600px">
                  <div class="title_text">That's Racist</div>
                  <div class="caption_text">Hester festers as does the Tory Party</div>
               </div>
               </div>
            </div>
            <div class="slide-show_7container">
               <div class="next_button" onclick="NextImage()">&#10233</div>
               <div class="previous_button" onclick="PreviousImage()">&#10232</div>
               <div class="close_button" onclick="CloseLightbox(7)">&#9746</div>
               
               <div class="image_slide7">
                  <img src="img/BA/Kingston Degree show logo.png" width="400px">
                  <div class="title_text">This is not a Show, It's a Living Room</div>
                  <div class="caption_text">Prepare to enter Eliot Lord's (House of Lord's) space in the Kingston Fine Art Degree Show</div>
               </div>
               <div class="image_slide7">
                  <img src="img/BA/BA Exhibition View small.png" width="500px">
                  <div class="title_text">Politics at Home</div>
                  <div class="caption_text">Get comfortable, but not too comfortable</div>
               </div>
               <div class="image_slide7">
                  <img src="img/BA/Degree Show Living Room Beanbag.jpg" width="300px">
                  <div class="title_text">Ballbags on Beanbags</div>
                  <div class="caption_text">Take a seat, get in the mood</div>
               </div>
               <div class="image_slide7">
                  <img src="img/BA/Baby%20on%20a%20beanbag.png" width="300px">
                  <div class="title_text">Baby on a Beanbag</div>
                  <div class="caption_text">Politics is for all ages</div>
               </div>
               <div class="image_slide7">
                  <img src="img/BA/Degree%20show%20Living%20Room%20Deal%20or%20No%20Deal.jpg" width="500px">
                  <div class="title_text">Deal or No Deal</div>
                  <div class="caption_text">There won't be a high-money prize at the end of this game</div>
               </div>
               </div>
               <div class="slide-show_8container">
                  <div class="next_button" onclick="NextImage()">&#10233</div>
                  <div class="previous_button" onclick="PreviousImage()">&#10232</div>
                  <div class="close_button" onclick="CloseLightbox(8)">&#9746</div>
                  
                  <div class="image_slide8">
                     <img src="img/Tate Exchange/Tate Exchange Sale Logo.jpg" width="400px">
                     <div class="title_text">This is not a Show, It's a Shop</div>
                  </div>
                  <div class="image_slide8">
                     <img src="img/Tate Exchange/Tate Exchange.png" width="500px">
                     <div class="title_text">Prices have dropped a bit</div>
                  </div>
                  <div class="image_slide8">
                     <img src="img/Tate Exchange/Tate Exchange Detail.png" width="300px">
                     <div class="title_text">Badgemaking, Badass signs and Brexit Bonuses</div>
                  </div>
                  
   
                  </div>
               <div class="slide-show_9container">
                  <div class="next_button" onclick="NextImage()">&#10233</div>
                  <div class="previous_button" onclick="PreviousImage()">&#10232</div>
                  <div class="close_button" onclick="CloseLightbox(9)">&#9746</div>

                  <div class="image_slide9">
                     <img src="img/TrulyBrexishSummer/Best of British.jpg" width="300px">
                  </div>
                  <div class="image_slide9">
                     <img src="img/TrulyBrexishSummer/Bucket & Spade.jpg" width="300px">
                  </div>
                  <div class="image_slide9">
                     <img src="img/TrulyBrexishSummer/Truly Brexish Summer.png" width="300px">
                  </div>
                  <div class="image_slide9">
                     <img src="img/TrulyBrexishSummer/Marmite Cake.jpg" width="300px">
                  </div>
                  </div>
               </div>
   
      <script src="script.js"></script>
   </body>
</html>
 
Sort by date Sort by votes
Hi there,
In this part of the CSS, you're missing separating comma's in the selectors, so the style isn't being applied to the last 3 elements:
CSS: 
.gallery1,
.gallery2,
.gallery3,
.gallery4,
.gallery5,
.gallery6,
.gallery7
.gallery8
.gallery9 {
    float: left;
}
 
Upvote 0 Downvote
Also in here, you're missing a comma after .image_slide8:
CSS: 
.image_slide1,
.image_slide2,
.image_slide3,
.image_slide4,
.image_slide5,
.image_slide6,
.image_slide7,
.image_slide8
.image_slide9 {
    height: 100%;
    width: 600px;
    overflow: hidden;
  display: none;
  margin: auto;
  text-align: center;
}
Although this doesn't contribute to the problem you're having, you probably want to fix it as well.
 
Upvote 0 Downvote
tomliv said:
The w3c validator is your friend:

The W3C Markup Validation Service

W3C's easy-to-use markup validation service, based on SGML and XML parsers.
validator.w3.org validator.w3.org
Click to expand...
Although the validator should be used when HTML or CSS is not working as expected, and there definitely are errors, it wouldn't have caught these mistakes, because the CSS is still valid, just not what it was intended to be.
 
Upvote 0 Downvote
Johna said:
Hi there,
In this part of the CSS, you're missing separating comma's in the selectors, so the style isn't being applied to the last 3 elements:
CSS: 
.gallery1,
.gallery2,
.gallery3,
.gallery4,
.gallery5,
.gallery6,
.gallery7
.gallery8
.gallery9 {
    float: left;
}
Click to expand...
I've edited the code as suggested, and yet I'm still running into the same issue. It shows up like this. I want the lowest two images to be in line with the pink image
 

Attachments

  • Screenshot 2024-04-10 at 20.28.41.png
    Screenshot 2024-04-10 at 20.28.41.png
    1.4 MB · Views: 4
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom