Stell deine Frage

Wie bewegt man Bilder in HTML?

Nächste »
0 Daumen
4,1k Aufrufe

Ich habe hier mal kurz was gemacht, das sieht so aus:a25e7d92adc19b6555b25a117b4e6be7 (1).png

--> Wie kann ich das Bild jetzt neben die Aufzählung machen?

Meine Idee:

 <div stlye="float:right; width:220px; height:287px;">  <img src="220px-Kant_gemaelde_3.jpg" /> </div>
Aber das funktioniert irgendwie nicht. Die Werte für Breite und Höhe stimmen - habe die extra nochmal nachgeprüft...
Avatar von

Wie sieht denn Deine Aufzählung codetechnisch aus? Befindet die sich ebenfalls in einem Div?

von

Sieht so aus:d45a7f486e92f7fdd7bcc0a8043035d1.png

von

Achso, ich dachte Du hättest für die Aufzählung direkt

<ol></ol>

verwendet. Nun, Du kannst meine Antwort unten entsprechend anpassen :)

von

2 Antworten

+1 Daumen
 
Beste Antwort

Eine Möglichkeit wäre mit dem float-Attribut zu arbeiten:

<html>
<p><img style="float:left;margin-right:20px" src="pic.png" />
Deine Aufzählung
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>
</html>

Die Aufzählung kannst Du natürlich auch mit <br>-Tags realisieren.

Avatar von

"left;margin-right:20px"

Wofür steht hier die "20px"? Warum einmal left und einmal right?

von
Wofür steht hier die "20px

20 Pixel. Damit erzeugst Du einen 20 Pixel breiten Abstand vom eingebetteten Bild (sonst klebt der Text direkt am rechten Bildrand).

Warum einmal left und einmal right?

Das left bezieht sich auf die Bildposition. margin-right erzeugt einen Abstand rechts vom Bild.

von
20 Pixel. Damit erzeugst Du einen 20 Pixel breiten Abstand vom eingebetteten Bild (sonst klebt der Text direkt am rechten Bildrand).

Geht das auch mit dem Text? Weil wenn ich den mit <right> rechtsbündig stelle, dann ist das auch ziemlich nah am Seitenrand.

von
Geht das auch mit dem Text?

Indirekt über den Div-Tag, in dem Du Deinen Text einklammerst. Auch hier kannst Du wieder die Style-Attribute verwenden.

Siehe auch: https://www.w3schools.com/tags/tag_div.asp

von

Habe es schon bevor du geantwortet hast verstanden :D

von
Habe es schon bevor du geantwortet hast verstanden :D

Sehr gut, Racine-kun!

von

Muss man das verstehen? o.O

von
Muss man das verstehen? o.O

Was?

von

"Racine-Kun"

von

In Japan sprechen Lehrer (先生) ihre Schüler mit -kun (君) an :D Und racine_carrée-kun erschien mir jetzt etwas zu lange ;)

von

Also einfach das Suffix "-kun" an den Namen des Schülers!

Ich verstehe :)

von

Lohnt es sich z. B. <ol> als Vokabel mit einzutragen? Oder wäre das redundant, wenn ich <br> kenne?

von
Lohnt es sich z. B. <ol> als Vokabel mit einzutragen?

Vokabel? Für Deinen HTML-Wortschaft? :D

Oder wäre das redundant, wenn ich <br> kenne?

Auf keinen Fall! <br> ist nur ein Zeilenumbruch, der sich von der Struktur einer Aufzählung signifikant unterscheidet!

Also ja, nimm das gerne als Vokabel mit auf ;) Neben <ol> gibt es z. B. auch noch <ul>. Wenn Du magst, kannst Du ja ausprobieren, was das mit Deiner Aufzählung macht ;)

von

Habe ein Vokabelheft für Informatik - hört sich vielleicht erst dumm an, aber es heißt nicht umsonst "Programmier-Sprache"

von
Habe ein Vokabelheft für Informatik

Eine sehr gute Idee! Hat euch das euer Lehrer empfohlen.

"Programmier-Sprache"

Die Ähnlichkeiten zu einer "natürlichen Sprache" sind verblüffend. Einen völlig anderen Bezug zu Sprachen habe ich in "theoretischer Informatik" bekommen. Wer weiß, vielleicht wird es bei Dir doch noch ein Informatikstudium :D

von
Eine sehr gute Idee! Hat euch das euer Lehrer empfohlen.

Yes!

Wer weiß, vielleicht wird es bei Dir doch noch ein Informatikstudium

Ich kann mir momentan alles vorstellen. Vielleicht werde ich Sänger, wenn ich bald "Vokales Musizieren" in Musik mache?

von
+1 Daumen

Hallo racine_carrée,

geh doch mal auf die Seite https://www.w3schools.com/

speziell auf https://www.w3schools.com/html/default.asp bzw. https://www.w3schools.com/css/default.asp

Dort findet man viele nützliche Beispiele und kann über den Button "Try yourself" die Auswirkungen verschiedener HTML oder CSS Anweisungen online ausprobieren.

Von besonderem Interesse könnten die Kapitel HTML -> HTML examples -> HTML images -> image floating sein.

Avatar von

Ein anderes Problem?

Stell deine Frage

Ähnliche Fragen

+2 Daumen
3 Antworten
Wie nennt man den Tag </html>?
Gefragt 16 Aug 2018 von racine_carrée
+1 Daumen
1 Antwort
Bild um 90° drehen mit html-Tag
Gefragt 18 Mär 2018 von mathef
+2 Daumen
0 Antworten
Wie konvertiert man Latex-Dokumente zu HTML?
Gefragt 30 Aug 2018 von Kai
Liveticker Loungeticker
Beste Informatiker Community-Chat
Eingabetools:
JSFiddle repl.it Mermaid Editor LaTeX-Assistent Plotlux Plotter Geozeichner 2D Geoknecht 3D Assistenzrechner weitere …
Beliebte Fragen:
    Heiße Lounge-Fragen:
    1. Vorzeichen eines Zwischenergebnisses
    2. Ermitteln Sie die Wahrscheinlichkeit
    Alle neuen Fragen
    News AGB FAQ Schreibregeln Impressum Datenschutz Kontakt

    “Hardware nennt man die Teile eines Computers, die man treten kann.”

    Willkommen bei der Stacklounge! Stell deine Frage einfach und kostenlos

    x
    Made by a lovely community