HTML Text verschieben?
Hallo.
Ich bin noch neu.
Meine Frage ist wie ich die Schrift in einem Dokument verschieben kann. Ich habe schon wo anders geschaut aber da funktioniert es nicht.
Das Spiele muss neben dem Wort Bundesliga stehen.
1 Antwort
Zunächst einmal würde ich dir raten, deine Lernquelle/Referenz schnellstmöglichst zu wechseln, denn dein derzeitiges Dokument beherbergt eklatante Fehler, die du dir ganz sicher nicht selbst ausgedacht hast.
Die MDN-Plattform ist beispielsweise eine sichere, vertrauenswürdige Quelle.
1) Sowohl a- als auch button-Element gehören zu den interaktiven Elementen in einem Dokument. Sie dürfen nicht ineinander verschachtelt werden. Wenn du einen Link äußerlich wie einen Button gestalten möchtest, verwende CSS (Beispiel).
2) Innerhalb des head-Elements fehlt ein (nichtleerer) title-Tag.
3) Das center-Element ist kein Bestandteil des HTML5-Standards. Wenn du Elemente zentrieren möchtest, kannst du dich an diesem Guide orientieren.
4) Die Attribute auf dem table-Element sind obsolet. Verwende stattdessen CSS.
Beispiel:
<!doctype html>
<head>
<title>Example</title>
<style>
table {
border: 8px outset;
border-spacing: 10px;
}
th, td {
padding: 20px;
}
</style>
</head>
<body>
<table>
<!-- ... -->
</table>
</body>
5) Attribute wie align oder valign sind nicht Bestandteil von HTML5. Erneut läuft der Weg über CSS.
Den Text bzw. das Element kann man auf unterschiedliche Art und Weise verschieben.
- Du könntest den Text einfach mit in das erste h1-Element schreiben. Dann steht er direkt daneben. Innerhalb des h1-Elements kannst du die Texte mit Leerzeichen sowie span-Elementen trennen, auf die wiederum CSS-Regeln angewandt werden.
HTML:
<h1 class="headline"><span>Text 1</span><span>Text 2</span></h1>
CSS:
.headline span + span {
margin-left: 120px;
}
- Wenn beide h1-Elemente auf selber vertikaler Höhe nebeneinander stehen sollen, kannst du eine Flexbox einsetzen.
HTML:
<div class="box">
<h1>Text 1</h1>
<h1>Text 2</h1>
</div>
CSS:
.box {
display: flex;
flex-wrap: wrap;
}
.box > h1 {
flex: 1;
text-align: center;
}
- Eine Flexbox kann ebenso genutzt werden, um die erste Überschrift mitsamt Tabelle neben die zweite Überschrift zu platzieren. Da sich eine Flexbox erst einmal nur auf die direkten Kindelemente bezieht, sollten die beiden Spalten jeweils in eigene Container verschoben werden.
Beispiel:
<section class="box">
<article><!-- left column ... --></article>
<article><!-- right column ... --></article>
</section>
- Alternativ zu einer Flexbox gibt es auch das Grid. Informationen zu diesem Feature findest du auf MDN oder in diesem CSS-Tricks-Artikel.
Welcher dieser vorgestellten Lösungswege für dich am besten passt, musst du allerdings selbst entscheiden. Es ist davon abhängig, welche genauen Layoutvorstellungen du hast und inwiefern die Inhalte in Relation zueinander stehen sollen. Wenn die zweite Überschrift sich beispielsweise auf eigenen Inhalt einer eigenen inhaltlichen Sektion bezieht, sollte sie besser auch ein einer eigenen Box (article / section / div / o.ä.) stehen.
Ich habe mit diesem Editor bisher nicht gearbeitet. Wenn du mit diesem nicht zufrieden bist, könnte ich beispielsweise Visual Studio Code empfehlen. Für eine Validation des Markups kannst du die HTMLHint-Extension installieren.
Noch weitere gute Webdokumentationen/-tutorials zu HTML/CSS:
Ich gehe noch in die Schule.
Ich lerne das größten Teils aus dem Unterricht.
Ist den Google Scribt als Editor gut und hast du noch weitere Tipp auch wo ich weitere Informationen herbekommen könnte?