1
割り当てのトリビュートページを作成し、画像の上にテキストを配置して、テキストをh3要素にします。私はMacBookの13インチでフルサイズの画面を持っているとき、テキストは正しい場所にありますが、画像上に表示したいのですが、ページを最小化すると、テキストが完全に画像の下にあり、その下にあります。どうした？ブラウザのサイズを変更するときにh3要素のテキストが移動する
.red-text {
color: red;
}
.gray-background {
background-color: #9c9fa3;
}
h1 {
font-size: 70px;
font-family: orbitron, sans-serif;
text-align: center;
position: relative;
top: 30px;
}
h2 {
font-size: 30px;
text-align: center;
}
img {
display: block;
margin: 0 auto;
}
.image {
position: relative;
width: 100%;
}
h3 {
position: absolute;
top: 265px;
left: 635px;
width: 100%;
}
h4 {
text-align: center;
font-size: 25px;
}
p {
text-align: center;
font-size: 22px;
}
footer {
text-align: center;
}
h5 {
text-align: right;
}
ul {
font-size: 17px;
}<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
<div class="gray-background">
<h1 class="red-text">Nintendo</h1>
<h2>One of the world's largest video game companies</h2>
<div class="image">
<img src="https://www.goombastomp.com/wp-content/uploads/2015/12/nintendo_consoles_wallpaper_by_shadow86sk-d4w4y71-1.jpg" style="width:40%" alt="" />
<h3>Pictured above: The main Nintendo consoles</h3>
</div>
<ul>
<li><strong>1889</strong> - Founded</li>
<li><strong>1889-1956</strong> - Operated as a card company</li>
<li><strong>1955-1974</strong> - New ventures: They tried many different business ventures through these years.</li>
<li><strong>1974-1978</strong> - Early electronic era: Starting to dip their hands in to the video game relm.</li>
<li><strong>1979-2003</strong> - Success with video games: This is when they developed some of their most successful consoles and games, games that have now become standards for all their consoles.</li>
<li><strong>2004-2011</strong> - Nintendo DS and Wii: The DS was one of the first handheld systems with a touch screen capabilities. The Wii was one of Nintendos more successful consoles with it's Wii remote motion controls.</li>
<li><strong>2011-2015</strong> - Nintendo 3DS and Wii U: The 3DS was the first 3D handheld system without the use of 3D galsses. The Wii U did not sell as many units as expected.</li>
<li><strong>2015-present</strong> - Mobile and Nintendo Switch: Nintendo continues to develop mobile games and this year they released their new console the Switch. The Switch is selling very well for Nintendo and is still very hard to buy.</li>
</ul>
<p>"I think that inside every adult is the heart of a child. We just gradually convice ourselves that we have to act more like adults."</p>
<footer><cite>- Shigeru Miyamoto</cite></footer>
<h4>Check out more about Nintendo by clicking
<a href='https://en.wikipedia.org/wiki/Nintendo#1956.E2.80.931974:_New_ventures' target="_blank">here.</a></h4>
<h5>Written and coded by Preston Bayle.</h5>
</div>
問題は、絶対位置と「マジックナンバー」とそのH3のレイアウトを計算しているです - あなたがコーディングされたときだけのためにブラウザのサイズに動作するように起こった任意の値。 h1/h2のような要素を配置するだけではどうですか？ –
私がh1/h2要素のように配置すると、テキストは、私が望んでいないイメージの下のページの中央に配置されます。テキストは、画像右下隅の画像の上に表示されます。 – batman091716
それから、イメージとテキストを 'position：relative'でコンテナにラップする必要があります。そのため、位置はブラウザウィンドウの代わりにイメージに基づいています。その時点で、上/左を「下：10ピクセル」に変更できます。右：10ピクセルまたはそれに類するもの。 –