2
イメージをヘッダーに追加するたびに、ヘッダーとナビゲーションバーのすべてのリンクが突然動作しなくなります。私はそれを修正しようとしてきましたが、私はちょっとhtmlについて知っているので、私は立ち往生しています。ここではHTMLイメージがヘッダーにあるときにリンクが機能しない
body { background-color: #abc67e;
color: #666666;
font-family:Tahoma;
height: 100%;
}
header { background-color: #ffe4b5;
color: #FFFFFF;
font-family: Tahoma;
position: relative;
margin-bottom: 0;}
h1 { line-height: 200%;
background-image: url(sunset.jpg);
background-repeat: no-repeat;
background-position: right;
padding-left: 20px;
height: 72px;
margin-bottom: 0;
}
nav { font-weight: bold;
background-color: #deb887;
}
h2 { font-family: Tahoma;
}
dt { color: #000033;
font-weight: bold;
}
footer { font-size: 0.70em;
text-align: center;
font-style: italic;
padding: 10px;
}
h3 { color: #000033;
}
main { padding-left: 20px;
padding-right: 20px;
}
#wrapper { margin-left: auto;
margin-right: auto;
width: 55%;
background-color: #fdf5e6;
min-width: auto;
box-shadow: 5px 5px 5px #523411;
height: 100%;
border: 4px;
border-style: outset;
}
nav ul { list-style-type: none;
margin-top: 0;
z-index: 99;}
nav li { display: inline; }
footer ul { list-style-type: none; }
footer li { display: inline; }
footer a { text-decoration: none; padding-right: 10px; }
aside { float: right;
border-left: 1px;
border-left-style: dotted;
padding-left: 50px;}
aside img { width: 100%;
height: 100%;}
section { float: right;
width: 320px;}
.galleryul { list-style-type: none; }
.galleryli { display: inline-block;
width: 225px;
padding-bottom: 10px;
margin: 10px;
background-color: #EAEAEA;
text-align: center;
font-style: italic;
font-family: Tahoma; }
label { float: left;
display: block;
width: 8em;
padding-right: 25px;
}
input { display: block;
margin-bottom: 1em;
}
textarea { display: block;
margin-bottom: 1em;
}
#mySubmit { margin-left: 11.5em;
}
.navbarimg { position: absolute;
padding-left: 650px;
padding-top: 110px;}<!DOCTYPE html>
<html lang="en">
<head>
<title>A Dog's Life</title>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<header>
<img src="images/navimg.png" class="navbarimg">
<a href="project/index.html"><img src="images/banner.jpg" style="width:100%"></a>
<h3></h3>
</header>
<nav>
<ul>
<li><a href="/index.html"><img src="images/home-nav.png" alt="Home"></a></li>
<li><a href="/about.html"><img src="images/about-nav.png" alt="About"></a></li>
<li><a href="/services.html"><img src="images/services-nav.png" alt="Services"></a></li>
<li><a href="/gallery.html"><img src="images/gallery-nav.png" alt="Gallery"></a></li>
<li><a href="/contact.html"><img src="images/contact-nav.png" alt="Contact"></a></li>
</ul>
</nav>
<main>
<h2>Reserve your dog's stay today!</h2>
<aside><img src="images/dogs1.jpg" alt="Dogs playing"></aside>
<h3>Contact Us</h3>
<p>Required information is marked with an asterisk (*).</p>
<form method="post" action="http://webdevbasics.net/scripts/pacific.php">
<label for="myFName">*First Name:</label>
<input type="text" required="required" name="myFName" id="myFName"><br>
<label for="myLName">*Last Name:</label>
<input type="text" required="required" name="myLName" id="myLName"><br>
<label for="myEmail">*Email:</label>
<input type="email" required="required" name="myEmail" id="myEmail"><br>
<label for="myPhone">Phone:</label>
<input type="tel" name="myPhone" id="myPhone"><br>
<label for="arrival">Arrival Date:</label>
<input type="date" name="arrival" id="arrival">
<label for="nights">Nights:</label>
<input type="number" name="nights" min="1" max="14" id="nights">
<label for="myComments">*Comments:</label>
<textarea name="myComments" required="required" cols="20" rows="2" id="myComments"></textarea><br>
<input type="submit" id="mySubmit" value="Submit">
</form>
<br>
<img src="images/logo.png">
</main>
<footer>
<br>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
Copyright © 2016 A Dog's Life<br>
<a href="mailto:[email protected]">[email protected]</a>
</footer>
</div>
</body>
</html>
w3cバリデーターを通してhtmlを実行し、構文エラーを探します。 –
@ A.Sharmaこれはかなり決定的な声明です。あなたはその請求を取り戻す何かを持っていますか？私が試したときにいつでも、画像は ''要素内で完璧に読み込まれます。イメージは ''セクションで参照されるべきではありません。 2つの全く異なる要素。 –
War10ck
@ A.Sharmaは、HTML5ヘッダータグで、HTMLヘッダーではありません。 – circusdei