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
В любом случае, Bootstrap - это не решение, чтобы узнать, вы лучше понимаете, что вы кодируете, вот почему вы должны сделать это сами, я думаю – AymDev