1
http://biggerbyte.net/testwebsite/test.htmlWebページの上部にある[フッター]スタイルのバーが機能していません。 CSS＆HTML
ウェブサイト
@charset "utf-8";
.footer {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
position: absolute;
right: 0;
top: 0;
left: 0;
padding: 0;
background-color: black;
text-align: center;
color: white;
font-size: 14px;
}
.footer a {
color: white;
}
.footer a:hover {
color: #E8DE4D;
}
.background-image {
background-image: url("http://garanthomas.me/images/dsc00813-2.jpg?crc=4106647053");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% auto;
}
.content-box {
position: absolute;
top: 50px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
background-color: #4A4A4A;
width: 450px;
opacity: 0.65;
text-align: center;
align-content: center;
font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, DejaVu Sans, Verdana, " sans-serif";
font-size: 90;
color: white;
}
.content-box p {
text-align: center;
align-content: center;
font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, DejaVu Sans, Verdana, " sans-serif";
font-size: 90;
color: white;
}
.content-box h1 {
text-align: center;
align-content: center;
font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, DejaVu Sans, Verdana, " sans-serif";
font-size: 90;
color: white;
}
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
text-decoration: none;
list-style-type: none;
}
.cb-slideshow:after {
content: '';
background: transparent url(../images/patterrn.png) repeat top left;
text-decoration: none;
list-style-type: none;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
opacity: 0;
z-index: 0;
animation: imageAnimation 36s linear infinite 0s;
text-decoration: none;
list-style-type: none;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
animation: titleAnimation 36s linear infinite 0s;
text-decoration: none;
list-style-type: none;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 200px;
padding: 0;
line-height: 200px;
text-decoration: none;
list-style-type: none;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(images/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(images/3.jpg);
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(images/2.jpg);
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(images/4.jpg);
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(images/5.jpg);
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(images/6.jpg);
animation-delay: 30s;
}
.cb-slideshow li:nth-child(2) div {
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
animation-delay: 30s;
}
@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
@keyframes titleAnimation {
0% {
opacity: 0
}
8% {
opacity: 0.5
}
17% {
opacity: 0.5
}
19% {
opacity: 0
}
100% {
opacity: 0
}
}
.no-cssanimations .cb-slideshow li span {
opacity: 1;
}
@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 {
font-size: 140px
}
}
@media screen and (max-width: 600px) {
.cb-slideshow li div h3 {
font-size: 80px
}
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="footer">©2016 Garan Thomas - <a href="contact.html">Contact Me</a>.</div>
<ul class="cb-slideshow">
<li>
<span>Image 01</span>
<div>
<h3>Brecon</h3>
</div>
</li>
<li>
<span>Image 03</span>
<div>
<h3>Swansea</h3>
</div>
</li>
<li><span>Image 02</span>
<div>
<h3>Brecon</h3>
</div>
</li>
<li>
<span>Image 04</span>
<div>
<h3>Neath</h3>
</div>
</li>
<li>
<span>Image 05</span>
<div>
<h3>Brecon Beacons</h3>
</div>
</li>
<li>
<span>Image 06</span>
<div>
<h3>Rhigos</h3>
</div>
</li>
</ul>
<center>
<div class="content-box">
<h1>Welcome to my website</h1>
<p>Welcome to my photography website. Here you can find my photography work, website work and other things I decide to put up.</p>
</div>
</center>
</body>
</html>上のホストされたバージョンがありますが、私が使用したコードです。コードは厄介で、その大部分は私が従った小さなガイドからコピーされています。私はまだこの種のコードを学んでいますので、間違いをお許しください。私が見つけたのは、Webページの上部に.footerバーがないことでした。私は白い隙間を発見しました。これは基本的に裸のWebサイトで、そこに書かれたものを見ることができます。私はこれを解決する方法を見つけることができませんでしたので、私は私が私は別のウェブサイトからフッタを盗んだとすぐに私はそこに行をナビゲーションを置くだろうウェブサイトの上部に少しフッタスタイルのバーを追加すると思ったそれをウェブページの最上部に編集しました。私はそれがかなりいいと思うが、私が持っていたハイパーリンクとバーの中のテキストは、例えばPhotoshopのレイヤーのようなWebページでそれをブロックしているもののように強調表示できないことに気づいた。誰でもこの問題を解決する手助けができますか？何が間違っているのか、私がコードでやったことを、私が将来避けるべきことを教えてください。またはウェブサイトの提案？私はどんな応答にも大歓迎です。
ありがとうございます。
を使用していた愚かなギャップを処分しましたあなた自身のCSSを入力し始める前に、このCSS。それは、ブラウザ固有のスタイルを取り除きます（そして、それぞれのブラウザには異なるスタイルがあります）：http://meyerweb.com/eric/tools/css/reset/ –