Wie kann ich bei dieser Website den Link nach oben rechts verschieben?
Ich habe einen Link erstellt, der mich wieder zurück zur Hauptwebsite bringt. Nur möchte ich, dass der Link oben rechts ist. Kann mir da jemand helfen?
Die Webseite:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preise</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Open Sans', sans-serif;
padding-left: 100px;
padding-right: 100px;
}
.preise-navbar {
padding-left: 100px;
color: rgb(52, 57, 56);
}
.preise-container {
background-color: white;
padding: 16px;
}
table {
border-collapse: collapse;
}
td,
th {
padding: 16px;
border-bottom: 2px solid #8ebf42;
text-align: center;
padding-left: 100px;
}
a {
}
</style>
</head>
<body>
<div class="preise-container">
<h1 class="preise-navbar">Preise:</h1>
</div>
<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td>Erwachsene:</td>
<td>20€</td>
</tr>
<tr>
<td>Kinder unter 18</td>
<td>10€</td>
</tr>
<td>Kinder unter 6</td>
<td>3€</td>
</table>
<a href="Index.html">Zurück</a>
</body>
</html>
2 Antworten
Pack den Link in einen Container noch über deiner Tabelle/Überschrift:
<!-- ... -->
<body>
<nav class="back-link-container">
<a href="Index.html">Zurück</a>
</nav>
Mit einem CSS-Klassenselektor kannst du anschließend den Text nach rechts ordnen:
.back-link-container { text-align: right }
Noch ein paar andere Hinweise:
1) Du hast für die letzte Tabellenzeile vergessen, ein tr-Element um die td-Elemente zu setzen.
2) Sofern die leeren th-Elemente nicht gebraucht werden, würde ich sie (mitsamt zugehöriger tr) rauswerfen. Die Trennlinien würde ich für die Zeilen definieren:
tr {
border-bottom: 2px solid #8ebf42;
}
tr:first-child {
border-top: 2px solid #8ebf42;
}
Und wenn du einen bestimmten Abstand zwischen Tabelle und Überschrift definieren möchtest, verwende einfach margin-top:
table {
/* ... */
margin-top: 30px; /* for example */
}
Den Link ganz einfach oben einfügen
Besser wäre eh oben eine normale Navi einzubauen mit Home--Button als erstes
Und wie bekomme ich den link nach rechts? Sorry. Bin halt noch anfänger
Danke. Also müsste ich den Link über die Tabelle Platzieren? Und ich werde auch oben noch eine Leiste machen. Danke sehr.