Having trouble aligning photos in the grid

I am facing an issue aligning my menu and image grid. The grid is inline-block but the first item stays stuck in the upper right-hand corner no matter what I do, without affecting the navigation menu placement. Additionally, when testing locally, everything functions correctly, but once uploaded to the web host, the photos get cut off and scrolling becomes restricted.

body{
  background-image: url(https://www.walldevil.com/wallpapers/a77/aincrad-sword-art-online.jpg);
  background-repeat: no-repeat;
  overflow: scroll;
  text-align: center;
  background-size: auto;
  scroll-behavior: smooth;
  max-width: 100% auto;
  max-height: 300% auto;

}

#container {
width: 1500px;
overflow: hidden;
margin: auto;
background: white;
}
header {
width: 800px;
margin: 40px auto;
}


.photobanner {
height: 205px;
width: 4000px;
margin-bottom: 80px;
}

.first {
-webkit-animation: bannermove 30s linear infinite;
   -moz-animation: bannermove 30s linear infinite;
    -ms-animation: bannermove 30s linear infinite;
     -o-animation: bannermove 30s linear infinite;
        animation: bannermove 30s linear infinite;
}

@keyframes "bannermove" {
 0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -5150px;
 }

}

@-moz-keyframes bannermove {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -5150px;
 }

}

@-webkit-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -5150px;
 }

}

@-ms-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -5150px;
 }

}

@-o-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -5150px;
 }

}

@-moz-keyframes bannermove {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -5150px;
 }

 }

 @-moz-keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -5150px;
  }

}

@-moz-keyframes bannermove {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -5150px;
 }

 }

 @-moz-keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -5150px;
  }

}

@-moz-keyframes bannermove {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -5150px;
 }

 }

 @-moz-keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -5150px;
  }

}

@-moz-keyframes bannermove {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -5150px;
 }

 }


 p1{
 font-size: 36px;
 font-style: italic;
 font-weight: bold;
 font-family: fantasy;
 text-align: center;
 float: left;
 font-family: sans-serif;
 font-style: oblique;
}

 #nav {
 width:85%;
 margin:0 auto;
 list-style:none;
 }
 #nav li {
 float:left;
 }
 #nav a {
 display:block;
 text-align:center;
 width:100px;
 text-decoration:none;
 }


 ul li{
 float: left;
 list-style: none;
 margin-right:  1em
 padding: 12px;
 font-family: "indie Flower";
 text-align: center;
 }

 .clearfix:after {
     display:block;
     clear:both;
 }

 /*----- Menu Outline -----*/
 .menu-wrap {
     width:100%;
     box-shadow:0px 1px 3px blue;
     background:clear;
 }

 .menu {
     width:1000px;
     margin:0px auto;
 }

 .menu li {
     margin:0px;
     list-style:none;
     font-family:'Indie Flower';
 }

 .menu a {
     transition:all linear 0.15s;
     color:black;
     background-color: clear;
 }

 .menu li:hover > a, .menu .current-item > a {
     text-decoration:none;
     color:yellow;
 }

 .menu .arrow {
     font-size:11px;
     line-height:0%;
 }

 /*----- Top Level -----*/
 .menu > ul > li {
     float:left;
     display:inline-block;
     position:relative;
     font-size:19px;
 }

 .menu > ul > li > a {
     padding:10px 40px;
     display:inline-block;
     text-shadow:0px 1px 0px rgba(0,0,0,0.4);
 }

 .menu > ul > li:hover > a, .menu > ul > .current-item > a {
     background:clear;
 }

 /*----- Bottom Level -----*/
 .menu li:hover .sub-menu {
     z-index:1;
     opacity:1;
 }

 .sub-menu {
     width:160%;
     padding:5px 0px;
     position:absolute;
     top:100%;
     left:0px;
     z-index:-1;
     opacity:0;
     transition:opacity linear 0.15s;
     box-shadow:0px 2px 3px rgba(0,0,0,0.2);
     background:white;
 }

 .sub-menu li {
     display:block;
     font-size:16px;
 }

 .sub-menu li a {
     padding:10px 30px;
     display:block;
 }

 .sub-menu li a:hover, .sub-menu .current-item a {
     background:#3e3436;
 }

