HTML Schrift weiter nach rechts verschieben

[FoxOff]

Hallo ihr lieben, 

folgendes Problem habe ich.
Ich lerne seit ein paar Tagen HTML und habe durch Tabellen 3 Bilder nebeneinander gemacht statt untereinander. 
Jedes Bild davon hat jedoch eine Überschrift, die aber alle nur über dem ersten Bild, also ganz rechts, stehen. 
Die möchte ich aber gerne über das jeweilige Bild haben. 
Hat jemand einen guten Tipp für mich? 

Danke schon mal im voraus. 

[Rienne]

vor 5 Minuten schrieb DomentusTM:

Wofür steht denn dann <td algin="center">? 

Da sollte dir Google helfen. Wie schon bei deiner gestrigen Frage gesagt wurde: Als ITler ist es eigentlich ganz normal sich bei Problemen selber über Google eine Lösung zu erarbeiten. Du kannst dort zum Beispiel so etwas wie "HTML Tabelle zentrieren" suchen.

Allerdings würde ich dir empfehlen vielleicht mal ein kleines Tutorial in HTML/CSS durchzugehen um ein Gefühl für die einzelnen Komponenten zu bekommen. Zum Beispiel https://www.codecademy.com/learn/learn-html

vor 5 Minuten schrieb DomentusTM:

Ich würde mir ganz gerne erstmal HTML aneignen, dass ich nicht durcheinander komme..

Das gehört aber eigentlich immer zusammen. Du kannst auch in HTML vieles stylen, was aber mit der Zeit sehr unübersichtlich wird. Es ist meist angenehmer und auch einfacher so etwas in eine CSS auszulagern.

Bearbeitet 8. August 2018 von Rienne

[Rienne]

Hallo,

dafür würde es sehr helfen, wenn du auch den entsprechenden Code hier posten würdest.

[FoxOff]

<tr>
  <td>
 <strong><font color=orange>Mensch</font></strong>
  </td>
  <td>
 <strong><font color=orange>Erwachte/Erwachter</font></strong>
  </td>
  <td>
 <strong><font color=orange>Exo</font></strong>
  </td>
  </tr>

Das sind die Überschriften des Bildes - stehen wie gesagt alle links nebeneinander.. Praktisch so:

Mensch Erwachte/Erwachter Exo

Und nicht so:

Mensch                                                     Erwachte/Erwachter                                         Exo

[Rienne]

Da gibt es mehrere Möglichkeiten. Am einfachsten wäre es wohl, wenn du deinem <td> tag noch die Eigenschaft <td align="center"> mitgibst. Allerdings solltest du deiner Tabelle am besten auch eine Breite mitgeben.

[thereisnospace]

Ich würde an Deiner Stelle versuchen mir direkt CSS anzueignen. Damit kannst Du die Darstellung meist genau nach deinen Wünschen einstellen. Siehe hier.

Wenn du es ohne CSS machen möchtest, könntest du es noch mit dem Tag figcaption versuchen. Siehe hier.

[FoxOff]

Soll die breite dann aussagen, wie weit entfernt die Überschriften voneinander sind? Und wird die in px oder % angegeben? 
Wofür steht denn dann <td algin="center">? 

[FoxOff]

Gerade eben schrieb Gottlike:

Ich würde an Deiner Stelle versuchen mir direkt CSS anzueignen. Damit kannst Du die Darstellung meist genau nach deinen Wünschen einstellen. Siehe hier.

Wenn du es ohne CSS machen möchtest, könntest du es noch mit dem Tag figcaption versuchen. Siehe hier.

Ich würde mir ganz gerne erstmal HTML aneignen, dass ich nicht durcheinander komme.. Danach möchte ich auch in CSS weitermachen  Aber erstmal mit HTML soweit klar kommen^^

[FoxOff]

vor 1 Minute schrieb Rienne:

Da sollte dir Google helfen. Wie schon bei deiner gestrigen Frage gesagt wurde: Als ITler ist es eigentlich ganz normal sich bei Problemen selber über Google eine Lösung zu erarbeiten. Du kannst dort zum Beispiel so etwas wie "HTML Tabelle zentrieren" suchen.

Allerdings würde ich dir empfehlen vielleicht mal ein kleines Tutorial in HTML/CSS durchzugehen um ein Gefühl für die einzelnen Komponenten zu bekommen. Zum Beispiel https://www.codecademy.com/learn/learn-html

Alles klar,
Danke  Ich lese mich mal ordentlich durch 

[Memento]

Kleiner Tipp von Anfang an:

Tabellen sind nicht dafür da, mangelnde CSS-Fähigkeiten zu kompensieren. Designs und Webseiten mit Tabellen umzusetzen ist eine Unsitte, die sich irgendwann unter schlechten Hobbyprogrammierern und Anfängern eingebettet hat, weil's bequem ist.

Tabellen sind zur Visualisierung von Daten.
Screenreader reagieren teilweise allergisch auf tabellendesignte Webseiten. Wenn sie denn hier überhaupt ordentlich funktionieren.

Für Stile wurde CSS erfunden. Das sollte man dafür dann auch entsprechend nutzen.
Hat noch den Vorteil, dass man auch die ordentliche Anwendung von CSS nebenbei lernt.

