0
Probleme beim Ausrichten meines Menüs und meiner Bildraster. Mein Raster ist ein Inline-Block und egal, was ich mache, ich kann den ersten Gegenstand nicht aus der oberen rechten Ecke bewegen, es sei denn, ich ändere die Ränder, was mein Nav-Menü herunterbringt. Auch wenn ich meine Seite lokal funktionell teste, läuft es so, wie ich es will, aber wenn ich auf meinen Web-Host lade, schneidet es die Fotos ab und erlaubt mir nicht zu scrollen.Stuck auf Foto Rasterausrichtung
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>Ich möchte das Fotoraster eine einzelne Zeile unter dem nav-Menü sein.
Dank loszulegen helfen, die perfekt forehat gearbeitet Ich habe versucht zu tun. Ich habe nur für 2 Wochen programmiert, mich selbst aus Web-Tutorials zu unterrichten. –