Bloqué sur l'alignement de la grille de la photo

Question

J'ai de la difficulté à aligner mon menu et ma grille d'image. Ma grille est inline-block et peu importe ce que je fais, je ne peux pas faire sortir le premier objet du coin supérieur droit, à moins que je ne change les marges qui abaissent mon menu de nav. Aussi quand je teste ma page localement la fonctionnalité sage fonctionne comme je veux mais quand je télécharge sur mon hébergeur il coupe les photos et ne me permet pas de faire défiler.

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 { 
 
\t width: 1500px; 
 
\t overflow: hidden; 
 
\t margin: auto; 
 
\t background: white; 
 
} 
 
header { 
 
\t width: 800px; 
 
\t margin: 40px auto; 
 
} 
 

 

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

 
.first { 
 
\t -webkit-animation: bannermove 30s linear infinite; 
 
\t -moz-animation: bannermove 30s linear infinite; 
 
\t  -ms-animation: bannermove 30s linear infinite; 
 
\t  -o-animation: bannermove 30s linear infinite; 
 
\t   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"> 
 
    \t <img class="first" src="https://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=73268775" alt="Naruto" height="300px"/> 
 
    \t <img src="http://img13.deviantart.net/6333/i/2010/135/a/b/bleach_logo_by_pein87.jpg" alt="Bleach" class="bleach" height="300px"/> 
 
    \t <img src="http://www.onepiecepodcast.com/wp-content/uploads/2015/11/OP-anime-key-810x304.png" alt="OnePiece" class="1piece" height="300px"/> 
 
    \t <img src="https://ibhuluimcom-a.akamaihd.net/ib.huluim.com/show/1303?region=US&size=952x536" alt="Deathnote" class="death" height="300px"/> 
 
    \t <img src="http://i0.kym-cdn.com/photos/images/original/000/951/672/5c4.jpg" alt="FateStay" class="fate" height="300px"/> 
 
    \t <img src="https://i.ytimg.com/vi/COYFmbVEH0k/maxresdefault.jpg" alt="SwordArtOnline" class="SAO" height="300px"/> 
 
    \t <img src="https://myanimelist.cdn-dena.com/images/anime/13/75194.jpg" alt="DGreyMan" class="banner"height="300px"/> 
 
    \t <img src="http://www.fandompost.com/wp-content/uploads/2011/05/Viz-Media-Logo.jpg" alt="Viz"class="banner" height="300px"/> 
 
    \t <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>

Je veux la grille de photos soit une seule ligne dans le menu de navigation.

Answer 1

Vous devez restructurer votre code HTML. La « grille de photos » devrait être sous le nav dans le code HTML (et non dans la section head) ... Cela pourrait vous aider à démarrer ...

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; 
 
}

<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" /> 
 
    <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> 
 

 
    <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>