Suche nach einer Möglichkeit in HTML?

Hallo Leute. Ich habe noch eine Frage für euch, wenn jemand helfen kann, wäre das sehr korrekt.

Wenn Ich in HTML das hier mache:

<h2 class=“1“>D</h2>
<h2 class=“2“>A</h2>
<h2 class=“3“>N</h2>

kommen die Buchstaben untereinander. Wenn Ich es nebeneinander schreibe, passiert auch nichts.

<h2 class=“1“>D</h2><h2 class=“2“>A</h2><h2 class=“3“>N</h2>

Wie schaffe Ich es mit dieser Schreibweise die Buchstaben in eine Reihe zu bekommen.

Ich müsste die Buchstaben in Css alle seperat nochmal bearbeiten, deswegen die Klassen und so.

Boah das wäre echt nett, wenn jemand helfen könnte. Danke…

Answer 1

[verreisterNutzer]

http://www.olivergast.de/blog/2013/04/13/css-basics-elemente-nebeneinander-anordnen/

Answer 2

[Franz120378]

H2 erstellt immer neue Linien. Einfacher ist es du packst dass gesamte in ein p Tag und packst dann jeden Buchstaben in ein span element. Du kannst dann den p Tag auch über CSS zu einer Überschrift machen. Oder anstatt einen p Tag zu verwenden packst du das gesamte in einen H2 Tag.

Also:

<h2><span>A</span><span>B</span></h2>

ODER

<p><span>A</span><span>B</span></p>

Bei den span Tags kannst du dann auch Klassen hinzufügen oder IDS

Woher ich das weiß: eigene Erfahrung – Programiere seit Jahren Webseiten und nutze Datenbanken

Comments

[BrokeTheLaw]

Ja, das funktioniert schon gut und bringt mich meinem Ziel bisschen näher aber das Problem ist:

DANELLO möchte Ich ausrichten. Ich fange an und verschiebe "O" auf die Stelle, wo Ich es gerne hätte:

DANELL ...................................... O

Bis jetzt alles gut. Wenn Ich jetzt aber "L" verschiebe, verschiebt sich "O" unglücklicherweise mit nach rechts:

DANEL .................................... L ......................................O

Kann man das irgendwie ändern?

https://jsfiddle.net/DN1987/fov4gz26/1/

Und falls du dich fragen solltest warum diese ganzen Klassen:

Wie gesagt, Ich würde die gerne erst nach rehcts ausrichten danach nochmal bisschen nach oben zu einer Schale formen... Nach oben verschieben geht aber auch nicht.

[Franz120378]

@BrokeTheLaw

Wenn das deine Idee ist dann mach es doch einfach ganz normal und nutze dann Letter spacing https://www.w3schools.com/cssref/pr_text_letter-spacing.asp

Da musst du nicht mehr machen ausser <h2>DANELLO</h2> und dann Letter spacing zum h2 element hinzufügen.

Answer 3

[NimmDeinEchten]

Die Deklaration "H" sprich überschrift setzt den Inhalt stets in eine neue Zeile. Für dass was du willst, musst du den text manuell formatieren (<p>)

Answer 4

[Babelfish]

Das wäre ein Ansatz von vielen:

<h2>
  <span class="c1">D</span>
  <span class="c2">A</span>
  <span class="c3">N</span>
</h2>

Woher ich das weiß: Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

Comments

[BrokeTheLaw]

Ja, danke erstmal. Auch gut, kann man natürlich auch machen aber auch hier gibt es ein kleines Problem, den Ich nicht lösen kann:

Ich bewege zum Beispiel den letzten Buchstaben(O) und wenn Ich den Buchstaben davor bewege(L), bewegt sich "O" mit.

Und nach oben verschieben geht irgendwie auch nicht mit padding oder margin.

[Babelfish]

@BrokeTheLaw

Erkläre doch erst mal genau, was du machen willst und wie das dann aussehen und funktionieren soll. Man kann hier keine vernünftigen Tipps geben, wenn man nicht mal die Richtung kennt, in die das hin soll.

[BrokeTheLaw]

@Babelfish

https://jsfiddle.net/DN1987/5dfnrvqw/

Das ist mein Plan.

Ich möchte die Buchstaben von DANELLO in der Zeile so verteilen(stell dir alles ohne die Punkte vor):

....................................................DN.........................................................

D................A...............N................E.................L...............L..................O

Danach möchte ich die äußeren Buchstaben nochmal bisschen nach oben verschieben:

....................................................DN.........................................................

D............................................................................................................O

.................A...................................................................L..........................

.................................N................E.................L.................................

ca. wie eine Schale...

Wollte die Buchstaben so anpassen, dass sie in dem roten Bereich verteilt sind.

Verstehst du was Ich meine?

Answer 5

[MrAmazing2]

<h2> sind Überschriften, die sind immer eine ganze Zeile breit.

Was du suchst ist <span>. Tu deine einzelnen Buchstaben in <span>-Elemente, dann sind sie auch wie gewünscht nebeneinander.