Just a heads up, I'm relatively new to coding!
I have a header and text that I want to overlay on a background image using CSS, so getting the positioning right is crucial.
Everything was working fine until I added more HTML content below the text. It seemed like the text wasn't following my CSS instructions anymore.
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>
This is the text that needs formatting:
<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>
This additional content beneath the text is causing the formatting issue.
CSS:
.circleheader {
margin-top:70%;
margin-left:15%;
}
.circletext {
text-align:center;
margin-left:35%;
}
Appreciate any help you can provide!