Text Not Appearing header
Question
I tried troubleshooting the problem, but to no avail. Is it perhaps the dimensions that are not allowing me to see the text that I would like to display below the header? Here's the code that I have. I would greatly appreciate any insight. The paragraph does not appear at the bottom of the header. Again, any help would be appreciated.
<script>
$(document).ready(function()){
});
</script>
<style>
.body{
margin: 0px;
}
.homeButton{
width: 40px;
}
#MidPort{
background-image: url("");
height:750px;
width:1050px;
background-size:cover;
}
.topnav{
font-size: 20px;
font-family: Times New Roman;
position:fixed;
top 0;
width:100%;
}
#bg2{
background-color:red;
}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow: hidden;
background-color: #333
}
li{
float:left;
border-right:1px solid #bbb;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
.active{
background-color:#4CAF50;
}
li a:hover:not(.active)
{
background-color: #111;
}
li:last-child{
border-right:none;
}
</style>
<!-- Check to see if the navigation bar remains at the bottom if I use the nav class instead of ul. If not, revert back to ul for when the user scrolls down-->
<div>
<header>
<!--<div class="container">-->
<h2 class="topnav" id="cs2">
<ul>
<li><a class="active" href="/home">Home</li></a>
<li><a href="/About me">About Me</li></a>
<li><a href="Contact">Contact</li></a>
</ul>
</h2>
</header>
</div>
<main>
<header>
<div class="intro-text">
<p>Front-End Developer and Economist, with experience in project management, machine learning, and leadership roles; devoted to functional programming and analyzing mathematical models to solve ongoing economic</p>
</div>
</header>
</main>
<!--setup a home button at the bottom-->
3 answers
solution1
0 2017-07-25 20:57:39
To start, this is horrible HTML! You should never have tags like this:
<a><b></a></b>
You must NEST tags!! ie
<a><b></b></a>
Fix that, and see where you're at.
solution2
0 2017-07-25 20:58:45
You have a number of mixed up tags in your code, I tried cleaning it up
<!DOCTYPE html> <html lang="en"> <head> <script> </script> <style> .body{ margin: 0px; } .homeButton{ width: 40px; } #MidPort{ background-image: url(""); height:750px; width:1050px; background-size:cover; } .topnav{ font-size: 20px; font-family: Times New Roman; position:fixed; top 0; width:100%; } #bg2{ background-color:red; } ul{ list-style-type:none; margin:0; padding:0; overflow: hidden; background-color: #333 } li{ float:left; border-right:1px solid #bbb; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: red; } .active{ background-color:#4CAF50; } li a:hover:not(.active) { background-color: #111; } li:last-child{ border-right:none; } </style> </head> <!-- Check to see if the navigation bar remains at the bottom if I use the nav class instead of ul. If not, revert back to ul for when the user scrolls down--> <body> <div> <header> <div class="topnav" id="cs2"> <ul> <li><a href="/home" class="active" >Home</a></li> <li><a href="/About me" >About Me</a></li> <li><a href="Contact" >Contact</a></li> </ul> </div> </header> </div> <main> <header> <div class="intro-text"> <p>Front-End Developer and Economist, with experience in project management, machine learning, and leadership roles; devoted to functional programming and analyzing mathematical models to solve ongoing economic</p> </div> </header> </main> <!--setup a home button at the bottom--> </body> </html>
solution3
0 2017-07-25 21:02:34
The paragraph is above the header because the .topnav has position:fixed . Setting this to position:relative will fix your issue.
Here's a jsfiddle with a cleaned up version of your code: https://jsfiddle.net/fv73pwym/1/
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.