meinen text in der mitte bei einer html?
Hallo, das Bild im Anhang ist meine Html für Informatik. Kann mir jemand helfen und sagen wie ich es schaffe, dass der Text nur in der bitte ist? oder dass die seiten links und rechts leer sind?
ich hoffe, dass ihr versteht was ich meine.
danke and die, die mir weiter helfen können
(tipps damit sie hübscher wird sind gerne willkommen! (ich werde noch ein paar mehr bilder einbauen))
3 Antworten
Pack den Inhaltsbereich in einer Container und positioniere diesen mit CSS:
HTML:
<div class="container">
<!-- Centered content comes here... -->
</div>
CSS:
.container {
width: min(100% -2em, 90em);
margin-inline: auto;
}
Der erste Werte in der min() Funktion gibt den kleinsten Wert an, danach folgt die maximale Breite. Vorteilhaft beim Wechsel von kleinen zu größeren Viewports. Durch margin-inline wird der Container mittig zentriert - also links und rechts auf auto.
LG medmonk
an sich einen container machen, maximale weite geben und dann margin 0 auto
also auf Deutsch:
```HTML
<div class="page">
<!-- Dein Inhalt -->
</div>
```
```CSS
.page {
max-width: 1200px; /*oder was du brauchst*/
margin: 0 auto;
}
```
Vielleicht auch noch:
```CSS
p {
text-align: center;
}
```
Da gibt es sehr viele Möglichkeiten.
<center>
<middle>
frames, tables,....
Das Tückische ist: Es sieht mit jedem Browser und jedem Gerät etwas anders aus, wird etwas anders verarbeitet. Heißt für Dich: Hole Dir aus Google Webmastertool, die so eine Ansicht anbieten. Da hast Du z.B. die Ansicht auf der Gecko-Maschine (Firebox) auf dem Samsung und dann Safari. Sieht überall anders aus.
Eine richtig gute Note wirst Du bekommen, wenn Du das Ding nicht nur in die Mitte schreibst, sondern auch darüber referieren kannst, wie man es auf VIELEN Geräten bzw. Betriebssystemen(!) in die Mitte bekommt. Etwa Windows 7 wird von den modernen Chrome-Sachen schon seit 2022 nicht mehr unterstützt.
Die nervistste, doch zuverlässigste Methode sind tables. Das könnten sogar Browser von den Anfängen des Internets verarbeiten.
Wenn Du einen guten Editor hast, Tables zu verarbeiten, nutzes sie. Ansonsten ist es mühsam, weil man nie weiß, welche Zeille man gerade füllt.
Tipp: Bevorzuge Prozent-Platzierungen, etwa width = 100 %.
Ein weites Feld sind dann noch css-Lösungen.
Das ändert nichts daran, dass manche Seiten auf Safari noch immer anders dargestellt werden als von Desktop-Machinen.
Zur Zeit verwende ich alle Maschinen: chromium und Gecko auf dem Desktop. Für Windows 7 ist es vorbei, für alle Maschinen. Die Seiten werden mir nicht mehr korrekt angezeigt. Doch auch Gecko muckt verschieden, den ich laufen habe unter Win 10 in Firefox und LibreWolf. So populäre Seiten wie Youtube mucken oft für viele Monate unter einem davon. Danach geht es wieder. Schwer zu sagen, ob es am Browser liegt oder an der Seite. Es gibt eine Seite, die wird mir überhaupt nur von Waterfox korrekt angezeigt. Selbst meine Chromium-Browser zeigen sie nicht. Eine sehr populäre Seite mit zehntausenden Benutzern am Tag.
Das Browser-Gefrickel ist alles andere als ein "alter Hut". Leider. Ich wünschte, es wäre schon seit 20 Jahren vorbei damit. Doch öder weise ist es topaktuell.
Das Browser-Gefrickel ist alles andere als ein "alter Hut". Leider. Ich wünschte, es wäre schon seit 20 Jahren vorbei damit. Doch öder weise ist es topaktuell.
Es bleibt ein alter Hut, da Tabellen zum Layouten vom ersten Tag an nur ein Notbehelf waren, weil es damals noch kein CSS gab. Es folgte das Floating, was dann wiederum später mit CSS3 durch Flexbox und CSS Grid abgelöst wurde.
Auch das Gefrickel ist mit einigen Ausnahmen vorbei, da für solche Zwecke auf Tools wie CanIUse, Autoprefixer, Normalize zurückgegriffen wird. Hinzukommt die W3C-Spezifikation, die ebenfalls zur konsistenten Implementierung beiträgt.
Systemspezifisch sind im wesentlichen „nur” Dinge wie Schriftglättung, Anti-Aliasing, Pixel-Rounding, Subpixel-Darstellung sowie deren Scrollverhalten. Der Rest ist jedoch nahezu identisch und es oft nur noch wenige Prefixes bedarf.
Schwer zu sagen, ob es am Browser liegt oder an der Seite.
Wenn du es „schwer sagen kannst” und solche obsoleten Lösungsansätze teilst, mangelt es dir lediglich am nötigen Fachwissen. Alles andere ist mehr eine Frage des eigenen Stacks und wie man selber bei der Entwicklung damit umgeht.
Das ist unmodern und mühsam, doch es funktioniert.
Es ist nicht nur unmodern, sondern schon immer falsch war. Wie bereits erwähnt anfangs ein Notbehelf, bis dann Ende der 1990er-Jahre endlich CSS kam. Heute und nach W3C-Spezifikation, sollten Tabellen für tabellarische Daten genutzt werden.
Es gibt eine Seite, die wird mir überhaupt nur von Waterfox korrekt angezeigt.
Dann liegt das Problem eher auf der Systemebene, da Waterfox und Firefox die selbe Engine verwenden. Bei Chromium-Browsern das gleiche Spiel und selbst der Microsoft Edge mittlerweile ebenso auf Blink (Chromium) aufgebaut wurde.
Wirklich neu wird Ladybird sein, wobei sie sich auch an modernen Standards orientieren. Das wäre nochmal ein Thema für und abzuwarten ist, bis davon die erste Stable-Version ausgerollt wird. Da jedoch keine großen Bedenken habe.
LG medmonk
<center> ist seit HTML5 veraltet.
<middle> existiert gar nicht im HTML.
Und Tabellen sind absoluter Albtraum, die waren vielleicht früher zuverlässig. sind aber von Grid und Flexbos abgelöst, welche sogar reponsiv sind.
Das einfachste wäre:
<div class="container">
<p>Ich bin schön mittig.</p>
</div>
.container {
max-width: 800px;
margin: 0 auto;
padding: 0 1rem;
}
<table border="1">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>dennoch funktionieren sie bis heute</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
(erstellt von ChatGPT, ich hoffe, es stimmt so) Ergänzen kann man es z.B. mit "width = 100". Das ist unmodern und mühsam, doch es funktioniert.
Nichts von alle dem sollte man heute noch nutzen, zumal die Präsentations-Tags schon seit vielen Jahren veraltet sind und nicht Teil der HTML5 Spezifikation sind.
Tabellen sind für tabellarischen Daten da und nicht zur Positionierung resp. Umsetzung eines Layouts. Mit diesem Unfug hat man schon vor über 20 Jahren aufgehört. Deine Aussage bzgl. Browser ist auch ein alter Hut. Mittlerweile spielen drei Engines eine Rolle - Blink (Chromium), Gecko (Firefox) sowie WebKit (Safari).
LG medmonk