.photolink iframe:hover{
  float: left;

}

ul.products li {
    width: 200px;
    display: inline-block;
    vertical-align: middle;
    *display: inline;
    *zoom: 1;
}
<!DOCTYPE html>
<html>
<title>Anime Emporium:SAO Figurines</title>

<head>
  <link href='https://fonts.googleapis.com/css?family=Indie Flower' rel='stylesheet'>
<meta charset=utf-8/>
<meta name="description" content="description">

<div id="container">


    <div class="photobanner">
    <img class="first" src="https://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=73268775" alt="Naruto" height="300px"/>
    <img src="http://img13.deviantart.net/6333/i/2010/135/a/b/bleach_logo_by_pein87.jpg" alt="Bleach" class="bleach" height="300px"/>
    <img src="http://www.onepiecepodcast.com/wp-content/uploads/2015/11/OP-anime-key-810x304.png" alt="OnePiece" class="1piece" height="300px"/>
    <img src="https://ibhuluimcom-a.akamaihd.net/ib.huluim.com/show/1303?region=US&size=952x536" alt="Deathnote" class="death" height="300px"/>
    <img src="http://i0.kym-cdn.com/photos/images/original/000/951/672/5c4.jpg" alt="FateStay" class="fate" height="300px"/>
    <img src="https://i.ytimg.com/vi/COYFmbVEH0k/maxresdefault.jpg" alt="SwordArtOnline" class="SAO" height="300px"/>
    <img src="https://myanimelist.cdn-dena.com/images/anime/13/75194.jpg" alt="DGreyMan" class="banner"height="300px"/>
    <img src="http://www.fandompost.com/wp-content/uploads/2011/05/Viz-Media-Logo.jpg" alt="Viz"class="banner" height="300px"/>
    <img src="https://www.kamispeed.com/v/vspfiles/photos/manufacturers/NERV.jpg" alt="Nerv"class="banner"  height="300px" />

    </div>

    <div class='fixedDiv'>
      <br class='clear'>
</div>
</div>

<link rel="stylesheet" media="screen" href="SAOFigurines.css"/>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<h1>Sword Art Online</h1>


  <div class="menu-wrap">
      <nav class="menu">
          <ul class="clearfix">
              <li><a href="/index.html">Home</a></li>
              <li><a href="#">Videos</a></li>
              <li> <a href="/FigurinesMain.html">Figurines</a></li>
              <li><a href="/AEClothingMain.html">Clothing</a></li>
              <li><a href="MiscMainMenu.html">Misc</a></li>
              
          </ul>
      </nav>
  </div>

</head>

<body>
<div class="buttons">
  <ul class="products">
    <li>
      <a href="#">
        <img src="#">
      </a>
    </li>

      <li>
          <a href="#">
              <img src="SAO Asuna Yui.jpg">
              <h4>Asuna/Yui Bench</h4>
              <p>$45.99</p>
          </a>
      </li>
      <li>
          <a href="#">
              <img src="SAO Asuna ALO.jpg">
              <h4>Asuna Alfheim Online</h4>
              <p>$25.99</p>
          </a>
      </li><!-- more list items -->
      <li>
        <a href="#">
          <img src="SAO Asuna (Lightning).jpg">
          <h4>Asuna "Lightnong Flash" costume</h4>
          <p>$25.99</p>
        </a>
      </li>

  </ul>

How can I place the photo grid in a single line beneath the navigation menu?

htmlcssgridphoto

Answer №1

To properly structure your HTML, make sure the 'photo grid' is positioned beneath the nav element within your HTML code, and not within the head section. Here's a snippet to guide you:

