#html #css
#HTML #css
Вопрос:
Я новичок в программировании. Мой код выглядит так, как и должен выглядеть в предварительном просмотре Coda, но когда я открываю его в браузере (Chrome), все переместилось. Он перемещается при изменении окна браузера. Я бы хотел, чтобы она всегда выглядела одинаково. Что я сделал не так?
(Кроме того, я не могу заставить работать слайд-шоу в фоновом режиме. Знаете почему?)
Был бы очень признателен за помощь!
Вот Jsfiddle и мой CSS: мой веб-сайт
/* StyleSheet */
body {
background-image: "sushi_main.jpg";
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
background-size: 100%;
z-index: -1;
}
#overlay{
position: center;
top: auto;
left: auto;
z-index: 1;
background-color: #000;
background-color: rgba(0, 0, 0, 0.65);
width: 59%;
height: 100%;
size: 80px 25px;
margin: auto;
max-width: 820px;
padding: 60px;
}
#header{
position: auto;
left: auto;
z-index: 2;
background-color: #030303;
opacity: 100;
width: 70%;
max-height: 125px;
margin: auto;
position: fixed;
max-width: 730px;
left: 15.5%;
top: 0;
}
h1 {
text-align: right;
color: #f4f5f7;
letter-spacing: 3px;
padding-top: 35px;
padding-bottom: 30px;
padding-right: 80px;
font-family: 'Quicksand', sans-serif;
}
#logo {
position:auto;
margin-left:68px;
margin-bottom: 0;
margin-top: 500;
width:80px;
height:130px;
padding: 30;
position: fixed;
z-index: 2;
}
#navbar {
position: fixed;
z-index: 3;
background-color: #f4f5f7;
max-height: 25px;
width: 731px;
left: 165px;
top: 118px;
word-spacing: 90px;
}
h2 {
text-align: center;
color: #f4f5f7;
letter-spacing: 2px;
padding-top: 150px;
padding-bottom: 4px;
padding-right: 4px;
font-family: 'Quicksand', sans-serif;
opacity: 0.5;
}
p1 {
text-align: center;
color: #030303;
padding-top: 35px;
padding-bottom: 50px;
padding-right: 50px;
font-size: 16px;
font-family: 'Quicksand', sans-serif;
}
p2 {
text-align: center;
color: #f4f5f7;
letter-spacing: 1px;
font-size: 11px;
font-family: 'Merriweather', serif;
line-height: 1.5;
border-style: bottom;
border-width: 5px;
}
p3 {
text-align: center;
color: #f4f5f7;
padding-top: 35px;
padding-bottom: 50px;
padding-right: 50px;
font-size: 12px;
font-family: 'Quicksand', sans-serif;
}
p4 {
text-align: center;
color: #f4f5f7;
letter-spacing: 1px;
font-size: 11px;
font-family: 'Merriweather', serif;
line-height: 1.5;
border-style: bottom;
border-width: 5px;
columns: 2;
column-width: 100px;
}
ul {
list-style-type: none;
margin: 3px;
padding: 2px;
text-align: center;
letter-spacing: 2px;
}
a:hover{
color:#e5001a;
text-decoration:none;
cursor:pointer;
}
.active {
background-color: #9e520f;
}
a {
color: #030303;
text-decoration: none;
font-family: 'Quicksand', sans-serif;
}
#footer {
z-index: 8;
background-color: #030303;
width: 100%;
max-height: 1px;
margin: auto;
}
hr {
display: block;
margin-top: 3em;
margin-bottom: 1em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
#colum {
z-index: 8;
background-color: rgba 0, 0, 0, 0.65;
width: 100%;
max-height: 500px;
margin: auto;
column-count: 2;
}
html {
min-height: 100%;
}
body {
height: 100%;
}
.slideshow {
list-style: none;
z-index: 1;
}
.slideshow li span{
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-animation: imageAnimation 24s linear infinite 0s;
-moz-animation: imageAnimation 24s linear infinite 0s;
animation: imageAnimation 24s linear infinite 0s;
}
.no-cssanimations .slideshow li span {
opacity: 1;
}
.slideshow li:nth-child(1) span {
background-image: url(sushi_main.jpg);
}
.slideshow li:nth-child(2) span {
background-image: url(sushii.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
animation-delay: 6s;
}
.slideshow li:nth-child(3) span{
background-image: url(akiko_sushi.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
animation-delay: 12s;
}
.slideshow li:nth-child(4) span {
background-image: url(pabu_sushi.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
animation-delay: 18s;
}
#wrapper {
margin-left:auto;
margin-right:auto;
width:960px;
} <!doctype html>
<title>Sushi website Midterm</title>
<link rel="stylesheet" type="text/css" href="sushi.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather|Quicksand" rel="stylesheet">
</head>
<body>
<div id="navbar">
<p1>TJOHLANGAJEBFKSCB LHE VSCBFF</p1>
</div>
<body background="sushi_main.jpg">
<div id="header">
<img id="logo" src="ss_logo2-01.png" alt="Sushi in San Francisco Logo" style="float:left;" />
<h1>Sushi in San Francisco</h1>
</div>
<div id="navbar">
<p1>
<ul>
<a href="movies.html">AKIKO's</a></li>
<a href="dogs.html">Sushi1</a></li>
<a href="food.html">Sushi2</a></li>
<a href="index.html">Sushi3</a></li>
</ul>
</p1>
</div>
<div id="overlay">
<h2>Experience Exceptional </h2>
<center>
<p2>There are four sushi restaurants in San Francisco you do not want to miss. On this site we'll help you find these treasures in the city jungle and experience some exceptional culinary skills. Click the menu to get started or simply scroll down.
</p2>
</center>
<hr>
<h2>AKIKO's </h2>
<div id="colum">
<p4>Akiko's, at 431 Bush and not related to the restaurant of the same name on Mason Street, is a cult hit in the making because it has all the intriguing elements that provide cachet: There's no sign on or over the door, so it's easy to miss. If
you call the restaurant you're likely to encounter a full voice-mail box; fortunately, you can book on OpenTable, or show up and hope for a table or a seat at the sushi bar. The restaurant has been around for 18 years, but, four years ago, Ray
Lee bought out his parents and brought in Ricky Yap as chef. In the last few months, they've ramped up the menu, hired more staff, remodeled and expanded the sushi bar and took out some tables. All told, the restaurant seats 38. Once inside,
diners are greeted by a friendly host, but if you have a reservation after 7 or so you may still have to wait a half hour for a table. People don't seem to be in a rush to leave.
</p4>
</div>
<hr>
<h2>Experience Exceptional </h2>
<center>
<p2>There are four sushi restaurants in San Francisco you do not want to miss. On this site we'll help you find these treasures in the city jungle and experience some exceptional culinary skills. Click the menu to get started or simply scroll down.
</p2>
</center>
<hr>
<h2>Experience Exceptional </h2>
<center>
<p2>There are four sushi restaurants in San Francisco you do not want to miss. On this site we'll help you find these treasures in the city jungle and experience some exceptional culinary skills. Click the menu to get started or simply scroll down.
</p2>
</center>
<hr>
<h2>Experience Exceptional </h2>
<center>
<p2>There are four sushi restaurants in San Francisco you do not want to miss. On this site we'll help you find these treasures in the city jungle and experience some exceptional culinary skills. Click the menu to get started or simply scroll down.
</p2>
</center>
<hr>
<divone>
<p3>Copyright my name 2016</p3>
</divone>
<ul class="slideshow">
<li> <span>sushi_main.jpg</span> </li>
<li> <span>Slide Two</span> </li>
<li> <span>Slide Three</span> </li>
<li> <span>Slide Four</span> </li>
</ul> Ответ №1:
HTML в вашей скрипке полностью неверно сформирован: нет <html> тега, несколько <body> незакрытых тегов, …
Вам следует еще раз прочитать основы HTML и использовать средство проверки перед публикацией вашего кода.
Вот исправленная версия:
/* StyleSheet */
body {
background-image: "sushi_main.jpg";
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
background-size: 100%;
z-index: -1;
}
#overlay{
position: center;
top: auto;
left: auto;
z-index: 1;
background-color: #000;
background-color: rgba(0, 0, 0, 0.65);
width: 59%;
height: 100%;
size: 80px 25px;
margin: auto;
max-width: 820px;
padding: 60px;
}
#header{
position: auto;
left: auto;
z-index: 2;
background-color: #030303;
opacity: 100;
width: 70%;
max-height: 125px;
margin: auto;
position: fixed;
max-width: 730px;
left: 15.5%;
top: 0;
}
h1 {
text-align: right;
color: #f4f5f7;
letter-spacing: 3px;
padding-top: 35px;
padding-bottom: 30px;
padding-right: 80px;
font-family: 'Quicksand', sans-serif;
}
#logo {
position:auto;
margin-left:68px;
margin-bottom: 0;
margin-top: 500;
width:80px;
height:130px;
padding: 30;
position: fixed;
z-index: 2;
}
#navbar {
position: fixed;
z-index: 3;
background-color: #f4f5f7;
max-height: 25px;
width: 731px;
left: 165px;
top: 118px;
word-spacing: 90px;
}
h2 {
text-align: center;
color: #f4f5f7;
letter-spacing: 2px;
padding-top: 150px;
padding-bottom: 4px;
padding-right: 4px;
font-family: 'Quicksand', sans-serif;
opacity: 0.5;
}
p1 {
text-align: center;
color: #030303;
padding-top: 35px;
padding-bottom: 50px;
padding-right: 50px;
font-size: 16px;
font-family: 'Quicksand', sans-serif;
}
p2 {
text-align: center;
color: #f4f5f7;
letter-spacing: 1px;
font-size: 11px;
font-family: 'Merriweather', serif;
line-height: 1.5;
border-style: bottom;
border-width: 5px;
}
p3 {
text-align: center;
color: #f4f5f7;
padding-top: 35px;
padding-bottom: 50px;
padding-right: 50px;
font-size: 12px;
font-family: 'Quicksand', sans-serif;
}
p4 {
text-align: center;
color: #f4f5f7;
letter-spacing: 1px;
font-size: 11px;
font-family: 'Merriweather', serif;
line-height: 1.5;
border-style: bottom;
border-width: 5px;
columns: 2;
column-width: 100px;
}
ul {
list-style-type: none;
margin: 3px;
padding: 2px;
text-align: center;
letter-spacing: 2px;
}
a:hover{
color:#e5001a;
text-decoration:none;
cursor:pointer;
}
.active {
background-color: #9e520f;
}
a {
color: #030303;
text-decoration: none;
font-family: 'Quicksand', sans-serif;
}
#footer {
z-index: 8;
background-color: #030303;
width: 100%;
max-height: 1px;
margin: auto;
}
hr {
display: block;
margin-top: 3em;
margin-bottom: 1em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
#colum {
z-index: 8;
background-color: rgba 0, 0, 0, 0.65;
width: 100%;
max-height: 500px;
margin: auto;
column-count: 2;
}
html {
min-height: 100%;
}
body {
height: 100%;
}
.slideshow {
list-style: none;
z-index: 1;
}
.slideshow li span{
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-animation: imageAnimation 24s linear infinite 0s;
-moz-animation: imageAnimation 24s linear infinite 0s;
animation: imageAnimation 24s linear infinite 0s;
}
.no-cssanimations .slideshow li span {
opacity: 1;
}
.slideshow li:nth-child(1) span {
background-image: url(sushi_main.jpg);
}
.slideshow li:nth-child(2) span {
background-image: url(sushii.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
animation-delay: 6s;
}
.slideshow li:nth-child(3) span{
background-image: url(akiko_sushi.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
animation-delay: 12s;
}
.slideshow li:nth-child(4) span {
background-image: url(pabu_sushi.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
animation-delay: 18s;
}
#wrapper {
margin-left:auto;
margin-right:auto;
width:960px;
} <!doctype html>
<html>
<head>
<title>Sushi website Midterm</title>
<link rel="stylesheet" type="text/css" href="sushi.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather|Quicksand" rel="stylesheet">
</head>
<body>
<div id="navbar">
<p1>TJOHLANGAJEBFKSCB LHE VSCBFF</p1>
</div>
<div background="sushi_main.jpg">
<div id="header">
<img id="logo" src="ss_logo2-01.png" alt="Sushi in San Francisco Logo" style="float:left;" />
<h1>Sushi in San Francisco</h1>
</div>
<div id="navbar">
<p1>
<ul>
<li><a href="movies.html">AKIKO's</a></li>
<li><a href="dogs.html">Sushi1</a></li>
<li><a href="food.html">Sushi2</a></li>
<li><a href="index.html">Sushi3</a></li>
</ul>
</p1>
</div>
<div id="overlay">
<h2>Experience Exceptional </h2>
<center>
<p2>There are four sushi restaurants in San Francisco you do not want to miss. On this site we'll help you find these treasures in the city jungle and experience some exceptional culinary skills. Click the menu to get started or simply scroll down.
</p2>
</center>
<hr>
<h2>AKIKO's </h2>
<div id="colum">
<p4>Akiko's, at 431 Bush and not related to the restaurant of the same name on Mason Street, is a cult hit in the making because it has all the intriguing elements that provide cachet: There's no sign on or over the door, so it's easy to miss. If
you call the restaurant you're likely to encounter a full voice-mail box; fortunately, you can book on OpenTable, or show up and hope for a table or a seat at the sushi bar. The restaurant has been around for 18 years, but, four years ago, Ray
Lee bought out his parents and brought in Ricky Yap as chef. In the last few months, they've ramped up the menu, hired more staff, remodeled and expanded the sushi bar and took out some tables. All told, the restaurant seats 38. Once inside,
diners are greeted by a friendly host, but if you have a reservation after 7 or so you may still have to wait a half hour for a table. People don't seem to be in a rush to leave.
</p4>
</div>
<hr>
<h2>Experience Exceptional </h2>
<center>
<p2>There are four sushi restaurants in San Francisco you do not want to miss. On this site we'll help you find these treasures in the city jungle and experience some exceptional culinary skills. Click the menu to get started or simply scroll down.
</p2>
</center>
<hr>
<h2>Experience Exceptional </h2>
<center>
<p2>There are four sushi restaurants in San Francisco you do not want to miss. On this site we'll help you find these treasures in the city jungle and experience some exceptional culinary skills. Click the menu to get started or simply scroll down.
</p2>
</center>
<hr>
<h2>Experience Exceptional </h2>
<center>
<p2>There are four sushi restaurants in San Francisco you do not want to miss. On this site we'll help you find these treasures in the city jungle and experience some exceptional culinary skills. Click the menu to get started or simply scroll down.
</p2>
</center>
<hr>
<divone>
<p3>Copyright my name 2016</p3>
</divone>
<ul class="slideshow">
<li> <span>sushi_main.jpg</span> </li>
<li> <span>Slide Two</span> </li>
<li> <span>Slide Three</span> </li>
<li> <span>Slide Four</span> </li>
</ul>
</div>
</div>
</body>
</html>