Запретить телу скрывать HTML-элементы
Я учусь на техническом факультете в команде "дом на дереве". Я занимаюсь их проектами. В моем текущем проекте тело скрывает мои HTML-элементы. Я не хочу, чтобы их прятали. Пожалуйста, помогите мне понять, что я делаю не так.
Это и есть HTML:
тег img под заголовком "Newsletter" - это то место, где он начинает ломаться.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="survey_styles.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,600" rel="stylesheet" type="text/css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="nav"> <ul> <li class="frog"><a href="index.html">Accessible Frog</a></li> <li><a href="tour.html">Tour</a></li> <li><a href="">Survey</a></li> </ul> </div> <div class="header"> <div class="heading"> <h1>ACCESSIBLE FROG</h1> <h2>we make awesome music</h2> </div> </div> <div class="box"> <h1>Survey</h1> <img src="img/concert01.jpg" width="200"> <p>Who is your favorite band member?</p> <form> <div class="optab"> <input type="radio" name="band" value="John"> John <input type="radio" name="band" value="Bob"> Bob<br> </div> <input type="radio" name="band" value="Hazzard"> Hazzard <input type="radio" name="band" value="Sally"> Sally </form> <p>What is your favorite album?</p> <select> <option>Party For An Angel</option> <option>A Day of Old</option> <option>Finding my Shadow</option> <option>Diamond Fireworks</option> <option>Enjoy Your Desire</option> <option>This Is For You</option> <option>Music Of My Life</option> <option>Song For Yesterday</option> <option>Heroic Forever</option> <option>Midnight Fires</option> <option>Street of the Rider</option> </select> <p>What is your favorite song?</p> <textarea rows="5" col="20"></textarea> <div class="box2"> <h1>Newsletter</h1> <img src="img/the_band.jpg" width="200"> </div> </div>
Это и есть CSS:
@media (max-width: 500px) {
body {
color: green;
height: 1000px;
}
.header {
background: url("img/concert02_no_text.jpg") no-repeat center center;
background-size: cover;
height: 300px;
margin-top: -101px;
margin-left: -7px;
margin-right: -10px;
overflow: hidden;
text-align: center;
}
ul {
list-style: none;
text-align: right;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
position: fixed;
top: 0px;
left: 0px;
margin-top: 0px;
height: 50px;
}
ul li {
display: inline-block;
position: relative;
margin-top: 15px;
right: 40px;
color: #9b9b9b;
margin-right: 20px;
font-size: .75em;
}
a {
text-decoration: none;
color: grey;
}
ul .frog {
text-align: left;
position: fixed;
left: 5%;
letter-spacing: 2px;
font-size: .75em;
}
.heading h1 {
color: black;
}
h1 {
position: relative;
top: 125px;
font-size: 1.5em;
margin-top: 30px
}
h2 {
position: relative;
top: 100px;
font-size: 1em;
color: #ad0505;
margin-top: 30px;
}
.box {
background-color: black;
background-size: cover;
height: 600px;
margin-top: -15px;
margin-left: -7px;
margin-right: -10px;
padding-bottom: -200px;
overflow: hidden;
text-align: center;
}
.box h1 {
color: red;
position: relative;
top: -10px;
}
.input p {
color: green;
}
.optab {
position: relative;
right: 15px;
}
.box2 {
background-color: black;
background-size: cover;
height: 500px;
margin-top: -15px;
margin-left: -7px;
margin-right: -10px;
padding-bottom: -200px;
text-align: center;
}
.box2 h1 {
padding-top: 20px;
}
}
Что я уже пробовал:
Регулировка отступов, полей, удаление скрытых от переполнения или увеличение высоты тела.
Cristina Carrasco Angulo
Я попробовал ваш код здесь:
https://jsfiddle.net/7vg93upw/
код
похоже, это работает....: - S