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

Input fields that are dynamically generated do not respond to changes made using .click and .blur methods in jQuery CSS

I'm experiencing an issue with a HTML form where a new input field is generated when a button is clicked, but the dynamically created field is not styled properly. Below is the HTML form code: <form id="form"> <input type="text" id="ent ...

jquerycss

Printed pages featuring neatly organized two-column div layout

Forgive me if this question has already been asked, but I need some guidance: I am designing reports using HTML and CSS which are then converted into PDF format. The report requires a two-column layout on most pages, so I am using: <div class="two_col ...

htmlcsspdfcss-multicolumn-layout

Flickering Button Displayed After Fade-In Animation

After scouring the internet for a solution, I still can't seem to figure out why my code isn't working. Whenever an element fades in on Safari, it quickly flickers or flashes white, almost like a rapid refresh is happening. I've tried vario ...

csswordpresssafariwebkit

Failing to hide a div on hover: Hoverintent's shortcomings

When I hover over the div with the unique identifier id="navbar", it doesn't seem to trigger any actions. I have included the following script in my document head: <script type="text/javascript" src="https://ajax.googleapi ...

javascripthtmljqueryhoverintent

Building a bespoke search input for the DataTables JQuery extension

As the title indicates, I am in the process of developing a custom search box for the DataTables JQuery plugin. The default options do not suit my needs, and configuring the DOM is also not ideal as I aim to integrate it within a table row for display purp ...

javascriptjqueryhtmlcssdatatable

Events related to SVG elements

I have a unique situation where a div containing multiple SVG elements that act as buttons is added to the page after the user interacts with it. I am trying to add events to these SVG elements using event delegation, where I inspect the target of the even ...

javascripthtmlsvg

Can the distinction between a page refresh and closure be identified using the method below?

My idea is to trigger a popup window when the page is closed, not when it is refreshed. The plan is as follows: Client Send an ajax request to the server every x seconds. Server var timeout=0 var sec=0 while (sec>timeout) { open popup win ...

javascripthtmldjangoalgorithmpolling

Tips for aligning 2 columns when both table cells contain inner tables

Concerning my HTML table, cells #3 and #4 contain inner tables. I am facing an issue with aligning the rows within each table in cell #3 and cell #4 properly. Sometimes, the length of text in a row exceeds a single line, causing misalignment with the othe ...

htmlcss

Issues loading SVG pattern textures with PHP

While experimenting with SVG and PHP codes, I encountered a frustrating issue that has me stumped. I have an SVG image containing some shapes. Using the fill attribute and the def tag, I can easily apply textures to specific shapes using a simple GET var ...

phphtmlsvg

Having issues with jQuery append() function not working when concatenating strings

(See complete code below) This specific part of the code $('#' + id).parent().append('<div id="pop-up">hello</div>'); functions correctly. However, when I attempt to use this alternative approach $('#' + id).p ...

jqueryhtmlappendstring-concatenation

The form contains an HTML table, but unfortunately, the buttons are not functioning as expected

I have encountered an issue with my form and table setup that I cannot seem to resolve. Despite researching similar problems, I have not been able to find a solution. In the code snippet provided below, you can see that when I click on the buttons for De ...

phphtmlformshtml-table

Tips for synchronizing text field and formula field content on MathQuill 0.10

I am currently working on creating a WYSIWYGish input element for my formula, along with a LaTeX input element. <span id="editable-math" class="mathquill-editable"></span> The goal is to make these two elements work synchronously. Here's ...

javascriptjqueryhtmlmathquill

Ways to send a POST variable to PHP without refreshing the webpage

Is there a way to pass a simple variable from a text-box on a different page to PHP without reloading it? I've been informed that Ajax is required for this task, but I'm unsure of how to go about implementing it. Can someone provide me with a sam ...

phpjavascripthtmlajax

The JavaScript function is not being activated by clicking on Selenium in Chrome

Take a look at the HTML snippet below: <table class="table-main "> <thead> <tbody> <!----> <tr class="" ng-if="mapCtrl.isAdded" style=""> <td/> <td> <td> <t ...

javascripthtmlangularjsselenium

Setting a variable for a JavaScript function to insert a video - a step-by-step guide

Here is a grid structure that I am working with: <div class="main"> <ul id="og-grid" class="og-grid"> <li> <a href="http://..." data-video="my-url" data-largesrc="images/1.jpg" data-title="Title" data-descript ...

javascriptjqueryhtml

css displaying drop-down menu when hovered over

I've been trying to create a link that, when hovered over, displays a list of options. I've managed to make it work in Firefox and Google Chrome, but it doesn't display at all in Internet Explorer when hovering over the link. I'm also ...

htmlcss

Tips on adjusting the color of a link once it has been clicked?

Looking for a link with a specific style? a { color: #999; &:hover { color: #008da0; } &:visited { color: #999; } /* I added this to test if it's gonna fix it, but it didn't */ } Upon clicking the link, it turns blue and remains s ...

htmlcss

Enhance your photographic experience with the JavaScript Camera API on Android (Froyo

I have been attempting to utilize the JavaScript Camera API through the Android browser, as showcased at Google IO on Froyo. Despite having Froyo on my Nexus1, I am encountering difficulties accessing navigator.device and navigator.camera properties, bo ...

androidapihtml

Adjust the width of a textarea to expand evenly within its container when exceeding the specified width limit using CSS

I am currently attempting to adjust the size of this textarea proportionally. However, when I try to increase it beyond 100% width, it only expands to the right side. I have already experimented with using margin: auto and display: block but unfortunately, ...

htmlcsspug

What is the process for refreshing HTML elements that have been generated using information from a CSV document?

My elements are dynamically generated from a live CSV file that updates every 1 minute. I'm aiming to manage these elements in the following way: Remove items no longer present in the CSV file Add new items that have appeared in the CSV file Maintai ...

javascripthtmlcsvd3.js