0
私は初心者のコーダーで、最初の適切なウェブサイトを構築しています。私は私のページの右側にボタンの列を持っています。ただし、ウィンドウがフルスクリーンの場合にのみ表示されます。マウスを使用してウィンドウのサイズを縮小すると、ボタンは消えます。ウィンドウのサイズが変わった場合でもボタンを表示させることができる方法はありますか？サイズ変更時にHTML/CSS要素が消える
は、ここでHTMLコードです：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato|Orbitron:400,500" rel="stylesheet" type=text/css>
<title>Interactive Galaxy</title>
</head>
<body>
<header>
<div class="hero-text-box">
<h1>Explore the universe, or whatever...</h1>
</div>
<a class="quizzes full" href="#">Quizzes</a>
<a class="calculators ghost" href="#">Calculators</a>
<a class="solarsystem ghost" href="#">The Solar System</a>
<a class="mysteries ghost" href="#">Mysteries of Space</a>
<a class="otherresources ghost" href="#">Other Resources</a>
</header>
</body>
</html>
そしてここでCSSコードです。/すべてのマイボタン /と関連するCSSまでスクロールします。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #fff;
color: #555;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.row {
max-width: 1140px;
//margin: 0 auto;
}
header {
background-image: url(img/joshua-earle-183442.jpg);
background: no-repeat center center cover;
height: 100vh;
background-size: cover;
background-position: center;
}
.hero-text-box {
position: absolute;
width: 1140px;
top: 5%;
left 50%;
font-family: 'Orbitron', 'Arial', sans-serif;
margin-left: 15px;
word-spacing: 15px;
font-weight: 300;
}
h1 {
margin-top: 0;
color: #ef872e;
}
/****ALL MY BUTTONS***/
.quizzes {
position: absolute;
display: inline-block;
margin-left: 1730px;
margin-bottom: 10px;
top: 50%;
text-decoration: none;
color: #ef872e;
font-family: 'Orbitron';
padding: 10px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
border-color: #ef872e;
}
.calculators {
position: absolute;
display: inline-block;
margin-top: 20px;
margin-left: 1692px;
top: 55%;
color: #ef872e;
text-decoration: none;
font-family: 'Orbitron';
padding: 10px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
border-color: #ef872e;
}
.solarsystem {
position: absolute;
width: 230px;
display: inline-block;
margin-top: 40px;
margin-left: 1612px;
top: 60%;
color: #ef872e;
text-decoration: none;
font-family: 'Orbitron';
padding: 10px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
border-color: #ef872e;
}
.mysteries {
position: absolute;
width: 240px;
display: inline-block;
margin-top: 60px;
margin-left: 1602px;
top: 65%;
color: #ef872e;
text-decoration: none;
font-family: 'Orbitron';
padding: 10px;
padding-right: 10px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
border-color: #ef872e;
}
.otherresources {
position: absolute;
width: 220px;
display: inline-block;
margin-top: 30px;
margin-left: 1623px;
top: 75%;
color: #ef872e;
text-decoration: none;
font-family: 'Orbitron';
padding: 10px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
border-color: #ef872e;
}
.full:hover,
.full:active {
background-color: #e97512;
color: #fff;
transition: background-color 0.3s;
transition: color 0.3s;
}
.ghost:hover,
.ghost:active {
border-color: #e97512;
background-color: #e97512;
color: #fff;
transition: background-color 0.3s;
transition: color 0.3s;
}
多くのありがとう。
私は絶対にすべてを配置しませんが、それは始めるのが簡単かもしれませんが、長期的にはレイヤリングやZ-インデックスの問題が多く発生します。私はアイテムを適切に配置し、基本的なCSSの理解を深め、絶対的な単位と絶対的な単位を読んでみましょう（これはあなたの問題です） – Pete