2014-04-16 43 views
0

請記住,我是新來的代碼!當內容添加到下面時,文本沒有遵循CSS格式

所以我有一個標題和一些文本,我想放置在我使用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%; 
} 

謝謝!

+0

請提供一個小提琴。請查看http://jsfiddle.net – Claudio

+0

僅供參考,'margin-top'或'margin-bottom'的百分比分別是寬度而不是高度。 –

回答

0

這是您要查找的格式類型嗎? 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; 
} 
相關問題