防止正文隐藏HTML元素 [英] Prevent body from hiding HTML elements
问题描述
我在Team Treehouse的技术学位课程。我正在做他们的项目。在我当前的项目中，正文隐藏了我的HTML元素。我不希望它们被隐藏起来。请帮我弄清楚我做错了什么。
这是HTML：
新闻稿下的img标签就是它开始打破的地方。
I'm in the tech degree program for Team Treehouse. I'm doing their projects. On my current project, the body is hiding my HTML elements. I don't want them to be hidden. Please help me figure out what I'm doing wrong.
This is the HTML:
the img tag under "Newsletter" is where it starts to break.
<!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：
This is the 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;
}
}
我是什么尝试过：
调整填充，边距，去除隐藏的溢出或增加身高。
What I have tried:
Adjusting padding, margins, removing hidden from overflow or increasing body height.
推荐答案
你有两个问题：
1.你将ul元素固定在顶部而不是容器（nav）
更改你喜欢这样的CSS：
You have two problems:
1. You fixed the ul element to the top instead the container (nav)
Change you CSS like this:
/* new */
.nav
{
width: 100%;
position: fixed;
top: 0px;
left: 0px;
z-index: 9999;
}
/* updated */
ul
{
list-style: none;
text-align: right;
background-color: rgba(0, 0, 0, 0.6);
margin-top: 0px;
height: 50px;
}
2.你正在创建灰色导航栏通过定义半透明的黑色...这意味着你将看到通过导航栏evn东西吹它...
将rgba（0,0,0,0.6）更改为rgb（ 103,103,103）
2. You are creating grey for the navigation bar by defining half-opaque black... it means you will see thru that nav-bar evn thing blow it...
Change rgba(0, 0, 0, 0.6) to rgb(103, 103, 103)
这篇关于防止正文隐藏HTML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
