Html and Css Text Box Mixing with navigation menu
Question
I Created this page with the help of some tutorial and I edited the code to attach a text box in the center of the page but the text box is mixing with the navigation menu. Some Help Would be appreciated. I have very less knowledge of html and css so please guide me in a simple way. I searched on the google and also got a w3 article but that did not help as I have used it in the css as yu can can see I have used margin-top , bottom , left and right to solve problem but instead it is mixing or overlapping it self with the navigation menu.
body { background: url('nature.jpg') no-repeat; background-size: cover; font-family: Arial; color: white; } ul { margin: 0px; padding: 0px; list-style: none; } ul li { float: left; width: 200px; height: 40px; background-color: black; opacity: .8; line-height: 40px; text-align: center; font-size: 20px; margin-right: 2px; } ul li a { text-decoration: none; color: white; display: block; } ul li a:hover { background-color: green; } ul li ul li { display: none; } ul li:hover ul li { display: block; } div.transbox { background-color: #ffffff; border: 1px solid black; opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */ margin-top: 200px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; } div.transbox p { margin: 5%; font-weight: bold; color: #000000; }
<html> <link href='style.css' rel='stylesheet'> <ul> <li><a href="index.html">Home</a></li> <li><a href="About.html">About</a> <ul> <li><a>Our Team</a></li> <li><a>Camp Sites</a></li> <li><a>Mission</a></li> <li><a>Resources</a></li> </ul> </li> <li><a href="Todo.html">Things to do</a> <ul> <li><a>Activities</a></li> <li><a>Parks</a></li> <li><a>Shops</a></li> <li><a>Events</a></li> </ul> </li> <li><a href="Contact.html">Contact</a> <ul> <li><a>Map</a></li> <li><a>Directions</a></li> </ul> </li> <li><a href="News.html">News</a></li> </ul> <div class="background"> <div class="transbox"> <p>This is some text that is placed in the transparent box.</p> </div> </div> </html>
1 answers
solution1
0 2018-05-19 16:12:45
You have to add
.background {
clear: both;
}
This is to clear the float: left that was applied before.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.