body {
  background-image: url(https://www.walldevil.com/wallpapers/a77/aincrad-sword-art-online.jpg);
  background-repeat: no-repeat;
  overflow: scroll;
  text-align: center;
  background-size: auto;
  scroll-behavior: smooth;
  max-width: 100% auto;
  max-height: 300% auto;
}

#container {
  width: 1500px;
  overflow: hidden;
  margin: auto;
  background: white;
}

header {
  width: 800px;
  margin: 40px auto;
}

.photobanner {
  height: 205px;
  width: 4000px;
  margin-bottom: 80px;
}

.first {
  -webkit-animation: bannermove 30s linear infinite;
  -moz-animation: bannermove 30s linear infinite;
  -ms-animation: bannermove 30s linear infinite;
  -o-animation: bannermove 30s linear infinite;
  animation: bannermove 30s linear infinite;
}

@keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -5150px;
  }
}

/* Additional CSS properties listed here for proper structuring */

ul.products li {
  width: 200px;
  display: inline-block;
  vertical-align: middle;
  *display: inline;
  *zoom: 1;
}
<h1>Sword Art Online</h1>


<div class="menu-wrap">
  <nav class="menu">
    <ul class="clearfix">
      <li><a href="/index.html">Home</a></li>
      <li><a href="#">Videos</a></li>
      <li> <a href="/FigurinesMain.html">Figurines</a></li>
      <li><a href="/AEClothingMain.html">Clothing</a></li>
      <li><a href="MiscMainMenu.html">Misc</a></li>

    </ul>
  </nav>
</div>

<div id="container">
  <div class="photobanner">
    <img class="first" src="https://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=73268775" alt="Naruto" height="300px" />
    <img src="http://img13.deviantart.net/6333/i/2010/135/a/b/bleach_logo_by_pein87.jpg" alt="Bleach" class="bleach" height="300px" />
    <!-- More image elements listed here -->

  </div>

  <div class='fixedDiv'>
    <br class='clear'>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display/Conceal JavaScript

I recently implemented a JavaScript function on my website to show/hide specific elements. However, being new to JavaScript, I have encountered some difficulties. I've spent quite some time troubleshooting the code but haven't been able to pinpoi ...

javascripthtml

Using React Refs to Trigger the video.play() Method - A Step-by-Step Guide

Is there a way to use a ref in order to trigger video.play()? Currently encountering an error: preview.bundle.js:261916 Uncaught TypeError: _this2.videoRef.play is not a function Take a look at my component: import React from 'react'; import s ...

javascripthtmlreactjshtml5-video

What sets apart li.parent from ul?

I am facing some confusion with this parent keyword. Are li.parent and ul the same thing? If so, can someone please explain what this means? Thank you. (nav and sidebar are classes). .sidebar ul.nav .active > a:focus, .sidebar ul.nav li.parent a.active ...

csshtml-listsparent

AngularJS: Utilizing $http to fetch XML data instead of JSON

Looking to extract data from a website using angularjs / javascript. I am familiar with the $http object in angularjs which can make get requests. I have used it before to retrieve json, but I'm wondering if I can use it for XML (HTML) as well? (I th ...

javascripthtmlxmlangularjs

Tips on updating the content of an HTML element dynamically when it is already being populated using *ngFor

I have created an HTML component that utilizes *ngFor to dynamically generate HTML elements. This results in a total of 3 tags being generated when the code is run. I have included data such as subject in the component file which updates dynamically, how ...

htmlangulartypescripthttpclient

The compatibility of Datatables responsive feature with ajax calls appears to be limited

I recently started using the datatables plugin and have encountered an issue with responsive tables. While I successfully implemented a responsive table and an AJAX call on a previous page, I am facing difficulties with it on a new page for unknown reasons ...

javascriptjqueryhtmlajaxdatatables-1.10

Steps for accessing a particular tab on a separate webpage