Oh. und <font> ist mittlerweile ein CSS-Attribut und wird als <font>-Tag seit HTML5 (was mittlerweile Standard sein sollte) nicht mehr unterstützt.

Dein Problem rührt daher, weil mindestens deine <table> (die in deinem Code fehlt) keine Breite hat. Daher nimmt es die maximale Breite des Inhalts an.
Auch die TDs können über style="..." mit Breiten versort werden.

Sinniger und richtiger wäre soetwas:

<!DOCTYPE html>
<div>
  <div style="display:inline-block;width: 100px">
    <span style="color: red">
    	Text 1
    </span>
  </div>
  <div style="display:inline-block;width: 100px">
    <span style="color: blue">
    	Text 1
    </span>
  </div>
  <div style="display:inline-block;width: 100px">
    <span style="color: green">
    	Text 1
    </span>
  </div>
</div>

Bearbeitet 9. August 2018 von Memento

[Rienne]

@Memento wenn du schon mit Styles anfängst, wäre aber die "bessere" Lösung, dass du die Stile wirklich in eine CSS auslagerst und die Komponenten dann mit Klassen versorgst, so dass man so etwas wie Breite und Farbe nur an einer Stelle definiert und entsprechend modifizieren muss, da es sich ja bei der Frage auch um eine Tabelle handelt, es also mehr Reihen geben wird (z.B. mit den Bildern).

Aber @DomentusTM hat ja wirklich gerade erst die Ausbildung angefangen und anscheinend wird jetzt erst einmal geschaut, wie sie mit ihr unbekannten Aufgabenstellungen umgeht. Ich denke nicht, dass da zuviel tiefes Wissen verlangt wird.

Als FISI sollte man doch eigentlich sowieso später nicht allzu viel mit Frontent-Entwicklung von Webseiten zu tun haben, oder?

[FoxOff]

Richtig @Rienne, ich habe die Ausbildung grade erst am 1.8. begonnen und meine Aufgabe ist es momentan eine Seite zu erstellen in meinem Interessengebiet (destiny, ein Spiel) und erstmal damit html kennenzulernen mit allem, was html eben zu bieten hat. 
Wenn ich dann mit html einiges geschafft habe, soll ich mir in ruhe CSS anschauen. Aber nicht alles auf einmal. Vorallem sind so Programmiersprachen neuland für mich. 

[Rienne]

Nur als kleine Anmerkung: CSS und HTML sind keine Programmiersprachen.

Programmiersprachen kämen erst dazu, wenn du zum Beispiel Scripte einbindest.

[RubberDog]

vor 17 Minuten schrieb DomentusTM:

Wenn ich dann mit html einiges geschafft habe, soll ich mir in ruhe CSS anschauen. Aber nicht alles auf einmal. Vorallem sind so Programmiersprachen neuland für mich. 

HTML ist keine Programmiersprache, genau wie CSS.
Edit: Mist, Rienne war schneller.

 

Achte darauf, dass es nicht auf Dauer beim Website-basteln bleibt. Als FISI kann es zwar durchaus auch später mal vorkommen dass du eine kleine Website bastelst, oder vorhandene pflegst, dein Schwerpunkt sollte aber eher in Richtung Fehlersuche und -behebung gehen, sowie Administration.

Bearbeitet 9. August 2018 von RubberDog

[Memento]

@Rienne ich habe keinesfalls gesagt, dass meine Lösung unanfechtbar die Beste ist. In diesem Fall, ist sie jedoch besser als das, was der Theadersteller versuchte ?

Aber ich finde, man sollte erstmal laufen lernen, bevor man sich zum Marathon anmeldet.

Inline-CSS ist nicht strafbar - und ein guter Anfang. Besser als Tabellendesign und veraltete Tags zu nutzen.
Irgendwann kommt man an den Punkt, wo das Inline-CSS schwer lesbar wird und/oder man sich bessere Struktur wünscht.
Dann kommen die CSS-Dateien ins Spiel. Hat man da dann einen gewissen Wissensstand und Routine, kann man sich als Kür auch mit LESS/SASS beschäftigen.

@DomentusTM- Schau dir doch mal die unzähligen Guides für HTML/CSS an, die so im Web kursieren.
Ein guter Anfang wäre zum Beispiel selfhtml.org oder alternativ codecademy.com und/oder udemy.com - wobei es hier schon kostenpflichtig werden kann.
Orientiere dich dabei an der Anzahl der Bewertungen und natürlich der Bewertung selbst.

Bearbeitet 9. August 2018 von Memento

[Rienne]

vor einer Stunde schrieb Memento:

Orientiere dich dabei an der Anzahl der Bewertungen und natürlich der Bewertung selbst.

Ich würde bei Udemy z.B. auch auf die Aktualität achten. Das ist auch ein gutes Zeichen dafür, ob du auf deine Fragen oder sonstige Anliegen zeitnah Hilfe erhälst.

[FoxOff]

Auf die ganzen Webseiten bin ich auch schon gestoßen
Ich mache momentan hauptsächlich eine powerpoint Präsentation über grafikkartenanschlüsse.. das mit html und css ist nebenbei um einen Einblick zu bekommen, wie sowas aufgebaut ist