0
私は学校でプロジェクトのための反応的なウェブサイトを作ろうとしましたが、このボタンはウェブサイトの幅を拡大すると消えてしまいます。HTML/CSSサイズを変更すると、ボタンが消えてしまうのはなぜですか？
グッドビュー：
ボタンは、タブレットやモバイルビューで消える：
私はこれをどのように修正することができますか？
コード：
html * {
padding:0;
margin:0;
}
@font-face {
font-family: ITC Franklin;
src: url("ITC_Franklin_Book.otf");
}
h1, p, h3 {
font-family: ITC Franklin;
}
#results img{
margin-left: 3%;
margin-top: 6%;
}
#wrapper{
width: 100%;
height: 100%;
}
header{
z-index: 1;
}
header h1{
margin-top: 1.5%;
margin-left: 25.5%;
}
.knopje {
width: 50%;
height: 10%;
border: medium solid grey;
margin-left: 25%;
}
/* MENU */
#nav li {
background-color: white;
height: 50%;
line-height: 40px;
list-style: outside none none;
margin-left: 26%;
padding-left: 35px;
padding-right: 35px;
position: relative;
}
/* body */
body {
line-height: 1.5em;
max-width:100%; \t
background-image:url("image/background.jpg");
background-size: 100%;
}
/* Header */
header {
background: none repeat scroll 0 0 white;
border-radius: 15px;
display: inline-block;
float: left;
height: 50px;
margin: 2.5% 4.5% 3.5% 10%;
width: 82.5%;
}
header img {
display: inline;
margin-left: -3%;
margin-top: -2%;
max-width: 100%;
position: absolute;
width: 9%;
z-index: 1;
}
/* Actions screen LINKS */
div #linkerdiv{
background: none repeat scroll 0 0 white;
border-radius: 30px;
display: inline-block;
float: left;
height: 500px;
margin-left: 7.5%;
margin-top: 0.5%;
margin-bottom: 3.5%;
width: 40%;
}
input #poll{
margin-left: 5%;
}
#linkerdiv img{
width:45%;
height:40%;
margin-left: 3%;
margin-top: 5%;
max-width: 100%;
z-index: 1;
}
#linkerdiv p{
margin-left: 5%;
margin-top: 1%;
margin-bottom: 1%;
width: 90%;
font-size: 11pt;
}
#linkerdiv li{
font-family: ITC Franklin;
margin-left: 5%;
list-style: none;
}
h3 {
margin-left: 5%;
}
textarea{
border-radius: 30px;
max-width: 90%;
width: 90%;
margin-left: 5%;
margin-top: 1%;
}
/* Presentatoren div rechts */
div #rechterdiv{
background: none repeat scroll 0 0 white;
border-radius: 30px;
font-family: ITC Franklin;
display: inline-block;
float: right;
height: 500px;
margin-right: 7.5%;
margin-top: 0.5%;
margin-bottom: 3.5%;
width: 40%;
}
#rechterdiv h2 {
margin-left: 5%;
margin-top: 3%;
margin-bottom: 1%;
width: 90%;
font-size: 13pt;
}
#rechterdiv p{
margin-left: 5%;
margin-top: 1%;
margin-bottom: 1%;
width: 90%;
font-size: 11pt;
}
/*BREAKPOINT1*/
/*BREAKPOINT 2*/
@media screen and (max-width:40em) {
html, body {
width: 100%;
overflow-x: hidden;
}
header h1{
font-size: 1.5em;
}
div #linkerdiv {
background: none repeat scroll 0 0 white;
border-radius: 30px;
height: 500px;
margin-left: 7.5%;
margin-top: 0.5%;
margin-bottom: 3.5%;
width: 87%;
}
div #rechterdiv {
background: none repeat scroll 0 0 white;
border-radius: 30px;
float: right;
height: 500px;
margin-bottom: 3.5%;
margin-right: 5.5%;
margin-top: 0.5%;
width: 87%;
}
#w3-display-container mySlides {
z-index: 5;
}
#w3-btn-floating w3-hover-dark-grey w3-display-right {
z-index: 10;
}
#w3-btn-floating w3-hover-dark-grey w3-display-left {
z-index: 10;
}
header {
background: none repeat scroll 0 0 white;
border-radius: 15px;
display: inline-block;
float: left;
height: 75px;
margin: 2.5% 4.5% 3.5% 10%;
width: 82.5%;
}
header img {
display: inline;
margin-left: -7%;
margin-top: -2%;
max-width: 100%;
position: absolute;
width: 25%;
}
}<!DOCTYPE html>
<html>
<head>
<title>3 Op Reis Second Screen</title>
<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
<meta name="description" content="Second screen" />
<meta name="author" content="Berkay Bayir" />
<meta name="keywords" content="3opreis second screen" />
<link href="style.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="js/script.js" type="text/javascript" async defer></script>
</head>
<body>
<div id="wrapper" data-role="page" class="ui-content">
<header>
<img src="image/logotje.png" alt="logo"/>
<nav id="header" role="header text">
<ul>
<h1>3 Op Reis Second Screen App</h1>
</ul>
</nav>
</header>
<div id="linkerdiv">
<img src="image/3.png" alt="logo"/>
<img src="image/4.png" alt="logo"/>
<p>
In de aflevering van 15 januari 2017, die zometeen zal beginnen, bezoeken de presentatoren de landen Egypte, Italië en Canada. Ze gaan langs de steden Cairo, San Marino en Toronto.
Hieronder kun je stemmen wat voor jou het interessant lijkt.
De resultaten zullen aan het begin van de aflevering op tv getoond worden.
</p>
<ul>
<form id="formulier">
<h3>Poll: Naar welk land zou jij het liefst heen willen gaan?</h3>
<li><input type="radio" id="poll" name="stemmen" value="1"> Egypte</li>
<li><input type="radio" id="poll" name="stemmen" value="2"> Italië</li>
<li><input type="radio" id="poll" name="stemmen" value="3"> Canada</li>
<input type="button" class="knopje" value="Stem!" onclick="thankYou()">
</form>
</ul>
</div>
<div id="rechterdiv">
<div class="w3-container">
<h2>Zondag 15 januari 2017 om 19.50 uur</h2>
<p>Bekijk wie welk land bezoekt!</p>
</div>
<div class="w3-content w3-display-container">
<a class="w3-btn-floating w3-hover-dark-grey w3-display-left" onclick="plusDivs(-1)">❮</a>
<a class="w3-btn-floating w3-hover-dark-grey w3-display-right" onclick="plusDivs(1)">❯</a>
<div class="w3-display-container mySlides">
<img src="image/1.png" style="width:100%">
<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
Geraldine in San Marino, Italië
</div>
</div>
<div class="w3-display-container mySlides">
<img src="image/2.png" style="width:100%">
<div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black">
Dennis in Cairo, Egypte
</div>
</div>
</div>
</body>
</html>
これは、CSSファイルで定義したパーセンテージ関連の問題です。むしろ、ブートストラップを使うことをお勧めします。 –
私はそれを自分で作って、このプロジェクトにブートストラップを使うことはできません。:( – berkay
とにかく、ブートストラップは学ぶべき解決策ではなく、あなたがコードするものを理解している方がいいです。 – AymDev