I am working on a home page that includes an IFrame displaying a separate HTML page. Within the embedded page, there is a link that, when clicked, should open another page in the same IFrame with a specified tab displayed. This new page contains 3 tabs, ...

htmltabs

Animation Effects in Opera and Internet Explorer

Just unveiled my latest project, CSSload.net - an awesome tool for generating CSS spinners and bars. The animations are running smoothly on Firefox and Webkit browsers. Curious if anyone has tips on animating elements like this in Opera and IE? ...

jqueryajaxcssload

Accessing video durations in Angular 2

Can anyone help me with retrieving the video duration from a list of videos displayed in a table? I attempted to access it using @ViewChildren and succeeded until encountering one obstacle. Although I was able to obtain the query list, when attempting to a ...

htmlangulartypescript

Issues with the execution of Jquery function

Hey guys, take a look at my code: //Additional Jquery codes // display_popup_crop : revealing the crop popup function display_popup_crop(link) { alert("show_popup_crop function is triggered!"); // changing the photo source $('#cropbox&a ...

javascriptphpjqueryhtmljcrop

Issue with Vuetify carousel not resizing to fit the entire width and height

I am looking to create a carousel that spans the entire width and height of a viewport in my Vue.js 2 project using Vuetify. Below is the code I have so far: <head> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500, ...

javascripthtmlcssvue.jsvuetify.js

How come the html element doesn't have a default height of 100%?

Is there a reason why the html element is not automatically set at 100% height by default? Can you think of any scenarios where having it take up less than the full height of the window would be beneficial? html { height: 100%; } [Update] I modified th ...

htmlcsslayoutheight

Prevent secret select fields from being submitted within a form

In my interface, there are a couple of dropdowns where a user can select the first option and based on that selection, a new dropdown will appear. Currently, when posting the form, all the select dropdown values are included in the post data, even the hid ...

javascriptjqueryhtml

How can PHP be used to display a varying number of items in a slider depending on the size of the screen?

I am currently utilizing media queries to adjust the layout of my website. My query is: How can I display a different number of items in a slider based on the screen size? For small screens, I have included the following code: <?php if($i == 4) {echo ...

phpcss

Change the display, animate the elements within

Currently working on a landing page with a contentSwitcher and everything is functioning properly. However, I am interested in animating the contents sequentially to add some stylish flair. Take a look at the Test Landing Page for reference. If you observ ...

jqueryhtmlcss

Is it possible to replace JavaScript files that are included in my index page if I am utilizing conditional comments specifically for IE9?

My website works perfectly in all browsers, except for IE9. After some investigation, I discovered that the issue lies with a jQuery plugin called multilevelpush.js. While it works great on other browsers, it simply won't cooperate with IE9. Upon fur ...

javascriptjqueryhtml

The CSS attribute selector is unable to target dynamically appended class names

Utilizing React's CSS animations add-on has been a seamless process, with everything running smoothly when using the provided classnames. .quote-enter { opacity: 0.01; transition: opacity .25s ease-in; } .quote-enter.quote-enter-active { opaci ...

csscss-selectors

The expected response from CSS3 animated images may not be fully realized

I've been working on this project with 4 images. While hovering over one image causes the others to change size as intended, I can't figure out why the ones on the left are not following the same pattern even though I have specified that they sho ...

htmlcsshovertransformscale

Tips for designing an Ionic app with a Pinterest-inspired layout

Recently stepping into the world of Ionic development, I find myself facing a challenge in creating a Pinterest-inspired layout using Ionic. Specifically, I am struggling to achieve a two-wide list of items with varying heights. Can anyone offer guidance ...

htmlcsssassionic-framework

From Button to Picture Button

Having an issue with my dropdown menu. After selecting a location, clicking on the "go" button should direct me to another page. Here is the HTML code for the button: <input type="button" name="button" class="gobutton" onclick="openDir(this.form);"> ...

htmlimagebutton