0
Ich bin Anfänger in der Webentwicklung. In der Tat ist dies meine zweite HTML-Seite, so dass es nicht sehr ordentlich und ordentlich ist.Wie richtet man Text im Navigationsheader mit CSS und HTML aus?
Ich habe drei Navigation Links in der Navigation Header hinzugefügt, aber alle von ihnen liegen außerhalb der Linie und egal, was ich nicht beheben kann.
Kann mir bitte jemand helfen? Sie können den anderen Code ignorieren und nur die Navigation überprüfen.
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>The cutest creatures</title>
<style>
body {
margin-left: 80px;
background-image: url("img/wallpaper2.jpg");
background-size: cover;
}
p {
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: black;
}
#unique {
overflow: auto;
}
#image {
float: left;
margin-right: 20px;
}
#tab {
background-image: url("img/wallpaper31.jpg");
height: 120px;
padding-top: 50px;
background-color: black;
margin-top: 25px;
}
#content {
background-color: rgba(255, 231, 0, 0.5);
padding: 1px 25px;
margin: 1px 1px 25px 1px;
}
ul {
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: black;
}
ol {
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: black;
}
div {
padding: 20px;
margin-bottom: 30px;
}
.a {
border: 2px teal dashed;
float: left;
margin-left: 6px;
}
.b {
border: 2px teal dashed;
float: right;
margin-right: 80px;
}
table {
margin: 80px;
padding: 15px;
border: 3px solid black;
width: 100%;
border-collapse: collapse;
margin-left: 1px;
}
caption {
font-size: 20px;
text-align: left;
padding: 10px;
margin: 10px;
}
th, td {
height: 8px;
padding: 8px;
border: 3px solid black;
}
th {
background-color: #ececec;
}
nav {
overflow: hidden;
margin: 0px;
padding: 0px;
}
li a {
display: block;
color: #ffff00;
text-decoration: none;
float: right;
padding: 0px 20px;
margin: 0px;
position: relative;
}
#header {
padding: 0px 0px;
border-bottom: 1px solid black;
margin: auto;
height: 100px;
line-height: 103px;
margin-top: 1px;
}
</style>
</head>
<body>
<div id="header">
<img src="img/logo.jpg" width="100" height="100">
<nav>
<ul style="list-style-type:none;">
<li><a href="#Famous_quotes">Famous quotes</a></li>
<li><a href="#Some_Minions">Some Famous Minions</a></li>
<li><a href="#Notable_Minions">Notable Minions</a></li>
</ul>
</nav>
</div>
<div id="tab">
<div id="content">
<center>
<h1>Minions</h1>
<h2><b><i>Bello!!!</i></b></h2>
</center>
</div>
</div>
<div id="unique">
<img src="img/mmm.jpg" id="image">
<p>The <b> Minions </b> are small, yellow, cylindrical creatures <del>who have one or two eyes</del>.
<br>They bring much of the comedy in the film, and they are known as the <mark>scene-stealer</mark> of the movie.
<br>Frequently, they speak in an incomprehensible language, called <u>Minionese</u>, occasionally switching to English.
<br>They are much childish in some ways, yet they seem to be very intelligent in certain aspects.<a href="http://despicableme.wikia.com/wiki/Minions" target="_blank">Click here</a> to know more about minions.</p>
</div>
<div class="a">
<h3>Famous quotes</h3>
<ul>
<li>"BEE-DO! BEE-DO!" - Carl mimicking fire truck siren.</li>
<li>"POOPAYE" - Goodbye</li>
<li>"TULALILOO TI AMO!" - We love you!</li>
</ul>
</div>
<div class="b">
<h3>Some Famous Minions</h3>
<ol>
<li>Bob</li>
<li>Kevin</li>
<li>Stuart</li>
</ol>
</div>
<table>
<caption><b>Notable Minions</b></caption>
<tbody>
<tr>
<th>NAME</th>
<th>APPEARANCE</th>
</tr>
<tr>
<td>Carl</td>
<td>Despicable Me</td>
</tr>
<tr>
<td>Dave</td>
<td>Despicable Me</td>
</tr>
<tr>
<td>Bob</td>
<td>Despicable Me 2</td>
</tr>
<tr>
<td>Stuart</td>
<td>Despicable Me 2</td>
</tr>
<tr>
<td>Kevin</td>
<td>Orientation Day</td>
</tr>
</tbody>
</table>
</body>
</html>
Wenn du bleibst Ich möchte, dass die Navigationsleiste nach rechts schwebt, dann ändern Sie einfach in Ihrem CSS: nav { Überlauf: versteckt; Rand rechts: 20px; Auffüllen: 0px; } – DanielaB67