Zum Inhalt springen
View in the app

A better way to browse. Learn more.

Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Empfohlene Antworten

Veröffentlicht

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. 

  • Autor

<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

  • Autor

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">? 

  • Autor
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^^

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 von Rienne

  • Autor
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 

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 von Memento

@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?

  • Autor

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. 

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 von RubberDog

@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 von Memento

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.

  • Autor

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 :)

Erstelle ein Konto oder melde dich an, um einen Kommentar zu schreiben.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.