html - 在下方添加内容时文本不遵循 CSS 格式

Question

请记住，我是新手!

所以我有一个标题和一些文本，我想将它们放在我使用 CSS 输入的背景图像之上，因此定位是关键。

一切正常，直到我在两个文本下都添加了更多 HTML 内容。由此看来，就好像文本没有采用我的 CSS 指令一样。

HTML:

 <div id="sidemicro">
 <text class="circleheader"><h3>Special Occasion?</h3><p>Give us a call and </br> we'll see how     we can make </br> your tour  extra special!</p></br> 

这是我需要格式化的文本:

 <div id="form">
 <form action ='otterabout.php' method='POST'>
*Your Name: <input type='text' name='name'><br />
*Your Email: <input type'text' name='email'><br />
*Date of visit: <input type'date' name='date'><br />
*Time of visit: <input type'time' name='time'><br />
*Group Size: <input type'text' name='groupsize'><br />
<input type='submit' name='submit' value='Login'>
<input name='reset' type='reset' value='Reset'>
</form>
</div>
</div>

这是已停止格式化的文本下的内容。

CSS:

.circleheader {
margin-top:70%;
margin-left:15%;

}



.circletext {
text-align:center;
margin-left:35%;
}

谢谢!

Answer 1

这是您正在寻找的格式类型吗？ FIDDLE .

CSS

.sidemicro {
    margin-left: 10px;
    width: 600px;
    border: 1px solid black;
    background: url('https://res.cloudinary.com/roadtrippers/image/upload/v1396514626/p2nmpjpgjsm8iihdh5ip.jpg');
    background-size: 600px;
    background-repeat: no-repeat; 
}
.circleheader {
  width: 200px;
  border: 0px solid black;
  margin: 10px auto;
  color: white;
  background-color: rgba(0, 0, 0, 0.4);
  text-align: center;
}