Text nicht angezeigt header

Ich habe versucht, das Problem zu beheben, aber ohne Erfolg. Sind es vielleicht die Dimensionen, die es mir nicht erlauben, den Text zu sehen, den ich unter dem Header anzeigen möchte? Hier ist der Code, den ich habe. Ich würde jede Einsicht sehr schätzen. Der Absatz erscheint nicht am Ende der Kopfzeile. Auch hier wäre jede Hilfe willkommen.Text nicht angezeigt header

<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-->

Quelle

2017-07-25 Brian Aquino

Um zu starten, das ist schrecklich HTML! Sie sollten nie Tags wie dieses haben:

<a><b></a></b>

Sie müssen NEST Tags !! d. h.

<a><b></b></a>

Fix, und sehen, wo Sie sind.

Quelle

2017-07-25 20:57:39 cbrauns

Sie haben eine Reihe von gemischt-Tags in Ihrem Code, habe ich versucht, es Reinigung

<!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>

Quelle

2017-07-25 20:58:45 stephan14x

Der Absatz über dem Header ist, weil die .topnav position:fixed hat. Wenn Sie dies auf position:relative setzen, wird das Problem behoben.

Hier ist ein jsfiddle mit einer aufgeräumt Version des Codes: https://jsfiddle.net/fv73pwym/1/

Quelle

2017-07-25 21:02:34 Eric

Text nicht angezeigt header

Antwort

Verwandte Themen